/* ================================================================
   styles.css — Landing "Publicidad Pagada en Monclova" (The Social Box)
   ----------------------------------------------------------------
   Concepto "El panel": la página se comporta como un dashboard de
   anuncios en modo oscuro (cuadrícula sutil, cifras que cuentan,
   brillo "señal" en rojo), con secciones en crema para leer.

   Orden: 1 reset · 2 tokens · 3 base · 4 layout · 5 componentes
   (por sección, en el orden de la página) · 6 utilidades · 7 motion.
   ================================================================ */

/* ================================================================
   1. RESET MODERNO
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100svh; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, picture, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }
fieldset { border: 0; padding: 0; min-width: 0; }


/* ================================================================
   2. VARIABLES — Design Tokens
   ================================================================ */
:root {
    /* ── Colores: identidad de The Social Box ──────── */
    --color-ink:          #040404;   /* fondo de la app (modo oscuro) */
    --color-ink-deep:     #000000;   /* secciones de "pantalla completa" (contacto, CTA final) */
    --color-ink-soft:     #121212;   /* superficies: tarjetas, ventana del DM */
    --color-ink-raised:   #1C1C1C;   /* superficies sobre superficies: burbujas, chips */
    --color-cream:        #F7F6F2;   /* secciones de lectura */
    --color-white:        #FFFFFF;
    --color-brand:        #FF0000;   /* rojo de marca: CTAs y acentos */
    --color-brand-hover:  #C40000;
    --color-brand-soft:   rgba(255, 0, 0, 0.14);
    --color-flame:        #FF7A1A;   /* segundo tono del aro de historia */
    --color-text:         #D1D1D1;   /* texto sobre oscuro */
    --color-text-strong:  #FFFFFF;
    --color-text-muted:   #9A9A9A;
    --color-text-dark:    #0E0E0E;   /* texto fuerte sobre crema */
    --color-text-on-light:#4A4A4A;   /* párrafos sobre crema */
    --color-border:       rgba(255, 255, 255, 0.12);
    --color-border-light: #E2DFD6;
    --color-whatsapp:     #25D366;
    --color-whatsapp-hover: #20BD5A;
    --color-wa-bubble:    #005C4B;   /* burbuja enviada de WhatsApp (modo oscuro) */
    --color-scrim:        rgba(4, 4, 4, 0.78);

    /* Aro de "historia": rojo de marca con un leve brillo, sin naranja. */
    --story-ring: linear-gradient(45deg, var(--color-brand-hover) 0%, var(--color-brand) 55%, #FF4D4D 100%);

    /* ── Tipografía ─────────────────────────────────
       Plus Jakarta Sans para todo; Archivo Black para fechas, números
       de paso y el carácter de "app". */
    --font-body:   "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
    --font-accent: "Archivo Black", "Plus Jakarta Sans", sans-serif;

    --text-xs:   clamp(0.75rem,  0.7rem  + 0.15vw, 0.8125rem);
    --text-sm:   clamp(0.875rem, 0.82rem + 0.2vw,  0.9375rem);
    --text-base: clamp(1rem,     0.94rem + 0.25vw, 1.0625rem);
    --text-lg:   clamp(1.125rem, 1rem    + 0.5vw,  1.375rem);
    --text-xl:   clamp(1.375rem, 1.15rem + 0.9vw,  1.875rem);
    --text-2xl:  clamp(1.875rem, 1.4rem  + 2vw,    3.25rem);
    --text-hero: clamp(2.75rem,  1.9rem  + 4vw,    5.75rem);

    /* ── Espaciado ─────────────────────────────────── */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* ── Radios: todo redondeado, como una app ──────── */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   18px;
    --radius-xl:   28px;
    --radius-full: 9999px;

    /* ── Sombras: profundidad en oscuro + brillo rojo ── */
    --shadow-card:  0 18px 50px rgba(0, 0, 0, 0.45);
    --shadow-phone: 0 40px 90px rgba(0, 0, 0, 0.7), 0 0 80px rgba(255, 0, 0, 0.18);
    --shadow-light: 0 14px 40px rgba(30, 24, 10, 0.12);

    /* ── Transiciones ─────────────────────────────── */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: 150ms ease-out;
    --transition-base: 250ms ease-out;
    --transition-slow: 400ms var(--ease-out);

    /* ── Layout ───────────────────────────────────── */
    --container: 1240px;
    --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
    --header-h: 104px;
    --mobile-cta-bar-height: 72px;
    --phone-radius: 40px;

    /* ── Panel de anuncios (esta landing) ───────────── */
    --glow-signal: 0 0 24px rgba(255, 0, 0, 0.55);   /* brillo "señal" */
    --color-status-on:   #2FD872;   /* punto verde de estado (resumen del brief) */
    --color-chart-muted: rgba(209, 209, 209, 0.6);   /* serie secundaria de gráficas */
    --grid-line:   rgba(255, 255, 255, 0.045);       /* cuadrícula del lienzo */
    --grid-size:   48px;
    --color-meta:   #0866FF;   /* azul oficial de Meta */
    --color-google: #4285F4;   /* azul de Google */
    /* Acentos de marca de cada plataforma (franja de Google, LinkedIn y
       el desfase cian/rosa del glifo de TikTok). */
    --color-google-red:    #EA4335;
    --color-google-yellow: #FBBC04;
    --color-google-green:  #34A853;
    --color-linkedin:      #0A66C2;
    --color-tiktok-cyan:   #25F4EE;
    --color-tiktok-pink:   #FE2C55;

    /* ── UI simulada dentro del celular (hero) ──────── */
    --font-ui:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ui-text:      #202124;
    --ui-muted:     #5F6368;
    --ui-link:      #1A0DAB;
    --ui-line:      #E3E3E3;
    --ui-skeleton:  #EEF0F3;
}


/* ================================================================
   3. BASE
   ================================================================ */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("assets/fonts/plus-jakarta-sans-latin-variable.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;
}

@font-face {
    font-family: "Archivo Black";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/archivo-black-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;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-ink);
}

h1, h2, h3 { color: var(--color-text-strong); line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; }

/* Parte del título en el rojo de marca (mismo recurso que el hero). */
.accent { color: var(--color-brand); }

::selection { background-color: var(--color-brand); color: var(--color-white); }

:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; border-radius: 4px; }

svg { width: 1em; height: 1em; flex-shrink: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }


/* ================================================================
   4. LAYOUT
   ================================================================ */
.section { padding-block: var(--space-3xl); scroll-margin-top: var(--header-h); }
.section--dark  { background-color: var(--color-ink); }
.section--deep  { background-color: var(--color-ink-deep); }
.section--light { background-color: var(--color-cream); color: var(--color-text-on-light); }

/* Lienzo de dashboard: cuadrícula sutil que se desplaza con el scroll
   (--grid-shift lo escribe initGridShift solo en las secciones visibles;
   registrada sin herencia para no recalcular el estilo de todo el documento;
   sin JS queda fija). */
@property --grid-shift { syntax: "<length>"; inherits: false; initial-value: 0px; }
.section--grid {
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    background-position: 0 var(--grid-shift, 0px);
}
.section--light h2, .section--light h3 { color: var(--color-text-dark); }

.section__container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}

.section__head { max-width: 46rem; margin-bottom: var(--space-2xl); }
.section__title { font-size: var(--text-2xl); }
.section__lead { margin-top: var(--space-md); font-size: var(--text-lg); line-height: 1.5; color: var(--color-text-muted); }
.section--light .section__lead { color: var(--color-text-on-light); }

@media (min-width: 1024px) {
    .section { padding-block: var(--space-4xl); }
}



/* ================================================================
   5. COMPONENTES
   ================================================================ */

/* ---------- Botones ---------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: 52px;
    padding: 0 var(--space-xl);
    font-size: var(--text-base);
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.button svg { font-size: 1.25em; }
.button--primary { color: var(--color-white); background-color: var(--color-brand); box-shadow: 0 10px 30px rgba(255, 0, 0, 0.3); }
.button--primary:hover { background-color: var(--color-brand-hover); }
/* Ghost: contorno; al hover se invierte a blanco sólido. */
.button--ghost { color: var(--color-white); background-color: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); }
.button--ghost:hover { color: var(--color-ink); background-color: var(--color-white); box-shadow: inset 0 0 0 1.5px var(--color-white); }

/* WhatsApp: el contorno se rellena de verde de abajo hacia arriba. */
.button--whatsapp { position: relative; isolation: isolate; overflow: hidden; }
.button--whatsapp svg { color: var(--color-whatsapp); transition: color var(--transition-fast); }
.button--whatsapp::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--color-whatsapp);
    transform: translateY(101%);
    transition: transform 300ms var(--ease-out);
}
.button--whatsapp:hover { color: var(--color-white); background-color: transparent; box-shadow: inset 0 0 0 1.5px var(--color-whatsapp), 0 12px 30px -8px rgba(37, 211, 102, 0.6); }
.button--whatsapp:hover svg { color: var(--color-white); }
.button--whatsapp:hover::before { transform: none; }
.button:active { transform: scale(0.97); }
.button:disabled { cursor: not-allowed; opacity: 0.5; }

/* ---------- Header ---------- */
.site-header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid transparent;
    transition: background-color var(--transition-base), border-color var(--transition-base);
}
.site-header.is-scrolled {
    background-color: rgba(4, 4, 4, 0.82);
    border-bottom-color: var(--color-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.site-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    width: min(100% - 2 * var(--gutter), var(--container));
    height: var(--header-h);
    margin-inline: auto;
}
.site-header__logo img { width: auto; height: 64px; }
.site-nav { display: none; }
.site-nav__list { display: flex; gap: var(--space-2xl); }
.site-nav__link { position: relative; padding-block: var(--space-sm); font-size: 1.125rem; font-weight: 700; text-decoration: none; color: var(--color-white); transition: color var(--transition-fast); }
.site-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background-color: var(--color-brand); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base); }
.site-nav__link:hover { color: var(--color-white); }
.site-nav__link:hover::after { transform: scaleX(1); }
.site-header__cta {
    display: none;
    align-items: center;
    gap: var(--space-sm);
    min-height: 56px;
    padding: 0 var(--space-xl);
    font-size: 1.125rem;
    font-weight: 800;
    text-decoration: none;
    color: var(--color-white);
    border-radius: var(--radius-full);
    background-color: rgba(37, 211, 102, 0.14);
    box-shadow: inset 0 0 0 1px rgba(37, 211, 102, 0.4);
    transition: background-color var(--transition-fast);
}
.site-header__cta svg { font-size: 1.4rem; color: var(--color-whatsapp); }
.site-header__cta:hover { background-color: rgba(37, 211, 102, 0.24); }

@media (min-width: 768px) {
    .site-header__cta { display: inline-flex; }
    .site-header__logo img { height: 82px; }
}
@media (min-width: 1024px) {
    .site-nav { display: block; }
}
/* Entre 1024 y 1279 el header queda en un renglón: gaps y textos más compactos. */
.site-nav__link, .site-header__cta { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) {
    .site-nav__list { gap: var(--space-lg); }
    .site-nav__link { font-size: 1rem; }
    .site-header__cta { padding: 0 var(--space-lg); font-size: 1rem; }
}


/* ---------- Celular ----------
   Mismo marco que en Redes Sociales; la pantalla aloja las escenas del
   anuncio del hero. */
.phone {
    position: relative;
    aspect-ratio: 9 / 19.5;
    padding: 9px;
    border-radius: var(--phone-radius);
    background: linear-gradient(160deg, #2A2A2A, #0A0A0A 60%);
    box-shadow: var(--shadow-phone), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.phone__screen {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: calc(var(--phone-radius) - 9px);
    background-color: var(--color-ink-soft);
    /* overflow + border-radius no recorta bien dentro de un padre
       transformado en Chrome (queda una esquina recta); clip-path sí. */
    clip-path: inset(0 round calc(var(--phone-radius) - 9px));
}
.phone__island {
    position: absolute;
    top: 9px;
    left: 50%;
    z-index: 6;
    width: 30%;
    height: 22px;
    border-radius: var(--radius-full);
    background-color: #000;
    transform: translateX(-50%);
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: calc(var(--header-h) + var(--space-lg));
    padding-bottom: var(--space-3xl);
    background-color: var(--color-ink);
}
/* Halo rojo detrás del celular y viñeta que apaga la cuadrícula en
   los bordes (el fondo de .section--grid queda intacto). */
.hero::before,
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero::before { background: radial-gradient(55% 45% at 50% 78%, rgba(255, 0, 0, 0.2), transparent 70%); }
.hero::after  { background: radial-gradient(120% 90% at 50% 40%, transparent 45%, var(--color-ink) 100%); }

.hero__container {
    display: grid;
    gap: var(--space-2xl);
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}

/* En móvil y tablet, el texto lleva la foto del equipo (patrón de la serie). */
.hero__copy {
    padding: var(--space-2xl) var(--space-lg);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(180deg, rgba(4, 4, 4, 0.55) 0%, rgba(4, 4, 4, 0.92) 70%),
        url("assets/images/equipo-the-social-box-agencia-de-marketing-monclova.webp") center 30% / cover;
}
.hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}
.hero__kicker::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background-color: var(--color-brand); box-shadow: 0 0 0 4px var(--color-brand-soft), var(--glow-signal); }
.hero__title { margin-top: var(--space-md); font-size: var(--text-hero); line-height: 0.98; letter-spacing: -0.04em; }
.hero__line { display: block; }
/* "Monclova" en rojo con una línea de señal que se dibuja al cargar. */
.hero__city { position: relative; display: inline-block; color: var(--color-brand); text-shadow: 0 0 40px rgba(255, 0, 0, 0.35); }
.hero__city::after {
    content: "";
    position: absolute;
    left: 0.04em;
    right: 0.04em;
    bottom: -0.02em;
    height: 0.07em;
    border-radius: var(--radius-full);
    background-color: var(--color-brand);
    box-shadow: var(--glow-signal);
    transform-origin: left;
    animation: city-line 900ms 650ms var(--ease-out) both;
}
.hero__lead { max-width: 34rem; margin-top: var(--space-lg); font-size: var(--text-lg); line-height: 1.5; color: var(--color-text); }
.hero__actions { display: none; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }

.hero__platforms { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.hero__platform {
    position: relative;
    isolation: isolate;          /* el ::before (z-index:-1) queda dentro de la burbuja */
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem 0.45rem 0.75rem;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-white);
    border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    transition: box-shadow 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.hero__platform svg { font-size: 1.1rem; transition: color 250ms var(--ease-out); }
.hero__platform--meta   { --net-fill: var(--color-meta);   --net-glow: rgba(8, 102, 255, 0.6); }
.hero__platform--google { --net-fill: var(--color-google); --net-glow: rgba(66, 133, 244, 0.6); }
.hero__platform--meta svg   { color: var(--color-meta); }
.hero__platform--google svg { color: var(--color-google); }

/* Hover con color de marca (patrón de la plantilla): el relleno oficial
   sube desde abajo, la burbuja se eleva y brilla en su tono. */
.hero__platform::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--net-fill);
    transform: translateY(101%);
    transition: transform 300ms var(--ease-out);
}
@media (hover: hover) {
    .hero__platform:hover { box-shadow: 0 10px 28px -6px var(--net-glow); transform: translateY(-2px); }
    .hero__platform:hover::before { transform: none; }
    .hero__platform:hover svg { color: var(--color-white); }
}

/* Entrada al cargar: el texto sube en cascada (solo con JS). */
.js .hero__kicker,
.js .hero__line,
.js .hero__lead,
.js .hero__actions,
.js .hero__platforms { animation: hero-rise 800ms var(--ease-out) both; }
.js .hero__line:nth-child(1) { animation-delay: 80ms; }
.js .hero__line:nth-child(2) { animation-delay: 160ms; }
.js .hero__lead      { animation-delay: 260ms; }
.js .hero__actions   { animation-delay: 340ms; }
.js .hero__platforms { animation-delay: 420ms; }

/* ---------- Hero: escenario del celular ---------- */
.hero__stage { position: relative; display: grid; justify-items: center; gap: var(--space-xl); }
.hero__device { position: relative; }
.js .hero__device { animation: device-in 1100ms 200ms var(--ease-out) both, device-float 7s 1300ms ease-in-out infinite; }
/* Anillos de "señal" que salen del celular, como una emisión. */
.hero__device::before,
.hero__device::after {
    content: "";
    position: absolute;
    inset: -14px;
    z-index: -1;
    border: 1px solid rgba(255, 0, 0, 0.55);
    border-radius: calc(var(--phone-radius) + 14px);
    opacity: 0;
    pointer-events: none;
    animation: signal-ring 3.6s var(--ease-out) infinite;
}
.hero__device::after { animation-delay: 1.8s; }

.ad-phone { width: min(78vw, 310px); aspect-ratio: 9 / 17; }

/* Escenas apiladas; la activa la decide [data-scene]. "insta" sigue
   visible en "notify" (la notificación llega encima del anuncio). */
.ad-scene {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--font-ui);
    transition: transform 600ms var(--ease-out), opacity 600ms var(--ease-out);
}
.ad-phone[data-scene="search"] .ad-scene--insta,
.ad-phone:not([data-scene="search"]) .ad-scene--search { opacity: 0; transform: translateX(-12%); }
.ad-phone[data-scene="search"] .ad-scene--insta { transform: translateX(12%); }

/* Barra de estado genérica (hora, señal, batería). */
.ad-status {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 18px 0 22px;
    font-size: 12px;
    font-weight: 700;
}
.ad-status__icons { display: flex; align-items: flex-end; gap: 2px; }
.ad-status__icons i { width: 3px; border-radius: 1px; background-color: currentColor; }
.ad-status__icons i:nth-child(1) { height: 4px; }
.ad-status__icons i:nth-child(2) { height: 6px; }
.ad-status__icons i:nth-child(3) { height: 8px; }
.ad-status__icons::after { content: ""; width: 18px; height: 9px; margin-left: 5px; border-radius: 3px; background: linear-gradient(90deg, currentColor 70%, transparent 70%) content-box; border: 1.5px solid currentColor; padding: 1px; opacity: 0.9; }

/* Escena 1: búsqueda en Google. */
.ad-scene--search { padding: 0 12px; color: var(--ui-text); background-color: var(--color-white); }
.ad-scene--search .ad-status { margin-inline: -12px; }
.ad-search__brand { display: grid; place-items: center; margin: 14px 0 14px; font-size: 30px; color: var(--color-google); }
.ad-search {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    font-size: 12.5px;
    color: var(--ui-text);
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
}
.ad-search__icon { flex: none; font-size: 16px; color: var(--ui-muted); }
.ad-search__query { min-width: 0; overflow: hidden; white-space: nowrap; }
.ad-search__caret { width: 2px; height: 1.1em; margin-left: -6px; background: currentColor; animation: caret 1s steps(1) infinite; }
.ad-tabs {
    display: flex;
    gap: 14px;
    margin-top: 12px;
    padding: 0 4px;
    font-size: 11px;
    color: var(--ui-muted);
    border-bottom: 1px solid var(--ui-line);
}
.ad-tabs__item { padding-bottom: 7px; }
.ad-tabs__item--active { color: var(--color-google); font-weight: 700; box-shadow: inset 0 -2px 0 var(--color-google); }
.ad-results { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }

.ad-result--sponsored {
    position: relative;
    padding: 12px 12px 11px;
    border-radius: 14px;
    background-color: var(--color-white);
    box-shadow: 0 0 0 1px var(--color-brand), var(--glow-signal);
}
.ad-result__label { font-size: 11px; font-weight: 800; color: var(--ui-text); }
.ad-result__site { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.ad-result__favicon {
    display: grid;
    flex: none;
    place-items: center;
    width: 24px;
    height: 24px;
    font-size: 11px;
    font-weight: 800;
    color: var(--color-white);
    border-radius: 50%;
    background-color: var(--color-brand);
}
.ad-result__meta { display: flex; flex-direction: column; font-size: 10px; line-height: 1.25; color: var(--ui-muted); }
.ad-result__meta b { font-size: 11px; color: var(--ui-text); }
.ad-result__title { margin-top: 7px; font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--ui-link); }
.ad-result__text { margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--ui-muted); }
.ad-result__links { display: flex; gap: 6px; margin-top: 9px; }
.ad-result__links span { padding: 3px 9px; font-size: 10px; font-weight: 600; color: var(--ui-link); border: 1px solid var(--ui-line); border-radius: var(--radius-full); }

/* Resultados orgánicos: esqueleto gris, el anuncio va primero. */
.ad-result--organic { display: flex; flex-direction: column; gap: 6px; padding: 4px 12px; }
.ad-result--organic i { display: block; height: 7px; border-radius: 4px; background-color: var(--ui-skeleton); }
.ad-result--organic i:nth-child(1) { width: 38%; }
.ad-result--organic i:nth-child(2) { width: 82%; height: 10px; background-color: #E2E7F3; }
.ad-result--organic i:nth-child(3) { width: 96%; }
.ad-result--organic i:nth-child(4) { width: 64%; }

/* Escena 2: el anuncio en Instagram. */
.ad-scene--insta { color: var(--color-white); background-color: #000; }
.ad-post__head { display: flex; flex: none; align-items: center; gap: 8px; padding: 6px 10px 8px; }
.ad-post__avatar { flex: none; width: 30px; height: 30px; padding: 2px; border-radius: 50%; background: var(--story-ring); }
.ad-post__avatar span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 11px;
    font-weight: 800;
    color: var(--color-brand);
    border: 2px solid #000;
    border-radius: 50%;
    background-color: var(--color-white);
}
.ad-post__who { display: flex; flex-direction: column; font-size: 10px; line-height: 1.25; color: var(--color-text-muted); }
.ad-post__who b { font-size: 12px; color: var(--color-white); }
.ad-post__more { display: flex; gap: 3px; margin-left: auto; }
.ad-post__more i { width: 3px; height: 3px; border-radius: 50%; background-color: currentColor; }
.ad-post__media { flex: none; aspect-ratio: 4 / 5; overflow: hidden; }
.ad-post__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s linear; }
.ad-phone:not([data-scene="search"]) .ad-post__media img { transform: scale(1); }
.ad-cta {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    background-color: var(--color-brand);
    transition: transform 200ms var(--ease-out), background-color 200ms;
}
.ad-cta svg { font-size: 15px; }
.ad-cta.is-pressed { transform: scale(0.94); background: var(--color-brand-hover); }
/* Toque: una onda sale del centro del botón al presionarlo. */
.ad-cta::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.45);
    opacity: 0;
    transform: scale(0);
}
.ad-cta.is-pressed::after { animation: tap-ripple 600ms var(--ease-out); }
.ad-post__actions { display: flex; flex: none; gap: 14px; padding: 10px 12px 6px; font-size: 20px; }
.ad-post__caption { padding: 0 12px; font-size: 11px; line-height: 1.4; color: var(--color-text); }
.ad-post__caption b { margin-right: 0.3em; color: var(--color-white); }

/* Escena 3: notificación de WhatsApp (encima de Instagram). */
.ad-notify {
    position: absolute;
    top: 40px;
    left: 8px;
    right: 8px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-family: var(--font-ui);
    color: #111;
    border-radius: 18px;
    background-color: rgba(246, 246, 246, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}
.ad-notify__app {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    font-size: 21px;
    color: var(--color-white);
    border-radius: 10px;
    background-color: var(--color-whatsapp);
}
.ad-notify__body { display: flex; flex-direction: column; min-width: 0; }
.ad-notify__from { font-size: 10px; font-weight: 700; color: #6B6B6B; }
.ad-notify__text { font-size: 12px; font-weight: 600; line-height: 1.3; }

/* Ciclo vivo (solo con JS y sin movimiento reducido): estados
   iniciales ocultos. Sin JS se ve la historia completa y quieta. */
.hero.is-live .ad-result--sponsored { opacity: 0; transform: translateY(16px); transition: transform 500ms var(--ease-out), opacity 500ms; }
.hero.is-live .ad-phone.has-result .ad-result--sponsored { opacity: 1; transform: none; animation: signal-glow 1.6s 400ms ease-out; }
.hero.is-live .ad-result--organic { opacity: 0; transform: translateY(10px); transition: transform 500ms var(--ease-out), opacity 500ms; }
.hero.is-live .ad-phone.has-result .ad-result--organic { opacity: 1; transform: none; transition-delay: 250ms; }
.hero.is-live .ad-phone.has-result .ad-result--organic + .ad-result--organic { transition-delay: 380ms; }
.hero.is-live .ad-notify { transform: translateY(calc(-100% - 48px)); transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.hero.is-live .ad-phone[data-scene="notify"] .ad-notify { transform: none; }
.hero.is-live .ad-phone[data-scene="notify"] { animation: phone-buzz 500ms 300ms ease-in-out; }

/* Pasos de la campaña: se encienden al ritmo de la escena activa. */
.ad-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }
.ad-steps__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem 0.5rem 0.7rem;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    border-radius: var(--radius-full);
    background-color: rgba(18, 18, 18, 0.82);
    box-shadow: inset 0 0 0 1px var(--color-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: color 400ms, background-color 400ms, box-shadow 400ms, transform 400ms var(--ease-out);
}
.ad-steps__item svg { font-size: 1rem; }
.hero:not(.is-live) .ad-steps__item,
.hero__stage:has([data-scene="search"]) .ad-steps__item--search,
.hero__stage:has([data-scene="insta"]) .ad-steps__item--insta,
.hero__stage:has([data-scene="notify"]) .ad-steps__item--notify {
    color: var(--color-white);
    background-color: var(--color-brand);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), var(--glow-signal);
    transform: scale(1.06);
}
.hero:not(.is-live) .ad-steps__item { transform: none; }

@keyframes caret       { 50% { opacity: 0; } }
@keyframes city-line   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hero-rise   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes device-in   { from { opacity: 0; transform: translateY(60px) rotate(4deg) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes chip-float  { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes device-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(-1deg); } }
@keyframes signal-ring { 0% { opacity: 0.8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.12); } }
@keyframes signal-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes signal-glow { 0%, 100% { box-shadow: 0 0 0 1px var(--color-brand), var(--glow-signal); } 40% { box-shadow: 0 0 0 2px var(--color-brand), 0 0 40px rgba(255, 0, 0, 0.8); } }
@keyframes tap-ripple  { from { opacity: 1; transform: scale(0); } to { opacity: 0; transform: scale(14); } }
@keyframes phone-buzz {
    0%, 100% { transform: none; }
    20% { transform: translateX(-3px) rotate(-0.6deg); }
    40% { transform: translateX(3px) rotate(0.6deg); }
    60% { transform: translateX(-2px) rotate(-0.4deg); }
    80% { transform: translateX(2px) rotate(0.4deg); }
}

@media (min-width: 768px) {
    .hero__actions { display: flex; }
}

@media (min-width: 1024px) {
    .hero { min-height: 100svh; display: grid; align-items: center; padding-bottom: var(--space-2xl); }
    .hero::before { background: radial-gradient(40% 55% at 76% 52%, rgba(255, 0, 0, 0.2), transparent 70%); }
    .hero__container { grid-template-columns: 1.25fr 0.75fr; align-items: center; }
    .hero__copy { padding: 0; background: none; border-radius: 0; }
    /* Dos renglones exactos: "Publicidad pagada" / "en Monclova". */
    .hero__title { font-size: min(var(--text-hero), 6.4vw, 5.4rem); }
    .hero__line { white-space: nowrap; }
    .ad-phone { width: clamp(280px, 24vw, 310px); }
    /* En escritorio los pasos flotan alrededor del celular. */
    .ad-steps { position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none; }
    /* Flotan con "translate" (propiedad individual) para no pisar el
       transform: scale() del paso activo. */
    .ad-steps__item { position: absolute; animation: chip-float 6s ease-in-out infinite; }
    .ad-steps__item--search { top: 14%; left: -4%; }
    .ad-steps__item--insta  { top: 46%; right: -6%; animation-delay: -2s; }
    .ad-steps__item--notify { bottom: 7%; left: -2%; animation-delay: -4s; }
}


/* ---------- Ticker (diferenciadores) ----------
   Una franja horizontal con aspecto de cinta de métricas: indicadores (etiqueta pequeña + dato
   grande) separados por líneas finas. Cada indicador lleva su
   separador como borde propio, así el loop de -50% cierra sin salto. */
.ticker {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #0B0B0B;
    border-top: 1px solid var(--color-border);
    border-bottom: 2px solid var(--color-brand);
    box-shadow: 0 10px 40px rgba(255, 0, 0, 0.12);
}
.ticker__viewport { overflow: hidden; }
.ticker__track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--space-md) var(--gutter);
}
.ticker__item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: var(--space-sm) 0;
}
.ticker__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.ticker__value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    font-family: var(--font-accent);
    font-size: var(--text-lg);
    line-height: 1.1;
    color: var(--color-text-strong);
}
.ticker__num { color: var(--color-brand); text-shadow: 0 0 14px rgba(255, 0, 0, 0.45); }
.ticker__trend { font-size: 0.55em; color: #2FD872; transform: translateY(-0.15em); }

/* En loop (con JS y movimiento permitido): una sola línea que corre. */
.ticker.is-looping { flex-direction: row; align-items: stretch; }
.ticker.is-looping .ticker__value { white-space: nowrap; }
.ticker.is-looping .ticker__viewport {
    flex: 1;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker.is-looping .ticker__track {
    display: flex;
    width: max-content;
    padding: 0;
    animation: ticker-scroll 55s linear infinite;
}
.ticker.is-looping .ticker__item {
    justify-content: center;
    padding: 1rem 2rem;
    border-right: 1px solid var(--color-border);
}
.ticker.is-looping .ticker__viewport:hover .ticker__track { animation-play-state: paused; }

@media (min-width: 768px) {
    .ticker__track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .ticker__value { font-size: var(--text-xl); }
    .ticker.is-looping .ticker__item { padding: 1.25rem 2.5rem; }
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------- Plataformas ----------
   Meta y Google frente a frente. Sin JS: los dos paneles completos
   (uno debajo del otro en móvil, lado a lado en escritorio). Con JS:
   en escritorio se apilan y --split (0–100) decide cuánto se ve de
   cada uno; en móvil el selector muestra uno con un barrido circular. */
@property --split { syntax: "<number>"; inherits: true; initial-value: 50; }

.platforms { position: relative; isolation: isolate; overflow: hidden; }
/* "Google la cobra." siempre en su propio renglón. */
.platforms .section__title .accent { display: block; }
.platforms::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(40% 35% at 12% 45%, rgba(8, 102, 255, 0.12), transparent 70%),
        radial-gradient(40% 35% at 88% 45%, rgba(66, 133, 244, 0.1), transparent 70%),
        radial-gradient(30% 30% at 50% 50%, rgba(255, 0, 0, 0.08), transparent 70%);
}

.compare { --split: 50; position: relative; transition: --split 450ms var(--ease-out); }
.compare.is-dragging { transition: none; }
.compare__toggle { display: none; }
.compare__stage { position: relative; display: grid; gap: var(--space-md); }

.compare__panel {
    --tone: var(--color-meta);
    position: relative;
    overflow: hidden;
    padding: var(--space-2xl) var(--space-lg);
    border-radius: var(--radius-xl);
    background-color: var(--color-ink-soft);
    box-shadow: inset 0 0 0 1px var(--color-border);
}
.compare__panel--meta {
    background:
        radial-gradient(90% 70% at 0% 0%, rgba(8, 102, 255, 0.26), transparent 65%),
        linear-gradient(160deg, rgba(8, 102, 255, 0.08), transparent 55%),
        var(--color-ink-soft);
}
.compare__panel--google {
    --tone: var(--color-google);
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(66, 133, 244, 0.22), transparent 65%),
        linear-gradient(200deg, rgba(52, 168, 83, 0.06), transparent 55%),
        var(--color-ink-soft);
}
/* Franja superior: degradado de Meta / los cuatro colores de Google. */
.compare__panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--color-meta), #4FA3FF);
}
.compare__panel--google::before {
    background: linear-gradient(90deg,
        var(--color-google) 0 25%, var(--color-google-red) 25% 50%,
        var(--color-google-yellow) 50% 75%, var(--color-google-green) 75%);
}
/* Cuadrícula de dashboard dentro del panel, desvanecida hacia el centro. */
.compare__panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent);
    mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent);
}

/* Glifo gigante de fondo, en el lado que el divisor descubre. */
.compare__art {
    position: absolute;
    right: -18%;
    bottom: -14%;
    z-index: 0;
    font-size: 15rem;
    color: var(--tone);
    opacity: 0.1;
    pointer-events: none;
}

.compare__content { position: relative; z-index: 1; }
.compare__brand { display: flex; align-items: center; gap: var(--space-md); }
.compare__logo {
    display: grid;
    flex: none;
    place-items: center;
    width: 60px;
    height: 60px;
    font-size: 32px;
    color: var(--color-white);
    border-radius: var(--radius-lg);
    background-color: var(--color-meta);
    box-shadow: 0 14px 34px -10px rgba(8, 102, 255, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.compare__panel--google .compare__logo {
    color: var(--color-google);
    background-color: var(--color-white);
    box-shadow: 0 14px 34px -10px rgba(66, 133, 244, 0.7);
}
.compare__tag {
    padding: 0.4rem 0.85rem;
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-white);
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, var(--tone) 22%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 60%, transparent);
}
.compare__name {
    margin-top: var(--space-lg);
    font-family: var(--font-accent);
    font-size: clamp(2.25rem, 1.2rem + 2.8vw, 3.75rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
}
.compare__where { margin-top: var(--space-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }

.compare__list { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
.compare__row { position: relative; padding-left: 1.15rem; }
.compare__row::before {
    content: "";
    position: absolute;
    top: 0.2rem;
    bottom: 0.2rem;
    left: 0;
    width: 3px;
    border-radius: var(--radius-full);
    background-color: var(--tone);
}
.compare__row--works::before { background-color: color-mix(in srgb, var(--tone) 55%, var(--color-white)); }
.compare__row--warn::before { background-color: var(--color-brand); box-shadow: var(--glow-signal); }
.compare__row dt { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-white); }
.compare__row--warn dt { color: #FF5A5A; }
.compare__row dd { margin: 0.3rem 0 0; line-height: 1.55; color: var(--color-text); }

/* Divisor (solo escritorio con JS). */
.compare__handle { display: none; }
.compare__knob {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 60px;
    height: 60px;
    font-size: 22px;
    color: var(--color-white);
    border-radius: 50%;
    background-color: var(--color-brand);
    box-shadow: 0 0 0 6px rgba(255, 0, 0, 0.18), var(--glow-signal), 0 12px 30px rgba(0, 0, 0, 0.55);
    translate: -50% -50%;
    transition: scale 250ms var(--ease-out), box-shadow 250ms;
}
.compare__knob svg:first-child { animation: nudge-left 2.6s ease-in-out infinite; }
.compare__knob svg:last-child  { animation: nudge-right 2.6s ease-in-out infinite; }
/* Onda de "señal" que invita a arrastrar. */
.compare__knob::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 0, 0, 0.7);
    border-radius: 50%;
    opacity: 0;
    animation: signal-ring 2.6s var(--ease-out) infinite;
}

/* Escritorio sin JS: los dos paneles lado a lado. */
@media (min-width: 768px) {
    html:not(.js) .compare__stage { grid-template-columns: 1fr 1fr; }
}

/* Escritorio con JS: paneles apilados y recortados por --split. */
@media (min-width: 768px) {
    .js .compare__stage {
        gap: 0;
        overflow: hidden;
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-card);
        cursor: ew-resize;
        touch-action: pan-y;
        -webkit-user-select: none;
        user-select: none;
    }
    /* Marco por encima de los paneles. */
    .js .compare__stage::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        border-radius: inherit;
        box-shadow: inset 0 0 0 1px var(--color-border);
        pointer-events: none;
    }
    .js .compare__panel {
        display: flex;
        grid-area: 1 / 1;
        padding: var(--space-3xl) var(--space-xl);
        border-radius: 0;
        box-shadow: none;
    }
    .js .compare__panel--meta   { clip-path: inset(0 calc(100% - var(--split) * 1%) 0 0); }
    .js .compare__panel--google { clip-path: inset(0 0 0 calc(var(--split) * 1%)); justify-content: flex-end; }

    /* Cada contenido vive en su mitad y se apaga al quedar acorralado. */
    .js .compare__content { width: calc(50% - var(--space-xl)); max-width: 32rem; }
    .js .compare__panel--meta .compare__content   { opacity: clamp(0.3, (var(--split) - 12) / 28, 1); }
    .js .compare__panel--google .compare__content { opacity: clamp(0.3, (88 - var(--split)) / 28, 1); }

    /* Lado derecho en espejo: Google se lee pegado a su borde. */
    .js .compare__panel--google .compare__content { text-align: right; }
    .js .compare__panel--google .compare__brand { flex-direction: row-reverse; }
    .js .compare__panel--google .compare__row { padding-right: 1.15rem; padding-left: 0; }
    .js .compare__panel--google .compare__row::before { right: 0; left: auto; }

    /* El glifo gigante aparece en la mitad contraria y crece al arrastrar. */
    .js .compare__art { top: 50%; bottom: auto; font-size: clamp(14rem, 22vw, 20rem); opacity: 0.2; filter: drop-shadow(0 0 50px var(--tone)); }
    .js .compare__panel--meta .compare__art   { right: 12%; translate: 0 -50%; scale: calc(0.75 + var(--split) / 200); }
    .js .compare__panel--google .compare__art { right: auto; left: 12%; translate: 0 -50%; scale: calc(0.75 + (100 - var(--split)) / 200); }

    .js .compare__handle {
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--split) * 1%);
        z-index: 3;
        display: block;
        width: 60px;
        margin-left: -30px;
        cursor: ew-resize;
        touch-action: none;
    }
    .compare__handle::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        margin-left: -1px;
        background: linear-gradient(transparent, var(--color-brand) 14%, var(--color-brand) 86%, transparent);
        box-shadow: var(--glow-signal);
    }
    .compare__handle:focus-visible { outline: none; }
    .compare__handle:focus-visible .compare__knob { outline: 2px solid var(--color-white); outline-offset: 4px; }
    .compare__handle:hover .compare__knob,
    .compare.is-dragging .compare__knob { scale: 1.1; box-shadow: 0 0 0 8px rgba(255, 0, 0, 0.22), 0 0 40px rgba(255, 0, 0, 0.8), 0 12px 30px rgba(0, 0, 0, 0.55); }
    .compare.is-dragging .compare__knob svg { animation: none; }
}
@media (min-width: 1024px) {
    .js .compare__panel { padding: var(--space-3xl) var(--space-2xl); }
    .js .compare__content { width: calc(50% - var(--space-2xl)); }
}

/* Móvil con JS: selector y un panel a la vez, con barrido circular
   que nace del botón tocado. */
@media (max-width: 767px) {
    .js .compare__toggle {
        position: relative;
        display: flex;
        margin-bottom: var(--space-md);
        padding: 5px;
        border-radius: var(--radius-full);
        background-color: var(--color-ink-soft);
        box-shadow: inset 0 0 0 1px var(--color-border);
    }
    /* Píldora que se desliza bajo el botón activo. */
    .js .compare__toggle::before {
        content: "";
        position: absolute;
        top: 5px;
        bottom: 5px;
        left: 5px;
        width: calc(50% - 5px);
        border-radius: var(--radius-full);
        background-color: var(--color-meta);
        box-shadow: 0 8px 24px -6px rgba(8, 102, 255, 0.7);
        transition: translate 500ms var(--ease-out), background-color 500ms, box-shadow 500ms;
    }
    .js .compare[data-show="google"] .compare__toggle::before {
        translate: 100% 0;
        background-color: var(--color-white);
        box-shadow: 0 8px 24px -6px rgba(66, 133, 244, 0.6);
    }
    .compare__toggle-button {
        position: relative;
        z-index: 1;
        display: inline-flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        min-height: 48px;
        font-weight: 800;
        color: var(--color-text-muted);
        border-radius: var(--radius-full);
        transition: color 400ms;
    }
    .compare__toggle-button svg { font-size: 1.2rem; }
    .compare__toggle-button--meta[aria-pressed="true"] { color: var(--color-white); }
    .compare__toggle-button--google[aria-pressed="true"] { color: var(--color-ink); }
    .compare__toggle-button--google[aria-pressed="true"] svg { color: var(--color-google); }

    .js .compare__stage { gap: 0; }
    .js .compare__panel { grid-area: 1 / 1; transition: clip-path 750ms var(--ease-out); }
    .js .compare__panel--meta   { clip-path: circle(150% at 25% 0); }
    .js .compare__panel--google { clip-path: circle(150% at 75% 0); }
    /* El panel que sale se cierra después, ya tapado por el que entra. */
    .js .compare[data-show="meta"] .compare__panel--google { z-index: 0; clip-path: circle(0% at 75% 0); transition-delay: 750ms; }
    .js .compare[data-show="google"] .compare__panel--meta { z-index: 0; clip-path: circle(0% at 25% 0); transition-delay: 750ms; }
    .js .compare[data-show="meta"] .compare__panel--meta,
    .js .compare[data-show="google"] .compare__panel--google { z-index: 1; }
}

/* ---------- Plataformas secundarias: LinkedIn y TikTok ---------- */
.platforms-secondary { margin-top: var(--space-3xl); }
.platforms-secondary__title {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--text-xl);
}
.platforms-secondary__title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--color-border), transparent); }
.platforms-secondary__grid { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }

.platform-card {
    --rx: 0deg;
    --ry: 0deg;
    --accent: var(--color-linkedin);
    --accent-2: #5AA9FF;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(60% 80% at var(--mx, 0%) var(--my, 0%), color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
        var(--color-ink-soft);
    box-shadow: inset 0 0 0 1px var(--color-border);
    transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform 250ms var(--ease-out), box-shadow 400ms, opacity 700ms var(--ease-out), translate 700ms var(--ease-out);
}
.platform-card--tiktok { --accent: var(--color-tiktok-pink); --accent-2: var(--color-tiktok-cyan); }
/* Borde que se enciende en hover (degradado con máscara). */
.platform-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--accent-2), var(--accent) 45%, transparent 80%);
    -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);
    opacity: 0;
    transition: opacity 400ms;
    pointer-events: none;
}
.platform-card:hover { box-shadow: inset 0 0 0 1px transparent, 0 24px 60px -24px color-mix(in srgb, var(--accent) 70%, transparent); }
.platform-card:hover::before { opacity: 1; }

.platform-card__logo {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    font-size: 32px;
    color: var(--color-white);
    border-radius: var(--radius-lg);
    background-color: var(--color-linkedin);
    box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--accent) 80%, transparent);
    transition: scale 400ms var(--ease-out);
}
.platform-card:hover .platform-card__logo { scale: 1.08; }
/* TikTok: su glifo oficial con el desfase cian/rosa de la marca. */
.platform-card--tiktok .platform-card__logo {
    background-color: #000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 14px 34px -10px rgba(254, 44, 85, 0.6);
}
.platform-card--tiktok .platform-card__logo svg { filter: drop-shadow(-2px -2px 0 var(--color-tiktok-cyan)) drop-shadow(2px 2px 0 var(--color-tiktok-pink)); }

.platform-card__name { font-family: var(--font-accent); font-size: var(--text-xl); font-weight: 400; letter-spacing: -0.01em; color: var(--color-text-strong); }
.platform-card__text { grid-column: 1 / -1; max-width: 34rem; color: var(--color-text); }
.platform-card__chips { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: var(--space-sm); margin-top: calc(var(--space-sm) * -1); }
.platform-card__chips li {
    padding: 0.35rem 0.85rem;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text);
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

/* Entrada en cascada (con "translate" para no pisar la inclinación). */
.js .platforms-secondary.reveal .platform-card { opacity: 0; translate: 0 32px; }
.js .platforms-secondary.reveal.is-visible .platform-card { opacity: 1; translate: 0 0; }
.js .platforms-secondary.reveal .platform-card + .platform-card { transition-delay: 0s, 0s, 150ms, 150ms; }

@media (min-width: 768px) {
    .platforms-secondary__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 479px) {
    .platform-card { padding: var(--space-lg); }
    .platform-card__logo { width: 56px; height: 56px; font-size: 28px; }
}

@keyframes nudge-left  { 0%, 60%, 100% { translate: 0 0; } 30% { translate: -3px 0; } }
@keyframes nudge-right { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 3px 0; } }


/* ---------- Embudo ----------
   Cuatro franjas trapezoidales que se angostan (--w de 1 a 0.64) y
   juntas dibujan el embudo; la cifra va dentro de la franja y la
   explicación a su derecha. Sin JS o con movimiento reducido: todas
   encendidas, sin sticky ni partículas. Con JS (.is-scrolly): la
   sección mide 320vh, el contenido se queda fijo y cada etapa se
   enciende con el progreso del scroll (--funnel-progress, 0–1). */
.funnel { position: relative; isolation: isolate; overflow: clip; }
.funnel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(45% 40% at 62% 55%, rgba(255, 0, 0, 0.1), transparent 70%);
}

.funnel__layout { display: grid; gap: var(--space-xl); }
.funnel__head { margin-bottom: 0; }

.funnel__body {
    --band-col: 56%;   /* columna de franjas; el resto, explicaciones */
    --funnel-gap: var(--space-lg);
    position: relative;
    width: 100%;
}

.funnel__stages { position: relative; z-index: 1; display: grid; gap: var(--space-sm); }

.funnel__stage {
    --w: 1;          /* ancho de la franja (fracción de su columna) */
    --step: 0.12;    /* cuánto se angosta hasta la siguiente */
    display: grid;
    grid-template-columns: var(--band-col) 1fr;
    align-items: center;
    gap: var(--funnel-gap);
    transition: opacity 500ms var(--ease-out);
}
.funnel__stage[data-stage="1"] { --w: 0.88; }
.funnel__stage[data-stage="2"] { --w: 0.76; }
.funnel__stage[data-stage="3"] { --w: 0.64; --step: 0.1; }

/* La franja: ::before es el borde y ::after el relleno, los dos con
   el mismo trapecio. El brillo va en el filtro de la franja (el
   clip-path recortaría un box-shadow). */
.funnel__band {
    --edge: rgba(255, 255, 255, 0.16);
    --fill: linear-gradient(rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.035));
    --slant: calc(var(--step) / var(--w) * 50%);
    position: relative;
    display: grid;
    place-items: center;
    width: calc(var(--w) * 100%);
    min-height: clamp(4.25rem, 3rem + 4vh, 6.75rem);
    margin-inline: auto;
    container-type: inline-size;   /* la cifra se mide contra su franja */
    transition: filter 500ms var(--ease-out), scale 500ms var(--ease-out);
}
.funnel__band::before,
.funnel__band::after {
    content: "";
    position: absolute;
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, var(--slant) 100%);
    transition: background 500ms var(--ease-out);
}
.funnel__band::before { inset: 0; background: var(--edge); }
.funnel__band::after { inset: 1.5px 2px; background: var(--fill), var(--color-ink-deep); }
.funnel__band { isolation: isolate; }

/* Las cifras reales son largas (1,193,825): el tamaño se ajusta al
   ancho de cada franja para que nunca se salga del trapecio. */
.funnel__value {
    font-size: min(var(--text-2xl), 15cqi);
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: color 500ms var(--ease-out), text-shadow 500ms var(--ease-out);
}
/* Cifras más cortas (6 a 7 caracteres y 5 en la última) aprovechan más
   su franja. Si cambian los datos, revisar que sigan cabiendo. */
.funnel__stage[data-stage="1"] .funnel__value,
.funnel__stage[data-stage="2"] .funnel__value { font-size: min(var(--text-2xl), 18cqi); }
.funnel__stage[data-stage="3"] .funnel__value { font-size: min(var(--text-2xl), 22cqi); }

.funnel__label {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    font-size: var(--text-lg);
    letter-spacing: -0.01em;
}
.funnel__index { font-family: var(--font-accent); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.08em; color: var(--color-brand); }
.funnel__desc { margin-top: var(--space-xs); font-size: var(--text-sm); line-height: 1.45; color: var(--color-text-muted); }

.funnel__note { width: var(--band-col); margin-top: var(--space-lg); font-size: var(--text-xs); text-align: center; color: var(--color-text-muted); }
.funnel__note::before { content: "* "; color: var(--color-brand); }

/* Etapa encendida (y estado sin JS / movimiento reducido). */
.funnel__stage .funnel__band {
    --edge: var(--color-brand);
    --fill: linear-gradient(180deg, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.14));
    filter: drop-shadow(var(--glow-signal));
}
.funnel__note-link {
    font-weight: 700;
    color: var(--color-text-strong);
    text-decoration: underline;
    text-decoration-color: var(--color-brand);
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}
.funnel__note-link:hover { color: var(--color-brand); }
.funnel__stage .funnel__value { color: var(--color-text-strong); text-shadow: 0 0 18px rgba(255, 0, 0, 0.6); }

/* Partículas: solo existen en el modo con scroll. */
.funnel__particles { display: none; }

/* ── Modo con scroll fijo (JS + movimiento permitido) ── */
/* El contenido fijo se alinea arriba con un margen acotado (no centrado):
   centrado dejaba un hueco enorme al entrar a la sección. */
.funnel.is-scrolly { --funnel-offset: var(--space-lg); height: 320vh; padding-block: 0; }
.funnel.is-scrolly .funnel__layout { height: 100%; gap: 0; grid-template-rows: auto 1fr; align-items: start; }
.funnel.is-scrolly .funnel__head { padding-top: var(--space-3xl); }
.funnel.is-scrolly .funnel__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    place-items: start center;
    /* Libre del header fijo (arriba) y de la barra de CTA móvil (abajo). */
    padding-top: calc(var(--header-h) + var(--funnel-offset));
    padding-bottom: var(--space-lg);
}
.funnel.is-scrolly .funnel__particles {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    /* Solo sobre la columna de franjas, para que el embudo de partículas
       quede centrado con el de las etapas. */
    width: var(--band-col);
    height: 100%;
    pointer-events: none;
}
.funnel.is-scrolly .funnel__stage:not(.is-on) { opacity: 0.25; }
.funnel.is-scrolly .funnel__stage:not(.is-on) .funnel__band {
    --edge: rgba(255, 255, 255, 0.16);
    --fill: linear-gradient(rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.035));
    filter: none;
    scale: 0.97;
}
.funnel.is-scrolly .funnel__stage:not(.is-on) .funnel__value { color: var(--color-text-muted); text-shadow: none; }

/* Riel de progreso entre las franjas y las explicaciones: se llena
   con el scroll (scaleY, sin repintar el layout). */
.funnel.is-scrolly .funnel__stages::before,
.funnel.is-scrolly .funnel__stages::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--band-col) + var(--funnel-gap) / 2 - 1px);
    width: 2px;
    border-radius: 2px;
}
.funnel.is-scrolly .funnel__stages::before { background-color: var(--color-border); }
.funnel.is-scrolly .funnel__stages::after {
    background-color: var(--color-brand);
    box-shadow: var(--glow-signal);
    transform: scaleY(var(--funnel-progress, 0));
    transform-origin: top;
}

@media (max-width: 767px) {
    .funnel__body { --band-col: 50%; --funnel-gap: var(--space-md); }
    .funnel__label { gap: 0.4rem; font-size: var(--text-sm); }
    .funnel__desc { font-size: var(--text-xs); }
    .funnel__note { width: auto; text-align: left; }
    .funnel.is-scrolly .funnel__sticky { padding-bottom: calc(var(--mobile-cta-bar-height) + var(--space-sm)); }
}
/* Celulares bajos (iPhone SE): franjas más compactas para que las
   cuatro etapas quepan entre el header y la barra de CTA. */
@media (max-width: 767px) and (max-height: 720px) {
    .funnel__band { min-height: 3.5rem; }
    .funnel__stages { gap: var(--space-xs); }
    .funnel__value { font-size: min(var(--text-xl), 15cqi); }
    .funnel__note { margin-top: var(--space-sm); }
}

@media (min-width: 1024px) {
    .funnel__layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); align-items: center; gap: var(--space-3xl); }
    .funnel__body { --funnel-gap: var(--space-2xl); }
    .funnel__stages { gap: var(--space-md); }
    .funnel__desc { font-size: var(--text-base); }

    /* El encabezado también se queda fijo, a la izquierda del embudo y
       alineado con su borde superior. */
    .funnel.is-scrolly { --funnel-offset: clamp(var(--space-lg), (100svh - var(--header-h) - 30rem) / 2, var(--space-3xl)); }
    .funnel.is-scrolly .funnel__layout { grid-template-rows: 1fr; }
    .funnel.is-scrolly .funnel__head {
        position: sticky;
        top: 0;
        height: 100svh;
        display: grid;
        align-content: start;
        padding-top: calc(var(--header-h) + var(--funnel-offset));
    }
}


/* ---------- Objetivo: pestañas + tarjeta "pantalla" ----------
   Sobre crema, el panel oscuro rompe el ritmo tras el embudo. Sin JS
   los 4 paneles se ven en cuadrícula; con JS (.goal--tabs) hay uno a la vez. */
.goal__tabs { display: none; }
.goal--tabs .goal__tabs {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}
.goal__tab {
    flex: none;
    padding: 0.7rem 1.25rem;
    font: 700 var(--text-sm)/1 var(--font-body);
    color: var(--color-text-dark);
    border-radius: var(--radius-full);
    background-color: var(--color-white);
    box-shadow: inset 0 0 0 1.5px var(--color-border-light);
    cursor: pointer;
    transition: color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.goal__tab:hover { box-shadow: inset 0 0 0 1.5px var(--color-text-dark); transform: translateY(-2px); }
.goal__tab[aria-selected="true"] {
    color: var(--color-white);
    background-color: var(--color-brand);
    box-shadow: 0 10px 28px -8px rgba(255, 0, 0, 0.6);
    transform: none;
}

.goal__panels { display: grid; gap: var(--space-lg); }
.goal__panel {
    position: relative;
    display: grid;
    gap: var(--space-xl);
    padding: var(--space-lg);
    overflow: hidden;
    color: var(--color-text);
    border-radius: var(--radius-xl);
    background-color: var(--color-ink);
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
        radial-gradient(70% 90% at 100% 0%, rgba(255, 0, 0, 0.16), transparent 70%);
    background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), auto;
    box-shadow: var(--shadow-light), 0 30px 70px -30px rgba(0, 0, 0, 0.55);
}
.goal__panel[hidden] { display: none; }
.goal--tabs .goal__panel { animation: goal-in 500ms var(--ease-out) both; }
@keyframes goal-in { from { opacity: 0; transform: translateY(14px); } }

.section--light .goal__heading {
    font-family: var(--font-accent);
    font-size: var(--text-xl);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--color-text-strong);
}
.goal__list { display: grid; gap: var(--space-md); margin-block: var(--space-lg); }
.goal__item { padding-left: var(--space-md); border-left: 2px solid var(--color-border); }
.goal__item dt { margin-bottom: var(--space-xs); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-brand); }
.goal__item dd { line-height: 1.5; }
.goal__chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.goal__chips li {
    padding: 0.35rem 0.85rem;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-strong);
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

/* "Pantalla" de cada objetivo: muestra cómo se mide. */
.goal__screen {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 13rem;
    padding: var(--space-md);
    padding-top: calc(var(--space-md) + 1.5rem);
    border-radius: var(--radius-lg);
    background-color: rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 0 0 1px var(--color-border), inset 0 0 60px rgba(255, 0, 0, 0.06);
}
.goal__screen-label { position: absolute; top: var(--space-md); left: var(--space-md); display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.goal__screen-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background-color: var(--color-brand); box-shadow: var(--glow-signal); }
/* Los datos del panel entran escalonados. */
.goal--tabs .goal__item { opacity: 0; transform: translateY(12px); }
.goal--tabs .goal__panel.is-active .goal__item { opacity: 1; transform: none; transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: calc(var(--i) * 70ms); }

/* Pantallas "cómo lo medimos": cada objetivo muestra dónde ocurre la
   conversión y qué contamos. WhatsApp lleva una conversación con las
   cifras reales de Sinacné; Leads, Ventas y Local son ilustrativas
   (sin cifras) y cierran con la fórmula de su métrica. */
.goal__screen--demo { justify-content: flex-start; gap: var(--space-md); container-type: inline-size; }
.goal__chat { display: flex; flex-direction: column; gap: var(--space-md); }
.goal__origin {
    display: inline-flex;
    align-self: center;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text);
    border-radius: var(--radius-full);
    background-color: var(--color-ink-raised);
}
.goal__origin svg { width: 1rem; height: 1rem; color: var(--color-meta); }
.goal__msg {
    position: relative;
    max-width: 78%;
    padding: 0.6rem 0.85rem;
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--color-text-strong);
    border-radius: var(--radius-lg);
}
.goal__msg--in { align-self: flex-start; border-top-left-radius: var(--radius-sm); background-color: var(--color-ink-raised); }
.goal__msg--out { align-self: flex-end; border-top-right-radius: var(--radius-sm); background-color: var(--color-wa-bubble); }
.goal__msg--event {
    align-self: center;
    max-width: none;
    padding: 0.4rem 0.9rem;
    font-size: var(--text-xs);
    font-weight: 700;
    border-radius: var(--radius-full);
    background-color: var(--color-brand-soft);
    box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.45);
}
/* Sello rojo que marca la etapa contada, colgado de la esquina. */
.goal__tag {
    position: absolute;
    top: -0.55rem;
    right: -0.5rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-white);
    border-radius: var(--radius-full);
    background-color: var(--color-brand);
    box-shadow: var(--glow-signal);
}
.goal__msg--in .goal__tag { right: auto; left: calc(100% - 1.5rem); white-space: nowrap; }
/* En el aviso de asistencia el sello va en línea: la píldora es muy baja para colgarlo. */
.goal__msg--event .goal__tag { position: static; display: inline-block; margin-left: 0.5rem; vertical-align: 1px; }

.goal__stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-top: auto; }
.goal__stage {
    display: grid;
    gap: 0.15rem;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px var(--color-border);
}
.goal__stage-value { font-family: var(--font-accent); font-size: var(--text-lg); color: var(--color-text-strong); }
.goal__stage-name { font-size: var(--text-xs); color: var(--color-text-muted); }
.goal__stage:last-child { box-shadow: inset 0 0 0 1.5px var(--color-brand), var(--glow-signal); }
.goal__stage:last-child .goal__stage-value { color: var(--color-brand); }
.goal__source { font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); }
.goal__source-link {
    font-weight: 700;
    color: var(--color-text-strong);
    text-decoration: underline;
    text-decoration-color: var(--color-brand);
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}
.goal__source-link:hover { color: var(--color-brand); }

/* La conversación entra mensaje por mensaje; cada sello aparece con
   un pequeño golpe y las cifras se encienden al final. */
.goal--tabs .goal__msg, .goal--tabs .goal__stage { opacity: 0; transform: translateY(10px); }
.goal--tabs .goal__tag { opacity: 0; transform: scale(0.6); }
.goal--tabs .goal__panel.is-active .goal__msg { opacity: 1; transform: none; transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(250ms + var(--i) * 550ms); }
.goal--tabs .goal__panel.is-active .goal__tag { opacity: 1; transform: none; transition: opacity 250ms var(--ease-out), transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(550ms + var(--i) * 550ms); }
.goal--tabs .goal__panel.is-active .goal__stage { opacity: 1; transform: none; transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(2400ms + var(--i) * 150ms); }

/* Sello en línea (leads, ventas) y su variante apagada. */
.goal__tag--inline { position: static; display: inline-block; justify-self: start; vertical-align: 2px; }
.goal__tag--muted { color: var(--color-text-muted); background-color: var(--color-ink-raised); box-shadow: inset 0 0 0 1px var(--color-border); }

.goal__demo { display: grid; gap: var(--space-md); }
@container (min-width: 440px) {
    .goal__demo--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
}

/* Leads: formulario del anuncio y la lista que se califica. */
.goal__form {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    background-color: var(--color-ink-soft);
    box-shadow: inset 0 0 0 1px var(--color-border);
}
.goal__form-title { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-xs); font-weight: 700; color: var(--color-text); }
.goal__form-title svg { width: 1rem; height: 1rem; color: var(--color-meta); }
.goal__field {
    display: grid;
    gap: 0.1rem;
    padding: 0.4rem 0.65rem;
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.05);
}
.goal__field span { font-size: 0.68rem; color: var(--color-text-muted); }
.goal__field b { font-size: var(--text-sm); color: var(--color-text-strong); }
.goal__submit {
    padding: 0.45rem;
    font-size: var(--text-xs);
    font-weight: 800;
    text-align: center;
    color: var(--color-white);
    border-radius: var(--radius-md);
    background-color: var(--color-meta);
}
.goal__leads { display: grid; gap: var(--space-sm); }
.goal__lead {
    display: grid;
    gap: 0.2rem;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px var(--color-border), inset 3px 0 0 var(--color-brand);
}
.goal__lead b { font-size: var(--text-sm); color: var(--color-text-strong); }
.goal__lead > span:not(.goal__tag) { font-size: var(--text-xs); color: var(--color-text-muted); }
.goal__lead--out { box-shadow: inset 0 0 0 1px var(--color-border); }
.goal__lead--out > :not(.goal__tag) { opacity: 0.55; }
.goal__lead--out b { text-decoration: line-through; text-decoration-color: var(--color-text-muted); }

/* Ventas: registro de eventos unido por una línea; la compra se enciende. */
.goal__events { position: relative; display: grid; gap: var(--space-sm); }
.goal__events::before { content: ""; position: absolute; top: 1.2rem; bottom: 1.2rem; left: 1.15rem; width: 2px; background: linear-gradient(var(--color-border), var(--color-brand)); }
.goal__event {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-md);
    align-items: center;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
}
.goal__event-icon {
    grid-row: span 2;
    width: 2.3rem;
    height: 2.3rem;
    padding: 0.55rem;
    color: var(--color-text);
    border-radius: 50%;
    background-color: var(--color-ink-raised);
    box-shadow: 0 0 0 4px var(--color-ink);
}
.goal__event b { font-size: var(--text-sm); color: var(--color-text-strong); }
.goal__event b .goal__tag { margin-left: 0.5rem; }
.goal__event > span { font-size: var(--text-xs); color: var(--color-text-muted); }
.goal__event--key { background-color: var(--color-brand-soft); box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.45); }
.goal__event--key .goal__event-icon { color: var(--color-white); background-color: var(--color-brand); box-shadow: 0 0 0 4px var(--color-ink), var(--glow-signal); }

/* Local: mapa estilizado con el radio de la campaña y las acciones. */
.goal__map {
    position: relative;
    height: 9.5rem;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--color-ink-soft);
    box-shadow: inset 0 0 0 1px var(--color-border);
}
.goal__map-streets { position: absolute; inset: 0; width: 100%; height: 100%; }
.goal__map-streets path { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 6; stroke-linecap: round; }
.goal__map-streets .goal__map-avenue { stroke: rgba(255, 255, 255, 0.16); stroke-width: 10; }
.goal__map-radius {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7.5rem;
    aspect-ratio: 1;
    margin: -3.75rem 0 0 -3.75rem;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 0, 0, 0.28), rgba(255, 0, 0, 0.08));
    box-shadow: inset 0 0 0 1.5px rgba(255, 0, 0, 0.6);
}
.goal__map-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    margin: -1.1rem 0 0 -1.1rem;
    color: var(--color-white);
    border-radius: 50%;
    background-color: var(--color-brand);
    box-shadow: var(--glow-signal);
}
.goal__map-pin svg { width: 1.1rem; height: 1.1rem; }
.goal__map-city { position: absolute; left: var(--space-sm); bottom: var(--space-sm); padding: 0.2rem 0.6rem; font-size: var(--text-xs); font-weight: 700; color: var(--color-text); border-radius: var(--radius-full); background-color: rgba(0, 0, 0, 0.6); }
.js .goal__panel.is-active .goal__map-radius { animation: goal-radius 2.4s var(--ease-out) 600ms infinite; }
@keyframes goal-radius { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.25); opacity: 0.35; } }
.goal__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.goal__action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-strong);
    border-radius: var(--radius-full);
    background-color: var(--color-ink-raised);
    box-shadow: inset 0 0 0 1px var(--color-border);
}
.goal__action svg { width: 1rem; height: 1rem; color: var(--color-google); }

/* Fórmula de la métrica: el resultado va encendido. */
.goal__formula { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin-top: auto; }
.goal__term {
    padding: 0.4rem 0.8rem;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-strong);
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px var(--color-border);
}
.goal__term--result { color: var(--color-white); background-color: var(--color-brand); box-shadow: var(--glow-signal); }
.goal__op { font-family: var(--font-accent); color: var(--color-text-muted); }

.goal--tabs .goal__step, .goal--tabs .goal__formula { opacity: 0; transform: translateY(10px); }
.goal--tabs .goal__panel.is-active .goal__step,
.goal--tabs .goal__panel.is-active .goal__formula { opacity: 1; transform: none; transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(250ms + var(--i) * 450ms); }
.goal--tabs .goal__panel.is-active .goal__step .goal__tag { transition-delay: calc(550ms + var(--i) * 450ms); }

@media (min-width: 768px) {
    .goal__panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .goal--tabs .goal__panels { grid-template-columns: 1fr; }
    .goal__panel { padding: var(--space-xl); }
}
@media (min-width: 1024px) {
    .goal--tabs .goal__panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; gap: var(--space-2xl); padding: var(--space-2xl); }
    .goal--tabs .goal__screen { min-height: 22rem; padding: var(--space-xl); padding-top: calc(var(--space-xl) + 1.5rem); }
}
@media (max-width: 767px) {
    .goal__panels { grid-template-columns: 1fr; }
    .goal__cta { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .js .goal__panel.is-active .goal__map-radius { animation: none; }
    .goal--tabs .goal__item, .goal--tabs .goal__step, .goal--tabs .goal__formula,
    .goal--tabs .goal__msg, .goal--tabs .goal__tag, .goal--tabs .goal__stage { transition-delay: 0s !important; }
    .goal--tabs .goal__panel { animation: none; }
}

/* ---------- Creativos: carrusel coverflow ----------
   Scroll horizontal nativo con snap. initAdCarousel escribe en cada
   tarjeta --d (distancia al centro, de -1 a 1) y --ad (su valor
   absoluto, porque abs() aún no está en todos los navegadores); con
   eso giran, se encogen y se apagan las laterales. Sin JS: carril
   normal con scroll horizontal y sin transformaciones. */
.creatives { position: relative; overflow: clip; }
.ad-carousel { --card-w: 260px; --card-gap: var(--space-md); --fade: 9%; position: relative; }
/* Halo rojo detrás de la tarjeta central. */
.ad-carousel::before {
    content: "";
    position: absolute;
    top: 46%;
    left: 50%;
    width: min(110vw, 820px);
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.05) 55%, transparent);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.ad-carousel__track {
    position: relative;
    display: flex;
    gap: var(--card-gap);
    padding: var(--space-md) var(--gutter) var(--space-xl);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-color: var(--color-brand) transparent;
    scrollbar-width: thin;
}
.ad-carousel.is-ready .ad-carousel__track {
    padding-inline: calc(50% - var(--card-w) / 2);
    scroll-padding-inline: 0;
    scrollbar-width: none;
    user-select: none;
    -webkit-user-select: none;
    /* Las laterales se desvanecen hacia los bordes. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.ad-carousel.is-ready .ad-carousel__track::-webkit-scrollbar { display: none; }
.ad-carousel__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.ad-carousel__track:focus-visible { outline-offset: -2px; border-radius: var(--radius-lg); }

.ad-card { position: relative; z-index: 1; flex: none; width: var(--card-w); scroll-snap-align: start; }
.ad-carousel.is-ready .ad-card {
    scroll-snap-align: center;
    opacity: calc(1 - var(--ad, 1) * 0.45);
    transform: perspective(1000px) rotateY(calc(var(--d, 0) * -28deg)) scale(calc(1 - var(--ad, 1) * 0.18));
    will-change: transform, opacity;
}
.ad-carousel.is-ready .ad-card:not(.is-center) { cursor: pointer; }
.ad-card.is-center { z-index: 2; }

/* Etiqueta de formato encima de cada pieza. */
.ad-card__format {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin: 0 auto var(--space-md);
    padding: 5px 12px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background-color: var(--color-ink-soft);
    transition: color var(--transition-slow), border-color var(--transition-slow), box-shadow var(--transition-slow);
}
.ad-card__format svg { font-size: 14px; }
.ad-card.is-center .ad-card__format { color: var(--color-white); border-color: var(--color-brand); box-shadow: var(--glow-signal); }

/* Pantalla: todas las piezas miden 9:16 para que el carril se vea parejo. */
.ad-card__screen {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    font-family: var(--font-ui);
    color: var(--color-white);
    border-radius: var(--radius-lg);
    background-color: #000;
    box-shadow: var(--shadow-card), 0 0 0 1px var(--color-border);
    /* Dentro de un padre transformado, overflow + radio deja esquinas
       rectas en Chrome; la máscara recorta bien sin tocar la sombra. */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transition: box-shadow var(--transition-slow);
}
.ad-card.is-center .ad-card__screen { box-shadow: var(--shadow-card), 0 0 0 2px var(--color-brand), var(--glow-signal); }

/* Cabecera "Patrocinado" (feed e historia). */
.ad-card__head { display: flex; flex: none; align-items: center; gap: 8px; padding: 8px 10px; }
.ad-card__who { display: flex; flex-direction: column; font-size: 10px; line-height: 1.25; }
.ad-card__who b { font-size: 12px; color: var(--color-white); }
.ad-card__label { color: var(--color-text-muted); }

/* Feed 4:5 */
.ad-card__media { flex: none; aspect-ratio: 4 / 5; overflow: hidden; background-color: var(--color-ink-raised); }
.ad-card__media img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
/* Pieza cuadrada (1:1): se ve completa sobre fondo oscuro, sin recortar el texto. */
.ad-card__media--square { background-color: #000; }
.ad-card__media--square img { object-fit: contain; }
.ad-card__cta { padding-block: 9px; }
.ad-card.is-center .ad-card__cta svg { animation: cta-nudge 1.6s var(--ease-out) infinite; }
.ad-card__actions { padding: 8px 12px 4px; font-size: 19px; }
.ad-card__caption {
    padding: 0 12px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-text);
}
.ad-card__caption b { margin-right: 0.3em; color: var(--color-white); }

/* Historia 9:16: reel a sangre con la interfaz encima. */
.ad-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad-card--story .ad-card__screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(rgba(0, 0, 0, 0.45), transparent 22%, transparent 72%, rgba(0, 0, 0, 0.55));
    pointer-events: none;
}
.ad-card__bars { position: absolute; top: 8px; right: 8px; left: 8px; z-index: 2; display: flex; gap: 3px; }
.ad-card__bars i { flex: 1; height: 2px; overflow: hidden; border-radius: 2px; background-color: rgba(255, 255, 255, 0.35); }
.ad-card__bars i:first-child { background-image: linear-gradient(var(--color-white), var(--color-white)); background-repeat: no-repeat; background-size: 35% 100%; }
.ad-card.is-playing .ad-card__bars i:first-child { animation: story-bar 6s linear infinite; }
.ad-card__head--overlay { position: absolute; top: 14px; right: 0; left: 0; z-index: 2; }
.ad-card__head--overlay .ad-post__avatar span { border-color: transparent; }
.ad-card__head--overlay .ad-card__label { color: rgba(255, 255, 255, 0.8); }
.ad-card__swipe {
    position: absolute;
    bottom: 16px;
    left: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    transform: translateX(-50%);
}
.ad-card__swipe span { padding: 7px 16px; color: var(--ui-text); border-radius: var(--radius-full); background-color: var(--color-white); white-space: nowrap; }
.ad-card__swipe svg { font-size: 16px; transform: rotate(-90deg); }
/* Sin JS el navegador muestra los controles del video; el botón no los tapa. */
.ad-carousel:not(.is-ready) .ad-card__swipe { display: none; }
.ad-card.is-center .ad-card__swipe svg { animation: swipe-up 1.6s var(--ease-out) infinite; }
/* Botón de "play": aparece si el reel central está en pausa. */
.ad-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    font-size: 22px;
    border-radius: 50%;
    background-color: rgba(4, 4, 4, 0.55);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: opacity var(--transition-base), transform var(--transition-base);
    pointer-events: none;
}
.ad-card__play svg { margin-left: 3px; }
.ad-carousel.is-ready .ad-card.is-center:not(.is-playing) .ad-card__play { opacity: 1; transform: translate(-50%, -50%); }

/* Búsqueda: resultado de Google con la misma tarjeta del hero. */
.ad-card--search .ad-card__screen { gap: 12px; padding: 0 12px; color: var(--ui-text); background-color: var(--color-white); }
.ad-card__google { display: grid; flex: none; place-items: center; padding-top: 22px; font-size: 28px; color: var(--color-google); }
.ad-card__query {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    font-size: 12px;
    border-radius: var(--radius-full);
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
}
.ad-card__query svg { font-size: 15px; color: var(--ui-muted); }
.ad-card__query span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Mismo aspecto que .ad-result--sponsored del hero (esa clase la usa
   solo la escena animada). */
.ad-card__result {
    flex: none;
    margin-top: 6px;
    padding: 12px 12px 11px;
    border-radius: 14px;
    background-color: var(--color-white);
    box-shadow: 0 0 0 1px var(--color-brand), var(--glow-signal);
}
.ad-card__result .ad-card__label { color: var(--ui-text); }

/* Flechas, avance y contador. Sin JS no se muestran. */
.ad-carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-top: var(--space-sm); }
.ad-carousel:not(.is-ready) .ad-carousel__controls { display: none; }
.ad-carousel__button {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    font-size: 20px;
    color: var(--color-white);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--color-border);
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.ad-carousel__button:hover { background-color: var(--color-brand); box-shadow: inset 0 0 0 1.5px var(--color-brand), var(--glow-signal); }
.ad-carousel__button:active { transform: scale(0.92); }
.ad-carousel__button[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.ad-carousel__button[aria-disabled="true"]:hover { background-color: transparent; box-shadow: inset 0 0 0 1.5px var(--color-border); }
/* Pausa/reproduce el reel central; ocupa su lugar aunque esté oculto
   para que la fila no salte al cambiar de tarjeta. */
.ad-carousel__toggle { font-size: 18px; }
.ad-carousel__toggle[hidden] { display: grid; visibility: hidden; }
.ad-carousel__toggle[aria-pressed="true"] .ad-carousel__icon-pause,
.ad-carousel__toggle[aria-pressed="false"] .ad-carousel__icon-play { display: none; }
.ad-carousel__progress { position: relative; width: 96px; height: 2px; overflow: hidden; border-radius: 2px; background-color: var(--color-border); }
.ad-carousel__bar {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--color-brand);
    box-shadow: var(--glow-signal);
    transform: scaleX(var(--progress, 0));
    transform-origin: left;
    transition: transform var(--transition-slow);
}
.ad-carousel__count { min-width: 4.5em; font-family: var(--font-accent); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ad-carousel__current { font-weight: 400; color: var(--color-white); }

@media (hover: hover) and (pointer: fine) {
    .ad-carousel.is-ready .ad-carousel__track { cursor: grab; }
}
@media (min-width: 768px) {
    .ad-carousel { --card-w: 300px; --card-gap: var(--space-lg); --fade: 14%; }
    .ad-carousel__progress { width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
    .ad-carousel.is-ready .ad-card { transform: scale(calc(1 - var(--ad, 1) * 0.18)); }
}

@keyframes story-bar { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes swipe-up  { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes cta-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 3px 0; } }

/* ---------- Panel semanal: ventana estilo Ads Manager ----------
   Barra de app, 4 KPIs, gráfica de leads contra costo y campañas con
   su presupuesto. Sin JS o con movimiento reducido: todo dibujado y
   visible. Con JS (.is-armed) arranca sin trazar y .is-drawn lo arma
   al entrar en pantalla: la ventana sube, los KPIs cuentan, las
   líneas se trazan y las campañas aparecen una tras otra. */
.dash-section { position: relative; isolation: isolate; overflow: clip; }
.dash-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(55% 45% at 50% 68%, rgba(255, 0, 0, 0.12), transparent 70%);
}

.dash { position: relative; }
.dash__window {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(60% 50% at 100% 0%, rgba(255, 0, 0, 0.1), transparent 70%),
        rgba(18, 18, 18, 0.88);
    box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-card), 0 0 90px rgba(255, 0, 0, 0.1);
}

/* Barra superior de la app. */
.dash__bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    background-color: rgba(255, 255, 255, 0.025);
}
.dash__dots { display: flex; gap: 6px; }
.dash__dots span { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.16); }
.dash__dots span:first-child { background-color: var(--color-brand); box-shadow: 0 0 10px rgba(255, 0, 0, 0.6); }
.dash__title { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; overflow: hidden; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0; white-space: nowrap; text-overflow: ellipsis; }
.dash__title-icon { flex: none; width: 1.1rem; height: 1.1rem; color: var(--color-meta); }
.dash__chip {
    margin-left: auto;
    padding: 0.3rem 0.8rem;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-strong);
    border-radius: var(--radius-full);
    background-color: var(--color-brand-soft);
    box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.45);
}

.dash__body { display: grid; gap: var(--space-md); padding: var(--space-md); }

/* KPIs: tarjetas con una línea de señal arriba; el crecimiento va
   encendido como las franjas del embudo. */
.dash__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.dash__kpi {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-sm);
    padding: var(--space-md);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px var(--color-border);
}
.dash__kpi::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--space-md);
    right: var(--space-md);
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, var(--color-brand), rgba(255, 0, 0, 0));
    box-shadow: var(--glow-signal);
    transform-origin: left;
}
.dash__kpi-label { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-brand); }
.dash__kpi-value { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); letter-spacing: 0.01em; white-space: nowrap; }
.dash__kpi-desc { font-size: var(--text-xs); line-height: 1.35; color: var(--color-text-muted); }
.dash__kpi--signal {
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.42), rgba(255, 0, 0, 0.1));
    box-shadow: inset 0 0 0 1.5px var(--color-brand), var(--glow-signal);
}
.dash__kpi--signal::before { display: none; }
.dash__kpi--signal .dash__kpi-label { color: var(--color-text-strong); }
.dash__kpi--signal .dash__kpi-value { text-shadow: 0 0 18px rgba(255, 0, 0, 0.7); }
.dash__kpi--signal .dash__kpi-desc { color: var(--color-text); }

/* Gráfica: misma "pantalla" que la del objetivo. */
.dash__chart {
    margin: 0;
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    background-color: rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 0 0 1px var(--color-border), inset 0 0 60px rgba(255, 0, 0, 0.06);
}
.dash__chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-lg); }
.dash__chart-title { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.dash__chart-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background-color: var(--color-brand); box-shadow: var(--glow-signal); }
.dash__legend { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.dash__legend-item { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--text-xs); font-weight: 700; color: var(--color-text); }
.dash__legend-item::before { content: ""; width: 16px; height: 3px; border-radius: 3px; }
.dash__legend-item--patients::before { background-color: var(--color-brand); box-shadow: 0 0 8px rgba(255, 0, 0, 0.8); }
.dash__legend-item--booked::before { background-color: var(--color-chart-muted); }

/* La gráfica se estira al alto fijo de su caja (preserveAspectRatio
   "none"); los trazos no se deforman (non-scaling-stroke) y el punto
   final es HTML para seguir redondo. */
.dash__plot-wrap { position: relative; height: clamp(9.5rem, 6rem + 12vw, 15rem); }
.dash__plot { display: block; width: 100%; height: 100%; overflow: visible; }
.dash__gridlines line { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.dash__line { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dash__line--patients { stroke: var(--color-brand); stroke-width: 4; filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.7)); }
.dash__line--booked { stroke: var(--color-chart-muted); stroke-width: 3; }
.dash__dot {
    position: absolute;
    left: 100%;
    top: 72.5%;   /* y = 145 de 200: los 22 pacientes de la semana 35 */
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background-color: var(--color-white);
    box-shadow: 0 0 0 3px var(--color-brand), 0 0 14px 3px rgba(255, 0, 0, 0.9);
}
.dash__dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 2px var(--color-brand); opacity: 0; }
.dash__axis { display: flex; justify-content: space-between; margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-text-muted); }

/* Embudo de 8 semanas: cada etapa con su cifra y una barra
   proporcional a los mensajes (--w). */
.dash__flow { display: grid; grid-template-rows: auto 1fr; gap: var(--space-sm); }
.dash__flow-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding-inline: var(--space-xs); }
.dash__flow-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.dash__flow-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.dash__steps { display: grid; grid-auto-rows: 1fr; gap: var(--space-sm); }
.dash__step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    align-items: baseline;
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px var(--color-border);
}
.dash__step-name { font-size: var(--text-sm); font-weight: 700; line-height: 1.3; color: var(--color-text-strong); }
.dash__step-value { font-size: var(--text-xl); white-space: nowrap; }
.dash__step:last-child .dash__step-value { color: var(--color-brand); text-shadow: 0 0 14px rgba(255, 0, 0, 0.6); }
.dash__step-bar {
    grid-column: 1 / -1;
    height: 6px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.08);
}
.dash__step-fill {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-brand-hover), var(--color-brand));
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.7);
    transform-origin: left;
}

.dash__note { margin-top: var(--space-md); font-size: var(--text-xs); text-align: center; color: var(--color-text-muted); }
.dash__note::before { content: "* "; color: var(--color-brand); }
.dash__note-link {
    font-weight: 700;
    color: var(--color-text-strong);
    text-decoration: underline;
    text-decoration-color: var(--color-brand);
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}
.dash__note-link:hover { color: var(--color-brand); }

/* El final de la línea late (decorativo). */
.dash.is-drawn .dash__dot::after { animation: pulse 1.6s 1.9s var(--ease-out) infinite; }
@keyframes pulse { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.8); } }

/* ── Estado armado (JS + movimiento permitido): sin dibujar ──
   Las transiciones viven solo en .is-drawn: así, al armar la página,
   nada se desvanece de visible a oculto. */
.dash.is-armed .dash__window { opacity: 0; transform: perspective(1400px) rotateX(10deg) translateY(48px) scale(0.97); transform-origin: 50% 100%; }
.dash.is-armed .dash__kpi,
.dash.is-armed .dash__step { opacity: 0; transform: translateY(12px); }
.dash.is-armed .dash__kpi::before,
.dash.is-armed .dash__step-fill { transform: scaleX(0); }
.dash.is-armed .dash__line { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.dash.is-armed .dash__area,
.dash.is-armed .dash__dot { opacity: 0; }

/* ── Dibujado: la ventana sube, los KPIs entran, las líneas se trazan
   (agendados 200ms después) y las etapas del embudo aparecen una tras otra. ── */
.dash.is-drawn .dash__window,
.dash.is-drawn .dash__kpi,
.dash.is-drawn .dash__step { opacity: 1; transform: none; }
.dash.is-drawn .dash__kpi::before,
.dash.is-drawn .dash__step-fill { transform: none; }
.dash.is-drawn .dash__line { stroke-dashoffset: 0; }
.dash.is-drawn .dash__area,
.dash.is-drawn .dash__dot { opacity: 1; }

.dash.is-armed.is-drawn .dash__window { transition: opacity 700ms var(--ease-out), transform 1s var(--ease-out); }
.dash.is-armed.is-drawn .dash__kpi { transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: calc(250ms + var(--i) * 90ms); }
.dash.is-armed.is-drawn .dash__kpi::before { transition: transform 900ms var(--ease-out); transition-delay: calc(450ms + var(--i) * 90ms); }
.dash.is-armed.is-drawn .dash__line { transition: stroke-dashoffset 1.6s var(--ease-out) 200ms; }
.dash.is-armed.is-drawn .dash__line--booked { transition-delay: 400ms; }
.dash.is-armed.is-drawn .dash__area { transition: opacity 900ms var(--ease-out) 800ms; }
.dash.is-armed.is-drawn .dash__dot { transition: opacity 300ms var(--ease-out) 1.5s; }
.dash.is-armed.is-drawn .dash__step { transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: calc(600ms + var(--i) * 140ms); }
.dash.is-armed.is-drawn .dash__step-fill { transition: transform 1.1s var(--ease-out); transition-delay: calc(900ms + var(--i) * 140ms); }

@media (max-width: 767px) {
    .dash__bar { gap: var(--space-sm); padding-inline: var(--space-md); }
    .dash__chip { padding-inline: 0.6rem; }
}
@media (min-width: 768px) {
    .dash__body { gap: var(--space-lg); padding: var(--space-lg); }
    .dash__kpi { padding: var(--space-lg); }
    .dash__kpi::before { left: var(--space-lg); right: var(--space-lg); }
    .dash__chart { padding: var(--space-lg); }
}
@media (min-width: 1024px) {
    .dash__body {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
        grid-template-areas: "kpis kpis" "chart flow";
        gap: var(--space-lg);
        padding: var(--space-xl);
    }
    .dash__kpis { grid-area: kpis; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
    .dash__chart { grid-area: chart; padding: var(--space-xl); }
    .dash__flow { grid-area: flow; }
}
@media (prefers-reduced-motion: reduce) {
    .dash.is-drawn .dash__dot::after { animation: none; }
}

/* ---------- Proceso: la línea roja avanza con el scroll ----------
   Sin JS (o con movimiento reducido) la línea está completa y todos los
   pasos encendidos. Con JS, .is-armed los apaga y initProcessLine los
   enciende según --progress (0 a 1). */
.process {
    --progress: 1;
    --marker: 3rem;
    position: relative;
}
.process__list {
    display: grid;
    gap: var(--space-2xl);
    list-style: none;
}
.process__rail {
    position: absolute;
    top: calc(var(--marker) / 2);
    bottom: calc(var(--marker) / 2);
    left: calc(var(--marker) / 2 - 1px);
    width: 2px;
    border-radius: var(--radius-full);
    background-color: var(--color-border);
}
.process__fill {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--color-brand-hover), var(--color-brand));
    box-shadow: var(--glow-signal);
    transform: scaleY(var(--progress));
    transform-origin: top;
}
.process__step {
    position: relative;
    display: grid;
    grid-template-columns: var(--marker) 1fr;
    gap: var(--space-lg);
    align-items: start;
    align-content: start;
}
.process__num {
    display: grid;
    place-items: center;
    height: var(--marker);
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    line-height: 1;
    color: var(--color-white);
    border-radius: 50%;
    background-color: var(--color-ink-raised);
    box-shadow: 0 0 0 4px var(--color-ink), inset 0 0 0 1px var(--color-border);
    transition: color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.process__body { padding-top: 0.55rem; }
.process__title { font-size: var(--text-lg); line-height: 1.25; color: var(--color-white); transition: color var(--transition-base); }
.process__text { margin-top: var(--space-sm); max-width: 34rem; color: var(--color-text); transition: opacity var(--transition-base); }

/* Paso encendido: número rojo con brillo. */
.process__step.is-on .process__num,
.process:not(.is-armed) .process__num {
    background-color: var(--color-brand);
    box-shadow: 0 0 0 4px var(--color-ink), var(--glow-signal);
    transform: scale(1.06);
}
/* Paso apagado (solo con JS): texto atenuado hasta que llega la línea. */
.process.is-armed .process__step:not(.is-on) .process__title { color: var(--color-text-muted); }
.process.is-armed .process__step:not(.is-on) .process__text { opacity: 0.55; }
.process.is-armed .process__fill { transition: transform 150ms linear; }

@media (min-width: 1024px) {
    .process__list { grid-template-columns: repeat(5, 1fr); gap: 0; }
    .process__rail {
        top: calc(var(--marker) / 2 - 1px);
        bottom: auto;
        left: calc(var(--marker) / 2);
        right: calc(20% - var(--marker) / 2);
        width: auto;
        height: 2px;
    }
    .process__fill { transform: scaleX(var(--progress)); transform-origin: left; background: linear-gradient(90deg, var(--color-brand-hover), var(--color-brand)); }
    .process__step { grid-template-columns: 1fr; gap: var(--space-lg); padding-right: var(--space-lg); }
    .process__num { width: var(--marker); }
    .process__body { padding-top: 0; }
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: var(--space-xl); }
.faq__list { display: grid; gap: var(--space-sm); }
.faq-item { border-radius: var(--radius-md); background-color: var(--color-white); box-shadow: 0 0 0 1px var(--color-border-light); }
.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg);
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text-dark);
    cursor: pointer;
    list-style: none;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::after { content: "+"; flex-shrink: 0; font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--color-brand); transition: transform var(--transition-base); }
.faq-item[open] .faq-item__question::after { transform: rotate(45deg); }
.faq-item__answer { padding: 0 var(--space-lg) var(--space-lg); color: var(--color-text-on-light); }

.faq__head { max-width: 62rem; margin-inline: auto; margin-bottom: 0; text-align: center; text-wrap: balance; }
.faq__list { width: 100%; max-width: 52rem; margin-inline: auto; }
@media (min-width: 1024px) {
    .faq { gap: var(--space-2xl); }
}

/* ---------- Contacto: "Arma tu campaña" ----------
   El formulario es una ventana de la app con barra, progreso y un
   resumen vivo. Sin JS los 4 pasos se ven en columna y se envía
   normal; con JS (.brief--steps) los pasos se apilan en el mismo
   lugar y se recorren con Siguiente / Atrás. */
.contact { position: relative; isolation: isolate; overflow: clip; }
.contact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(50% 45% at 72% 55%, rgba(255, 0, 0, 0.13), transparent 70%);
}
.contact__layout { display: grid; gap: var(--space-2xl); }
.contact__head { margin-bottom: 0; }

/* Accesos directos (mismo patrón que Redes Sociales). */
.contact__shortcuts { display: grid; gap: var(--space-xs); margin-top: var(--space-xl); }
.contact__shortcut {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm);
    text-decoration: none;
    color: var(--color-text);
    border-radius: var(--radius-lg);
    transition: background-color var(--transition-fast);
}
.contact__shortcut:hover { background-color: var(--color-ink-soft); }
.contact__shortcut-ring {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 52px;
    height: 52px;
    font-size: 1.3rem;
    color: var(--color-white);
    border-radius: 50%;
    background: var(--color-ink-raised);
    box-shadow: 0 0 0 3px var(--color-ink-deep), 0 0 0 5px var(--color-brand);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.contact__shortcut--whatsapp .contact__shortcut-ring { background-color: var(--color-whatsapp); box-shadow: 0 0 0 3px var(--color-ink-deep), 0 0 0 5px var(--color-whatsapp); }
.contact__shortcut:hover .contact__shortcut-ring { transform: scale(1.06); box-shadow: 0 0 0 3px var(--color-ink-deep), 0 0 0 5px var(--color-brand), var(--glow-signal); }
.contact__shortcut--whatsapp:hover .contact__shortcut-ring { box-shadow: 0 0 0 3px var(--color-ink-deep), 0 0 0 5px var(--color-whatsapp), 0 0 24px rgba(37, 211, 102, 0.5); }
.contact__shortcut-text { display: flex; flex-direction: column; min-width: 0; }
.contact__shortcut-label { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); }
.contact__shortcut-value { font-size: var(--text-base); font-weight: 700; line-height: 1.35; color: var(--color-white); overflow-wrap: anywhere; }

/* Ventana de la app. */
.brief__window {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(60% 45% at 100% 0%, rgba(255, 0, 0, 0.12), transparent 70%),
        rgba(18, 18, 18, 0.92);
    box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-card), 0 0 90px rgba(255, 0, 0, 0.12);
}
/* Filo de luz arriba, como el borde de una pantalla encendida. */
.brief__window::before {
    content: "";
    position: absolute;
    inset: 0 12% auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 80, 80, 0.8), transparent);
    pointer-events: none;
}
.brief { display: flex; flex-direction: column; }

.brief__bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    background-color: rgba(255, 255, 255, 0.025);
}
.brief__dots { display: flex; gap: 6px; }
.brief__dots span { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.16); }
.brief__dots span:first-child { background-color: var(--color-brand); box-shadow: 0 0 10px rgba(255, 0, 0, 0.6); }
.brief__title { min-width: 0; overflow: hidden; font-size: var(--text-sm); font-weight: 700; color: var(--color-text-strong); white-space: nowrap; text-overflow: ellipsis; }
.brief__count {
    flex: none;
    margin-left: auto;
    padding: 0.3rem 0.8rem;
    font-size: var(--text-xs);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-strong);
    border-radius: var(--radius-full);
    background-color: var(--color-brand-soft);
    box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.45);
}

/* Progreso: línea que se llena + nombre de cada etapa. */
.brief__progress { display: none; position: relative; padding: var(--space-md) var(--space-lg) 0; }
.brief__progress::before,
.brief__progress::after {
    content: "";
    position: absolute;
    top: var(--space-md);
    left: var(--space-lg);
    right: var(--space-lg);
    height: 3px;
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.08);
}
.brief__progress::after {
    background: linear-gradient(90deg, var(--color-brand-hover), var(--color-brand));
    box-shadow: var(--glow-signal);
    transform: scaleX(calc((var(--step) + 1) / 4));
    transform-origin: left;
    transition: transform 600ms var(--ease-out);
}
.brief__stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-sm); padding-top: 0.85rem; }
.brief__stage {
    overflow: hidden;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.6;
    transition: color var(--transition-base), opacity var(--transition-base);
}
.brief[data-step="0"] .brief__stage:nth-child(-n+1),
.brief[data-step="1"] .brief__stage:nth-child(-n+2),
.brief[data-step="2"] .brief__stage:nth-child(-n+3),
.brief[data-step="3"] .brief__stage { color: var(--color-text-strong); opacity: 1; }

/* Pasos. */
.brief__steps { --brief-pad: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-2xl); padding: var(--brief-pad); }
.brief__step { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.brief__question {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: var(--space-md);
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--color-text-strong);
    text-wrap: balance;
}
.brief__question:focus { outline: none; }
.brief__num { flex: none; font-family: var(--font-accent); font-size: var(--text-sm); font-weight: 400; color: var(--color-brand); text-shadow: 0 0 14px rgba(255, 0, 0, 0.7); }
.brief__help { margin-top: calc(var(--space-sm) * -1); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); }

/* Chips: <label> con el input visualmente oculto. */
.brief__chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.brief__chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.6rem 0.8rem 0.6rem 1.1rem;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text);
    border-radius: var(--radius-full);
    background-color: var(--color-ink-raised);
    box-shadow: inset 0 0 0 1px var(--color-border);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);
}
.brief__chip svg { font-size: 1.2em; }
/* Casilla al final: se enciende en rojo con palomita al elegir. */
.brief__chip::after {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    margin-left: auto;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.25);
    background: center / 12px no-repeat;
    transition: background-color var(--transition-base), box-shadow var(--transition-base), transform 300ms var(--ease-out);
}
.brief__chip:hover { color: var(--color-text-strong); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32); }
.brief__chip:active { transform: scale(0.97); }
.brief__chip:has(input:checked) {
    color: var(--color-white);
    background-color: var(--color-brand-soft);
    box-shadow: inset 0 0 0 1.5px var(--color-brand), 0 0 26px -4px rgba(255, 0, 0, 0.55);
}
.brief__chip:has(input:checked)::after {
    background-color: var(--color-brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.7);
    animation: brief-check 350ms var(--ease-out);
}
.brief__chip:focus-within { outline: 2px solid var(--color-white); outline-offset: 3px; }
.brief__chip:focus-within:not(:has(input:focus-visible)) { outline: none; }
@keyframes brief-check { from { transform: scale(0.4); } }

/* Plataformas e inversión: renglones parejos en lugar de píldoras sueltas. */
.brief__chips--grid,
.brief__chips--list { display: grid; grid-template-columns: 1fr; }
@media (min-width: 480px) {
    .brief__chips--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .brief__chips--grid .brief__chip:last-child { grid-column: 1 / -1; }
}
@media (min-width: 600px) {
    .brief__chips--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .brief__chips--list .brief__chip:last-child { grid-column: 1 / -1; }
}

/* Glifos oficiales con su color de marca. */
.brief__chip--meta svg     { color: var(--color-meta); }
.brief__chip--google svg   { color: var(--color-google-yellow); }
.brief__chip--linkedin svg { color: var(--color-linkedin); }
.brief__chip--tiktok svg   { color: var(--color-white); filter: drop-shadow(-1px -1px 0 var(--color-tiktok-cyan)) drop-shadow(1px 1px 0 var(--color-tiktok-pink)); }

/* Objetivos: tarjetas en cuadrícula con ícono en círculo. */
.brief__chips--goals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brief__chip--goal {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    min-height: 0;
    padding: var(--space-md);
    border-radius: var(--radius-lg);
}
.brief__chip--goal svg {
    box-sizing: content-box;
    padding: 0.55rem;
    font-size: 1.15rem;
    color: var(--color-white);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.07);
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
}
.brief__chip--goal:has(input:checked) svg { background-color: var(--color-brand); box-shadow: var(--glow-signal); }
.brief__chip--goal::after { position: absolute; top: var(--space-md); right: var(--space-md); }

/* Objetivo sin elegir: aviso en línea y las tarjetas tiemblan. */
.brief__error { font-size: var(--text-sm); font-weight: 700; color: #FF6B6B; }
.brief__error:empty { margin-top: calc(var(--space-md) * -1); }
.brief__step.is-invalid .brief__chip--goal { box-shadow: inset 0 0 0 1.5px rgba(255, 107, 107, 0.7); }
.brief__step.is-invalid .brief__chips--goals { animation: brief-shake 400ms var(--ease-out); }
@keyframes brief-shake {
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

/* Campos de contacto. */
.brief__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-sm); }
.brief__field--wide { grid-column: 1 / -1; }
.brief__field { display: grid; gap: 0.4rem; min-width: 0; }
.brief__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; color: var(--color-text-muted); }
.brief__label small { font-size: inherit; font-weight: 600; opacity: 0.8; }
.brief__input {
    width: 100%;
    min-height: 50px;
    padding: 0.7rem 1rem;
    font-size: 16px; /* evita el zoom de iOS al enfocar */
    color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: rgba(0, 0, 0, 0.45);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.brief__input::placeholder { color: #6E6E6E; }
.brief__input:focus { border-color: var(--color-brand); outline: none; box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.18); }
.brief__input:user-invalid { border-color: #FF6B6B; }
.brief__textarea { min-height: 80px; resize: vertical; }

/* Navegación del paso: Atrás a la izquierda, avanzar a la derecha. */
.brief__nav { display: flex; align-items: center; gap: var(--space-sm); padding-top: var(--space-md); }
.brief__nav .button { white-space: nowrap; }
.brief__next, .brief__send { margin-left: auto; }
.brief__back { padding-inline: 1.1rem 1.4rem; }
.brief__send.is-sending { opacity: 0.6; pointer-events: none; }

/* Resumen vivo: se llena conforme eliges. */
.brief__summary {
    display: none;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    flex-wrap: wrap;
    min-height: 3.5rem;
    padding: var(--space-sm) var(--space-lg);
    border-top: 1px solid var(--color-border);
    background-color: rgba(255, 255, 255, 0.02);
}
.brief__summary-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.brief__summary-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background-color: var(--color-status-on); box-shadow: 0 0 10px rgba(47, 216, 114, 0.7); }
.brief__summary-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.brief__summary-list li {
    padding: 0.25rem 0.7rem;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-strong);
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px var(--color-border);
    animation: brief-pop 350ms var(--ease-out);
}
.brief__summary-list li.is-empty { color: var(--color-text-muted); background: none; animation: none; }
@keyframes brief-pop { from { opacity: 0; transform: scale(0.85); } }

/* Sin JS: formulario normal, sin botones de paso. */
.brief:not(.brief--steps) .brief__next,
.brief:not(.brief--steps) .brief__back { display: none; }

/* Con JS: un paso a la vez, apilados en el mismo lugar. Solo el paso
   actual ocupa espacio; initCampaignBrief anima la altura al cambiar. */
.brief--steps .brief__progress { display: block; }
.brief--steps .brief__summary { display: flex; }
.brief--steps .brief__steps { position: relative; display: block; overflow: clip; }
.brief--steps .brief__step {
    position: absolute;
    inset: var(--brief-pad) var(--brief-pad) auto;
    visibility: hidden;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 300ms ease-out, transform 450ms var(--ease-out), visibility 0s linear 450ms;
}
.brief--steps .brief__step.is-past { transform: translateX(-24px); }
.brief--steps .brief__step.is-current {
    position: relative;
    inset: auto;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 400ms 120ms ease-out, transform 550ms 120ms var(--ease-out), visibility 0s;
}

@media (min-width: 600px) and (max-width: 1023px) {
    .contact__shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .brief__steps { --brief-pad: var(--space-xl); }
    .brief__bar, .brief__summary { padding-inline: var(--space-xl); }
    .brief__progress { padding-inline: var(--space-xl); }
    .brief__progress::before, .brief__progress::after { left: var(--space-xl); right: var(--space-xl); }
    .brief__question { font-size: var(--text-xl); }
}
@media (min-width: 1024px) {
    .contact__layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-4xl); align-items: start; }
}
@media (max-width: 479px) {
    .brief__nav .button { gap: 0.4rem; font-size: var(--text-sm); }
    .brief__next, .brief__send { flex: 1; padding-inline: var(--space-md); }
    .brief__back { padding-inline: 0.9rem 1.1rem; }
    .brief__stage { font-size: 0.6875rem; }
}
@media (prefers-reduced-motion: reduce) {
    .brief--steps .brief__step, .brief--steps .brief__step.is-past { transform: none; }
}

/* ---------- Cifras animadas ----------
   Forma de toda cifra: <span class="stat" data-count data-value="..." data-placeholder>. */
.stat { font-family: var(--font-accent); font-variant-numeric: tabular-nums; color: var(--color-text-strong); line-height: 1; }
/* Revisión local (?revision): marca las cifras de ejemplo. Nunca en producción
   porque el deploy exige que no quede ningún data-placeholder. */
.is-review [data-placeholder] { position: relative; outline: 1px dashed rgba(255, 200, 0, .7); outline-offset: 4px; }
.is-review [data-placeholder]::after {
    content: "ejemplo"; position: absolute; top: -1.4em; left: 0;
    font: 700 10px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
    color: #111; background: #FFC800; padding: 2px 5px; border-radius: 3px;
}

/* ---------- CTA final hacia el sitio principal ---------- */
.agency-cta { padding: var(--space-3xl) 0; background-color: var(--color-ink-deep); }
.agency-cta__container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.agency-cta__banner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-2xl) var(--space-xl);
    overflow: hidden;
    border-radius: var(--radius-xl);
}
.agency-cta__image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.agency-cta__banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background-color: var(--color-scrim); }
.agency-cta__content, .agency-cta__banner .button { position: relative; z-index: 2; }
.agency-cta__title { font-size: var(--text-xl); }
.agency-cta__title-accent { color: var(--color-brand); white-space: nowrap; }
.agency-cta__text { margin-top: var(--space-sm); color: var(--color-text); }

@media (min-width: 768px) {
    .agency-cta__banner { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-2xl) var(--space-3xl); }
    .agency-cta__content { max-width: 36rem; }
}

/* ---------- Footer ----------
   Réplica del footer de las landings "Agencia de marketing en <ciudad>"
   (~/Projects/landing tsb/styles.css), con los glifos oficiales. */
.site-footer {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-sm);
    background-color: var(--color-ink);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer__container {
    display: grid;
    gap: var(--space-xl);
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--space-md);
}
@media (min-width: 768px) {
    .site-footer__container { grid-template-columns: 1.2fr 1fr 1fr; align-items: start; }
}
.site-footer__brand img { width: 180px; height: auto; margin-bottom: var(--space-md); }
.site-footer__tagline { max-width: 24ch; margin-bottom: var(--space-md); color: var(--color-white); }
.site-footer__social { display: flex; gap: var(--space-sm); }
.site-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--color-brand);
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-full);
    background-color: transparent;
    transition: transform var(--transition-fast);
}
.site-footer__social-link svg { width: 15px; height: 15px; }
.site-footer__social-link:hover { transform: translateY(-2px); }
.site-footer__nav { display: flex; flex-direction: column; gap: var(--space-md); padding-top: var(--space-md); }
.site-footer__contact { padding-top: var(--space-md); }
.site-footer__heading {
    margin-bottom: var(--space-sm);
    font-size: var(--text-base);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-white);
}
.site-footer__heading--social { margin-top: var(--space-md); }
.site-footer__list { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0; padding: 0; }
.site-footer__list li { display: flex; align-items: center; gap: var(--space-sm); }
.site-footer__list-icon { flex-shrink: 0; width: 16px; height: 16px; }
.site-footer__link { font-size: 1rem; font-weight: 600; color: var(--color-white); }
.site-footer__contact { display: flex; flex-direction: column; gap: var(--space-md); }
.site-footer__contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-white);
    transition: color var(--transition-fast);
}
.site-footer__contact-item--address { align-items: flex-start; }
a.site-footer__contact-item:hover { color: var(--color-brand); }
.site-footer__contact-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-brand);
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-full);
    background-color: transparent;
}
.site-footer__contact-item--address .site-footer__contact-icon { margin-top: 2px; }
.site-footer__contact-icon svg { width: 16px; height: 16px; }
.site-footer__bottom {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-top: var(--space-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
@media (min-width: 768px) {
    .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
.site-footer__legal { display: flex; gap: var(--space-lg); }
.site-footer__legal a { text-decoration: none; color: var(--color-text-muted); }
.site-footer__legal a:hover { color: var(--color-brand); }

/* ---------- Barra fija de contacto (solo móvil) ---------- */
.mobile-cta-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    height: var(--mobile-cta-bar-height);
    padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom));
    gap: var(--space-sm);
    background-color: rgba(4, 4, 4, 0.9);
    border-top: 1px solid var(--color-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.mobile-cta-bar__primary {
    display: grid;
    flex: 1;
    place-items: center;
    font-weight: 800;
    text-decoration: none;
    color: var(--color-white);
    border-radius: var(--radius-full);
    background-color: var(--color-brand);
}
.mobile-cta-bar__primary:active { background-color: var(--color-brand-hover); }
.mobile-cta-bar__whatsapp {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    font-size: 1.6rem;
    color: var(--color-white);
    border-radius: 50%;
    background-color: var(--color-whatsapp);
}
.mobile-cta-bar__whatsapp:active { background-color: var(--color-whatsapp-hover); }

body { padding-bottom: var(--mobile-cta-bar-height); }

@media (min-width: 768px) {
    .mobile-cta-bar { display: none; }
    body { padding-bottom: 0; }
}


/* ---------- Páginas secundarias: 404, gracias, aviso ---------- */
.status-body { padding-bottom: 0; }
.status-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    min-height: 100svh;
    padding: var(--space-2xl) var(--gutter);
    text-align: center;
    background: radial-gradient(50% 45% at 50% 40%, rgba(255, 0, 0, 0.16), transparent 70%), var(--color-ink);
}
.status-page__code { font-family: var(--font-accent); font-size: clamp(5rem, 3rem + 10vw, 9rem); line-height: 1; color: var(--color-brand); }
.status-page__check {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--story-ring);
}
.status-page__check::before { content: ""; width: 30px; height: 16px; margin-top: -8px; border-left: 4px solid var(--color-white); border-bottom: 4px solid var(--color-white); transform: rotate(-45deg); }
.status-page__title { font-size: var(--text-2xl); }
.status-page__text { max-width: 32rem; font-size: var(--text-lg); color: var(--color-text); }
.status-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }

.legal { width: min(100% - 2 * var(--gutter), 46rem); margin-inline: auto; padding: calc(var(--header-h) + var(--space-2xl)) 0 var(--space-3xl); }
.legal h1 { font-size: var(--text-2xl); }
.legal h2 { margin-top: var(--space-xl); font-size: var(--text-lg); }
.legal p { margin-top: var(--space-md); }
.legal a:not(.button) { color: var(--color-brand); }
.legal .button { margin-top: var(--space-lg); }


/* ================================================================
   6. UTILIDADES
   ================================================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sr-only--focusable:focus {
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: 200;
    width: auto;
    height: auto;
    padding: var(--space-sm) var(--space-md);
    margin: 0;
    clip: auto;
    color: var(--color-white);
    border-radius: var(--radius-sm);
    background-color: var(--color-brand);
}
.botcheck { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* Reveal al entrar en pantalla (initReveal); sin JS todo visible. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
/* El comparador conserva su transición de --split junto con la entrada. */
.js .compare.reveal { transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out), --split 450ms var(--ease-out); }


/* ================================================================
   7. MOVIMIENTO REDUCIDO
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}