/* ========== DESIMEX HERO — versión final limpia ========== */
:root {
    /* Look & layout */
    --dm-hero-bg: #111315;
    --dm-hero-card-max: 550px; /* ancho máximo de cada tarjeta */
    --dm-hero-radius: 20px;
    --dm-hero-gap: 18px; /* espacio entre tarjetas */
    --dm-hero-side-pad: 4vw; /* margen lateral del escenario */
    --dm-hero-fade-w: clamp(16px, 6vw, 64px);
    /* Altos y espacios */
    --dm-hero-top-space: 120px; /* ↑ aire arriba del HERO (ajústalo) */
    --dm-hero-stage-h-min: 220px; /* clamp inferior del stage */
    --dm-hero-stage-h-vh: 30vh; /* clamp medio del stage */
    --dm-hero-stage-h-max: 400px; /* clamp superior del stage */
    /* Bullets fuera del stage (dentro del fondo negro) */
    --dm-hero-dots-space: 10px; /* gap base para ubicar bullets */
    --dm-hero-bottom-space: 40px; /* aire extra debajo de los bullets */
    --dm-hero-dots-offset: 14px;
}

/* ---------- Sección HERO ---------- */
.dm-hero {
    background: var(--dm-hero-bg);
    position: relative;
    margin: 0; /* pegado al header/section por fuera */
    padding-top: var(--dm-hero-top-space);
    /* Reserva total abajo: espacio para dots + aire extra */
    padding-bottom: calc(var(--dm-hero-dots-space) + var(--dm-hero-bottom-space));
    overflow: visible; /* que nada corte los bullets */
    z-index: 1;
}

/* ---------- Stage (escenario) ---------- */
.dm-hero__stage {
    position: relative;
    height: clamp(var(--dm-hero-stage-h-min), var(--dm-hero-stage-h-vh), var(--dm-hero-stage-h-max));
    padding: 0 var(--dm-hero-side-pad);
    display: flex;
    align-items: stretch; /* cards a 100% del alto del stage */
    overflow: hidden; /* oculta sobras laterales/verticales */
}

    /* Fade lateral */
    .dm-hero__stage::before,
    .dm-hero__stage::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: var(--dm-hero-fade-w);
        pointer-events: none;
        z-index: 3;
        background: linear-gradient(to right, var(--dm-hero-bg) 0%, rgba(0,0,0,0) 100%);
    }

    .dm-hero__stage::before {
        left: 0;
    }

    .dm-hero__stage::after {
        right: 0;
        transform: scaleX(-1);
    }

/* ---------- Track (pista) ---------- */
.dm-hero__track {
    display: flex;
    align-items: center;
    gap: var(--dm-hero-gap);
    will-change: transform;
    transition: transform .5s ease;
    z-index: 1;
}

/* ---------- Card (tarjeta) ---------- */
.dm-hero__card {
    flex: 0 0 auto;
    width: min(86vw, var(--dm-hero-card-max));
    height: 100%; /* llena el alto del stage */
    border-radius: var(--dm-hero-radius);
    overflow: hidden;
    background: #0b0c0f;
    position: relative;
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fondo imagen */
.dm-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

/* Video — que se ajuste por ANCHO (sin recortar) */
.dm-hero__video {
    width: 100%;
    height: auto; /* alto proporcional */
    max-height: 100%; /* nunca mayor que la tarjeta */
}

    .dm-hero__video video {
        width: 100% !important;
        height: auto !important;
        max-height: calc(100% - 1px) !important; /* colchón anti-DPR */
        object-fit: contain !important; /* SIN recortes */
        object-position: center center !important;
        display: block !important;
        background: #000 !important;
    }

/* Overlay sutil para legibilidad */
.dm-hero__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.36) 70%);
    pointer-events: none;
}

/* Contenido (texto/botón) */
.dm-hero__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 2;
    color: #fff;
}

.dm-hero__title {
    color: #fff;
    font-weight: 300;
    line-height: 1.2;
    margin: 0 0 8px;
    font-size: clamp(0.95rem, 0.85rem + 1.8vw, 1.6rem);
    text-shadow: 0 2px 6px rgba(0,0,0,.45);
}

    .dm-hero__title b {
        font-weight: 500;
    }

.dm-hero__btn {
    border-radius: 10px;
    padding: 6px 14px;
}

/* ---------- Bullets fuera del stage ---------- */
.dm-hero__controls {
    position: absolute;
    height: auto;
    pointer-events: none; /* el contenedor no captura clics */
    left: 0 !important;
    right: 0 !important;
    bottom: var(--dm-hero-dots-offset) !important; /* aire respecto al borde negro */
    text-align: center !important;
    z-index: 50 !important;
}

.dm-hero__dots {
    position: static !important;
    left: 50%;
    transform: none !important;
    bottom: 0;
    display: inline-flex !important;
    gap: 10px !important;
    pointer-events: auto; /* sí reciben clics */
    z-index: 11;
}

.dm-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    box-shadow: 0 0 0 1px rgba(0,0,0,.25);
    transition: transform .2s, background .2s;
}

    .dm-hero__dot.is-active {
        background: #fff;
        transform: scale(1.1);
        box-shadow: 0 0 0 2px rgba(255,255,255,.28);
    }

/* (si usas flechas, ocultas) */
.dm-hero__nav {
    display: none !important;
}

/* ---------- Compacto con la sección siguiente ---------- */
.dm-hero + section {
    margin-top: 0 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 767.98px) {
    :root {
        --dm-hero-side-pad: 14px;
        --dm-hero-gap: 14px;
        --dm-hero-fade-w: 28px;
        --dm-hero-top-space: 12px; /* un poco menos de aire arriba en móvil */
        --dm-hero-stage-h-min: 220px;
        --dm-hero-stage-h-vh: 32vh;
        --dm-hero-stage-h-max: 360px;
    }

    .dm-hero__card {
        width: min(92vw, var(--dm-hero-card-max));
    }
}

/* === Texto de las tarjetas: más fino y compacto === */
.dm-hero__title {
    font-weight: 200; /* más delgado */
    line-height: 1.1; /* menos alto */
    font-size: clamp(0.85rem, 0.6rem + 1.4vw, 1.3rem); /* más pequeño en todos los tamaños */
    margin: 0 0 6px; /* menos margen inferior */
    text-shadow: 0 1px 3px rgba(0,0,0,.45); /* más sutil, no tan pesado */
}

/* Botón también más compacto */
.dm-hero__btn {
    padding: 4px 10px;
    font-size: 0.82rem;
}

/* En mobile: aún más compacto */
@media (max-width: 767.98px) {
    .dm-hero__title {
        font-size: clamp(0.8rem, 0.7rem + 1vw, 1.1rem);
        line-height: 1.15;
    }
}

/* === Overlay más ligero para que luzca la imagen/video === */
.dm-hero__card::after {
    /* Antes: rgba(0,0,0,.12) → .36  */
    background: linear-gradient( 180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.18) 70% ) !important;
}

/* === Texto más fino y con más aire respecto al botón === */
.dm-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px; /* ← separación título/botón */
}

.dm-hero__title {
    font-weight: 200;
    line-height: 1.1;
    font-size: clamp(0.85rem, 0.6rem + 1.4vw, 1.3rem);
    margin: 0; /* el gap maneja el espacio */
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

.dm-hero__btn {
    padding: 4px 10px;
    font-size: .82rem;
}

/* Mobile: aún más fino/compacto y un pelín más de claridad */
@media (max-width: 767.98px) {
    .dm-hero__title {
        font-size: clamp(0.8rem, 0.7rem + 1vw, 1.1rem);
        line-height: 1.14;
    }

    .dm-hero__card::after {
        background: linear-gradient( 180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.16) 70% ) !important;
    }
}


/* === Overlay un poco más oscuro (mejor legibilidad sin tapar la imagen) === */
.dm-hero__card::after {
    /* antes ~(.06 → .18). Ahora ligeramente más oscuro */
    background: linear-gradient( 180deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,.32) 70% ) !important;
}

@media (max-width: 767.98px) {
    .dm-hero__card::after {
        background: linear-gradient( 180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.36) 70% ) !important;
    }
}

/* === Títulos más pequeños y finitos (menos invasivos sobre la imagen) === */
.dm-hero__title {
    font-weight: 200;
    line-height: 1.1;
    font-size: clamp(0.80rem, 0.55rem + 1.2vw, 1.15rem); /* ↓ más pequeño */
    margin: 0; /* el gap lo da el contenedor */
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

@media (max-width: 767.98px) {
    .dm-hero__title {
        font-size: clamp(0.78rem, 0.66rem + 0.9vw, 1.05rem);
        line-height: 1.12;
    }
}

/* === Botones más pequeños SOLO en slider 1 (Contáctanos) y slider 3 (Ver más) === */
/* Slider 1 */
.dm-hero__track .dm-hero__card:nth-of-type(1) .dm-hero__btn {
    font-size: .75rem; /* ↓ texto */
    padding: 3px 10px; /* ↓ padding */
    border-radius: 8px;
}
/* Slider 3 */
.dm-hero__track .dm-hero__card:nth-of-type(3) .dm-hero__btn {
    font-size: .75rem;
    padding: 3px 10px;
    border-radius: 8px;
}

/* (opcional) si quieres un pelín más de separación título/botón */
.dm-hero__content {
    gap: 12px; /* antes 10px */
}



/* === Overlay un poco más oscuro (mejor legibilidad sin tapar la imagen) === */
.dm-hero__card::after {
    /* antes ~(.06 → .18). Ahora ligeramente más oscuro */
    background: linear-gradient( 180deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,.32) 70% ) !important;
}

@media (max-width: 767.98px) {
    .dm-hero__card::after {
        background: linear-gradient( 180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.36) 70% ) !important;
    }
}

/* === Más separación entre título y botón === */
.dm-hero__content {
    gap: 16px !important; /* antes 12px/10px; ajusta a 18–20px si quieres más */
}

/* (opcional) un pelín más compactos los botones para reforzar el aire visual */
.dm-hero__track .dm-hero__card:nth-of-type(1) .dm-hero__btn,
.dm-hero__track .dm-hero__card:nth-of-type(3) .dm-hero__btn {
    padding: 3px 10px !important;
    font-size: .74rem !important;
}


/* === Sin overlay en el SLIDE 2 (video) === */
.dm-hero__track .dm-hero__card:nth-of-type(2)::after {
    display: none !important; /* oculta la pseudo capa */
    content: "" !important; /* asegura que no se renderice */
    background: transparent !important;
}


/* === Enlace invisible alrededor del video === */
.dm-hero__video-link {
    display: block;
    width: 100%;
    height: 100%;
}

    .dm-hero__video-link:hover,
    .dm-hero__video-link:focus {
        text-decoration: none;
        outline: none;
    }


/* ===== Móvil: despegar el HERO del header para que se vean las esquinas ===== */
@media (max-width: 767.98px) {
    :root {
        /* Ajusta a la altura real de tu header en móvil (prueba 64–88px) */
        --dm-header-h-mobile: 72px;
        /* Aire superior del hero en móvil = notch + header + un respiro */
        --dm-hero-top-space: calc(env(safe-area-inset-top, 0px) + var(--dm-header-h-mobile) + 8px);
    }

    /* El hero se separa del header sin cambiar nada más */
    .dm-hero {
        margin-top: 0 !important;
        padding-top: var(--dm-hero-top-space) !important;
        z-index: 1; /* el header seguirá arriba si es sticky */
    }
}


/* ===== Móvil: tarjetas/hero más bajas (sin tocar PC) ===== */
@media (max-width: 767.98px) {
    :root {
        /* ↓ Baja el alto del stage en móvil */
        --dm-hero-stage-h-min: 160px; /* antes 220px */
        --dm-hero-stage-h-vh: 22vh; /* antes 32vh */
        --dm-hero-stage-h-max: 240px; /* antes 360px */
        /* Opcional: baja un pelín los dots si hiciera falta */
        --dm-hero-dots-offset: 10px; /* antes 14px */
    }

    /* Asegura que la tarjeta siga llenando el alto del nuevo stage */
    .dm-hero__card {
        height: 100% !important;
    }

    /* El video sigue encajando sin recortes dentro del nuevo alto */
    .dm-hero__video {
        height: auto !important;
        max-height: 100% !important;
    }

        .dm-hero__video video {
            height: auto !important;
            max-height: calc(100% - 1px) !important; /* colchón anti-DPR */
            object-fit: contain !important;
        }

    /* Opcional: baja un poco el contenido para mantener aire */
    .dm-hero__content {
        bottom: 12px;
    }
}












/* ===== MÓVIL: 1 tarjeta centrada, con aire, sin asomos ===== */
@media (max-width: 767.98px) {
    :root {
        /* Aire lateral (ajústalo): */
        --dm-hero-mobile-gutter: 18px;
        /* Sin gap ni fades en móvil */
        --dm-hero-gap: 0px;
        --dm-hero-fade-w: 0px;
    }

    /* Stage recorta absolutamente todo lo que sobresalga */
    .dm-hero__stage {
        position: relative !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: hidden !important;
    }

    /* La pista aporta el aire lateral (gutter) */
    .dm-hero__track {
        gap: 0 !important;
        padding-left: var(--dm-hero-mobile-gutter) !important;
        padding-right: var(--dm-hero-mobile-gutter) !important;
        box-sizing: content-box !important; /* el padding cuenta como “aire” real */
    }

    /* Cada tarjeta ocupa EXACTAMENTE el ancho visible (viewport - 2*gutter) */
    .dm-hero__card {
        width: calc(100vw - (var(--dm-hero-mobile-gutter) * 2)) !important;
        flex: 0 0 calc(100vw - (var(--dm-hero-mobile-gutter) * 2)) !important; /* evita redondeos */
        margin: 0 !important;
    }

    /* 🔒 Máscara dura en los lados: tapa cualquier peek subpíxel del carrusel */
    .dm-hero__stage::before,
    .dm-hero__stage::after {
        display: block !important;
        content: "" !important;
        position: absolute !important;
        top: 0;
        bottom: 0;
        width: var(--dm-hero-mobile-gutter);
        background: var(--dm-hero-bg);
        z-index: 3; /* por encima de las tarjetas */
        pointer-events: none;
    }

    .dm-hero__stage::before {
        left: 0;
    }

    .dm-hero__stage::after {
        right: 0;
    }

    /* (opcional) micro-colchón por DPR para evitar 1px de asomo en algunos móviles */
    .dm-hero__track {
        margin-left: -0.5px;
        margin-right: -0.5px;
    }
}






/* ===== MÓVIL: aire constante durante la animación ===== */
@media (max-width: 767.98px) {
    :root {
        --dm-hero-mobile-gutter: 18px; /* el mismo valor que ya estás usando */
        --dm-hero-gap: 0px;
        --dm-hero-fade-w: 0px;
    }

    .dm-hero__stage {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: hidden !important; /* nada se asoma */
    }

    /* ❗️Sin padding lateral en la pista */
    .dm-hero__track {
        gap: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* La tarjeta sigue midiendo viewport - 2*gutter */
    .dm-hero__card {
        width: calc(100vw - (var(--dm-hero-mobile-gutter) * 2)) !important;
        flex: 0 0 calc(100vw - (var(--dm-hero-mobile-gutter) * 2)) !important;
        margin: 0 !important;
    }

    /* (opcional) máscaras duras por si algún DPR deja 1px fantasma en extremos */
    .dm-hero__stage::before,
    .dm-hero__stage::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: var(--dm-hero-mobile-gutter);
        background: var(--dm-hero-bg);
        z-index: 3;
        pointer-events: none;
    }

    .dm-hero__stage::before {
        left: 0;
    }

    .dm-hero__stage::after {
        right: 0;
    }
}


/* ===== MÓVIL: aire lateral fijo y una tarjeta por vista ===== */
@media (max-width: 767.98px) {
    :root {
        --dm-hero-mobile-gutter: 18px; /* tu valor actual */
        --dm-hero-gap: 0px;
    }

    /* El aire lateral vive en el STAGE (no en la pista) para que no "viaje" */
    .dm-hero__stage {
        padding-left: var(--dm-hero-mobile-gutter) !important;
        padding-right: var(--dm-hero-mobile-gutter) !important;
        overflow: hidden !important;
    }

    /* La pista NO tiene padding ni gap; y permite gesto horizontal */
    .dm-hero__track {
        gap: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        touch-action: pan-y; /* seguimos pudiendo hacer scroll vertical */
        cursor: grab;
    }

        .dm-hero__track.is-dragging {
            cursor: grabbing;
        }

    /* Una tarjeta ocupa TODO el ancho útil del stage */
    .dm-hero__card {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
    }
}



/* ===== MÓVIL: aire lateral fijo + separación entre tarjetas en transición ===== */
@media (max-width: 767.98px) {
    :root {
        --dm-hero-mobile-gutter: 18px; /* ya usabas 18 */
        --dm-hero-mobile-gap: 8px; /* ← separación visible entre tarjetas */
    }

    /* El aire lateral vive en el STAGE para que no "viaje" */
    .dm-hero__stage {
        padding-left: var(--dm-hero-mobile-gutter) !important;
        padding-right: var(--dm-hero-mobile-gutter) !important;
        overflow: hidden !important;
    }

    /* La pista no tiene padding; SÍ usa gap real entre tarjetas */
    .dm-hero__track {
        gap: var(--dm-hero-mobile-gap) !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        touch-action: pan-y;
        cursor: grab;
    }

        .dm-hero__track.is-dragging {
            cursor: grabbing;
        }

    /* Cada tarjeta ocupa todo el ancho útil del stage */
    .dm-hero__card {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
    }
}



/* ===== MÓVIL: una tarjeta por vista, aire lateral fijo y gap visible ===== */
@media (max-width: 767.98px) {
    :root {
        --dm-hero-mobile-gutter: 18px; /* aire lateral */
        --dm-hero-mobile-gap: 8px; /* separación entre tarjetas al transicionar */
    }

    /* El aire lateral vive en el STAGE (no viaja durante la animación) */
    .dm-hero__stage {
        padding-left: var(--dm-hero-mobile-gutter) !important;
        padding-right: var(--dm-hero-mobile-gutter) !important;
        overflow: hidden !important;
    }

    /* La pista sin padding, con gap real (para ver separación al moverse) */
    .dm-hero__track {
        gap: var(--dm-hero-mobile-gap) !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        touch-action: pan-y;
        cursor: grab;
    }

        .dm-hero__track.is-dragging {
            cursor: grabbing;
        }

    /* Cada tarjeta ocupa el ancho útil del stage (1 por vista) */
    .dm-hero__card {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
    }
}



/* ===== Texto más fino en las tarjetas del HERO ===== */
.dm-hero__title {
    font-weight: 200 !important; /* antes ~300 */
    letter-spacing: 0.1px; /* sutil */
    text-shadow: 0 1px 3px rgba(0,0,0,.35); /* un poco más limpio */
}

    /* Si en algún slide usas <b> dentro del título, que no “engorde” demasiado */
    .dm-hero__title b,
    .dm-hero__title strong {
        font-weight: 400 !important; /* contraste sin verse pesado */
    }

/* Botón un pelín más liviano para acompañar el look */
.dm-hero__btn {
    font-weight: 400; /* por si el tema lo pone en 600/700 */
}

/* ↑ Solo MÓVIL: darle más alto al HERO */
@media (max-width: 767.98px) {
    :root {
        /* súbelos a tu gusto; estos dan ~15–20% más altura */
        --dm-hero-stage-h-min: 196px; /* antes 160/180/220… */
        --dm-hero-stage-h-vh: 24vh; /* antes 22–24–32vh…  */
        --dm-hero-stage-h-max: 280px; /* antes 240/260/360… */
    }
}

/* Permite tap/click natural y scroll vertical del documento */
.dm-hero__track {
    touch-action: pan-y;
}

/* Asegura que el contenido y botones reciban eventos */
.dm-hero__content,
.dm-hero__btn,
.dm-hero__video {
    pointer-events: auto;
}

/* El overlay no bloquea clicks */
.dm-hero__card::after {
    pointer-events: none;
}


.dm-hero__track {
    touch-action: pan-y;
}

.dm-hero__content, .dm-hero__btn {
    pointer-events: auto;
}

.dm-hero__card::after {
    pointer-events: none;
}


/* El track ya lo llevas con pan-y; aquí uniformamos hijos */
.dm-hero__card,
.dm-hero__video,
.dm-hero__video video {
    touch-action: pan-y; /* el JS lo pone en 'none' solo mientras arrastras */
}

    /* Quitar overlay de legibilidad en la tarjeta de VIDEO */
    .dm-hero__card:has(.dm-hero__video)::after {
        display: none !important;
    }

    /* Por si acaso, la tarjeta de video permite interacción por encima */
    .dm-hero__card:has(.dm-hero__video) {
        position: relative;
        pointer-events: auto;
    }







/* ===== HERO dentro de frame (full-width dentro del frame) ===== */
.hero-frame {
    /* separarlo del header y de la sección siguiente */
    margin-top: clamp(14px, 2.2vh, 28px) !important;
    margin-bottom: clamp(18px, 2.4vh, 28px) !important;
    border-radius: 15px;
    background-color: #1a1c1f; /* mismo gris de tus frames */
    position: relative;
    overflow: visible; /* para que los bullets no se recorten */
    /* por si hay anclas a esta zona */
    scroll-margin-top: 90px;
}

    /* Hacer que el contenido ocupe TODO el ancho del frame */
    .hero-frame > .container {
        max-width: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Dentro del frame, el HERO toma el color del frame y no suma paddings extra */
    .hero-frame .dm-hero {
        --frame-bg: #1a1c1f;
        --dm-hero-bg: var(--frame-bg); /* el fade lateral usa este color */
        background: transparent; /* el fondo lo pone el frame */
        padding-top: 10px !important; /* un respiro dentro del frame */
        padding-bottom: calc(var(--dm-hero-dots-space) + var(--dm-hero-bottom-space)) !important;
        margin: 0 !important;
    }

    /* El “escenario” usa todo el ancho del frame y mantiene bordes redondeados */
    .hero-frame .dm-hero__stage {
        padding-left: var(--dm-hero-side-pad, 24px) !important;
        padding-right: var(--dm-hero-side-pad, 24px) !important;
        border-radius: 15px;
        background: var(--frame-bg); /* para camuflarse con el frame en los fades */
        overflow: hidden; /* recorta sobras y conserva el fade lateral */
    }

    /* Bullets: centrados y con aire dentro del frame */
    .hero-frame .dm-hero__controls {
        bottom: 12px !important;
        text-align: center !important;
    }

    .hero-frame .dm-hero__dots {
        gap: 10px !important;
    }

/* ——— Móvil: mismo concepto, con aire lateral consistente ——— */
@media (max-width: 767.98px) {
    .hero-frame {
        margin-top: clamp(10px, 1.8vh, 20px) !important;
        margin-bottom: clamp(18px, 2.6vh, 28px) !important;
    }

        .hero-frame .dm-hero__stage {
            /* usa tu gutter móvil para que no se pegue a los bordes del frame */
            padding-left: var(--dm-hero-mobile-gutter, 18px) !important;
            padding-right: var(--dm-hero-mobile-gutter, 18px) !important;
        }

        .hero-frame .dm-hero__controls {
            bottom: 10px !important;
        }
}




/* === Separación del HERO-frame respecto al header (más baja) === */
:root {
    /* ajusta a tu gusto/altura real del header */
    --dm-header-clear-desktop: 110px; /* antes ~28px */
    --dm-header-clear-mobile: 88px; /* si tu header móvil es más alto */
}

/* Desktop / tablets grandes */
.hero-frame {
    margin-top: var(--dm-header-clear-desktop) !important;
}

/* Móvil y tablets chicas */
@media (max-width: 991.98px) {
    .hero-frame {
        margin-top: var(--dm-header-clear-mobile) !important;
    }
}

/* Si el header es sticky y al hacer scroll se pega más, deja un pelín extra */
.header-sticky ~ .hero-frame {
    margin-top: calc(var(--dm-header-clear-desktop) + 8px) !important;
}

@media (max-width: 991.98px) {
    .header-sticky ~ .hero-frame {
        margin-top: calc(var(--dm-header-clear-mobile) + 6px) !important;
    }
}

/* Opcional: cuando se navega por anclas a esta zona, que no quede oculto */
.hero-frame {
    scroll-margin-top: var(--dm-header-clear-desktop);
}

@media (max-width: 991.98px) {
    .hero-frame {
        scroll-margin-top: var(--dm-header-clear-mobile);
    }
}









/* ===== SOLO MÓVIL: bajar el alto del HERO para que se vean las esquinas ===== */
@media (max-width: 767.98px) {
    :root {
        /* ↓ reduce el alto del stage; ajusta a tu gusto */
        --dm-hero-stage-h-min: 170px; /* antes 196/220px */
        --dm-hero-stage-h-vh: 22vh; /* antes 22–24–32vh */
        --dm-hero-stage-h-max: 220px; /* antes 240–280–360px */
        /* un poco más de aire bajo los dots para separar del borde del frame */
        --dm-hero-dots-offset: 12px; /* si ves muy pegados los bullets, súbelo a 14–16 */
    }

    /* La tarjeta sigue llenando el nuevo alto del stage */
    .dm-hero__card {
        height: 100% !important;
    }

    /* El video mantiene el encaje sin recortes */
    .dm-hero__video {
        height: auto !important;
        max-height: 100% !important;
    }

        .dm-hero__video video {
            height: auto !important;
            max-height: calc(100% - 1px) !important;
            object-fit: contain !important;
        }

    /* El texto baja un pelín para no “tocar” el borde */
    .dm-hero__content {
        bottom: 10px !important; /* ajusta 8–14px a gusto */
    }

    /* Si el HERO va dentro del frame, mantén el aire lateral consistente */
    .hero-frame .dm-hero__stage {
        padding-left: var(--dm-hero-mobile-gutter, 18px) !important;
        padding-right: var(--dm-hero-mobile-gutter, 18px) !important;
    }
}



/* ===== Ajustar padding del frame del HERO ===== */
.hero-frame .dm-hero {
    padding-top: 10px !important; /* antes 10px */
    padding-bottom: 40px !important; /* antes ~40px con dots; ajusta según se vea */
}

@media (max-width: 767.98px) {
    .hero-frame .dm-hero {
        padding-top: 2px !important;
        padding-bottom: 40px !important;
    }
}