.dma-hero__carousel {
    position: relative;
    height: 100vh !important;
    overflow: hidden;
    box-shadow: 0 1rem 2.5rem rgba(var(--tblr-secondary-rgb), .28);
}

.dma-hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

    .dma-hero__media iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* Cubre por ancho Y por alto manteniendo 16:9 */
        width: 100%;
        height: 100%;
        min-width: 177.78vh; /* 16/9 del alto  */
        min-height: 56.25vw; /* 9/16 del ancho */
        pointer-events: none; /* evita que se capturen clics del player */
    }
.dma-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.05);
}
/* Ken Burns: solo la slide activa se mueve */
.carousel-item.active .dma-hero__img {
    animation: dma-kenburns 7s ease-out forwards;
}

/* Oscurece abajo (legibilidad) + tinte primary diagonal */
.dma-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 48%, transparent 72%), linear-gradient(115deg, rgba(var(--tblr-primary-rgb), .45) 0%, transparent 55%);
}

.dma-hero__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(2rem, 6vh, 4.5rem);
    padding-left: clamp(1.25rem, 5vw, 4rem);
}

.dma-hero__eyebrow {
    display: inline-block;
    margin-bottom: .85rem;
    padding: .3rem 1rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tblr-primary-fg, #fff);
    background-color: var(--tblr-primary);
    border-radius: 999px;
}

.dma-hero__title {
    margin: 0;
    color: #fff;
    font-size: clamp(2.6rem, 7vw, 6rem);
    line-height: .95;
    text-shadow: 0 4px 18px rgba(0,0,0,.55);
}

.dma-hero__subtitle {
    margin-top: .6rem;
    max-width: 46ch;
    color: rgba(255,255,255,.88);
    font-size: clamp(1.05rem, 2vw, 1.6rem);
    text-shadow: 0 2px 10px rgba(0,0,0,.7);
}

.carousel-item img {
    height: 100% !important
}
/* Entrada escalonada del texto en la slide activa */
.carousel-item .dma-hero__eyebrow,
.carousel-item .dma-hero__title,
.carousel-item .dma-hero__subtitle {
    opacity: 0;
}

.carousel-item.active .dma-hero__eyebrow {
    animation: dma-rise .6s .15s ease-out forwards;
}

.carousel-item.active .dma-hero__title {
    animation: dma-rise .7s .30s ease-out forwards;
}

.carousel-item.active .dma-hero__subtitle {
    animation: dma-rise .7s .45s ease-out forwards;
}

/* Riel lateral con contador 01 — 0N */
.dma-hero__rail {
    position: absolute;
    top: clamp(1.5rem, 4vh, 2.5rem);
    right: clamp(1.5rem, 4vw, 3rem);
    display: flex;
    align-items: center;
    gap: .75rem;
    z-index: 3;
    font-weight: 700;
    letter-spacing: .1em;
}

.dma-hero__index {
    color: var(--tblr-secondary);
    font-size: 1.4rem;
}

.dma-hero__total {
    color: rgba(255,255,255,.7);
    font-size: .9rem;
}

.dma-hero__rail-line {
    width: 42px;
    height: 2px;
    background: linear-gradient(90deg, var(--tblr-secondary), rgba(255,255,255,.3));
}

/* Indicadores como barras de progreso */

.carousel-indicators{
    top: 84px !important
}
.dma-hero__progress {
    gap: .5rem;
    margin: 0;
    bottom: 1.25rem;
}

    .dma-hero__progress button {
        width: 46px;
        height: 4px;
        padding: 0;
        border: 0;
        margin: 0;
        background-color: rgba(var(--tblr-secondary-rgb), .35);
        border-radius: 999px;
        overflow: hidden;
        opacity: 1;
    }

.dma-hero__bar {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--tblr-primary), var(--tblr-secondary));
}

.dma-hero__progress button.active .dma-hero__bar {
    animation: dma-fill var(--duration) linear forwards;
}

/* Controles circulares */
.dma-hero__control {
    width: 4rem;
    opacity: 1;
    z-index: 3;
}

    .dma-hero__control .carousel-control-prev-icon,
    .dma-hero__control .carousel-control-next-icon {
        width: 3rem;
        height: 3rem;
        background-size: 42%;
        border-radius: 50%;
        background-color: rgba(var(--tblr-secondary-rgb), .85);
        transition: background-color .25s ease, transform .15s ease;
    }

    .dma-hero__control:hover .carousel-control-prev-icon,
    .dma-hero__control:hover .carousel-control-next-icon {
        background-color: var(--tblr-primary);
        transform: scale(1.08);
    }

@keyframes dma-kenburns {
    from {
        transform: scale(1.05) translate(0, 0);
    }

    to {
        transform: scale(1.18) translate(-1.5%, -1.5%);
    }
}

@keyframes dma-rise {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dma-fill {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dma-hero__img,
    .carousel-item.active .dma-hero__eyebrow,
    .carousel-item.active .dma-hero__title,
    .carousel-item.active .dma-hero__subtitle,
    .dma-hero__progress button.active .dma-hero__bar {
        animation: none;
        opacity: 1;
    }
}

.dma-hero__content {
    margin-bottom: 130px;
    padding-right: clamp(1.25rem, 5vw, 2rem);
}

/* 3) TARJETA DE RESEÑAS SOBREPUESTA
/* hueco para la tarjeta en desktop */
.dma-hero__badges {
    position: relative;
    z-index: 3;
    margin-top: -90px; /* sube la tarjeta sobre el hero */
}

/* Logos de la tarjeta: alto fluido en vez de px fijos (130/100/40) */
.dma-tripadvisor-reward * {
    height: auto !important;
    width: 100% !important;
    margin: 0 !important
}

    .dma-tripadvisor-reward * img {
        width: min(100%, 150px) !important;
        margin: auto !important
    }
.dma-hero__ota-logo {
    height: clamp(64px, 9vw, 120px);
    width: auto;
}

.dma-hero__badge-logo {
    height: clamp(28px, 4vw, 40px);
    width: auto;
}

/* ===== Tipografía fluida – tarjeta de reseñas ===== */
.dma-fluid-score { /* 5.0 / 4.9 */
    font-size: clamp(1.75rem, 2vw, 2.75rem);
    line-height: 1;
}

.dma-fluid-stars { /* ●●●●● y ★★★★★ */
    font-size: clamp(1.25rem, 2vw, 2rem);
    line-height: 1;
}

.dma-fluid-reviews { /* 1,609+ REVIEWS */
    font-size: clamp(1.1rem, 2vw, 1.9rem);
    line-height: 1.1;
}

.dma-fluid-caption { /* Rated Excellent / Based on / Featured on */
    font-size: clamp(.85rem, 1.5vw, 1.15rem);
    line-height: 1.25;
}

/* ===== Premios: marquee infinito en móvil ===== */
.dma-badges__track {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    text-align: center;
    gap: 1.5rem;
    width: 100%;
}

.dma-badges__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

@media (max-width: 575.98px) {
    .dma-badges { /* el card-body actúa como ventana */
        overflow: hidden;
    }

    .dma-badges__track {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: max-content;
        gap: 0; /* clave para el bucle perfecto */
        animation: dma-badges-scroll 20s linear infinite;
    }

    .dma-badges:active .dma-badges__track {
        animation-play-state: paused; /* se pausa al tocar */
    }

    .dma-badges__item {
        flex: 0 0 auto;
        margin-right: 3rem; /* cada item carga su separación */
        align-items: center;
    }
}

@keyframes dma-badges-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Accesibilidad: sin animación => scroll manual */
@media (prefers-reduced-motion: reduce) {
    .dma-badges__track {
        animation: none !important;
    }

    @media (max-width: 575.98px) {
        .dma-badges {
            overflow-x: auto;
        }
    }
}

/* ===================== Tablet (≤ 992px) ===================== */
@media (max-width: 991.98px) {

    .dma-hero__content {
        margin-bottom: 96px;
    }

    .dma-hero__badges {
        margin-top: -72px;
    }
}

/* ===================== Móvil (≤ 576px) ===================== */
@media (max-width: 575.98px) {

    .dma-hero__content {
        margin-bottom: 56px;
    }

    .dma-hero__badges {
        margin-top: -80px;
    }

    .dma-hero__control {
        display: none;
    }


    .dma-tripadvisor-reward * img {
        width: min(100%, 100px) !important;
    }
    /* el carrusel de Bootstrap ya hace swipe */
}

/* ============= Teléfono en horizontal (poca altura) ============= */
@media (max-height: 520px) and (orientation: landscape) {
    .dma-hero__content {
        margin-bottom: 32px;
        bottom: 1.25rem;
    }

    .dma-hero__badges {
        margin-top: -24px;
    }
}

.trust-banner {
    max-width: 1200px;
    margin: auto;
    border: 1px solid #eee;
}

@media (min-width: 992px) {
    .border-end-lg {
        border-right: 1px solid #e5e5e5;
    }
}

.laurel {
    position: relative;
    display: inline-block;
    padding: 0 25px;
}

    .laurel::before,
    .laurel::after {
        content: "❦";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #28a745;
        font-size: 2rem;
    }

    .laurel::before {
        left: -5px;
    }

    .laurel::after {
        right: -5px;
        transform: translateY(-50%) scaleX(-1);
    }

.travel-container {
    min-height: 500px;
    background: linear-gradient(rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.1)), url("/assets/backgrounds/backgroundBrown.png");
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

.travel-container .container img{
    width: 100%;
    max-width: 450px;
}

@keyframes shimmer {
    0% {
        background-position: -600px 0;
    }

    100% {
        background-position: 600px 0;
    }
}

.skel {
    background: linear-gradient(90deg, var(--tblr-gray-100) 25%, var(--tblr-gray-200) 50%, var(--tblr-gray-100) 75%);
    background-size: 600px 100%;
    animation: shimmer 2s infinite linear;
    border-radius: var(--tblr-border-radius);
}

#blogs-container {
    height: 266px !important;
}

@media(max-width: 767px) {
    #blogs-container {
        height: auto !important;
    }
}