:root {
    --bg: #ffffff;
    --surface: #4d6da4;
    --surface-2: #8aa6df;
    --brand: #1fb6ff;
    --brand-2: #22d3ee;
    --text: #000;
    /* --text: #8a8a8a; */
    --muted: #a6b3cc;
    --accent: #38f9d7;
    --ok: #00c389;
    --warn: #ffc857;
    --radius: 18px;
    --shadow: 0 10px 30px rgba(192, 124, 124, 0.25);
    --cta-h: clamp(96px, 18dvh, 160px);

    --wma-red: #EF4948;
    --ink: #1b1b1b;
    --muted2: #5b5f68;
    --radius2: 22px;
}

/* Mont Bold */
@font-face {
    font-family: "Mont WMAB";
    src: url("assets/fonts/MONT-BOLD.OTF") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Mont Black */
@font-face {
    font-family: "Mont WMA";
    src: url("assets/fonts/MONT-BLACK.OTF") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Utilidades simples para usarlas donde quieras */
.font-mont-bold {
    font-family: "Mont WMAB", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 700 !important;
}

.font-mont-black {
    font-family: "Mont WMA", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight: 900 !important;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    color: var(--text);
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

a {
    color: var(--brand)
}

a:hover {
    color: var(--brand-2)
}

.container {
    width: min(1700px, 100%);
    margin-inline: auto
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    background: #fff;
    color: #000;
    padding: .5rem .75rem;
    border-radius: .5rem;
    z-index: 999
}

/* Header */
.header {
    /* position: sticky;  */
    top: 0;
    z-index: 50;
    background: rgb(255, 255, 255);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgb(255, 255, 255)
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 0
}

/* .header__brand img {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .4))
} */

.header__cta .btn {
    display: none
}

.nav__toggle {
    display: none;
    background: none;
    border: 0;
    padding: .5rem;
    cursor: pointer
}

.nav__bar {
    display: block;
    width: 24px;
    height: 2px;
    background: #e9f2ff;
    margin: 5px 0;
    border-radius: 2px
}

.nav__menu {
    display: flex;
    gap: 1rem;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0
}

.nav__menu a {
    display: inline-block;
    padding: .4rem .6rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text)
}

.nav__menu a:hover {
    background: rgba(255, 255, 255, .06)
}

.nav__lang .btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .15);
    color: var(--text);
    border-radius: 10px;
    padding: .3rem .6rem
}

.nav__lang .btn--ghost:hover {
    border-color: rgba(255, 255, 255, .35)
}

/* Hero */
.hero {
    padding: clamp(64px, 8vw, 120px) 0
}

.hero__inner {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 2rem;
    align-items: center
}

.eyebrow {
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    margin: 0 0 .5rem
}

.hero h1 {
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.02;
    margin: .25rem 0 1rem
}

.lead {
    font-size: clamp(16px, 2.2vw, 20px);
    color: var(--muted);
    margin: 0 0 1.25rem
}

.hero__actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap
}

.hero__media {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255, 255, 255, .08)
}

.note {
    color: #c6d3ee;
    opacity: .9
}

.center {
    text-align: center
}

/* Buttons */
.btn {
    --h: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: var(--h);
    padding: 0 1rem;
    border-radius: 14px;
    background: #FF494A;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    box-shadow: #FF494A;
}

.btn:hover {
    filter: brightness(1.05)
}

.btn--alt {
    background: transparent;
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, .25)
}

.btn--alt:hover {
    background: rgba(255, 255, 255, .06)
}

.btn--full {
    width: 100%
}

/* Metrics */
.metrics {
    padding: 54px 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0) 70%)
}

.metrics__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

.metric {
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 1.25rem;
    text-align: center;
    box-shadow: var(--shadow)
}

.metric h3 {
    font-size: clamp(28px, 4.2vw, 40px);
    margin: .25rem 0;
    color: var(--accent)
}

.metric p {
    margin: 0;
    color: #cfe0ff
}

/* Benefits */
.benefits {
    padding: 10px 0;
    margin-top: 40px;
}

.section__header {
    max-width: 900px;
    margin: 0 auto 2rem;
    text-align: center;
}

.section__header h2 {
    font-size: clamp(26px, 3.6vw, 38px);
    margin: .25rem 0 1rem
}

.section__header2 {
    max-width: 900px;
    margin: 0 auto 2rem;
    text-align: center;
}

.section__header2 h2 {
    font-size: clamp(26px, 3.6vw, 38px);
    margin: .25rem 0 1rem
}

.section__header p {
    color: var(--muted);
    margin: 0
}

.benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 2rem
}

.benefit {
    background: var(--surface-2);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow)
}

.benefit h3 {
    margin: .75rem 0 .35rem
}

.benefit p {
    margin: 0;
    color: #cfe0ff
}

/* Aura */
.aura {
    padding: 84px 0;
    background: linear-gradient(180deg, rgba(56, 249, 215, .05), rgba(31, 182, 255, .05))
}

.aura__inner {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 2rem;
    align-items: center
}

.aura__media {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: var(--shadow)
}

.aura__list {
    margin: 1rem 0;
    padding-left: 1.2rem
}

.aura__list li {
    margin: .35rem 0
}

/* CTA doble */
.pricing-cta {
    padding: 72px 0
}

.pricing-cta__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem
}

.cta-card {
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow)
}

.cta-card h3 {
    margin-top: 0
}

/* Servicios */
.services {
    padding: 84px 0
}

.services__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem
}

.service {
    background: var(--surface-2);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow)
}

.service h3 {
    margin: 0;
    padding: 1rem
}

/* Testimonios */
.testimonials {
    padding: 84px 0
}

.testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem
}

.testimonial {
    display: flex;
    gap: .9rem;
    align-items: center;
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 1rem
}

.testimonial blockquote {
    margin: 0
}

.testimonial figcaption {
    color: #cfe0ff
}

/* Contacto */
.contact {
    padding: 84px 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0) 70%)
}

.contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem
}

.contact__info .contact__list {
    list-style: none;
    padding: 0;
    margin: 1rem 0
}

.contact__info .contact__list li {
    margin: .4rem 0
}

.contact__links {
    display: flex;
    gap: .5rem;
    margin-top: .5rem
}

.contact__form {
    background: var(--surface);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: var(--shadow)
}

.field {
    display: grid;
    gap: .35rem;
    margin-bottom: .9rem
}

input,
textarea {
    background: #0c1a31;
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    padding: .75rem .9rem;
    outline: none
}

input:focus,
textarea:focus {
    border-color: var(--brand)
}

.form-msg {
    min-height: 1.2rem;
    margin-top: .5rem;
    color: #cfe0ff
}

/* Footer */
.footer {
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: #0b1426
}

.footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem
}

.footer a {
    color: #cfe0ff
}

.footer a:hover {
    color: #fff
}

/* Responsive */
@media (max-width: 1024px) {
    .hero__inner {
        grid-template-columns: 1fr;
        text-align: center
    }

    .hero__actions {
        justify-content: center
    }

    .aura__inner {
        grid-template-columns: 1fr
    }

    .benefits__grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .services__grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .testimonials__grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .contact__grid {
        grid-template-columns: 1fr
    }
}

@media (max-width: 768px) {
    .nav__toggle {
        display: inline-block
    }

    .nav__menu {
        position: fixed;
        inset: 64px 0 auto 0;
        background: #ffffff;
        border-top: 1px solid rgba(255, 255, 255, .08);
        transform: translateY(-120%);
        transition: transform .25s ease;
        padding: 1rem;
        flex-direction: column;
        gap: .5rem
    }

    .nav__menu.is-open {
        transform: translateY(0)
    }

    .header__cta .btn {
        display: none
    }

    .metrics__grid {
        grid-template-columns: 1fr
    }
}

@media (max-width: 520px) {
    .pricing-cta__grid {
        grid-template-columns: 1fr
    }
}

/* --- Video hero full screen --- */
.hero--video {
    position: relative;
    /* Fallback */
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* Alturas modernas que corrigen el “salto” de la barra de direcciones en móvil */
@supports (height: 100dvh) {
    .hero--video {
        min-height: 100dvh;
    }
}

@supports (height: 100svh) {
    .hero--video {
        min-height: 100svh;
    }
}

.video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* clave: llena el viewport sin deformar */
    object-position: center;
    opacity: 0;
    /* fade-in suave cuando cargue */
    transition: opacity .4s ease;
}

/* Cuando el video está listo, hacemos fade-in */
.hero--video.is-ready .video-bg {
    opacity: 1;
}

/* Oscurecido/gradiente (mejora contraste del texto si lo usas) */
.hero__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.35) 100%); */
}

/* Contenido encima del video */
.hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 1rem;
    max-width: min(92vw, 880px);
}

.hero__title {
    font-size: clamp(28px, 5vw, 60px);
    margin: 0 0 .5rem;
}

.hero__subtitle {
    font-size: clamp(16px, 2.4vw, 22px);
    opacity: .95;
    margin: 0 0 1rem;
}

.hero__actions {
    display: inline-flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Si tu diseño inicial NO lleva textos sobre el video, puedes ocultarlos: */
/* .hero__content{ display:none; } */

/* Accesibilidad: si el usuario prefiere menos movimiento, desactiva video y usa poster */
@media (prefers-reduced-motion: reduce) {
    .video-bg {
        display: none;
    }

    .hero--video {
        background: #000 url("assets/video/hero-poster.jpg") center/cover no-repeat;
    }
}

/* ---- Sesión 2: video muñeca + botones-imagen ---- */
/* La sesión ocupa todo el viewport: video arriba, botones abajo */
/* La sesión ocupa toda la pantalla: fila 1 = video, fila 2 = CTAs */
/* ===== Layout por defecto (desktop/tablet) ===== */
.promo {
    display: grid;
    grid-template-rows: calc(100vh - var(--cta-h)) var(--cta-h);
    min-height: 100vh;
}

@supports (height: 100dvh) {
    .promo {
        grid-template-rows: calc(100dvh - var(--cta-h)) var(--cta-h);
        min-height: 100dvh;
    }
}

.promo__video-wrap {
    position: relative;
    /* background: #000; */
    overflow: hidden;
}

.promo__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* conserva el encuadre (sin recortes) */
    object-position: center;

}

@media (max-width: 768px) {
    .promo__video {
        margin-top: -320px;
    }
}

/* Franja con 2 columnas (debajo del video en desktop/tablet) */
.promo__cta {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    align-items: center;
    column-gap: 6px;
    row-gap: 0;
    padding: 0;
    background: #EF4948;
    border: 0;
}


/* ===== Móvil: video absoluto arriba; CTA absoluto debajo (no overlay por encima) */
@media (max-width: 768px) {
    .promo {
        position: relative;
        min-height: 100vh;
        /* contenedor del alto del video */
    }

    @supports (height: 100dvh) {
        .promo {
            min-height: 100dvh;
        }
    }

    /* Video ocupa todo y va al tope de la pila */
    .promo__video-wrap {
        position: absolute;
        inset: 0;
        z-index: 2;
        /* SIEMPRE por encima del CTA */
    }

    /* CTA absoluto, debajo del video. Ajusta el offset con vh */
    .promo__cta {
        position: absolute;
        left: 0;
        right: 0;
        /* offset estable por viewport; ajústalo a tu animación */
        bottom: max(63vh, env(safe-area-inset-bottom));
        z-index: 1;
        /* debajo del video */
        background: #EF4948;
        backdrop-filter: none;

        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        justify-items: center;
        column-gap: 4px;
        row-gap: 0;
        padding: 30px 30px;
    }


}




/* (Opcional) Si quieres cero separación entre botones: */
/*
.promo__cta{ column-gap:0; }
*/

/* Botón e imagen ocupan todo el ancho de su celda */




.tight-after {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Quita toda separación con la sección anterior */
.tight-before {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

main>section {
    margin: 0;
}

/* en general, sin margen vertical por defecto */
section> :first-child {
    margin-top: 0px;
    padding: 1px;
}

/* Centrar la imagen en el medio del viewport */
.emergency.center {
    min-height: 30vh;
    /* ocupa toda la pantalla */
    display: grid;
    place-items: center;
    /* centra H y V */
    padding: 0;
    margin: 0;
    background: transparent;
    /* sin franja extra */
}

@supports (height: 100dvh) {
    .emergency.center {
        min-height: 30dvh;
    }

    /* corrige barra de URL en móviles */
}

/* El enlace mide exactamente lo que la imagen (sin “aire”) */
.emergency__link {
    display: inline-block;
    line-height: 0;
    /* evita hueco por línea base */
}


/* Sesión 2-imágenes (sin separación con las adyacentes si usas tight-*) */
.duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 500px));
    /* dos columnas de hasta 500px */
    gap: clamp(8px, 2vw, 16px);
    justify-content: center;
    /* centra el conjunto si hay espacio extra */
    align-items: start;
    margin: 0;
    padding: 0;
}

/* Elimina márgenes extras en figure y asegura que la imagen no deje “aire” abajo */
.duo__item {
    margin: 0;
}

.duo__item img {
    display: block;
    width: min(100%, 500px);
    /* responsivo: reduce en pantallas angostas */
    height: auto;
    /* mantiene proporción 500×580 */
    border: 0;
}

/* En móviles: apilar vertical (arriba → abajo) */
@media (max-width: 768px) {
    .duo {
        grid-template-columns: 1fr;
        /* una sola columna */
        justify-items: center;
        /* centra cada imagen */
    }

    .duo__item img {
        width: min(94vw, 500px);
        /* que no se salga del viewport */
    }
}

/* Contenedor sin separación y centrado */
.single {
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    /* centra horizontal y vertical si das altura */
}

/* Quita márgenes de figure y hace la imagen responsiva */
.single__item {
    margin: 0;
    padding: 0;
}

.single__item img {
    display: block;
    width: min(100%, 950px);
    /* respeta 950px, reduce en pantallas pequeñas */
    height: auto;
    margin-top: 10px;
    margin-bottom: 0px;
    /* mantiene proporción 950×600 */
    border: 0;
}

.plann {
    display: block;
    /* respeta 950px, reduce en pantallas pequeñas */
    height: auto;
    margin-top: 50px;
    margin-bottom: 100px;
    /* mantiene proporción 950×600 */
    border: 0;
}

.bg-h {
    background-color: #F2F2F2;
}

.bg-hr {
    background-color: #EF4948;
}

/* Utilidades que ya vienes usando para pegar sesiones */
.tight-before {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.tight-after {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}







/* ===== Carrusel estilo mockup ===== */
.vcarousel {
    --card-w: 300px;
    /* ancho tarjeta */
    --card-h: 400px;
    /* alto tarjeta */
    --gap: 18px;
    /* separación entre tarjetas */
    --radius: 22px;
    /* esquinas redondeadas */
    --accent: #ea5851;
    /* rojo WMA del mockup */
    --dot: #c9cbd1;
    --dot-active: #ea5851;
    margin: 0;
    padding: 0;
}

/* 3/2/1 por vista según breakpoint: controlamos el ancho MAX del viewport */
.vcarousel__stage {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.vcarousel__stage {
    max-width: calc(3 * var(--card-w) + 2 * var(--gap) + 2 * 16px);
}

@media (max-width: 1024px) {
    .vcarousel__stage {
        max-width: calc(2 * var(--card-w) + 1 * var(--gap) + 2 * 16px);
    }
}

@media (max-width: 640px) {
    .vcarousel__stage {
        max-width: calc(1 * var(--card-w) + 2 * 16px);
    }
}

.vcarousel__header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px 10px;
}

.vcarousel__title {
    margin: 0;
    font-size: clamp(18px, 2.2vw, 24px);
}

.vcarousel__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px;
    /* aire a los lados para flechas */
}

.vcarousel__track {
    display: flex;
    gap: var(--gap);
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
}

.vcard {
    flex: 0 0 var(--card-w);
    scroll-snap-align: start;
}

.vcard__frame {
    margin: 0;
}

.vcard__media {
    position: relative;
    width: 100%;
    height: var(--card-h);
    border-radius: var(--radius);
    overflow: hidden;
    border: 2px solid rgba(234, 88, 81, .25);
    /* contorno suave */
    background: #f3f5f8;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

/* Portada + botón Play circular */
.vcard__cover {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}

.vcard__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* esquinas superiores más redondas como el mockup (si quieres): */
    border-radius: var(--radius);
}

.vcard__play {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    position: absolute;
    inset: 0;
    margin: auto;
    top: 0;
    bottom: 0;
}

.vcard__play::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-38%, -50%);
    /* centra el triángulo */
    width: 0;
    height: 0;
    border-left: 18px solid #555;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

/* Video ocupa el mismo espacio de la portada */
.vcard__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #000;
}

/* Caption tipo “píldora” inferior */
.vcard__caption {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: #fff;
    color: #0b1a2b;
    border-radius: 16px;
    padding: 10px 14px;
    font-size: 14px;
    margin: 10px auto 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

.vcard__caption strong {
    font-size: 20px;
    line-height: 1.05;
}

.vcard__caption span {
    color: #e23f39;
    font-weight: 700;
}

/* Flechas laterales */
.vcarousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .15);
    background: #fff;
    color: #111;
    font-size: 24px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
    z-index: 2;
}

.vcarousel__arrow--prev {
    left: -6%;
}

.vcarousel__arrow--next {
    right: -6%;
}

.vcarousel__arrow:hover {
    background: #f6f7f9;
}

/* Dots / paginación */
.vcarousel__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 8px 0 4px;
}

.vcarousel__dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: var(--dot);
    cursor: pointer;
}

.vcarousel__dots button[aria-current="true"] {
    background: var(--dot-active);
}





/* ===== Footer WMA ===== */
.footer-wma {
    background: #222;
    color: #eef1f6;
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin: 0;
    padding: 28px 0 0;
}

.footer-wma a {
    color: #eef1f6;
    text-decoration: none;
}

.footer-wma a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-wma__inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* logo + 3 cols */
    gap: clamp(12px, 2vw, 28px);
    align-items: start;
    padding-bottom: 30px;
    padding-left: 20px;
}

.fcol {
    min-width: 0;
}

.fcol--brand .fbrand img {
    display: block;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
}

.fhead {
    margin: 6px 0 10px;
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 800;
    letter-spacing: .2px;
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

.flist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .5rem;
}

.flist a {
    display: inline-block;
}

.flist--dots li {
    position: relative;
    padding-left: 14px;
}

.flist--dots li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ea5851;
    /* rojo bullet */
}

/* Ubicaciones con banderita */
.flist .flag {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.flist .flag img {
    flex: 0 0 auto;
    margin-top: 3px;
    border-radius: 2px;
}

/* Barra inferior */
.footer-wma__bar {
    background: #222;
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding: 10px 0;
    text-align: center;
}

.fbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    color: #d9ddea;
}

.fbar__inner nav {
    display: flex;
    gap: 14px;
}

.fbar__inner a {
    color: #cfd5e6;
}

.fbar__inner a:hover {
    color: #fff;
}

/* Responsivo */
@media (max-width: 992px) {
    .footer-wma__inner {
        grid-template-columns: 1fr 1fr;
        /* 2 columnas */
    }
}

@media (max-width: 560px) {
    .footer-wma__inner {
        grid-template-columns: 1fr;
        /* 1 columna */
    }

    .fbar__inner {
        flex-direction: column;
        text-align: center;
    }
}




/* Asegura posición de referencia  PONER TEXTO EN IMAGEN*/
.duo__item {
    position: relative;
}

/* Capa oscura opcional para mejorar contraste del texto */
.duo__item--overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    /* background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45)); */
    pointer-events: none;
    border-radius: 0;
    /* ajusta si tus imágenes tienen bordes redondeados */
}

/* Texto centrado sobre la imagen */
.duo__text {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    /* centra H y V */
    text-align: center;
    padding: clamp(12px, 3vw, 24px);
    color: #fff;
    z-index: 1;
    /* por encima de la imagen */
    /* text-shadow: 0 2px 10px rgba(0,0,0,.5);    legibilidad */
}

.duo__text h3 {
    margin: 0 0 .25rem;
    font-size: clamp(18px, 2.6vw, 28px);
    font-weight: 800;
}

.duo__text p {
    margin: 0;
    font-size: clamp(14px, 2.2vw, 19px);
    opacity: .95;
}

/* Botón opcional coherente con tu estilo */
.duo__btn {
    margin-top: .75rem;
    display: inline-block;
    background: #EF4948;
    color: #fff;
    padding: .5rem 1rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
}

/* Si prefieres el texto en otra esquina, puedes usar modificadores: */
.duo__item--overlay.is-bottom-left .duo__text {
    place-items: end start;
    text-align: left;
    padding: 16px;
}






/* Contenedor: 3 columnas en desktop, centrado TARJETAS */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 300px);
    gap: clamp(10px, 2vw, 20px);
    justify-content: center;
    align-items: start;
    margin: 0;
    padding: 0;
}

/* Tarjeta con overlay de texto */
.step {
    position: relative;
    margin: 0;
    width: 300px;
    aspect-ratio: 3 / 3;
    /* 300x100 */
    border-radius: 18px;
    overflow: hidden;
    /* box-shadow: 0 10px 24px rgba(0,0,0,.10); */
    transition: transform .18s ease;
}

.step:hover {
    transform: translateY(-20px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
    /* acompaña con sombra */
    z-index: 2;
    /* que no quede debajo de vecinas */
}

.step>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* usa cover; cambia a contain si no quieres recorte */
    display: block;
}

/* Texto centrado */
.step__text {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    color: #2c2c2c;
    /* ajusta al diseño; si la imagen es oscura usa #fff */
    padding: 110px 14px;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.15;
    z-index: 1;
    /* mejora legibilidad si el fondo es fuerte: */
    /* text-shadow: 0 1px 6px rgba(0,0,0,.25); */
}

/* Responsive: apilar en móvil */
@media (max-width: 768px) {
    .steps {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .step {
        width: min(92vw, 360px);
        /* se reduce manteniendo proporción 3:1 */
    }
}




/* Grid 3 columnas TARJETAS SEPARADAS (280×380), centrado */
.benefits6 {
    display: grid;
    grid-template-columns: repeat(3, 280px);
    gap: clamp(14px, 2.2vw, 22px);
    justify-content: center;
    align-items: start;
    margin: 0;
    padding: 0;
}

/* Tarjeta */
.bcard {
    position: relative;
    width: 280px;
    height: 380px;
    /* relación 28/38 exactamente */
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    /* background: #fff;
  border: 2px solid rgba(239,73,72,.25);
  box-shadow: 0 10px 24px rgba(0,0,0,.10); */
    transform: translateZ(0);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1),
        box-shadow .28s cubic-bezier(.2, .8, .2, 1);
}

.bcard:hover {
    transform: translateY(-20px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
    z-index: 2;
}

/* Imagen (tu arte 280×380). Si prefieres sin recorte, usa contain. */
.bcard__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* cámbialo a 'contain' si no quieres recorte */
    display: block;
    /* background: #fff; */
}

/* Banda roja inferior con texto centrado */
.bcard__caption {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 60px;
    background: #EF4948;
    color: #fff;
    text-align: center;
    padding: 10px 14px;
    /* “padding rojo” */
    font-weight: 900;
    line-height: 1.15;
    border-radius: 14px;
    /* box-shadow: 0 6px 16px rgba(239,73,72,.25); */
}

/* Responsivo: 2 columnas en tablet, 1 en móvil */
@media (max-width: 1024px) {
    .benefits6 {
        grid-template-columns: repeat(2, 280px);
    }
}

@media (max-width: 640px) {
    .benefits6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .bcard {
        width: 100%;
        height: auto;
        aspect-ratio: 28 / 38;
        /* mantiene proporción 280×380 */
    }

    .bcard__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* La pastilla roja un poco más estrecha en pantallas chicas */
    .bcard__caption {
        left: 10%;
        right: 10%;
        bottom: 8%;
        font-size: 16px;
    }
}










/* ---------- Sección unificada a 100vh con 3 filas visibles ---------- */
.hero-stack {
    min-height: 100vh;
    /* fallback */
    min-height: 100svh;
    /* iOS moderno: "small viewport" */
    min-height: 100dvh;
    /* viewport dinámico */
    position: relative;
    padding-bottom: env(safe-area-inset-bottom);
    overflow: visible;
    /* clave si estabas recortando por overflow hidden */
    /* Distribución por filas que suman 100vh */
    --row-header: 25vh;
    /* título arriba */
    --row-video: 58vh;
    /* video */
    --row-cta: 17vh;
    /* franja de 2 botones */
    --cta-lift: 0px;

    position: relative;
    display: grid;
    grid-template-areas:
        "header"
        "video"
        "cta"
        "emergency";
    /* queda después del viewport */
    grid-template-rows: var(--row-header) var(--row-video) var(--row-cta) auto;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow: clip;
}

/* Por si el grid necesita permitir encoger items */
.hero-stack>* {
    min-height: 0;
}

/* Altura estable en navegadores móviles modernos */
@supports (height: 100dvh) {
    .hero-stack {
        min-height: 100dvh;
    }
}

/* Header (fila 1) */
.hero-stack__header {
    grid-area: header;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 0 16px;
}

/* Video (fila 2) */
.hero-stack__video {
    grid-area: video;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.hero-stack__video-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* evita recortes; cámbialo a 'cover' si prefieres */
    object-position: center;
}

/* CTA (fila 3) – vuelve a ser fila, no absolute */
.hero-stack__cta {
    grid-area: cta;
    position: relative;
    z-index: 10;
    background: #EF4948;
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    align-items: center;
    column-gap: 6px;
    padding: 0px 0;
}

.hero-stack__ctaCANAL {
    grid-area: cta;
    position: relative;
    z-index: 10;
    background: #ffffff;
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    align-items: center;
    column-gap: 6px;
    padding: 0px 0;
}

.promo__btn-img4 {
    display: block;
    width: 280px;
    height: auto;
    border-radius: 30px;
}

.promo__btn {
    display: inline-block;
    line-height: 0;
}

.promo__btn-img {
    display: block;
    width: 410px;
    height: auto;
}

/* Emergencia (debajo del primer viewport) */
.hero-stack__emergency {
    grid-area: emergency;
    display: grid;
    place-items: center;
    padding: 0px 0 0;

}

@media (max-width: 768px) {
    .hero-stack__emergency {
        margin-top: -80px;
    }
}

@media (max-width: 420px) {
    .hero-stack__emergency {
        margin-top: -50px;
    }
}

.emergency__img {
    width: min(92vw, 820px);
    height: auto;
}

/* ---- Breakpoints: ajusta proporciones por dispositivo ---- */

/* Tablet */
@media (max-width: 1024px) {
    .hero-stack {
        --row-header: 33vh;
        --row-video: 55vh;
        --row-cta: 17vh;
        /* un poco más de alto al CTA para que respiren los botones */
    }

    .promo__btn-img {
        width: min(44vw, 360px);
    }

    .promo__btn-img4 {
        width: min(44vw, 360px);
    }
}

/* Móvil */
@media (max-width: 768px) {
    .hero-stack {
        --row-header: 15vh;
        --row-video: 45vh;
        --row-cta: 40vh;
        /* deja espacio cómodo para los dos botones en dos columnas */
        /* cuánto quieres que “se meta” bajo el video */
        --cta-lift: clamp(8px, 5vh, 36px);
        font-size: 14px;
    }

    .hero-stack__video {
        z-index: 2;
    }

    .hero-stack__cta {
        grid-template-columns: repeat(1, 1fr);
        column-gap: 4px;
        padding: 8px;

        transform: translateY(calc(-3 * var(--cta-lift)));
        /* que no aporte espacio extra arriba */
        padding-top: 4px;
        margin-top: 20px;
        /* ajusta si quieres aún más pegado */
    }

    .hero-stack__ctaCANAL {
        grid-template-columns: repeat(1, 1fr);
        column-gap: 4px;
        padding: 10px 0 0 26px;
        margin-top: 18px;

        transform: translateY(calc(-3 * var(--cta-lift)));
        /* que no aporte espacio extra arriba */
        /* ajusta si quieres aún más pegado */
    }

    .promo__btn-img {
        width: 100%;
        max-width: 448px;
        height: auto;
    }

    .promo__btn-img4 {
        width: 95%;
        max-width: 448px;
        height: auto;
    }
}

/* ===== Ajuste fino para teléfonos angostos (≈ Redmi 13 Pro 5G) ===== */
@media (max-width: 420px) {

    /* 3 filas que suman el alto visible del dispositivo */
    .hero-stack {
        --row-header: 26svh;
        /* menos alto al título */
        --row-video: 40svh;
        /* video un poco más corto */
        --row-cta: 34svh;
        /* más espacio para los 2 botones */
        --cta-lift: clamp(6px, 3svh, 24px);
        /* súbelo visualmente */
        min-height: 100svh;
    }

    /* video y CTA más pegados sin solaparse */
    .hero-stack__video {
        z-index: 2;
    }

    .hero-stack__cta {
        grid-template-columns: 1fr;
        /* mantenemos 2 columnas */
        gap: 6px;
        padding: 0px 0px;
        transform: translateY(calc(-2 * var(--cta-lift)));
    }

    .hero-stack__ctaCANAL {
        grid-template-columns: 1fr;
        /* mantenemos 2 columnas */
        gap: 6px;
        padding: 0px 50px;
        transform: translateY(calc(-3 * var(--cta-lift)));
    }

    .promo__btn-img {
        width: 100%;
        /* que ocupen bien cada columna */
        max-width: none;
        height: auto;
    }

    .promo__btn-img4 {
        width: 95%;
        /* que ocupen bien cada columna */
        max-width: none;
        height: auto;
    }

    /* títulos más contenidos */
    .hero-stack__header h1 {
        font-size: clamp(28px, 8.5vw, 42px);
    }

    .hero-stack__header h2 {
        font-size: clamp(18px, 5.5vw, 28px);
    }

    .hero-stack__header h3 {
        font-size: clamp(12px, 3.8vw, 16px);
    }
}

/* Teléfonos con poca altura útil (teclado/barra grande) */
@media (max-height: 700px) and (max-width: 480px) {
    .hero-stack {
        --row-header: 16svh;
        --row-video: 40svh;
        --row-cta: 44svh;
        --cta-lift: clamp(4px, 2.5svh, 20px);
        min-height: 100svh;
        padding-bottom: 30px;
    }
}











/* GRID: 2 columnas en escritorio, 1 en pantallas angostas */
.acc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 35vw));
    justify-content: center;
    gap: clamp(12px, 2vw, 24px);
    padding-inline: clamp(12px, 4vw, 48px);
}

/* Evita que crezcan demasiado en monitores muy anchos */
@media (min-width: 1400px) {
    .acc-grid {
        grid-template-columns: repeat(2, 460px);
        /* tapa superior de ancho por columna */
    }
}

/* Mantén 1 columna en móvil como ya tienes */
@media (max-width: 900px) {
    .acc-grid {
        grid-template-columns: 1fr;
    }
}

/* Tarjeta/Item */
.acc {
    margin: 0;
}

/* Cabecera tipo “pill” */
.acc__head {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #ececec;
    /* gris del ejemplo */
    border: none;
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    overflow: visible;
}

/* Icono redondo con borde rojo */
.acc__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 3px solid #EF4948;
    background: #fff;
    transform: scale(1.50);
    /* 1.15–1.35 según gusto */
    transform-origin: left center;
    /* crece hacia afuera, no hacia abajo */
    margin-left: -4px;
    /* compensa si se “corre” */
}

.acc__icon img {
    width: 28px;
    height: 28px;
}

/* Título */
.acc__title {
    color: #2b2b2b;
    font-size: 18px;
    margin-left: 15px;
}

/* Botón + / − a la derecha */
.acc__toggle {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #2f2f2f;
    color: #fff;
    font-weight: 900;
    font-size: 16px;
}

.acc__head[aria-expanded="false"] .acc__toggle::before {
    content: "+";
}

.acc__head[aria-expanded="true"] .acc__toggle::before {
    content: "–";
}

/* Panel con animación de altura */
.acc__panel {
    overflow: hidden;
    height: 0;
    /* colapsado */
    transition: height .28s ease;
    will-change: height;
    /* separa visualmente del header */
    margin-top: 8px;
    border-radius: 16px;
    background: #efefef;
    /* color: #8a8a8a; */
}

.acc__panel-inner {
    padding: 16px;
    min-height: 160px;
    /* ese “bloque gris” del diseño */
    border-radius: 16px;
    text-align: center;
}

/* Sombra sutil cuando está abierto */
.acc__head[aria-expanded="true"] {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}








/* --- Tarjeta-Imagen con CTA pill --- */
.product-card {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
    transition: transform .22s ease, box-shadow .22s ease;
    margin-bottom: 12px;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .16);
}

.product-card__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.product-card__badge {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #EF4948;
    color: #fff;
    padding: 10px 16px;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(239, 73, 72, .35);
    text-align: center;
}

.product-card__badge strong {
    font-size: 18px;
    line-height: 1;
}

.product-card__badge span {
    font-size: 13px;
    opacity: .95;
    display: block;
}

.product-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    padding: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

/* --- Acordeón INTRO con mini imagen rectangular --- */
/* ===== Intro “tarjeta blanca con borde rojo” ===== */
.acc--intro {
    position: relative;
    z-index: 3;
    /* por encima de la tarjeta de imagen */
    margin-top: -18px;
    /* ♥ súbelo sobre la imagen (ajusta -12…-28px) */
}

/* Cabezal blanco con borde rojo */
.acc--intro .acc__head {
    background: #fff;
    border: 3px solid #EF4948;
    border-radius: 16px;
    padding: 12px 15px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
}

/* Si prefieres que el botón +/- también sea rojo */
.acc--intro .acc__toggle {
    background: #EF4948;
    color: #fff;
}

/* Mini imagen rectangular del intro (si la usas) */
.acc--intro .acc__thumb {
    width: 66px;
    height: 46px;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid #EF4948;
    background: #fff;
}

/* Panel blanco con borde rojo “pegado” al cabezal */
.acc--intro .acc__panel {
    background: #fff;
    border: 3px solid #EF4948;
    border-top: 0;
    /* se une visualmente al cabezal */
    border-radius: 0 0 16px 16px;
    margin-top: -8px;
    /* reduce el salto entre head y panel */
    /* mantenlo abierto si es tu intención */
}

.acc--intro .acc__panel-inner {
    padding: 16px 18px;
}

/* Cuando está abierto, quita el radio inferior del cabezal para que encaje */
.acc--intro .acc__head[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* (Opcional) Cuando está cerrado, es solo un “pill” blanco con borde rojo */
.acc--intro .acc__head[aria-expanded="false"]+.acc__panel {
    border-width: 0;
    /* sin borde cuando está colapsado */
    margin-top: 0;
}




/* Pill rojo del título (desktop por defecto) */
.intro-pill {
    display: inline-block;
    background: #EF4948;
    color: #fff;
    padding: 10px 28px;
    /* NO 99px fijos */
    border-radius: 20px;
    text-align: center;
    font-size: clamp(18px, 1.6vw, 20px);
    line-height: 1.1;
}

.intro-sub {
    display: inline-block;
    font-size: clamp(14px, 1.4vw, 18px);
    opacity: .95;
}

/* La cabecera del intro: centrado del contenido */
.acc__head--intro {
    grid-template-columns: 1fr auto;
    /* título + toggle */
    place-items: center start;
    /* centra el título */
    gap: 10px;
}

/* Imagen de cabecera (si la usas) se oculta en móvil */
@media (max-width: 768px) {

    /* La imagen superior para que no “domine” */
    .product-card__img {
        max-height: 36vh;
        object-fit: cover;
    }

    /* Subir un poco el intro pero menos agresivo */
    .acc--intro {
        margin-top: -10px;
    }

    /* Compactar cabecera del acordeón */
    .acc--intro .acc__head {
        padding: 10px 12px;
    }

    /* Pill y subtítulo más pequeños en móviles */
    .intro-pill {
        padding: 8px clamp(12px, 5vw, 20px);
        font-size: clamp(16px, 4.6vw, 18px);
    }

    .intro-sub {
        font-size: clamp(12px, 3.8vw, 16px);
    }

    /* Toggle un poco menor */
    .acc__toggle {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }

    /* Si usas thumb/icono en el intro, escóndelo en móvil */
    .acc--intro .acc__thumb {
        display: none;
    }
}

/* Si quieres aún más compacto en móviles muy chicos */
@media (max-width: 420px) {
    .intro-pill {
        padding: 7px 50px;
    }

    .acc--intro {
        margin-top: -6px;
    }
}




/* === Acordeón de UNA COLUMNA (estilo mockup) === */
.upg-list {
    max-width: min(980px, 92vw);
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

/* Cabecera */
.upg__head {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    /* badge | title | toggle */
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #ffffff;
    border-radius: 16px;
    border: 2px solid #EF4948;
    cursor: pointer;
    text-align: left;
}

/* Pastilla roja con icono */
.upg__badge {
    width: 120px;
    /* ancho fijo de la pastilla */
    height: 68px;
    background: #EF4948;
    border-radius: 14px;
    display: grid;
    place-items: center;
}

.upg__badge img {
    width: 85px;
    height: 48px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    /* blanco si el icono es negro */
}

/* Título centrado */
.upg__title {
    text-align: center;
    font-size: clamp(18px, 2.4vw, 28px);
    color: #222;
}

/* Botón + / − */
.upg__toggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #2f2f2f;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 20px;
}

.upg__head[aria-expanded="false"] .upg__toggle::before {
    content: "+";
}

.upg__head[aria-expanded="true"] .upg__toggle::before {
    content: "–";
}

/* Panel */
.upg__panel {
    overflow: hidden;
    height: 0;
    transition: height .28s ease;
    border: 1px solid #EF4948;
    border-radius: 0 0 16px 16px;
    margin-top: 0px;
    /* une visualmente con el header */
    font-size: 24px;
    text-align: center;
}

@media (max-width: 768px) {
    .upg__panel {
        font-size: 16px;
    }
}

.upg__panel-inner {
    background: #fff;
    padding: 22px clamp(14px, 3vw, 28px);
    border-radius: 14px;
    text-align: left;
    /* color: #8a8a8a; */
}

/* Cuando está abierto, redondeo superior del header desaparece */
.upg__head[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Responsive: compactar un poco en móviles */
@media (max-width: 640px) {
    .upg__badge {
        width: 86px;
        height: 56px;
    }

    .upg__badge img {
        width: 67px;
        height: 38px;
    }

    .upg__toggle {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .upg__head {
        padding: 12px;
    }
}



/* Estilos para AGENTES */
.agents {
    width: min(1200px, 94vw);
    margin: 0 auto;
    padding: clamp(28px, 6vw, 56px) 0;
}

/* Encabezado */
.agents__head {
    text-align: center;
    margin-bottom: clamp(18px, 4vw, 32px);
}

.agents__pill {
    display: inline-block;
    background: var(--wma-red);
    color: #fff;
    padding: 10px 50px;
    border-radius: 15px;
    margin: 0 0 8px;
    font-size: clamp(18px, 2.6vw, 30px);
}

.agents__subtitle {
    margin: 6px 0 6px;
    font-size: clamp(20px, 2.8vw, 34px);
}

.agents__lead {
    margin: 0 auto;
    max-width: 820px;
    color: var(--muted2);
    font-size: clamp(14px, 2.2vw, 18px);
}

/* Grid principal */
.agents__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(16px, 4vw, 36px);
    align-items: start;
}

/* Media / imagen */
.agents__media {
    margin: 0;
    background: #ea6b65;
    /* rojo suave de fondo */
    border-radius: var(--radius2);
    padding: clamp(10px, 2vw, 18px);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.agents__media img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Formulario */
.agents__form {
    background: #fff;
    border-radius: var(--radius2);
    border: 1px solid #eceff3;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .06);
    padding: clamp(16px, 3vw, 24px);
    display: grid;
    gap: clamp(10px, 2vw, 14px);
}

.field {
    display: grid;
    gap: 6px;
}

.field label {
    font-size: 14px;
    color: #7a808b;
}

.field input,
.field select,
.field textarea {
    appearance: none;
    width: 100%;
    border-radius: 14px;
    border: 1px solid #e6e8ee;
    background: #f4f7fb;
    padding: 14px 14px;
    font-size: 16px;
    outline: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--wma-red);
    box-shadow: 0 0 0 3px rgba(239, 73, 72, .12);
    background: #fff;
}

.agents__btn {
    margin-top: 6px;
    height: 54px;
    border: 0;
    border-radius: 14px;
    background: var(--wma-red);
    color: #fff;
    font-weight: 900;
    font-size: 20px;
    cursor: pointer;
}

.agents__btn:hover {
    filter: brightness(1.05);
}

.agents__msg {
    min-height: 1em;
    font-size: 14px;
    color: var(--muted2);
    margin: 4px 2px 0;
}

/* Responsive: una columna */
@media (max-width: 900px) {
    .agents__grid {
        grid-template-columns: 1fr;
    }

    .agents__media {
        order: 1;
        /* imagen arriba */
    }

    .agents__form {
        order: 2;
    }
}










/* Asegura que el header y el menú estén por ENCIMA de todo */
.header {
    position: relative;
    /* o sticky/fixed si lo usas así */
    z-index: 3000;
}

@media (max-width:768px) {
    .nav__menu {
        position: fixed;
        inset: 64px 0 auto 0;
        background: #fff;
        transform: translateY(-120%);
        transition: transform .25s ease;
        padding: 1rem;
        flex-direction: column;
        gap: .5rem;
        z-index: 4000;
        /* clave: sobre el video */
        box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    }

    .nav__menu.is-open {
        transform: translateY(0);
    }
}

/* Baja el video en la pila y evita que “capture” toques/clics */
.hero--video {
    position: relative;
}

.video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* por debajo del header/menu */
    pointer-events: none;
    /* que no bloquee toques/clics */
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.i18n-preline {
    white-space: pre-line;
    text-align: start;
    font-size: 17px;
}


/* Columnas de beneficios */

.tier-nav {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0 0 1rem 0;
}

.tier-btn {
    border: 1px solid rgba(255, 255, 255, .25);
    padding: .5rem .75rem;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.tier-btn.is-active {
    color: #000;
    /* negro */
    outline: 2px solid #000;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    /* no todos lo soportan, pero ok */
    -webkit-appearance: none;
    appearance: none;

}

.benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .5rem;
}

.benefit-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .75rem;
    align-items: center;
    padding: .5rem .25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.benefit-name {
    font-weight: 600;
    text-align: left;
}

.benefit-val {
    font-weight: 700;
    text-align: right;
}

/* IMPORTANTÍSIMO: ocultar valores por defecto */
.acc-col .benefit-val {
    display: none;
}

/* Mostrar SOLO el valor correspondiente al tier de ESA columna */
.acc-col[data-tier="10000"] .benefit-val[data-tier="10000"] {
    display: inline;
}

.acc-col[data-tier="30000"] .benefit-val[data-tier="30000"] {
    display: inline;
}

.acc-col[data-tier="40000"] .benefit-val[data-tier="40000"] {
    display: inline;
}

.acc-col[data-tier="60000"] .benefit-val[data-tier="60000"] {
    display: inline;
}

.acc-col[data-tier="100000"] .benefit-val[data-tier="100000"] {
    display: inline;
}

.acc-col[data-tier="250000"] .benefit-val[data-tier="250000"] {
    display: inline;
}

.acc-col[data-tier="1000000"] .benefit-val[data-tier="1000000"] {
    display: inline;
}

@media (max-width: 520px) {
    .benefit-row {
        grid-template-columns: 1fr;
    }

    .benefit-name {
        text-align: center;
    }

    .benefit-val {
        text-align: center;
    }
}




/* Base: evita cortes raros en iOS */
.hero-stack40 {
    position: relative;
    width: 100%;
    padding: 24px 16px;
    overflow: visible;

    /* iPhone Safari: altura real estable */
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: env(safe-area-inset-bottom);
}

/* Header centrado y adaptable */
.hero-stack__header40 {
    text-align: center;
    margin: 0 auto 16px;
}

.hero-stack__header40 .font-mont-black {
    margin: 0;
}

/* Video: altura estable con aspect-ratio (no depende de vh) */
.hero-stack__video40 {
    position: relative;
    width: min(920px, 100%);
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;

    /* Cambia esto si quieres el video más alto o más bajo */
    aspect-ratio: 16 / 9;
}

/* Video ocupa el contenedor */
.hero-stack__video-el40 {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: transparent;
}

/* CTA: grid responsive */
.hero-stack__ctaCANAL40 {
    width: min(980px, 100%);
    margin: 16px auto 0;
    display: grid;
    gap: 10px;
    align-items: center;
    justify-items: center;
    background: #ffffff;
}

/* Botones (imagen) */
.promo__btn40 {
    display: block;
    width: 100%;
    max-width: 320px;
    line-height: 0;
}

.promo__btn-img40 {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 30px;
}

/* Desktop: 4 columnas */
@media (min-width: 1025px) {
    .hero-stack__ctaCANAL40 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet: 2x2 */
@media (max-width: 1024px) {
    .hero-stack__ctaCANAL40 {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-stack__video40 {
        aspect-ratio: 16 / 10;
        /* un poquito más alto en tablet */
    }
}

/* Móvil: 1 columna */
@media (max-width: 520px) {
    .hero-stack__ctaCANAL40 {
        grid-template-columns: 1fr;
    }

    .hero-stack__video40 {
        aspect-ratio: 4 / 3;
        /* más alto en móvil para que se vea mejor */
    }
}

/* Ajuste tipografías del header en móviles */
@media (max-width: 520px) {
    .hero-stack__header40 span[style*="font-size: 40px"] {
        font-size: 28px !important;
        line-height: 1.1;
    }

    .hero-stack__header40 span[style*="font-size: 20px"] {
        font-size: 16px !important;
        line-height: 1.3;
    }
}

/* Contenedor principal */
.hero-stack50 {
    position: relative;
    width: 100%;
    padding: 24px 16px;
    overflow: visible;

    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: env(safe-area-inset-bottom);
}

/* Header */
.hero-stack__header50 {
    text-align: center;
    margin: 0 auto 14px;
}

/* Video estable por aspect-ratio */
.hero-stack__video50 {
    position: relative;
    width: min(920px, 100%);
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;

    aspect-ratio: 16 / 9;
}

.hero-stack__video-el50 {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* CTA 2 botones */
.hero-stack__cta50 {
    width: min(980px, 100%);
    margin: 14px auto 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    justify-items: center;
    align-items: center;
}

.promo__btn50 {
    display: block;
    width: 100%;
    max-width: 420px;
    line-height: 0;
}

.promo__btn-img50 {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 28px;
}

/* Emergency pegado abajo */
.hero-stack__emergency50 {
    width: min(980px, 100%);
    margin: 10px auto 0;
    /* <-- pegado al CTA */
    display: grid;
    justify-items: center;
}

.emergency__link50 {
    display: block;
    width: 100%;
}

.emergency__img50 {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
}

/* Tablet */
@media (max-width: 1024px) {
    .hero-stack__video50 {
        aspect-ratio: 16 / 10;
    }

    .promo__btn50 {
        max-width: 360px;
    }
}

/* Móvil */
@media (max-width: 520px) {
    .hero-stack__video50 {
        aspect-ratio: 4 / 3;
    }

    .hero-stack__cta50 {
        grid-template-columns: 1fr;
        /* apila los 2 botones */
    }

    .promo__btn50 {
        max-width: 420px;
    }

    /* Tipografías inline del header */
    .hero-stack__header50 span[style*="font-size: 40px"] {
        font-size: 28px !important;
        line-height: 1.1;
    }

    .hero-stack__header50 span[style*="font-size: 20px"] {
        font-size: 16px !important;
        line-height: 1.3;
    }
}

/* =========================
   DUO60: layout estable
   ========================= */

.duo60 {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: clamp(8px, 1.2vw, 16px);
    /* menos separación */
    align-items: stretch;
    align-items: center;
}

.duo60__item {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
}

.duo60__item img {
    width: 70%;
    height: auto;
    display: block;


    /* pega la imagen al lado derecho */
    margin-left: auto;
    margin-right: 0;
}



.duo60__item--text {
    overflow: visible;
    background: transparent;
}

.duo60__text {
    position: static;
    inset: auto;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 14px;
    padding: clamp(14px, 2.2vw, 28px);
    text-align: center;
}


/* Evita "amontonado" */
.duo60__text .font-mont-black,
.duo60__text .font-mont-bold {
    margin: 0;
    line-height: 1.25;
}

/* =========================
   TIPOGRAFÍA FLUIDA
   ========================= */

/* Bloque rojo grande */
.duo60__text .font-mont-black[style*="background: #ef4948"] {
    padding: clamp(12px, 2vw, 18px) clamp(14px, 3vw, 44px) !important;
    border-radius: 20px;
    font-size: clamp(16px, 2.2vw, 22px);
}

/* Pill blanca dentro del rojo */
.duo60__text .font-mont-black span[style*="background: #fff"] {
    font-size: clamp(14px, 2vw, 18px);
    padding: 6px 12px !important;
}

/* Párrafo negro */
.duo60__text .font-mont-bold[style*="font-size: 25px"] {
    font-size: clamp(16px, 2.4vw, 27px) !important;
}

/* Contador +200 */
.duo60__text .countup {
    font-size: clamp(28px, 5vw, 40px) !important;
    padding: 2px 10px !important;
    border-radius: 10px;
    line-height: 1.1 !important;
}

/* =========================
   MOBILE: apilar y quitar overlay
   ========================= */
@media (max-width: 768px) {
    .duo60 {
        grid-template-columns: 1fr;
    }

    .duo60__text {
        position: static;
        inset: auto;
        padding: 14px 14px 18px;
        background: #fff;
    }

    .duo60__item {
        overflow: visible;
    }

    .duo60__item img {
        margin: 0 auto;
    }

    .duo60__item--overlay {
        border-radius: 18px;
        overflow: hidden;
    }

    .duo60__text br {
        content: "";
        display: block;
        margin: 6px 0;
    }
}

@media (max-width: 420px) {
    .duo60__text {
        gap: 10px;
        padding: 12px;
    }

    .duo60__item img {
        margin: 0 auto;
    }

    .duo60__text .font-mont-black[style*="background: #ef4948"] {
        padding: 12px 14px !important;
    }
}

/* GRID responsive: 3 -> 2 -> 1 */
.steps70 {
    width: min(1100px, 100%);
    margin: 0 auto;
    padding: 18px 16px;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 24px);
    align-items: stretch;
}

@media (max-width: 900px) {
    .steps70 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .steps70 {
        grid-template-columns: 1fr;
    }
}

/* Tarjeta */
.step70 {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 18px;

    /* tamaño estable y responsive */
    aspect-ratio: 1 / 1;
    min-height: clamp(200px, 32vw, 300px);

    background: #fff;
}

/* Imagen de fondo (si es PNG con fondo blanco igual va bien) */
.step70 img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    /* mantiene el diseño sin recortes */
    object-position: center;
}

/* Texto centrado en la mitad, negro */
.step70__text {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;

    text-align: center;
    padding: clamp(12px, 2vw, 18px);

    color: #2c2c2c;
    font-weight: 800;
    line-height: 1.15;
    font-size: clamp(20px, 1.8vw, 18px);
}