/*
 * Portada de Skkala.
 *
 * Los tokens son los de DESIGN.md y del @theme del CRM: navy fuera, panel
 * blanco dentro, y el verde de marca como única señal de «actúa aquí».
 */

/*
 * Instrument Sans, servida desde la propia web: una sola fuente variable con
 * todos los pesos. Solo el subconjunto latino, que trae todo lo del español.
 */
@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fuentes/instrument-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --navy-950: #15181f;
    --navy-900: #1a1d25;
    --navy-800: #1e222c;
    --navy-700: #2b3344;

    --brand-50: #f5fbe3;
    --brand-300: #c0e455;
    --brand-400: #abd626;
    --brand-500: #98c700;
    --brand-800: #4d6608;

    --tinta: #1e1e1e;
    --tinta-2: #5f6470;
    --papel: #ffffff;
    --fondo-claro: #f1f1f1;
    --anillo: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;

    --violeta: oklch(54.1% 0.281 293.009);
    --violeta-claro: oklch(96.9% 0.016 293.756);

    --instagram: #c13584;
    --messenger: #168aff;
    --whatsapp: #25d366;
    --webchat: #0d9488;
    --tiktok: #fe2c55;

    --ambar: #b45309;
    --rosa: #fb7185;

    --r-md: 0.5rem;
    --r-lg: 0.75rem;
    --r-xl: 1rem;

    --ease-salida: cubic-bezier(0.22, 1, 0.36, 1);
    --fuente: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--navy-950);
    color: var(--tinta);
    font-family: var(--fuente);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: var(--r-md);
}

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

.saltar {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    background: var(--brand-500); color: var(--navy-900);
    padding: 0.75rem 1rem; border-radius: var(--r-lg); font-weight: 700;
}
.saltar:focus { top: 1rem; }

.contenedor {
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}
@media (min-width: 768px) { .contenedor { padding-inline: 2rem; } }

/* ── Iconos ───────────────────────────────────────────── */

.ico {
    width: 1.25rem; height: 1.25rem; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.ico--xs { width: 0.875rem; height: 0.875rem; }

/* El color de canal va al logo y al texto, nunca al fondo. */
.c-instagram { color: var(--instagram); }
.c-messenger { color: var(--messenger); }
.c-whatsapp  { color: var(--whatsapp); }
.c-webchat   { color: var(--webchat); }
.c-tiktok    { color: var(--tiktok); }
.rosa  { color: var(--rosa); }
.ambar { color: #f59e0b; }

/* ── Tipografía ───────────────────────────────────────── */

.display {
    font-size: clamp(2.6rem, 6vw, 4.25rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.045em;
    color: var(--papel);
    text-wrap: balance;
}

.titular {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
}
.titular--grande { font-size: clamp(2.1rem, 5vw, 3.5rem); }

/* El subrayado de la portada: una sola pincelada verde bajo la promesa. */
.subrayado {
    background-image: linear-gradient(var(--brand-500), var(--brand-500));
    background-size: 100% 0.12em;
    background-position: 0 92%;
    background-repeat: no-repeat;
}

/* ── Botones ──────────────────────────────────────────── */

.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 3rem; padding: 0 1.4rem;
    border-radius: var(--r-lg);
    font-size: 0.9375rem; font-weight: 700;
    cursor: pointer; touch-action: manipulation;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.boton:active { transform: translateY(1px); }
.boton--chico { min-height: 2.5rem; padding: 0 1rem; font-size: 0.875rem; }

.boton--acento { background: var(--brand-500); color: var(--navy-900); }
.boton--acento:hover { background: var(--brand-400); }

.boton--fantasma { color: var(--papel); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18); }
.boton--fantasma:hover { background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); }

.boton--borde { background: var(--papel); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--slate-300); }
.boton--borde:hover { background: var(--navy-900); color: var(--papel); box-shadow: inset 0 0 0 1px var(--navy-900); }

.enlace-claro {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.5rem;
    color: var(--slate-300); font-size: 0.875rem; font-weight: 700;
    transition: color 160ms ease;
}
.enlace-claro:hover { color: var(--papel); }

/* ── Cabecera ─────────────────────────────────────────── */

.cabecera {
    position: sticky; top: 0; z-index: 50;
    transition: background-color 200ms ease, box-shadow 200ms ease;
}
.cabecera[data-con-fondo] {
    background: rgb(21 24 31 / 0.82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.07);
}

.cabecera__fila {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    height: 4.25rem;
}
.cabecera__logo { display: inline-flex; padding: 0.25rem 0; }
.cabecera__logo img { width: 7.5rem; height: auto; }

.cabecera__nav { display: none; gap: 0.25rem; }
.cabecera__nav a {
    padding: 0.5rem 0.75rem; border-radius: var(--r-md);
    color: var(--slate-300); font-size: 0.875rem; font-weight: 600;
    transition: color 160ms ease, background-color 160ms ease;
}
.cabecera__nav a:hover { color: var(--papel); background: rgb(255 255 255 / 0.05); }

.cabecera__acciones { display: flex; align-items: center; gap: 0.5rem; }

.cabecera__menu {
    display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
    border: 0; border-radius: var(--r-lg); background: transparent; color: var(--papel);
    cursor: pointer;
}
.cabecera__menu:hover { background: rgb(255 255 255 / 0.06); }

/*
 * El menú del teléfono ocupa la pantalla entera, por debajo de la cabecera
 * (que conserva el logo y el botón de cerrar). Navy con la rejilla, como el
 * hero: es la misma portada vista con el menú abierto.
 */
.menu-movil {
    position: fixed; inset: 0; z-index: 45;
    display: flex; flex-direction: column;
    padding-top: calc(4.25rem + env(safe-area-inset-top, 0px));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
    background: var(--navy-950);
    overflow-y: auto; overscroll-behavior: contain;
}
.menu-movil[hidden] { display: none; }
.menu-movil .rejilla { position: absolute; }

.menu-movil__nav { position: relative; display: grid; align-content: start; padding-block: 2rem 1rem; }
.menu-movil__nav a {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 5rem; border-bottom: 1px solid rgb(255 255 255 / 0.08);
    color: var(--papel); font-size: clamp(2.25rem, 11vw, 3rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1;
}
.menu-movil__nav a .ico { width: 1.75rem; height: 1.75rem; color: var(--slate-400); transition: transform 200ms var(--ease-salida), color 200ms ease; }
.menu-movil__nav a:active .ico, .menu-movil__nav a:hover .ico { transform: translateX(4px); color: var(--brand-400); }

.menu-movil__pie { position: relative; display: grid; gap: 0.75rem; margin-top: auto; padding-top: 1.5rem; }
.menu-movil__pie .boton { width: 100%; min-height: 3.25rem; font-size: 1rem; }

/* Entrada escalonada: cada opción sube un poco, una detrás de otra. */
.menu-movil:not([hidden]) .menu-movil__nav a,
.menu-movil:not([hidden]) .menu-movil__pie {
    animation: menu-entra 420ms var(--ease-salida) both;
    animation-delay: calc(var(--i) * 45ms + 40ms);
}
.menu-movil:not([hidden]) { animation: menu-fondo 220ms ease both; }
@keyframes menu-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes menu-fondo { from { opacity: 0; } to { opacity: 1; } }

/*
 * Con el menú abierto la página de detrás no se desplaza y la cabecera se
 * queda fija arriba. El bloqueo va solo en <html>: puesto también en <body>,
 * el body pasa a ser el contenedor de scroll, la cabecera «sticky» pierde su
 * referencia y, con la página bajada, salía de la pantalla con el botón de
 * cerrar dentro.
 */
html.menu-abierto { overflow: hidden; overflow-anchor: none; }
/* La cabecera fija sale del flujo; el body guarda su alto para que nada de debajo se mueva. */
html.menu-abierto body { padding-top: 4.25rem; overflow-anchor: none; }
html.menu-abierto .cabecera {
    position: fixed; top: 0; left: 0; right: 0;
    background: var(--navy-950); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (prefers-reduced-motion: reduce) {
    .menu-movil:not([hidden]), .menu-movil:not([hidden]) .menu-movil__nav a, .menu-movil:not([hidden]) .menu-movil__pie { animation: none; }
}

@media (min-width: 960px) {
    /*
     * Tres columnas y las de los lados iguales: con space-between el menú
     * quedaba corrido, porque el logo y los botones no miden lo mismo.
     */
    .cabecera__fila { display: grid; grid-template-columns: 1fr auto 1fr; }
    .cabecera__acciones { justify-self: end; }
    .cabecera__nav { display: flex; }
    .cabecera__menu { display: none; }
    .menu-movil { display: none !important; }
}

/* ── Rejilla de plano técnico ─────────────────────────── */

.rejilla {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(to right, rgb(255 255 255 / 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(255 255 255 / 0.05) 1px, transparent 1px);
    background-size: 4.5rem 4.5rem;
    background-position: center top;
    -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, black 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, black 35%, transparent 100%);
}
.rejilla--fina {
    background-size: 2.75rem 2.75rem;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}

/* ── Portada ──────────────────────────────────────────── */

.portada {
    position: relative;
    margin-top: -4.25rem;
    padding-top: 7.5rem;
    background: var(--navy-950);
    overflow: hidden;
}

.portada__fila {
    position: relative;
    display: grid; gap: 3.5rem; align-items: center;
}
@media (min-width: 1080px) {
    .portada__fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 4rem; }
}

.canales-linea {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-bottom: 1.75rem;
}
.canales-linea li {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.8125rem; font-weight: 700;
}
.canales-linea .ico { width: 1.05rem; height: 1.05rem; }

.portada__bajada {
    margin-top: 1.5rem; max-width: 34rem;
    color: var(--slate-300); font-size: 1.125rem; line-height: 1.6;
}

.portada__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.portada__acciones--centro { justify-content: center; }
@media (max-width: 479px) {
    .portada__acciones .boton { width: 100%; }
}

.portada__nota {
    display: flex; align-items: center; gap: 0.4rem; margin-top: 1.25rem;
    color: var(--slate-400); font-size: 0.875rem; font-weight: 600;
}
.portada__nota .ico { width: 1rem; height: 1rem; color: var(--slate-300); }

/* ── La maqueta del producto ─────────────────────────── */

.maqueta {
    position: relative;
    border-radius: var(--r-xl);
    background: var(--papel);
    box-shadow: 0 40px 80px -20px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.06);
    overflow: hidden;
    font-size: 0.8125rem;
}

.maqueta__barra {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.65rem 0.9rem; background: var(--fondo-claro); border-bottom: 1px solid var(--anillo);
}
.maqueta__barra span { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #d4d4d8; }
.maqueta__barra p {
    margin-inline: auto; padding: 0.15rem 0.9rem; border-radius: 999px;
    background: var(--papel); color: var(--tinta-2); font-size: 0.6875rem; font-weight: 600;
    transform: translateX(-1rem);
}

.maqueta__cuerpo { display: grid; min-height: 26rem; }
@media (min-width: 640px) { .maqueta__cuerpo { grid-template-columns: 15rem 1fr; } }

.m-lista { display: none; border-right: 1px solid var(--anillo); padding: 0.5rem; }
@media (min-width: 640px) { .m-lista { display: block; } }

.m-fila {
    display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; align-items: center;
    padding: 0.6rem; border-radius: var(--r-lg);
}
.m-fila > div { min-width: 0; }
.m-fila--activa { background: var(--fondo-claro); }

.m-avatar {
    display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
    background: #fce7f3; color: #9d174d; font-size: 0.6875rem; font-weight: 700;
}
.m-avatar--b { background: #dcfce7; color: #166534; }
.m-avatar--c { background: #ccfbf1; color: #115e59; }
.m-avatar--d { background: #dbeafe; color: #1e40af; }

.m-nombre {
    display: flex; align-items: center; gap: 0.3rem;
    color: var(--tinta); font-weight: 700; font-size: 0.8125rem; line-height: 1.3;
}
.m-previa {
    color: var(--tinta-2); font-size: 0.75rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-hora { color: var(--tinta-2); font-size: 0.6875rem; font-weight: 600; }
.m-contador {
    display: grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem;
    border-radius: 999px; background: var(--brand-500); color: var(--navy-900);
    font-size: 0.6875rem; font-weight: 700;
}

.m-hilo { display: flex; flex-direction: column; min-width: 0; }
.m-hilo__cabeza {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.75rem 1rem; border-bottom: 1px solid var(--anillo);
}
.m-etapa {
    display: flex; align-items: center; gap: 0.35rem;
    color: var(--tinta-2); font-size: 0.6875rem; font-weight: 600;
}
.m-etapa .punto { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--messenger); }
.m-ventana {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.55rem; border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--anillo);
    color: var(--tinta-2); font-size: 0.6875rem; font-weight: 700;
}

.m-mensajes {
    flex: 1; display: flex; flex-direction: column; gap: 0.45rem;
    padding: 1rem; background: #fafafa;
}
.m-globo {
    max-width: 82%; padding: 0.55rem 0.8rem; border-radius: 1rem;
    font-size: 0.8125rem; line-height: 1.45;
}
.m-globo--cliente { align-self: flex-start; background: var(--papel); box-shadow: 0 0 0 1px var(--anillo); border-bottom-left-radius: 0.3rem; }
.m-globo--equipo { align-self: flex-end; background: var(--navy-900); color: var(--papel); border-bottom-right-radius: 0.3rem; }

/* El compositor con la IA: la única animación en bucle del sistema. */
.m-compositor {
    position: relative;
    margin: 0.75rem; padding: 0.85rem;
    border-radius: var(--r-lg);
    box-shadow: inset 0 0 0 1px var(--anillo);
    background: var(--papel);
    min-height: 8.5rem;
    overflow: hidden;
}

.m-compositor__pensando {
    position: absolute; inset: 0;
    display: none; align-items: center; justify-content: center; gap: 0.4rem;
    color: var(--violeta); font-weight: 700;
}
.m-compositor__borrador { transition: opacity 360ms var(--ease-salida), transform 360ms var(--ease-salida); }

.m-etiqueta-ia {
    display: inline-flex; align-items: center; gap: 0.3rem; margin-bottom: 0.35rem;
    color: var(--violeta); font-size: 0.6875rem; font-weight: 700;
}
.m-borrador-texto { color: var(--tinta); line-height: 1.5; }

.m-compositor__pie {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    margin-top: 0.7rem;
}
.m-pastilla {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem;
    border-radius: 999px; background: var(--fondo-claro); color: var(--tinta-2);
    font-size: 0.6875rem; font-weight: 700;
}
.m-enviar {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.85rem;
    border-radius: var(--r-md); background: var(--navy-900); color: var(--papel);
    font-size: 0.75rem; font-weight: 700;
}

/* Estados de la escena, los pone app.js. Sin guion se ve el final. */
.maqueta[data-fase="espera"] [data-escena="llega"] { opacity: 0; transform: translateY(6px); }
.maqueta [data-escena="llega"] { transition: opacity 320ms var(--ease-salida), transform 320ms var(--ease-salida); }

.maqueta[data-fase="espera"] .m-compositor__borrador,
.maqueta[data-fase="llega"] .m-compositor__borrador,
.maqueta[data-fase="pensando"] .m-compositor__borrador { opacity: 0; transform: translateY(4px); }
.maqueta[data-fase="pensando"] .m-compositor__pensando { display: flex; }
.maqueta[data-fase="pensando"] .m-compositor {
    background: var(--violeta-claro);
    box-shadow: inset 0 0 0 1px oklch(70.2% 0.183 293.541 / 0.6), 0 0 0 4px oklch(54.1% 0.281 293.009 / 0.08);
}
.maqueta[data-fase="pensando"] .m-compositor::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 30%, oklch(100% 0 0 / 0.65) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: barrido 1.4s linear infinite;
}
.maqueta[data-fase="listo"] .m-compositor { box-shadow: inset 0 0 0 1px oklch(70.2% 0.183 293.541 / 0.5); }

@keyframes barrido { to { transform: translateX(100%); } }

.texto-ia {
    background: linear-gradient(90deg, var(--violeta), oklch(70.2% 0.183 293.541), var(--violeta));
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
}


/* ── Carrusel del hero ────────────────────────────────── */

.carrusel { position: relative; }
.carrusel__pista { display: grid; }
/* Las dos diapositivas en la misma casilla: la altura es la de la más alta. */
.diapo {
    grid-area: 1 / 1;
    transition: opacity 600ms var(--ease-salida), transform 600ms var(--ease-salida), visibility 0s linear 600ms;
}
.diapo:not(.es-activa) {
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(var(--salida, 2.5rem));
}
.diapo.es-activa { transition-delay: 0s; }
.diapo .portada__texto, .diapo .maqueta-marco, .diapo .movil-escena { transition: transform 700ms var(--ease-salida); }
.diapo:not(.es-activa) .maqueta-marco,
.diapo:not(.es-activa) .movil-escena { transform: translateX(calc(var(--salida, 2.5rem) * 1.6)); }

.carrusel__controles {
    position: relative; display: flex; align-items: center; gap: 0.5rem;
    margin-top: 2.5rem;
}
@media (min-width: 1080px) { .carrusel__controles { margin-top: 1.5rem; } }

.carrusel__flecha {
    display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
    border: 0; border-radius: 50%; cursor: pointer;
    background: rgb(255 255 255 / 0.05); color: var(--papel);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
    transition: background-color 160ms ease, box-shadow 160ms ease;
}
.carrusel__flecha:hover { background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); }
.carrusel__flecha .ico { width: 1.1rem; height: 1.1rem; }

.carrusel__puntos { display: flex; gap: 0.25rem; padding-inline: 0.25rem; }
.carrusel__punto {
    display: inline-grid; place-items: center; width: 3.5rem; height: 2.75rem;
    border: 0; background: transparent; cursor: pointer; padding: 0;
}
/* Cada punto es una barra que se llena mientras su diapositiva está a la vista. */
.carrusel__punto i {
    position: relative; display: block; width: 100%; height: 4px; border-radius: 999px;
    background: rgb(255 255 255 / 0.18); overflow: hidden;
}
.carrusel__punto i::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: var(--brand-500);
    transform: scaleX(0); transform-origin: left;
}
.carrusel__punto[aria-selected="true"] i::after { transform: scaleX(1); }
.carrusel[data-corriendo] .carrusel__punto[aria-selected="true"] i::after {
    transform: scaleX(0);
    animation: llenado var(--duracion, 9s) linear forwards;
}
.carrusel[data-detenido] .carrusel__punto[aria-selected="true"] i::after { animation-play-state: paused; }
@keyframes llenado { to { transform: scaleX(1); } }

.carrusel__pausa {
    display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.5rem;
    min-height: 2.75rem; padding: 0 0.75rem; border: 0; border-radius: var(--r-lg);
    background: transparent; color: var(--slate-400); cursor: pointer;
    font: 700 0.8125rem var(--fuente);
}
.carrusel__pausa:hover { color: var(--papel); }

/* ── El teléfono de la diapositiva 2 ──────────────────── */

.plataforma { color: var(--slate-300); }
.violeta { color: oklch(78.5% 0.115 293.756); }

.movil-escena {
    position: relative; display: grid; place-items: center;
    min-height: 34rem; padding-block: 1rem;
}
.movil-escena::before {
    content: ""; position: absolute; width: 26rem; height: 26rem; border-radius: 50%;
    background: radial-gradient(closest-side, rgb(152 199 0 / 0.2), rgb(56 120 255 / 0.1) 50%, rgb(56 120 255 / 0.03) 75%, transparent);
    z-index: -1;
}

.movil {
    position: relative; width: 17.5rem; aspect-ratio: 9 / 19;
    padding: 0.6rem; border-radius: 2.75rem;
    background: linear-gradient(145deg, #3a3f4b, #15181f 45%, #2b3344);
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 0.12),
        inset 0 0 0 1.5px rgb(255 255 255 / 0.08),
        0 50px 90px -30px rgb(0 0 0 / 0.75),
        0 0 60px -10px rgb(152 199 0 / 0.18);

    animation: flotar 7s ease-in-out infinite;
}
@keyframes flotar { 50% { translate: 0 -10px; } }

.movil__isla {
    position: absolute; top: 1.15rem; left: 50%; z-index: 4;
    width: 5.5rem; height: 1.5rem; margin-left: -2.75rem;
    border-radius: 999px; background: #000;
}
.movil__pantalla {
    position: relative; height: 100%; overflow: hidden;
    border-radius: 2.2rem; background: var(--fondo-claro);
    display: flex; flex-direction: column;
    font-size: 0.75rem;
}
.movil__estado {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.85rem 1.4rem 0.4rem; font-size: 0.75rem;
}
.movil__senal { display: inline-flex; align-items: flex-end; gap: 2px; height: 0.6rem; }
.movil__senal i { width: 3px; background: var(--tinta); border-radius: 1px; }
.movil__senal i:nth-child(1) { height: 30%; } .movil__senal i:nth-child(2) { height: 55%; }
.movil__senal i:nth-child(3) { height: 80%; } .movil__senal i:nth-child(4) { height: 100%; }

.app-cabeza { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1rem 0.5rem; }
.app-titulo { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.app-disponible {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem;
    border-radius: 999px; background: var(--papel); box-shadow: 0 0 0 1px var(--anillo);
    font-size: 0.625rem; font-weight: 700;
}
.app-disponible i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #22c55e; }
.app-filtros { display: flex; gap: 0.35rem; padding: 0 1rem 0.6rem; }
.app-filtros span {
    padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--papel);
    box-shadow: 0 0 0 1px var(--anillo); color: var(--tinta-2); font-size: 0.625rem; font-weight: 700;
}
.app-filtros .activo { background: var(--navy-900); color: var(--papel); box-shadow: none; }

/* La lista cede lo que no cabe: la barra de abajo nunca se sale de la pantalla. */
.app-lista { flex: 1; min-height: 0; overflow: hidden; margin: 0 0.6rem; border-radius: 1rem; background: var(--papel); padding: 0.25rem; }
.app-fila {
    display: grid; grid-template-columns: auto 1fr auto; gap: 0.55rem; align-items: center;
    padding: 0.55rem; border-radius: 0.75rem;
    transition: background-color 400ms ease;
}
.app-fila > div { min-width: 0; }
.app-fila .m-avatar { width: 1.9rem; height: 1.9rem; font-size: 0.625rem; }
.app-fila .m-nombre { font-size: 0.75rem; }
.app-fila .m-previa { font-size: 0.6875rem; }

.app-barra {
    display: flex; justify-content: space-around; margin: 0.6rem; padding: 0.55rem;
    border-radius: 1rem; background: var(--papel); box-shadow: 0 0 0 1px var(--anillo);
}
.app-barra span { display: grid; justify-items: center; gap: 0.15rem; color: var(--tinta-2); font-size: 0.5625rem; font-weight: 700; }
.app-barra .activo { color: var(--tinta); }

/* La notificación que baja desde arriba. */
.aviso-push {
    position: absolute; top: 2.6rem; left: 0.55rem; right: 0.55rem; z-index: 3;
    display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: center;
    padding: 0.7rem 0.75rem; border-radius: 1.1rem;
    background: rgb(246 246 248 / 0.82);
    -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
    box-shadow: 0 12px 30px -10px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(0 0 0 / 0.04);
    transform: translateY(-140%); opacity: 0;
    transition: transform 600ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 300ms ease;
}
.aviso-push__app {
    display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 0.6rem;
    background: var(--navy-900);
}
.aviso-push__app img { width: 1.1rem; height: 1.1rem; }
.aviso-push__cabeza { display: flex; justify-content: space-between; color: var(--tinta-2); font-size: 0.625rem; }
.aviso-push__cabeza b { color: var(--tinta); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.aviso-push__titulo { font-weight: 700; font-size: 0.75rem; line-height: 1.3; }
.aviso-push__texto { color: var(--tinta); font-size: 0.75rem; line-height: 1.3; }

/* Fases de la escena (las pone app.js). Sin guion: lista con el chat nuevo. */
.movil-escena[data-fase="aviso"] .aviso-push { transform: translateY(0); opacity: 1; }
.movil-escena[data-fase="espera"] .app-fila--nueva,
.movil-escena[data-fase="aviso"] .app-fila--nueva { opacity: 0.0; }
.app-fila--nueva { transition: opacity 400ms ease, background-color 600ms ease; }
.movil-escena[data-fase="nuevo"] .app-fila--nueva { background: var(--brand-50); }

/* Las tarjetas que flotan alrededor del teléfono. */
.flotante {
    position: absolute; z-index: 2;
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 0.85rem; border-radius: 999px;
    background: rgb(30 34 44 / 0.75);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14), 0 14px 30px -12px rgb(0 0 0 / 0.6);
    color: var(--papel); font-size: 0.8125rem; font-weight: 700; white-space: nowrap;
    animation: flotar 6s ease-in-out infinite;
}
.flotante .ico { color: var(--brand-400); }
.flotante .ico.violeta { color: oklch(78.5% 0.115 293.756); }
.flotante--1 { top: 26%; left: -2%; animation-delay: -1s; }
.flotante--2 { top: 30%; right: 2%; animation-delay: -3s; }
.flotante--3 { bottom: 18%; left: -4%; animation-delay: -2s; }
.flotante--4 { bottom: 10%; right: 6%; animation-delay: -4.5s; }


/* ── Los tres teléfonos ───────────────────────────────── */
/*
 * Los tres en la misma casilla: el de delante en el centro y los otros dos
 * asomando detrás, más pequeños y girados hacia fuera. Cada uno flota con su
 * propio compás para que no se muevan en bloque.
 */
.movil-escena { min-height: 38rem; }
.movil { grid-area: 1 / 1; }
.movil--frente { z-index: 3; }
.movil--atras {
    z-index: 1; width: 15.5rem;
    filter: brightness(0.82) saturate(0.9);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 40px 70px -30px rgb(0 0 0 / 0.8);
}
/*
 * En abanico, como cartas en la mano: los dos de atrás pivotan desde su base
 * y se abren hacia los lados; el de delante queda derecho.
 */
.movil--atras { transform-origin: 50% 100%; }
.movil--izq { transform: translate(-42%, 0.5rem) rotate(-15deg); animation-delay: -2.5s; animation-duration: 8s; }
.movil--der { transform: translate(42%, 0.5rem) rotate(15deg); animation-delay: -5s; animation-duration: 9s; }

/* Pantalla del embudo */
.app-filtros--rueda { overflow: hidden; white-space: nowrap; }
.app-filtros--rueda span { flex-shrink: 0; }
.embudo-lista { flex: 1; min-height: 0; overflow: hidden; display: grid; align-content: start; gap: 0.4rem; margin: 0 0.6rem; }
.lead {
    display: grid; gap: 0.25rem; justify-items: start;
    padding: 0.6rem 0.65rem; border-radius: 0.8rem;
    background: var(--papel); box-shadow: 0 0 0 1px var(--anillo);
}
.lead--atencion { box-shadow: inset 3px 0 0 #f59e0b, 0 0 0 1px var(--anillo); }
.lead__fila { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 0.4rem; }
.lead .m-nombre { font-size: 0.6875rem; }
.lead .m-previa { font-size: 0.625rem; max-width: 100%; }
.lead__ventana { color: var(--tinta-2); font-size: 0.5625rem; font-weight: 700; white-space: nowrap; }
.lead__ventana.ambar { color: var(--ambar); }
.lead__aviso { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--ambar); font-size: 0.625rem; font-weight: 700; }
.insignia.insignia--chica { font-size: 0.5625rem; padding: 0.1rem 0.45rem 0.1rem 0.1rem; }
.insignia.insignia--chica i { width: 1.1rem; height: 1.1rem; font-size: 0.4375rem; }

/* Pantalla del chat */
.chat-cabeza {
    display: grid; grid-template-columns: auto auto 1fr; gap: 0.5rem; align-items: center;
    padding: 0.6rem 0.85rem 0.7rem; background: var(--papel); border-bottom: 1px solid var(--anillo);
}
.chat-cabeza .m-avatar { width: 1.8rem; height: 1.8rem; font-size: 0.5625rem; }
.chat-cabeza .m-nombre { font-size: 0.6875rem; }
.chat-cabeza .m-etapa { font-size: 0.5625rem; }
.chat-hilo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.75rem 0.7rem; }
.chat-hilo .m-globo { font-size: 0.6875rem; padding: 0.45rem 0.65rem; max-width: 85%; }
.chat-ia {
    margin: 0 0.6rem; padding: 0.6rem 0.7rem; border-radius: 0.8rem;
    background: var(--violeta-claro);
    box-shadow: inset 0 0 0 1px oklch(70.2% 0.183 293.541 / 0.5);
    font-size: 0.6875rem; line-height: 1.4;
    display: grid; gap: 0.2rem;
}
.chat-ia .m-etiqueta-ia { margin-bottom: 0; font-size: 0.5625rem; }
.chat-ia__usar {
    justify-self: end; margin-top: 0.2rem; padding: 0.25rem 0.7rem; border-radius: 0.45rem;
    background: var(--violeta); color: var(--papel); font-size: 0.625rem; font-weight: 700;
}
.chat-compositor {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0.6rem; padding: 0.45rem 0.45rem 0.45rem 0.8rem; border-radius: 999px;
    background: var(--papel); box-shadow: 0 0 0 1px var(--anillo);
    color: var(--tinta-2); font-size: 0.625rem;
}
.chat-compositor__enviar {
    display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background: var(--navy-900); color: var(--papel);
}

/* Las tarjetas, repartidas entre los tres teléfonos. */
.flotante { z-index: 5; }
.flotante--1 { top: 9%; left: 2%; }
.flotante--2 { top: 5%; right: 0; }
.flotante--3 { bottom: 9%; left: 0; }
.flotante--4 { bottom: 13%; right: 1%; }

@media (min-width: 1080px) and (max-width: 1279px) {
    .movil--izq { transform: translate(-36%, 0.5rem) rotate(-15deg) scale(0.92); }
    .movil--der { transform: translate(36%, 0.5rem) rotate(15deg) scale(0.92); }
}


/* ── El panel de estadísticas de la diapositiva 3 ─────── */

.destacados { display: grid; gap: 0.65rem; margin-top: 1.5rem; }
.destacados li { display: flex; align-items: center; gap: 0.65rem; color: var(--papel); font-weight: 600; font-size: 1rem; }
.destacados .ico {
    width: 2rem; height: 2rem; padding: 0.4rem; flex-shrink: 0;
    border-radius: 0.6rem; color: var(--brand-400);
    background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}
.diapo .destacados + .portada__acciones { margin-top: 2rem; }

.tablero-escena { position: relative; }
.tablero-escena::before {
    content: ""; position: absolute; inset: -30% -25%; z-index: -1;
    background:
        radial-gradient(36% 36% at 58% 40%, rgb(152 199 0 / 0.24), rgb(152 199 0 / 0.06) 55%, transparent 100%),
        radial-gradient(34% 34% at 40% 62%, rgb(56 120 255 / 0.16), rgb(56 120 255 / 0.04) 55%, transparent 100%);
}
.tablero { font-size: 0.75rem; }
.tablero__cuerpo { display: grid; gap: 0.75rem; padding: 1rem; background: var(--fondo-claro); }

.tablero__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.tablero__titulo { font-size: 0.9375rem; font-weight: 700; }
.tablero__titulo span { color: var(--tinta-2); font-size: 0.75rem; font-weight: 600; margin-left: 0.35rem; }
.tablero__descargas { display: flex; gap: 0.35rem; }
.tablero__descargas span {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.6rem;
    border-radius: var(--r-md); background: var(--papel); box-shadow: 0 0 0 1px var(--anillo);
    font-size: 0.6875rem; font-weight: 700;
}

.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.kpi { padding: 0.75rem; border-radius: var(--r-lg); background: var(--papel); box-shadow: 0 0 0 1px var(--anillo); }
.kpi__nombre { color: var(--tinta-2); font-size: 0.6875rem; font-weight: 700; }
.kpi__cifra { margin-top: 0.15rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi__cifra small { font-size: 0.8125rem; letter-spacing: 0; color: var(--tinta-2); }
.kpi__delta { display: inline-flex; align-items: center; gap: 0.2rem; margin-top: 0.25rem; color: var(--tinta-2); font-size: 0.6875rem; font-weight: 700; }

.tablero__fila { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0.6rem; }
.bloque { padding: 0.75rem; border-radius: var(--r-lg); background: var(--papel); box-shadow: 0 0 0 1px var(--anillo); min-width: 0; }
.bloque__titulo { margin-bottom: 0.6rem; font-size: 0.75rem; font-weight: 700; }

/* El embudo con la caída entre etapas. */
.escapes { display: grid; gap: 0.35rem; }
.escapes li {
    position: relative; display: flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.5rem; border-radius: 0.4rem; overflow: hidden;
    font-size: 0.6875rem; font-weight: 600; isolation: isolate;
}
.escapes li::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    width: var(--ancho); border-radius: inherit; background: #e6eaf0;
    transform-origin: left; transition: transform 900ms var(--ease-salida);
}
/* La venta se distingue por su borde y su peso, no por un relleno oscuro que deja el texto sin fondo. */
.escapes__ganado { box-shadow: inset 0 0 0 1px var(--navy-700); font-weight: 700; }
.escapes__ganado::before { background: #cfd6e0; }
.escapes span { flex: 1; white-space: nowrap; }
.escapes b { font-variant-numeric: tabular-nums; }
.escapes em { min-width: 2.6rem; text-align: right; color: var(--ambar); font-style: normal; font-weight: 700; font-size: 0.625rem; }

/* El mapa de hora por día. */
.calor { display: grid; gap: 3px; }
.calor__fila { display: grid; grid-template-columns: 0.8rem repeat(12, minmax(0, 1fr)); gap: 3px; align-items: center; }
.calor__fila b { color: var(--tinta-2); font-size: 0.5625rem; font-weight: 700; }
.calor__fila i {
    aspect-ratio: 1; border-radius: 3px;
    background: rgb(43 51 68 / var(--v));
    transition: opacity 500ms ease, transform 500ms var(--ease-salida);
}
.calor__pie { display: flex; justify-content: space-between; margin: 0.35rem 0 0 1rem; color: var(--tinta-2); font-size: 0.5625rem; font-weight: 600; }

/* El equipo. */
.equipo { display: grid; gap: 0.45rem; }
.equipo li { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 0.6rem; align-items: center; font-size: 0.6875rem; }
.equipo .insignia { font-size: 0.6875rem; padding-block: 0.15rem; }
.equipo .insignia i { width: 1.25rem; height: 1.25rem; font-size: 0.5rem; }
.equipo__barra { height: 0.45rem; border-radius: 999px; background: #eef2f6; overflow: hidden; }
.equipo__barra i { display: block; height: 100%; width: var(--ancho); border-radius: inherit; background: var(--navy-700); transform-origin: left; transition: transform 900ms var(--ease-salida) 200ms; }
.equipo b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* La animación de entrada (fases puestas por app.js). Sin guion: todo lleno. */
.tablero-escena[data-fase="espera"] .escapes li::before,
.tablero-escena[data-fase="espera"] .equipo__barra i { transform: scaleX(0); }
.tablero-escena[data-fase="espera"] .calor__fila i { opacity: 0; transform: scale(0.4); }
.tablero-escena .calor__fila i { transition-delay: calc(var(--retraso-calor, 0) * 1ms); }

.flotante--a { top: -1.2rem; right: 6%; }
.flotante--b { bottom: -1.2rem; left: 4%; }
.flotante--c { bottom: -1.2rem; right: 6%; }

@media (max-width: 639px) {
    .tablero__fila { grid-template-columns: 1fr; }
    .kpi__cifra { font-size: 1.25rem; }
    .tablero__titulo span { display: none; }
    .tablero-escena { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .tablero-escena .tablero { grid-column: 1 / -1; margin-bottom: 0.5rem; }
    .flotante--c { grid-column: 1 / -1; justify-self: center; }
    /* El mapa de calor ya lo cuenta la lista de la izquierda: en el teléfono
       se quita para que esta diapositiva no estire a las otras dos. */
    .tablero__fila .bloque:nth-child(2) { display: none; }
}

/*
 * En el teléfono no hay sitio a los lados: las tarjetas dejan de flotar
 * encima de la pantalla y bajan a una cuadrícula de dos columnas.
 */
@media (max-width: 639px) {
    .movil-escena {
        min-height: 0; grid-template-columns: 1fr 1fr; gap: 0.5rem;
    }
    .movil { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: 15rem; margin-bottom: 1rem; }
    .movil--atras { width: 12.5rem; }
    .movil--izq { transform: translate(-38%, 0.5rem) rotate(-12deg); }
    .movil--der { transform: translate(38%, 0.5rem) rotate(12deg); }
    .flotante {
        position: static; justify-content: center; white-space: normal; text-align: center;
        font-size: 0.75rem; padding: 0.55rem 0.6rem; animation: none;
    }
}

/* ── Clientes ─────────────────────────────────────────── */

.clientes { position: relative; padding-block: 6rem 4rem; text-align: center; }
.clientes p { color: var(--slate-400); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; }
.clientes ul {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 1.75rem 3rem; margin-top: 1.75rem;
}
/* En blanco y apagados: son prueba, no protagonistas. */
.clientes img {
    height: 2rem; width: auto; max-width: 8.5rem; object-fit: contain;
    filter: brightness(0) invert(1); opacity: 0.55;
    transition: opacity 200ms ease;
}
.clientes li:hover img { opacity: 0.9; }

/* ── Secciones ────────────────────────────────────────── */

.seccion { position: relative; padding-block: 5.5rem; }
@media (min-width: 768px) { .seccion { padding-block: 7.5rem; } }
.seccion--pegada { padding-top: 0; }

.seccion--oscura { background: var(--navy-900); color: var(--papel); overflow: hidden; }
.seccion--clara { background: var(--fondo-claro); color: var(--tinta); }

.seccion__cabeza { max-width: 44rem; margin-bottom: 3rem; }
.seccion__cabeza p { margin-top: 1rem; color: var(--tinta-2); font-size: 1.0625rem; }

/* ── Paneles y bento ──────────────────────────────────── */

.panel {
    background: var(--papel);
    border-radius: var(--r-xl);
    box-shadow: 0 0 0 1px var(--anillo);
    padding: 1.75rem;
    display: flex; flex-direction: column;
}
.panel h3 { margin-top: 1rem; font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.panel p { margin-top: 0.5rem; color: var(--tinta-2); font-size: 0.9375rem; }
.panel__ico { width: 1.6rem; height: 1.6rem; color: var(--tinta); }
.panel__extra {
    display: inline-flex !important; align-items: center; gap: 0.4rem;
    color: var(--tinta) !important; font-weight: 700;
}

.bento { display: grid; gap: 1.25rem; }
/* Sin esto el <pre> del chat web impone su ancho a toda la columna en el teléfono. */
.bento > * { min-width: 0; }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bento__ancho, .bento__doble { gap: 1.75rem; }
.bento .panel > h3:first-child { margin-top: 0; }
.bento .panel__texto h3 { margin-top: 0; }
@media (min-width: 720px) { .bento__ancho { grid-column: 1 / -1; } }
@media (min-width: 1080px) {
    .bento__ancho { flex-direction: row; align-items: center; }
    .bento__ancho .panel__texto { flex: 1; max-width: 30rem; }
    .bento__ancho > :last-child { flex: 1.2; }

    /* Estadísticas ocupa dos de las tres columnas, junto a «anuncios». */
    .bento__doble { grid-column: span 2; flex-direction: row; align-items: center; }
    .bento__doble .panel__texto { flex: 0.8; }
    .bento__doble > :last-child { flex: 1.2; }
}
@media (min-width: 720px) and (max-width: 1079px) { .bento__doble { grid-column: 1 / -1; } }

.canales-tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 560px) { .canales-tarjetas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.canales-tarjetas li {
    display: grid; align-content: start; gap: 0.15rem; padding: 1rem;
    border-radius: var(--r-lg);
    box-shadow: inset 0 0 0 1px var(--anillo);
    transition: box-shadow 200ms ease;
}
.canales-tarjetas li:hover { box-shadow: inset 0 0 0 1px currentColor; }
.canales-tarjetas .ico { width: 1.6rem; height: 1.6rem; margin-bottom: 0.4rem; }
.canales-tarjetas span { color: var(--tinta); font-weight: 700; }
.canales-tarjetas small { color: var(--tinta-2); font-size: 0.8125rem; }

/*
 * Lo que aún no se puede conectar se distingue sin depender del color: borde
 * discontinuo y la palabra «Próximamente». Ocupa la fila entera para no dejar
 * un hueco con cinco tarjetas en dos columnas.
 */
.canales-tarjetas__pronto {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr; column-gap: 0.85rem; align-items: center;
    box-shadow: none !important;
    border: 1px dashed var(--slate-300);
}
.canales-tarjetas__pronto .ico { grid-row: span 2; margin-bottom: 0; }
.canales-tarjetas__pronto span { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.pronto {
    display: inline-flex; align-items: center;
    padding: 0.1rem 0.5rem; border-radius: 999px;
    background: #f1f5f9; color: var(--tinta-2);
    font-size: 0.6875rem; font-weight: 700; font-style: normal; letter-spacing: 0.02em;
}

/* En la línea del hero, sobre navy: el canal un tono apagado y la pastilla clara. */
.canal-pronto { opacity: 0.85; }
.canal-pronto .pronto {
    background: rgb(255 255 255 / 0.08); color: var(--slate-300);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

.mini-embudo { display: grid; gap: 0.4rem; margin-top: auto; padding-top: 1.5rem; }
.mini-embudo li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.55rem 0.8rem; border-radius: var(--r-md);
    background: #f8fafc; font-size: 0.875rem; font-weight: 600;
}
.mini-embudo li:nth-child(1) { margin-right: 0; }
.mini-embudo li:nth-child(2) { margin-right: 8%; }
.mini-embudo li:nth-child(3) { margin-right: 16%; }
.mini-embudo li:nth-child(4) { margin-right: 24%; }
.mini-embudo b { font-weight: 700; font-variant-numeric: tabular-nums; }
.mini-embudo__ganado { background: var(--papel) !important; box-shadow: inset 0 0 0 1px var(--navy-700); }

.vendedores { display: grid; gap: 0.6rem; margin-top: auto; padding-top: 1.5rem; }
.vendedores li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.vendedores small { color: var(--tinta-2); font-size: 0.8125rem; font-weight: 600; }
.insignia {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.2rem 0.65rem 0.2rem 0.2rem; border-radius: 999px;
    font-size: 0.8125rem; font-weight: 700; color: var(--papel);
}
.insignia i {
    display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: rgb(255 255 255 / 0.25); font-style: normal; font-size: 0.625rem;
}
.v-azul { background: #0877cd; }
.v-menta { background: #55efc4; color: var(--tinta); }
.v-menta i { background: rgb(0 0 0 / 0.1); }
.v-naranja { background: #e17055; }

.avisos { display: grid; gap: 0.5rem; margin-top: auto; padding-top: 1.5rem; }
.avisos li {
    display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
    padding: 0.6rem 0.8rem; border-radius: var(--r-md);
    box-shadow: inset 3px 0 0 #f59e0b, inset 0 0 0 1px var(--anillo);
    font-size: 0.875rem;
}
.avisos b { font-weight: 700; }
.avisos span { color: var(--tinta-2); font-size: 0.8125rem; white-space: nowrap; }

.ventana { display: grid; gap: 0.4rem; margin-top: auto; padding-top: 1.5rem; }
.ventana__fila { display: flex; justify-content: space-between; font-size: 0.8125rem; font-weight: 700; }
.ventana__fila span:last-child { color: var(--tinta-2); font-weight: 600; }
.ventana__fila .ambar { color: var(--ambar) !important; }
.ventana__barra { height: 0.4rem; border-radius: 999px; background: #eef2f6; overflow: hidden; margin-bottom: 0.5rem; }
.ventana__barra i { display: block; height: 100%; width: var(--lleno); border-radius: inherit; background: var(--navy-700); }
.ventana__barra i.ambar { background: #f59e0b; }

.codigo {
    margin: auto 0 0; margin-top: 1.5rem; padding: 0.9rem 1rem;
    border-radius: var(--r-lg); background: var(--navy-900); color: var(--slate-300);
    font: 600 0.8125rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow-x: auto; white-space: pre;
}
.codigo .t { color: #7dd3fc; }
.codigo .a { color: var(--brand-300); }
.codigo .s { color: #fcd34d; }

.ruta { display: grid; gap: 0.35rem; margin-top: auto; padding-top: 1.5rem; }
.ruta li {
    position: relative; padding: 0.5rem 0.8rem; border-radius: var(--r-md);
    background: #f8fafc; font-size: 0.8125rem; font-weight: 600;
}
.ruta li:nth-child(2) { margin-left: 0.9rem; }
.ruta li:nth-child(3) { margin-left: 1.8rem; box-shadow: inset 0 0 0 1px var(--navy-700); }

.grafica { padding: 1.25rem; border-radius: var(--r-lg); background: #f8fafc; }
.grafica__cabeza { display: flex; justify-content: space-between; font-size: 0.875rem; font-weight: 700; }
.grafica__cabeza b { color: var(--tinta); }
.grafica__barras { display: flex; align-items: flex-end; gap: 0.6rem; height: 9rem; margin-top: 1rem; }
.grafica__barras i {
    flex: 1; height: var(--alto); border-radius: 0.35rem 0.35rem 0.15rem 0.15rem;
    background: #cfd6e0;
    transform-origin: bottom; transition: transform 700ms var(--ease-salida);
}
.grafica__barras i.actual { background: var(--navy-700); }
.grafica__nota { margin-top: 0.75rem !important; font-size: 0.75rem !important; color: var(--tinta-2); }

/* ── Pasos ────────────────────────────────────────────── */

.pasos { display: grid; gap: 1.25rem; counter-reset: paso; }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pasos li {
    position: relative; padding: 1.75rem; border-radius: var(--r-xl);
    background: var(--papel); box-shadow: 0 0 0 1px var(--anillo);
}
.pasos__numero {
    display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: var(--navy-900); color: var(--papel); font-weight: 700; font-size: 0.9375rem;
}
.pasos h3 { margin-top: 1.25rem; font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.015em; }
.pasos p { margin-top: 0.5rem; color: var(--tinta-2); font-size: 0.9375rem; }

/* ── La IA ────────────────────────────────────────────── */

.ia__cabeza { position: relative; max-width: 44rem; }
.ia__fila { position: relative; margin-top: 3.5rem; }
/* Los tres principios, en una fila bajo los modos, separados por una línea. */
.ia__fila { padding-top: 3rem; border-top: 1px solid rgb(255 255 255 / 0.08); }
.ia__bajada { margin-top: 1.25rem; max-width: 38rem; color: var(--slate-300); font-size: 1.0625rem; }

/*
 * Los dos modos de la IA, a la par. El violeta es de la IA, así que aquí
 * está en su casa: en el icono y en el filo de arriba de cada tarjeta.
 */
.modos { position: relative; display: grid; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 860px) { .modos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.modo {
    display: flex; flex-direction: column;
    padding: 2rem; border-radius: var(--r-xl);
    background: var(--navy-800);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), inset 0 1px 0 oklch(70.2% 0.183 293.541 / 0.4);
}
.modo__cabeza { display: flex; align-items: center; gap: 1rem; }
.modo__ico {
    display: grid; place-items: center; width: 3rem; height: 3rem; flex-shrink: 0;
    border-radius: var(--r-lg);
    background: oklch(54.1% 0.281 293.009 / 0.16);
    box-shadow: inset 0 0 0 1px oklch(70.2% 0.183 293.541 / 0.35);
    color: oklch(78.5% 0.115 293.756);
}
.modo__ico .ico { width: 1.4rem; height: 1.4rem; }
.modo h3 { font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.modo__lema { margin-top: 0.15rem; color: oklch(78.5% 0.115 293.756); font-size: 0.875rem; font-weight: 700; }
.modo > p { margin-top: 1.25rem; color: var(--slate-300); font-size: 1rem; }
.modo__lista { display: grid; gap: 0.6rem; margin-top: 1.25rem; }
.modo__lista li { position: relative; padding-left: 1.6rem; color: var(--papel); font-size: 0.9375rem; font-weight: 600; }
.modo__lista li::before {
    content: ""; position: absolute; left: 0; top: 0.2rem; width: 1.05rem; height: 1.05rem;
    background: oklch(78.5% 0.115 293.756);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.modo__muestra {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
    margin-top: auto; padding-top: 1.75rem;
}
.modo__chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.75rem; border-radius: 999px;
    background: oklch(54.1% 0.281 293.009 / 0.14); color: oklch(85% 0.08 293.756);
    font-size: 0.8125rem; font-weight: 700;
}
.modo__accion {
    padding: 0.45rem 0.85rem; border-radius: var(--r-md);
    background: var(--papel); color: var(--navy-900); font-size: 0.8125rem; font-weight: 700;
}
.modo__accion--suave { background: transparent; color: var(--slate-400); padding-inline: 0; }

.principios { display: grid; gap: 2rem; }
@media (min-width: 860px) { .principios { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.principios li { display: flex; gap: 1rem; }
.principios .ico { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; color: var(--slate-300); }
.principios h3 { font-size: 1.0625rem; font-weight: 700; }
.principios p { margin-top: 0.25rem; color: var(--slate-400); font-size: 0.9375rem; }

/* El violeta es de la IA y de nadie más: aquí enmarca lo que ella hace. */
.ia__panel {
    padding: 2rem; border-radius: var(--r-xl);
    background: var(--navy-800);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), inset 0 1px 0 oklch(70.2% 0.183 293.541 / 0.35);
}
.ia__panel h3 { font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.ia__panel > p { margin-top: 0.75rem; color: var(--slate-300); font-size: 0.9375rem; }
.ia__casos { display: grid; gap: 0.5rem; margin-top: 1.5rem; }
.ia__casos li {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem; border-radius: var(--r-lg);
    background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
    font-size: 0.9375rem; font-weight: 600;
}
.ia__casos .ico { color: oklch(78.5% 0.115 293.756); }
.ia__pie {
    display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 1.5rem;
    color: var(--slate-400); font-size: 0.875rem;
}
.ia__pie .ico { margin-top: 0.3rem; }

/* ── Planes ───────────────────────────────────────────── */

.planes { display: grid; gap: 1.25rem; }
@media (min-width: 720px) { .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .planes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.plan {
    position: relative; display: flex; flex-direction: column;
    padding: 1.75rem; border-radius: var(--r-xl);
    background: var(--papel); box-shadow: 0 0 0 1px var(--anillo);
}
.plan h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.plan__gancho { margin-top: 0.4rem; min-height: 3rem; color: var(--tinta-2); font-size: 0.9375rem; line-height: 1.45; }
.plan__precio { display: grid; margin-block: 1.5rem; }
/* Sin precios publicados: la tarjeta dice para qué tamaño de equipo es. */
.plan__equipo { display: grid; margin-block: 1.5rem; }
.plan__equipo b { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.plan__equipo span { margin-top: 0.35rem; color: var(--tinta-2); font-size: 0.875rem; font-weight: 600; }
.plan--destacado .plan__equipo span { color: var(--slate-300); }
.plan__precio b { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__precio span { margin-top: 0.4rem; color: var(--tinta-2); font-size: 0.875rem; font-weight: 600; }
.plan .boton { width: 100%; }
@media (min-width: 1180px) { .plan__gancho { min-height: 4.1rem; } }

.plan__lista { display: grid; gap: 0.6rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--anillo); }
.plan__lista li {
    position: relative; padding-left: 1.6rem; font-size: 0.9375rem; line-height: 1.45;
}
.plan__lista li::before {
    content: ""; position: absolute; left: 0; top: 0.2rem; width: 1.05rem; height: 1.05rem;
    background: var(--brand-800);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.plan--destacado { background: var(--navy-900); color: var(--papel); box-shadow: 0 30px 60px -25px rgb(21 24 31 / 0.55); }
.plan--destacado .plan__gancho,
.plan--destacado .plan__precio span { color: var(--slate-300); }
.plan--destacado .plan__lista { border-color: rgb(255 255 255 / 0.12); }
.plan--destacado .plan__lista li::before { background: var(--brand-500); }
.plan__sello {
    position: absolute; top: 1.75rem; right: 1.75rem;
    padding: 0.2rem 0.6rem; border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
    color: var(--brand-300); font-size: 0.75rem; font-weight: 700;
}

/* ── Preguntas ────────────────────────────────────────── */

.preguntas { display: grid; gap: 2rem; }
@media (min-width: 960px) { .preguntas { grid-template-columns: 1fr 1.6fr; gap: 5rem; } }

.preguntas__lista {
    border-radius: var(--r-xl); background: var(--papel); box-shadow: 0 0 0 1px var(--anillo);
    padding-inline: 1.5rem;
}
.preguntas details { border-bottom: 1px solid var(--anillo); }
.preguntas details:last-child { border-bottom: 0; }
.preguntas summary {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    min-height: 3.75rem; padding-block: 1rem;
    font-size: 1.0625rem; font-weight: 700; cursor: pointer; list-style: none;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary .ico { color: var(--tinta-2); transition: transform 220ms var(--ease-salida); }
.preguntas details[open] summary .ico { transform: rotate(180deg); }
.preguntas details p { padding-bottom: 1.25rem; max-width: 40rem; color: var(--tinta-2); font-size: 0.9375rem; }

/* ── Cierre y pie ─────────────────────────────────────── */

.cierre { position: relative; padding-block: 7rem; background: var(--navy-950); overflow: hidden; text-align: center; }
.cierre__caja { position: relative; display: grid; justify-items: center; }
.cierre__isotipo { width: 3.5rem; height: 3.5rem; margin-bottom: 2rem; }
.cierre .titular { max-width: 46rem; color: var(--papel); }
.cierre p { margin-top: 1.25rem; color: var(--slate-300); font-size: 1.125rem; }

.pie { border-top: 1px solid rgb(255 255 255 / 0.06); background: var(--navy-950); padding-block: 2.5rem; }
.pie__fila { display: grid; gap: 1rem; justify-items: center; text-align: center; }
.pie__fila img { width: 6.5rem; opacity: 0.85; }
.pie__hecho { display: flex; align-items: center; gap: 0.35rem; color: var(--slate-400); font-size: 0.8125rem; font-weight: 700; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 1rem; color: var(--slate-400); font-size: 0.8125rem; font-weight: 600; }
.pie__legal a { display: inline-flex; align-items: center; min-height: 2.75rem; transition: color 160ms ease; }
.pie__legal a:hover { color: var(--brand-400); }

/* ── Entrada al hacer scroll ──────────────────────────── */

.revelar { transition: opacity 600ms var(--ease-salida), transform 600ms var(--ease-salida); }
.js .revelar:not(.visible) { opacity: 0; transform: translateY(16px); }


/* ── La luz de la portada ─────────────────────────────── */
/*
 * Pedido expreso para la portada: que el hero brille. Se hace con los dos
 * colores de la marca —el verde y el navy llevado a azul frío— y nada más, y
 * todo se apaga con movimiento reducido. Es la excepción a «nada de halos»:
 * vive solo aquí, en la cara de fuera de la consola.
 */

.portada { --x: 70%; --y: 30%; --px: 0; --py: 0; isolation: isolate; }

.portada__luz { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.aurora {
    position: absolute; border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
}
.aurora--verde {
    width: 46rem; height: 34rem;
    right: -8rem; top: 2rem;
    background: radial-gradient(closest-side, rgb(152 199 0 / 0.42), rgb(152 199 0 / 0.12) 60%, transparent);
    transform: translate(calc(var(--px) * -24px), calc(var(--py) * -18px));
    animation: deriva-verde 22s ease-in-out infinite alternate;
}
.aurora--azul {
    width: 40rem; height: 30rem;
    left: -12rem; top: 14rem;
    background: radial-gradient(closest-side, rgb(56 120 255 / 0.30), rgb(43 51 68 / 0.30) 60%, transparent);
    transform: translate(calc(var(--px) * 18px), calc(var(--py) * 14px));
    animation: deriva-azul 26s ease-in-out infinite alternate;
}

/* Un haz de luz cenital, como un foco sobre el escenario. */
.haz {
    position: absolute; left: 50%; top: -10rem;
    width: 70rem; height: 46rem; transform: translateX(-50%);
    background: conic-gradient(from 180deg at 50% 0%,
        transparent 160deg, rgb(255 255 255 / 0.07) 176deg, rgb(192 228 85 / 0.10) 180deg,
        rgb(255 255 255 / 0.07) 184deg, transparent 200deg);
    -webkit-mask-image: linear-gradient(to bottom, black 10%, transparent 85%);
    mask-image: linear-gradient(to bottom, black 10%, transparent 85%);
    filter: blur(6px);
}

@keyframes deriva-verde {
    from { translate: 0 0; scale: 1; }
    to   { translate: -6rem 3rem; scale: 1.12; }
}
@keyframes deriva-azul {
    from { translate: 0 0; scale: 1; }
    to   { translate: 5rem -2rem; scale: 1.08; }
}

/* La rejilla iluminada: solo se ve donde está el cursor. */
.portada .rejilla--foco {
    background-image: radial-gradient(circle at var(--x) var(--y), rgb(152 199 0 / 0.10), transparent 16rem);
    background-size: 100% 100%;
    -webkit-mask-image: radial-gradient(18rem circle at var(--x) var(--y), black, transparent 70%);
    mask-image: radial-gradient(18rem circle at var(--x) var(--y), black, transparent 70%);
    opacity: 0;
    transition: opacity 400ms ease;
}
.portada[data-foco] .rejilla--foco { opacity: 1; }


/*
 * La rejilla de la portada avanza: sube una celda cada --paso-rejilla, en
 * bucle y sin costura, porque al final del recorrido queda igual que al
 * principio. Se mueve una capa interior con transform —no background-position,
 * que repintaría la pantalla entera en cada fotograma— y la máscara se queda
 * quieta en el padre para que el desvanecido no viaje con ella.
 */
.portada { --paso-rejilla: 6s; }
.portada .rejilla {
    background-image: none;
    overflow: hidden;
}
.portada .rejilla::before {
    content: ""; position: absolute; inset: 0 0 -4.5rem 0;
    background-image:
        linear-gradient(to right, rgb(255 255 255 / 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(255 255 255 / 0.05) 1px, transparent 1px);
    background-size: 4.5rem 4.5rem;
    background-position: center top;
    animation: avance-rejilla var(--paso-rejilla) linear infinite;
    will-change: transform;
}
.portada .rejilla--foco::before {
    background-image:
        linear-gradient(to right, rgb(192 228 85 / 0.32) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(192 228 85 / 0.32) 1px, transparent 1px);
}
@keyframes avance-rejilla { to { transform: translateY(-4.5rem); } }

/* Destellos en los cruces de la rejilla: misma retícula de 4.5rem. */
.destellos { position: absolute; inset: 0; pointer-events: none; }
.destellos i {
    position: absolute;
    left: calc(50% - 2.25rem + var(--col) * 4.5rem);
    top: calc(var(--fila) * 4.5rem);
    width: 5px; height: 5px; margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: var(--brand-300);
    box-shadow: 0 0 6px 2px rgb(192 228 85 / 0.7), 0 0 22px 6px rgb(152 199 0 / 0.25);
    opacity: 0;
    animation: destello calc(var(--celdas) * var(--paso-rejilla)) linear infinite;
}
/*
 * Cada destello sube exactamente las celdas que recorre la rejilla en su
 * ciclo, así que no se despega de su cruce; y nace y muere apagado, así que
 * el salto de vuelta al empezar el ciclo no se ve.
 */
@keyframes destello {
    0%   { opacity: 0;   transform: translateY(0) scale(0.4); }
    45%  { opacity: 0.9; transform: translateY(calc(var(--celdas) * -2.025rem)) scale(1); }
    55%  { opacity: 0.9; transform: translateY(calc(var(--celdas) * -2.475rem)) scale(1); }
    100% { opacity: 0;   transform: translateY(calc(var(--celdas) * -4.5rem)) scale(0.4); }
}

/* La maqueta: halo detrás, filo de luz, reflejo de cristal y reflejo en el suelo. */
.maqueta-marco { position: relative; }
.maqueta-marco::before {
    content: ""; position: absolute; inset: -30% -25%; z-index: -1;
    /* Cada elipse llega a transparente antes del borde de la caja: si no, el corte se ve. */
    background:
        radial-gradient(36% 36% at 58% 42%, rgb(152 199 0 / 0.30), rgb(152 199 0 / 0.08) 55%, transparent 100%),
        radial-gradient(34% 34% at 40% 60%, rgb(56 120 255 / 0.16), rgb(56 120 255 / 0.05) 55%, transparent 100%);
    pointer-events: none;
}
/* El filo: un borde de 1px que se ilumina arriba y se apaga abajo. */
.maqueta-marco::after {
    content: ""; position: absolute; inset: -1px; border-radius: calc(var(--r-xl) + 1px);
    padding: 1px; pointer-events: none;
    background: linear-gradient(160deg, rgb(255 255 255 / 0.65), rgb(192 228 85 / 0.45) 30%, rgb(255 255 255 / 0.04) 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/*
 * La sombra de suelo: una elipse difusa bajo la ventana, como si flotara a
 * un palmo del plano. Antes era -webkit-box-reflect, que Safari pintaba
 * desplazado en cuanto el marco llevaba transform.
 */
.maqueta-suelo {
    position: absolute; left: 8%; right: 8%; bottom: -2.25rem; height: 3rem; z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.25) 55%, transparent);
    filter: blur(10px);
    pointer-events: none;
}

/* El reflejo de cristal: cruza la maqueta una vez al cargar y otra al pasar por encima. */
.maqueta::after {
    content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 0.55) 48%, rgb(255 255 255 / 0.15) 52%, transparent 62%);
    transform: translateX(-110%);
    animation: reflejo 1.6s var(--ease-salida) 0.5s 1 forwards;
}
.maqueta-marco:hover .maqueta::after { animation: reflejo-2 1.2s var(--ease-salida) 1 forwards; }
@keyframes reflejo { to { transform: translateX(110%); } }
@keyframes reflejo-2 { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

/*
 * En escritorio la maqueta flota un poco hacia el cursor. Sin giro en 3D: la
 * perspectiva emborrona el texto, y lo que se enseña es justo el texto.
 */
@media (min-width: 1080px) and (hover: hover) {
    .maqueta-marco {
        transform: translate(calc(var(--px) * 8px), calc(var(--py) * 6px));
        transition: transform 600ms var(--ease-salida);
    }
}

@media (max-width: 767px) {
    .aurora--verde { width: 26rem; height: 22rem; right: -10rem; top: 26rem; }
    .aurora--azul { width: 24rem; height: 20rem; left: -10rem; top: 6rem; }
    .haz { width: 40rem; }
}


/* ── La sección de la IA ──────────────────────────────── */
/*
 * La única sección en violeta, porque el violeta es de la IA. Aquí se permite
 * lo que el resto de la página no lleva —red neuronal, núcleo que gira, filos
 * de luz— porque lo que se vende en esta sección es justo la máquina.
 */

@property --giro {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.ia {
    --v-300: oklch(81.1% 0.111 293.571);
    --v-400: oklch(70.2% 0.183 293.541);
    --v-500: oklch(60.6% 0.25 292.717);
    --v-600: oklch(54.1% 0.281 293.009);
    background: radial-gradient(120% 70% at 50% 0%, #1d1830 0%, var(--navy-950) 55%);
    isolation: isolate;
}

.ia__fondo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }

.ia__aurora { position: absolute; border-radius: 50%; filter: blur(100px); }
.ia__aurora--1 {
    width: 48rem; height: 30rem; left: 50%; top: -8rem; margin-left: -24rem;
    background: radial-gradient(closest-side, oklch(54.1% 0.281 293.009 / 0.45), transparent);
    animation: aurora-ia-1 18s ease-in-out infinite alternate;
}
.ia__aurora--2 {
    width: 36rem; height: 26rem; right: -10rem; bottom: 10%;
    background: radial-gradient(closest-side, oklch(62% 0.2 265 / 0.30), transparent);
    animation: aurora-ia-2 22s ease-in-out infinite alternate;
}
@keyframes aurora-ia-1 { to { translate: 6rem 4rem; scale: 1.15; } }
@keyframes aurora-ia-2 { to { translate: -8rem -3rem; scale: 1.1; } }

.ia__red { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; }

.rejilla--violeta {
    background-image:
        linear-gradient(to right, oklch(70.2% 0.183 293.541 / 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, oklch(70.2% 0.183 293.541 / 0.07) 1px, transparent 1px);
}

/* El haz que barre la sección de arriba abajo, como un escáner. */
.ia__escaneo {
    position: absolute; left: 0; right: 0; top: 0; height: 7rem;
    background: linear-gradient(to bottom, transparent, oklch(70.2% 0.183 293.541 / 0.04) 70%, oklch(81.1% 0.111 293.571 / 0.16) 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
    mix-blend-mode: screen;
    animation: escaneo 9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
/* Anima «top» y no transform: el porcentaje tiene que ser del alto de la sección. */
@keyframes escaneo {
    from { top: -10rem; }
    to   { top: 100%; }
}

/* Grano fino: textura de pantalla, no de papel. */
.ia__grano {
    position: absolute; inset: 0; opacity: 0.07; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Cabecera centrada con el núcleo encima. */
.ia__cabeza { margin-inline: auto; max-width: 48rem; text-align: center; }
.ia__cabeza .ia__bajada { margin-inline: auto; }

.nucleo { position: relative; width: 7.5rem; height: 7.5rem; margin: 0 auto 2.25rem; }
.nucleo__centro {
    position: absolute; inset: 2.1rem; display: grid; place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0%, var(--v-300) 18%, var(--v-600) 60%, #2a1a5e 100%);
    box-shadow: 0 0 24px 4px oklch(60.6% 0.25 292.717 / 0.55), 0 0 70px 20px oklch(54.1% 0.281 293.009 / 0.25);
    color: #fff;
    animation: latido 3.2s ease-in-out infinite;
}
.nucleo__centro .ico { width: 1.4rem; height: 1.4rem; }
.nucleo__anillo { position: absolute; border-radius: 50%; }
.nucleo__anillo--1 {
    inset: 0.9rem; border: 1px solid oklch(70.2% 0.183 293.541 / 0.5);
    border-top-color: var(--v-300); border-right-color: transparent;
    animation: girar 4s linear infinite;
}
.nucleo__anillo--2 {
    inset: 0; border: 1px dashed oklch(70.2% 0.183 293.541 / 0.35);
    animation: girar 14s linear infinite reverse;
}
.nucleo__anillo--3 {
    inset: -1.25rem;
    background: conic-gradient(from 0deg, transparent 0 75%, oklch(81.1% 0.111 293.571 / 0.5) 90%, transparent);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
    mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
    animation: girar 6s linear infinite;
}
@keyframes girar { to { rotate: 360deg; } }
@keyframes latido {
    0%, 100% { scale: 1; box-shadow: 0 0 24px 4px oklch(60.6% 0.25 292.717 / 0.55), 0 0 70px 20px oklch(54.1% 0.281 293.009 / 0.22); }
    50% { scale: 1.06; box-shadow: 0 0 30px 6px oklch(60.6% 0.25 292.717 / 0.7), 0 0 90px 28px oklch(54.1% 0.281 293.009 / 0.32); }
}

.degradado-ia {
    background: linear-gradient(90deg, var(--v-300), #e9d5ff, var(--v-400), var(--v-300));
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: brillo-ia 6s linear infinite;
}
@keyframes brillo-ia { to { background-position: 300% 0; } }

/* Las tarjetas de los modos: cristal sobre la red, filo de luz que gira y foco bajo el cursor. */
.modos { margin-top: 3.5rem; }
.modo {
    position: relative; isolation: isolate;
    --mx: 50%; --my: 0%;
    background: linear-gradient(180deg, rgb(30 34 44 / 0.78), rgb(21 24 31 / 0.82));
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 0 0 1px oklch(70.2% 0.183 293.541 / 0.18), 0 30px 60px -30px oklch(54.1% 0.281 293.009 / 0.45);
}
.modo::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 2;
    background: conic-gradient(from var(--giro), transparent 0 62%, oklch(70.2% 0.183 293.541 / 0.9) 78%, #f5f3ff 84%, oklch(70.2% 0.183 293.541 / 0.9) 90%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: filo 6s linear infinite;
    pointer-events: none;
}
.modo:nth-child(2)::before { animation-delay: -3s; }
@keyframes filo { to { --giro: 360deg; } }

.modo::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
    background: radial-gradient(22rem circle at var(--mx) var(--my), oklch(60.6% 0.25 292.717 / 0.16), transparent 65%);
    opacity: 0; transition: opacity 300ms ease;
    pointer-events: none;
}
.modo:hover::after { opacity: 1; }

.modo__ico {
    background: linear-gradient(145deg, oklch(54.1% 0.281 293.009 / 0.35), oklch(54.1% 0.281 293.009 / 0.1));
    box-shadow: inset 0 0 0 1px oklch(70.2% 0.183 293.541 / 0.5), 0 0 22px oklch(54.1% 0.281 293.009 / 0.35);
}

/* La mini conversación de cada modo. */
.sim {
    display: grid; gap: 0.5rem; margin-top: auto; padding: 1rem; margin-top: 1.75rem;
    border-radius: var(--r-lg);
    background: rgb(10 12 18 / 0.55);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
    font-size: 0.8125rem; line-height: 1.45;
    min-height: 11rem; align-content: start;
}
.sim__hora { justify-self: center; color: var(--slate-400); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; }
.sim__burbuja { max-width: 85%; padding: 0.5rem 0.75rem; border-radius: 0.9rem; }
.sim__burbuja--cliente { justify-self: start; background: rgb(255 255 255 / 0.09); color: var(--papel); border-bottom-left-radius: 0.25rem; }
.sim__burbuja--ia {
    justify-self: end; color: #f5f3ff; border-bottom-right-radius: 0.25rem;
    background: linear-gradient(135deg, var(--v-600), oklch(48% 0.24 285));
    box-shadow: 0 6px 20px -6px oklch(54.1% 0.281 293.009 / 0.6);
}
.sim__compositor {
    position: relative; min-height: 4.25rem; padding: 0.6rem 0.75rem; overflow: hidden;
    border-radius: var(--r-md);
    box-shadow: inset 0 0 0 1px oklch(70.2% 0.183 293.541 / 0.45);
    background: oklch(54.1% 0.281 293.009 / 0.08);
}
.sim__pensando {
    position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 0.35rem;
    color: var(--v-300); font-weight: 700;
}
.sim__texto { color: var(--papel); }
.sim__escribiendo {
    display: none; justify-self: end; gap: 0.25rem; padding: 0.6rem 0.8rem; border-radius: 0.9rem;
    background: oklch(54.1% 0.281 293.009 / 0.25);
}
.sim__escribiendo i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--v-300); animation: punto 1s ease-in-out infinite; }
.sim__escribiendo i:nth-child(2) { animation-delay: 0.15s; }
.sim__escribiendo i:nth-child(3) { animation-delay: 0.3s; }
@keyframes punto { 0%, 100% { opacity: 0.3; translate: 0 0; } 50% { opacity: 1; translate: 0 -3px; } }

.sim__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.25rem; }

.sim > *, .sim__texto, .sim__pie { transition: opacity 380ms var(--ease-salida), transform 380ms var(--ease-salida); }

/* Fases (las pone app.js). Sin guion se ve la escena terminada. */
.sim[data-fase="inicio"] .sim__burbuja--cliente,
.sim[data-fase="inicio"] .sim__burbuja--ia,
.sim[data-fase="inicio"] .sim__texto,
.sim[data-fase="inicio"] .sim__pie,
.sim[data-fase="cliente"] .sim__burbuja--ia,
.sim[data-fase="cliente"] .sim__texto,
.sim[data-fase="cliente"] .sim__pie,
.sim[data-fase="pensando"] .sim__burbuja--ia,
.sim[data-fase="pensando"] .sim__texto,
.sim[data-fase="pensando"] .sim__pie { opacity: 0; transform: translateY(6px); }

.sim[data-fase="pensando"] .sim__pensando { display: flex; }
.sim[data-fase="pensando"] .sim__escribiendo { display: inline-flex; }
.sim[data-fase="pensando"] .sim__burbuja--ia { display: none; }
.sim[data-fase="pensando"] .sim__compositor::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 30%, oklch(81.1% 0.111 293.571 / 0.28) 50%, transparent 70%);
    transform: translateX(-100%); animation: barrido 1.3s linear infinite;
}

.ia .principios .ico { color: var(--v-300); filter: drop-shadow(0 0 8px oklch(60.6% 0.25 292.717 / 0.6)); }
.ia__fila { border-top-color: oklch(70.2% 0.183 293.541 / 0.15); }

/* ── Movimiento reducido ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
    .js .revelar:not(.visible) { opacity: 1; transform: none; }
    .destellos { display: none; }
    .maqueta::after { display: none; }
    .maqueta-marco { transform: none !important; }
    .ia__escaneo { display: none; }
    .diapo:not(.es-activa) { transform: none; }
    .aviso-push { transition: none; }
}

.sin-corte { white-space: nowrap; }
.carrusel__pausa .ico { fill: currentColor; stroke: none; }


/* ── Documentos legales ───────────────────────────────── */
/*
 * El mismo mundo que la portada: navy con la rejilla y una luz de escena, y
 * el documento en un panel blanco encima, que es donde se lee. El índice
 * queda fijo al lado y marca la sección por la que vas.
 */

.pagina-legal { background: var(--navy-950); color: var(--slate-300); }
.legal { position: relative; min-height: 100vh; overflow: clip; }
/*
 * La luz de escena es un degradado y no un círculo con filter: blur, igual
 * que los halos del hero. Safari no
 * repinta bien un desenfoque grande: al pasar el cursor por un botón encima,
 * dejaba un rectángulo de navy liso alrededor.
 */
.legal__luz {
    position: absolute; top: -30rem; left: 50%; width: 90rem; height: 60rem; margin-left: -45rem;
    background: radial-gradient(closest-side, rgb(152 199 0 / 0.13), rgb(152 199 0 / 0.05) 55%, transparent);
    pointer-events: none;
}
.legal__ancho { position: relative; width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .legal__ancho { padding-inline: 2rem; } }

.legal__cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; }
.legal__volver {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 0.9rem;
    border-radius: var(--r-lg); color: var(--slate-300); font-size: 0.875rem; font-weight: 700;
    transition: background-color 160ms ease, color 160ms ease;
}
.legal__volver:hover { background: rgb(255 255 255 / 0.08); color: var(--papel); }

.legal__principal { padding-top: 1.5rem; padding-bottom: 5rem; }
.legal__entrada h1 {
    max-width: 40rem; color: var(--papel);
    font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance;
}
.legal__resumen { margin-top: 1rem; max-width: 36rem; color: var(--slate-400); font-size: 1rem; line-height: 1.6; }
.legal__fecha { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.25rem; color: var(--slate-400); font-size: 0.8125rem; font-weight: 700; }

.legal__rejilla { display: grid; gap: 2rem; margin-top: 2.5rem; align-items: start; }
@media (min-width: 1024px) { .legal__rejilla { grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; } }
.legal__columna { min-width: 0; }

.doc-indice { display: grid; gap: 0.1rem; }
.doc-indice a {
    display: block; padding: 0.45rem 0.7rem; border-radius: var(--r-md);
    color: var(--slate-400); font-size: 0.8125rem; font-weight: 600; line-height: 1.35;
    transition: color 160ms ease, background-color 160ms ease;
}
.doc-indice a:hover { color: var(--papel); background: rgb(255 255 255 / 0.05); }
.doc-indice a[aria-current="true"] { color: var(--papel); background: rgb(255 255 255 / 0.07); box-shadow: inset 2px 0 0 var(--brand-500); }

.doc-indice--lateral { display: none; }
@media (min-width: 1024px) {
    .doc-indice--lateral {
        display: grid; position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto;
        margin-left: -0.7rem; scrollbar-width: thin;
    }
    .doc-indice-movil { display: none; }
}

.doc-indice-movil {
    margin-bottom: 1.25rem; border-radius: var(--r-lg);
    background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
}
.doc-indice-movil summary {
    display: flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0 1rem;
    color: var(--papel); font-size: 0.875rem; font-weight: 700; cursor: pointer; list-style: none;
}
.doc-indice-movil summary::-webkit-details-marker { display: none; }
.doc-indice-movil__flecha { margin-left: auto; transition: transform 200ms ease; }
.doc-indice-movil[open] .doc-indice-movil__flecha { transform: rotate(180deg); }
.doc-indice-movil .doc-indice { padding: 0.5rem; border-top: 1px solid rgb(255 255 255 / 0.1); }

/* El documento: el panel blanco de lectura. */
.doc-legal {
    padding: 1.5rem; border-radius: var(--r-xl);
    background: var(--papel); color: var(--tinta);
    box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.6);
    font-size: 0.9375rem; line-height: 1.7;
}
@media (min-width: 640px) { .doc-legal { padding: 2.5rem; } }

.doc-legal section { scroll-margin-top: 1.5rem; }
.doc-legal section + section { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--anillo); }
.doc-legal h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.doc-legal h3 { margin-top: 1.5rem; font-size: 1rem; font-weight: 700; }
.doc-legal p, .doc-legal ul, .doc-legal dl { margin-top: 0.85rem; max-width: 42rem; }
.doc-legal ul { display: grid; gap: 0.5rem; padding-left: 1.25rem; list-style: disc; }
.doc-legal li::marker { color: var(--slate-400); }
.doc-legal strong { font-weight: 700; }
.doc-legal em { font-style: normal; font-weight: 600; color: var(--tinta); background: #f1f5f9; padding: 0.05rem 0.35rem; border-radius: 0.3rem; }
.doc-legal a { color: var(--brand-800); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc-legal a:hover { text-decoration-thickness: 2px; }

/* La sección abierta por ancla se reconoce al llegar: Meta entra directo a «eliminar-datos». */
.doc-legal section:target h2 { box-shadow: inset 3px 0 0 var(--brand-500); padding-left: 0.75rem; margin-left: -0.75rem; }

.doc-permisos { display: grid; gap: 0.5rem; }
.doc-permisos div {
    display: grid; gap: 0.25rem; padding: 0.8rem 1rem; border-radius: var(--r-lg);
    background: #f8fafc; box-shadow: inset 0 0 0 1px var(--anillo);
}
@media (min-width: 640px) { .doc-permisos div { grid-template-columns: 15rem 1fr; gap: 1rem; } }
.doc-permisos dt { font: 600 0.8125rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--navy-700); overflow-wrap: anywhere; }
.doc-permisos dd { margin: 0; color: var(--tinta-2); }

.doc-legal__hermano { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--anillo); }
.doc-legal__hermano a {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.85rem;
    border-radius: var(--r-lg); text-decoration: none; font-weight: 700;
    transition: background-color 160ms ease;
}
.doc-legal__hermano a:hover { background: #f8fafc; }

.pie__legal a[aria-current="page"] { color: var(--papel); }



/* ── Sello de la conexión oficial con Meta ────────────── */
/*
 * Una línea al pie de los logos de clientes: firma la prueba social en lugar
 * de abrir otra sección. Sin caja ni fondo; una raya fina la separa de los
 * logos y el texto va al tamaño de la nota de arriba.
 */
.sello-meta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.9rem;
    max-width: 52rem; margin: 2.75rem auto 0; padding-top: 1.75rem;
    border-top: 1px solid rgb(255 255 255 / 0.08);
    color: var(--slate-400); font-size: 0.875rem; font-weight: 500; line-height: 1.5; letter-spacing: 0;
}
.clientes .sello-meta { letter-spacing: 0; }
.sello-meta b { color: var(--slate-300); font-weight: 700; }
.sello-meta__escudo { width: 1.1rem; height: 1.1rem; margin-right: 0.4rem; vertical-align: -0.2rem; color: var(--brand-400); }
.sello-meta__apis { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 0.9rem; }
.sello-meta__apis > span { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8125rem; font-weight: 600; }
.sello-meta__apis > span::before { content: none; }
@media (max-width: 639px) {
    .sello-meta { flex-direction: column; gap: 0.6rem; text-align: center; }
}

.pie__marcas { max-width: 36rem; color: var(--slate-400); font-size: 0.75rem; line-height: 1.5; text-align: center; }




/* ── El recorrido de un mensaje (sección Producto) ────── */
/*
 * Una línea de tiempo y no una rejilla: cada función entra en el momento de la
 * venta en el que sirve. La cabecera se queda fija a la izquierda mientras la
 * historia pasa, y la línea se llena en navy hasta el paso que estás leyendo:
 * es el único movimiento de la sección. Nada de verde aquí: no se pulsa.
 */
.recorrido { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
    .recorrido { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 5rem; align-items: start; }
    .recorrido__cabeza { position: sticky; top: 6.5rem; }
}
/* Solo la bajada: la ficha de debajo tiene sus propios párrafos. */
.recorrido__cabeza > p { margin-top: 1rem; max-width: 26rem; color: var(--tinta-2); font-size: 1.125rem; line-height: 1.55; }

.recorrido__pasos {
    --avance: 0;
    position: relative; display: grid; gap: 3.25rem;
}
/* La vía y su relleno: el relleno crece con el scroll hasta el paso alcanzado. */
.recorrido__pasos::before,
.recorrido__pasos::after {
    content: ""; position: absolute; top: 0.6rem; bottom: 0.6rem; width: 2px; border-radius: 2px;
    left: calc(var(--col-hora) + var(--hueco) + var(--col-nodo) / 2 - 1px);
}
.recorrido__pasos::before { background: #d7dce3; }
.recorrido__pasos::after {
    background: var(--navy-900);
    transform-origin: top; transform: scaleY(var(--avance));
}

/* La vía pasa por el centro de los nodos: hora + hueco + medio nodo. */
.recorrido__columna { --col-hora: 5.5rem; --col-nodo: 1.5rem; --hueco: 1.25rem; }
.paso { display: grid; grid-template-columns: var(--col-hora) var(--col-nodo) minmax(0, 1fr); column-gap: var(--hueco); }

.paso__hora {
    padding-top: 0.2rem; text-align: right;
    color: var(--tinta-2); font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums;
    transition: color 300ms ease;
}
.paso__nodo {
    position: relative; z-index: 1; justify-self: center; margin-top: 0.3rem;
    width: 0.95rem; height: 0.95rem; border-radius: 50%;
    background: var(--fondo-claro); box-shadow: inset 0 0 0 2px #c3c9d2;
    transition: background-color 300ms ease, box-shadow 300ms ease, transform 300ms var(--ease-salida);
}
.paso.es-alcanzado .paso__nodo { background: var(--navy-900); box-shadow: inset 0 0 0 2px var(--navy-900), 0 0 0 5px var(--fondo-claro); }
.paso.es-alcanzado .paso__hora { color: var(--tinta); }

.paso__cuerpo h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; text-wrap: balance; }
.paso__cuerpo p { margin-top: 0.55rem; max-width: 32rem; color: var(--tinta-2); font-size: 1.0625rem; line-height: 1.6; }
.paso__muestra { margin-top: 1.1rem; }

/* El fragmento de interfaz de cada paso: una sola pieza, nunca un panel entero. */
.pieza {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
    padding: 0.6rem 0.8rem; border-radius: var(--r-lg);
    background: var(--papel); box-shadow: 0 0 0 1px var(--anillo), 0 8px 20px -14px rgb(21 24 31 / 0.35);
    font-size: 0.875rem;
}
.pieza__nota { color: var(--tinta-2); font-size: 0.8125rem; font-weight: 600; }
.pieza--mensaje { gap: 0.7rem; padding-right: 1.1rem; }
.pieza--mensaje > span:last-child { display: grid; gap: 0.1rem; color: var(--tinta); }
.pieza--mensaje b { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8125rem; }
.pieza--etapas .ico { color: var(--tinta-2); }
.etapa { padding: 0.2rem 0.6rem; border-radius: 999px; background: #eef1f5; font-size: 0.8125rem; font-weight: 700; }
.etapa--antes { color: var(--tinta-2); text-decoration: line-through; text-decoration-color: #b5bcc6; background: transparent; box-shadow: inset 0 0 0 1px var(--anillo); }
.etapa--ganado { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--navy-900); color: var(--papel); }
.pieza--aviso { color: var(--ambar); }
.pieza--aviso b { color: var(--tinta); font-size: 0.875rem; }
.pieza--cifra { gap: 0.75rem; }
.pieza--cifra b { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.pieza__delta { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--tinta-2); font-size: 0.8125rem; font-weight: 700; }

@media (max-width: 639px) {
    .recorrido__columna { --col-hora: 0rem; --col-nodo: 1.25rem; --hueco: 0.9rem; }
    .recorrido__pasos { gap: 2.5rem; }
    .paso__hora { grid-column: 3; grid-row: 1; text-align: left; padding-top: 0; margin-bottom: 0.35rem; }
    .paso__nodo { grid-column: 2; grid-row: 1 / span 2; }
    .paso__cuerpo { grid-column: 3; }
}
@media (prefers-reduced-motion: reduce) {
    .recorrido__pasos::after { transform: none; }
}


/* ── El recorrido: ficha que acompaña y vía fluida ────── */

/* La punta de la vía: un punto que baja con el scroll, siempre por delante del relleno. */
.recorrido__columna { position: relative; --avance: 0; --alto-via: 0px; }
.recorrido__columna .recorrido__pasos { --avance: inherit; }
.recorrido__punta {
    position: absolute; z-index: 2; top: 0.6rem;
    left: calc(var(--col-hora) + var(--hueco) + var(--col-nodo) / 2);
    width: 0.7rem; height: 0.7rem; margin: -0.35rem 0 0 -0.35rem; border-radius: 50%;
    background: var(--navy-900);
    box-shadow: 0 0 0 4px rgb(43 51 68 / 0.18), 0 6px 16px -4px rgb(21 24 31 / 0.6);
    transform: translateY(calc(var(--avance) * var(--alto-via)));
    pointer-events: none;
}
.recorrido__punta::after {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    box-shadow: 0 0 0 1px rgb(43 51 68 / 0.35);
    animation: punta-pulso 2.4s var(--ease-salida) infinite;
}
@keyframes punta-pulso { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.recorrido__columna[data-quieta] .recorrido__punta { opacity: 0; }
.recorrido__punta { transition: opacity 300ms ease; }

/* Los nodos se encienden con un pequeño rebote al alcanzarlos. */
.paso.es-alcanzado .paso__nodo { animation: nodo-llega 520ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes nodo-llega { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }
.paso .paso__cuerpo { transition: opacity 500ms ease, transform 500ms var(--ease-salida); }
.recorrido__columna[data-viva] .paso:not(.es-alcanzado) .paso__cuerpo { opacity: 0.45; }

/* La ficha de María, debajo del título y fija con él. */
.ficha { display: none; }
@media (min-width: 1024px) {
    .ficha {
        display: block; margin-top: 2.5rem; max-width: 24rem;
        padding: 1.25rem; border-radius: var(--r-xl);
        background: var(--papel);
        box-shadow: 0 0 0 1px var(--anillo), 0 30px 60px -35px rgb(21 24 31 / 0.4);
    }
}
.ficha__cabeza { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid var(--anillo); }
.ficha__nombre { display: flex; align-items: center; gap: 0.35rem; font-size: 0.9375rem; font-weight: 700; }
.ficha__sub { color: var(--tinta-2); font-size: 0.75rem; font-weight: 600; }
.ficha__hora { color: var(--tinta-2); font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.ficha__datos { display: grid; margin: 0; }
.ficha__datos > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.75rem; border-bottom: 1px solid #eef1f5; }
.ficha__datos dt { color: var(--tinta-2); font-size: 0.8125rem; font-weight: 600; }
.ficha__datos dd { margin: 0; font-size: 0.875rem; font-weight: 600; text-align: right; }
.ficha__datos .insignia { font-size: 0.75rem; padding: 0.15rem 0.6rem 0.15rem 0.15rem; }
.ficha__datos .insignia i { width: 1.35rem; height: 1.35rem; font-size: 0.5rem; }
.ficha__vacio { color: #9aa3af; font-weight: 600; }

.ficha__aviso {
    display: flex; align-items: center; gap: 0.4rem; margin-top: 0.9rem;
    padding: 0.6rem 0.75rem; border-radius: var(--r-md);
    background: #fff7ed; color: var(--ambar); font-size: 0.8125rem;
    box-shadow: inset 0 0 0 1px #fed7aa;
}
.ficha__aviso b { color: var(--tinta); }

/* Cada cambio de un campo entra con un fundido corto, para que se note qué cambió. */
.ficha [data-campo].es-nuevo { animation: campo-cambia 520ms var(--ease-salida); }
@keyframes campo-cambia { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ficha [data-campo][hidden] { display: none; }
.ficha__datos > div:has(> dd[hidden]) { display: none; }

@media (prefers-reduced-motion: reduce) {
    .recorrido__punta { display: none; }
    .paso.es-alcanzado .paso__nodo, .ficha [data-campo].es-nuevo { animation: none; }
    .recorrido__columna[data-viva] .paso:not(.es-alcanzado) .paso__cuerpo { opacity: 1; }
}

/* ── Página de la demo ────────────────────────────────── */
/*
 * Mismo marco que los documentos legales. A la izquierda, qué va a pasar; a
 * la derecha, el formulario en un panel blanco. Campos de 16px para que el
 * iPhone no amplíe la página al enfocarlos, etiqueta siempre encima.
 */

.demo { display: grid; gap: 2.5rem; padding-top: 1.5rem; padding-bottom: 5rem; align-items: start; }
@media (min-width: 1024px) { .demo { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 4rem; } .demo__lado { position: sticky; top: 2rem; } }

.demo__lado h1 { color: var(--papel); font-size: clamp(2.25rem, 4.5vw, 3.25rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
.demo__bajada { margin-top: 1rem; max-width: 30rem; color: var(--slate-300); font-size: 1.0625rem; line-height: 1.6; }

.demo__pasos { display: grid; gap: 1.25rem; margin-top: 2.25rem; }
.demo__pasos li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; }
.demo__num {
    display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
    background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
    color: var(--papel); font-size: 0.875rem; font-weight: 700;
}
.demo__pasos h2 { color: var(--papel); font-size: 1rem; font-weight: 700; line-height: 1.35; padding-top: 0.2rem; }
.demo__pasos p { margin-top: 0.2rem; color: var(--slate-400); font-size: 0.9375rem; }

.demo__aviso {
    display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 2rem; max-width: 30rem;
    padding: 0.9rem 1rem; border-radius: var(--r-lg);
    background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
    color: var(--slate-300); font-size: 0.875rem; line-height: 1.5;
}
.demo__aviso .ico { margin-top: 0.15rem; color: var(--brand-400); }

.demo__panel {
    padding: 1.5rem; border-radius: var(--r-xl);
    background: var(--papel); color: var(--tinta);
    box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.6);
}
@media (min-width: 640px) { .demo__panel { padding: 2.25rem; } }

.formulario { display: grid; gap: 2rem; }
.bloque-form { display: grid; gap: 1.1rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.bloque-form legend {
    padding: 0; margin-bottom: 0.25rem;
    font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em;
}
/* La separación va pintada y no como borde: un borde de fieldset hace que el legend se monte encima. */
.bloque-form + .bloque-form { padding-top: 2rem; background: linear-gradient(var(--anillo), var(--anillo)) top / 100% 1px no-repeat; }

.fila-campos { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .fila-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.campo { display: grid; gap: 0.4rem; min-width: 0; }
.campo--corto { max-width: 22rem; }
.campo > label, .campo__rotulo {
    color: var(--tinta-2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.requerido { color: #b91c1c; }
.opcional { margin-left: 0.25rem; color: #8a919c; font-weight: 600; text-transform: none; letter-spacing: 0; }

.campo input:not([type="radio"], [type="checkbox"]),
.campo select,
.campo textarea {
    width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem;
    border: 1px solid var(--slate-300); border-radius: var(--r-lg);
    background: var(--papel); color: var(--tinta);
    font: 500 1rem/1.4 var(--fuente);
    box-shadow: 0 1px 2px rgb(21 24 31 / 0.05);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.campo textarea { resize: vertical; min-height: 5.5rem; }
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 1rem; padding-right: 2.4rem; }
.campo input::placeholder, .campo textarea::placeholder { color: #8a919c; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none; border-color: var(--brand-600, #7fa800);
    box-shadow: 0 0 0 3px rgb(152 199 0 / 0.3);
}
.campo [aria-invalid="true"]:not([type="radio"], [type="checkbox"]) { border-color: #dc2626; }

.campo__ayuda { color: var(--tinta-2); font-size: 0.8125rem; line-height: 1.45; }
.campo__error { display: flex; gap: 0.35rem; color: #b91c1c; font-size: 0.8125rem; font-weight: 600; line-height: 1.45; }
.campo__error::before { content: ""; flex-shrink: 0; width: 0.95rem; height: 0.95rem; margin-top: 0.1rem; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5 21 19.5H3L12 4.5Z'/%3E%3Cpath d='M12 10v3.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5 21 19.5H3L12 4.5Z'/%3E%3Cpath d='M12 10v3.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.campo__error[hidden] { display: none; }
.campo.tiene-error .campo__ayuda { display: none; }

/* Opciones en tarjeta: el radio o la casilla quedan dentro, accesibles por teclado. */
.opciones { display: grid; gap: 0.5rem; }
.opciones--planes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .opciones--planes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.opciones--franjas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opciones--canales { display: flex; flex-wrap: wrap; }
.opcion--ancha { grid-column: 1 / -1; }

.opcion { position: relative; display: block; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion > span {
    display: grid; gap: 0.1rem; min-height: 3rem; padding: 0.65rem 0.85rem;
    border-radius: var(--r-lg); background: var(--papel);
    box-shadow: inset 0 0 0 1px var(--slate-300);
    transition: box-shadow 160ms ease, background-color 160ms ease;
}
.opcion b { font-size: 0.9375rem; font-weight: 700; }
.opcion small { color: var(--tinta-2); font-size: 0.75rem; font-weight: 600; }
.opcion:hover > span { box-shadow: inset 0 0 0 1px #9aa3af; }
.opcion input:checked + span { background: #f7faf0; box-shadow: inset 0 0 0 2px var(--brand-600, #7fa800); }
.opcion input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--brand-600, #7fa800), 0 0 0 3px rgb(152 199 0 / 0.3); }
.campo.tiene-error .opcion > span { box-shadow: inset 0 0 0 1px #fca5a5; }

.opcion--chip > span { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; padding: 0 0.9rem; border-radius: 999px; color: var(--tinta); font-size: 0.9375rem; font-weight: 600; }
.opcion--chip .ico { color: inherit; }
.opcion--chip.c-instagram .ico { color: var(--instagram); }
.opcion--chip.c-whatsapp .ico { color: var(--whatsapp); }
.opcion--chip.c-messenger .ico { color: var(--messenger); }
.opcion--chip.c-webchat .ico { color: var(--webchat); }
.opcion--chip > span { color: var(--tinta); }

.campo--consentimiento { padding-top: 0.5rem; }
.casilla { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; color: var(--tinta-2); font-size: 0.9375rem; line-height: 1.5; cursor: pointer; }
.casilla input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--brand-600, #7fa800); cursor: pointer; }
.casilla a { color: var(--brand-800); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.formulario__enviar { width: 100%; min-height: 3.25rem; font-size: 1rem; }
.formulario__nota { margin-top: -1.25rem; color: var(--tinta-2); font-size: 0.8125rem; text-align: center; }

.formulario__resumen {
    padding: 1rem 1.1rem; border-radius: var(--r-lg);
    background: #fef2f2; box-shadow: inset 0 0 0 1px #fecaca; color: #991b1b; font-size: 0.875rem;
}
.formulario__resumen:focus { outline: 2px solid #dc2626; outline-offset: 2px; }
.formulario__resumen ul { display: grid; gap: 0.25rem; margin-top: 0.5rem; padding-left: 1.1rem; list-style: disc; }
.formulario__resumen a { color: #991b1b; text-decoration: underline; text-underline-offset: 2px; }

/* Después de enviar. */
.enviado { display: grid; justify-items: center; gap: 0.9rem; padding: 2rem 0.5rem; text-align: center; }
.enviado:focus { outline: none; }
.enviado__ico { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--navy-900); color: var(--brand-400); }
.enviado__ico .ico { width: 1.6rem; height: 1.6rem; stroke-width: 2.2; }
.enviado h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.enviado p { max-width: 26rem; color: var(--tinta-2); font-size: 1rem; line-height: 1.6; }
.enviado__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 0.5rem; }
.enviado__editar { margin-top: 0.5rem; min-height: 2.75rem; padding: 0 1rem; border: 0; background: none; color: var(--tinta-2); font: 600 0.875rem var(--fuente); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.enviado__editar:hover { color: var(--tinta); }

/* Lo que se esconde con «hidden» se esconde aunque su clase le dé display. */
.formulario[hidden], .enviado[hidden], .formulario__resumen[hidden] { display: none; }

/* La casilla de consentimiento es una frase, no una etiqueta de campo. */
.campo > label.casilla {
    color: var(--tinta-2); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; text-transform: none;
}


/* El WhatsApp con el prefijo del país pegado delante. */
.telefono { display: flex; align-items: stretch; border: 1px solid var(--slate-300); border-radius: var(--r-lg); background: var(--papel); box-shadow: 0 1px 2px rgb(21 24 31 / 0.05); transition: border-color 160ms ease, box-shadow 160ms ease; }
.telefono:focus-within { border-color: #7fa800; box-shadow: 0 0 0 3px rgb(152 199 0 / 0.3); }
.campo.tiene-error .telefono { border-color: #dc2626; }
.telefono__prefijo { display: grid; place-items: center; padding: 0 0.85rem; border-right: 1px solid var(--anillo); background: #f8fafc; border-radius: var(--r-lg) 0 0 var(--r-lg); color: var(--tinta); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.telefono__prefijo[hidden] { display: none; }
.campo .telefono input:not([type="radio"], [type="checkbox"]) { border: 0; box-shadow: none; min-width: 0; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.campo .telefono input:focus { box-shadow: none; }

.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.formulario__fallo { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.9rem 1rem; border-radius: var(--r-lg); background: #fef2f2; box-shadow: inset 0 0 0 1px #fecaca; color: #991b1b; font-size: 0.9375rem; }
.formulario__fallo[hidden] { display: none; }
.formulario__fallo .ico { margin-top: 0.2rem; }
.formulario__fallo:focus { outline: 2px solid #dc2626; outline-offset: 2px; }

.formulario__enviar[disabled] { opacity: 0.75; cursor: progress; }
.cargando { width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid rgb(26 29 37 / 0.25); border-top-color: var(--navy-900); animation: girar 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .cargando { animation: none; } }

.enviado p b { color: var(--tinta); overflow-wrap: anywhere; }
.enviado .boton { margin-top: 0.5rem; }


/* ── Teléfono: hero de un solo mensaje y planes en abanico ─ */
/*
 * En el teléfono el hero no es carrusel: un solo mensaje, «Que ninguna venta
 * se quede en visto», con el titular a todo lo ancho. Las otras dos
 * diapositivas (la app y las estadísticas) se quedan para pantallas grandes,
 * donde caben con su maqueta; aquí obligaban a deslizar antes de leer nada.
 */
@media (max-width: 767px) {
    .carrusel .diapo:not(#diapo-1),
    .carrusel__controles { display: none !important; }
    #diapo-1 { opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; }
    #diapo-1 .maqueta-marco { transform: none !important; }

    .portada { padding-top: 6.25rem; }
    .portada .display {
        font-size: clamp(3.1rem, 14.5vw, 4.25rem);
        line-height: 0.95;
        letter-spacing: -0.05em;
    }
    .portada__bajada { font-size: 1.125rem; }
    .portada .canales-linea { margin-bottom: 1.5rem; }

    /*
     * Los planes, en abanico: una fila que se desliza de lado con imán en cada
     * tarjeta. La del centro queda derecha y entera; las vecinas asoman a los
     * lados, más pequeñas y abiertas como cartas (el giro lo pone app.js según
     * lo lejos que estén del centro). Sin guion es un carrusel plano.
     */
    #planes .contenedor { padding-inline: 0; }
    #planes .seccion__cabeza { padding-inline: 1.25rem; }

    .planes {
        display: flex; gap: 0;
        overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory; scroll-behavior: smooth;
        /* El margen lateral deja asomar las tarjetas vecinas: es lo que dice «desliza». */
        padding: 2rem 16vw 3.25rem;
        scroll-padding-inline: 16vw;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .planes::-webkit-scrollbar { display: none; }

    .planes .plan {
        flex: 0 0 68vw; max-width: 19rem; padding: 1.4rem;
        position: relative; z-index: 1;
        scroll-snap-align: center; scroll-snap-stop: always;
        transform-origin: 50% 100%;
        transform: translateX(var(--acerca, 0px)) translateY(var(--baja, 0px)) rotate(var(--giro, 0deg)) scale(var(--escala, 1));
        transition: box-shadow 300ms ease;
        will-change: transform;
    }
    .planes .plan.revelar { opacity: 1 !important; }
    .planes .plan.es-centro { z-index: 2; }
    .planes .plan:not(.es-centro) { box-shadow: 0 0 0 1px #d7dce3, 0 16px 34px -20px rgb(21 24 31 / 0.35); }
    .planes .plan.es-centro:not(.plan--destacado) { box-shadow: 0 0 0 1px var(--anillo), 0 24px 50px -28px rgb(21 24 31 / 0.45); }
    .plan__gancho { min-height: 0; font-size: 0.875rem; }
    .planes .plan h3 { font-size: 1.125rem; }
    .planes .plan__equipo { margin-block: 1.1rem; }
    .planes .plan__equipo b { font-size: 1.3rem; }
    .planes .plan__lista { gap: 0.45rem; margin-top: 1.25rem; padding-top: 1.1rem; }
    .planes .plan__lista li { font-size: 0.875rem; line-height: 1.4; }
    .planes .plan__sello { top: 1.4rem; right: 1.4rem; }

    .planes__puntos { display: flex; justify-content: center; gap: 0.25rem; margin-top: -0.75rem; }
    .planes__puntos button {
        display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
        border: 0; background: none; cursor: pointer; padding: 0;
    }
    .planes__puntos i {
        width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #c3c9d2;
        transition: width 300ms var(--ease-salida), background-color 300ms ease;
    }
    .planes__puntos button[aria-current="true"] i { width: 1.6rem; background: var(--navy-900); }
}
@media (min-width: 768px) { .planes__puntos { display: none; } }
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .planes { scroll-behavior: auto; }
    .planes .plan { transform: none; }
}

/* La fila de la cabecera (logo y botón de cerrar) queda por encima del menú abierto. */
.cabecera__fila { position: relative; z-index: 46; }