/* Generado por marca/tokens/build.mjs. No editar a mano: se edita el JSON y se vuelve a compilar. */
:root {
  /* Primitivos */
  --dilo-azul-50: #F0F2FF;
  --dilo-azul-100: #E3E8FF;
  --dilo-azul-200: #C7D0FF;
  --dilo-azul-300: #8EA0FF;
  --dilo-azul-400: #6E83FF;
  --dilo-azul-600: #2140FF;
  --dilo-azul-700: #1A33CC;
  --dilo-azul-800: #13269A;
  --dilo-azul-900: #0D1A66;
  --dilo-chispa-100: #FFF3D1;
  --dilo-chispa-500: #FFC233;
  --dilo-neutro-0: #FFFFFF;
  --dilo-neutro-50: #F5F6F8;
  --dilo-neutro-100: #EBEDF0;
  --dilo-neutro-200: #DCDFE4;
  --dilo-neutro-300: #C4C8D0;
  --dilo-neutro-400: #A9AEB8;
  --dilo-neutro-500: #8A8F9C;
  --dilo-neutro-600: #5A606C;
  --dilo-neutro-700: #3E434E;
  --dilo-neutro-800: #262A33;
  --dilo-neutro-900: #1A1D23;
  --dilo-neutro-950: #111318;
  --dilo-rojo-100: #FDECEC;
  --dilo-rojo-300: #FF8A8D;
  --dilo-rojo-500: #E5484D;
  --dilo-rojo-600: #C93338;
  --dilo-verde-100: #E6F4EC;
  --dilo-verde-300: #5FD39A;
  --dilo-verde-600: #18794E;
  --dilo-ambar-100: #FFF1DF;
  --dilo-ambar-300: #FFB65C;
  --dilo-ambar-600: #A35200;
  --fuente-titular: "Bricolage Grotesque", "Arial Black", Arial, sans-serif;
  --fuente-acento: "Instrument Serif", Georgia, serif;
  --fuente-texto: "Hanken Grotesk", Arial, Helvetica, sans-serif;
  --fuente-dato: "IBM Plex Mono", "Courier New", monospace;
  --peso-regular: 400;
  --peso-medio: 500;
  --peso-seminegrita: 600;
  --peso-negrita: 700;
  --peso-extranegrita: 800;
  --espacio-0: 0px;
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-6: 24px;
  --espacio-8: 32px;
  --espacio-12: 48px;
  --espacio-16: 64px;
  --espacio-24: 96px;
  --espacio-32: 128px;
  --radio-ninguno: 0px;
  --radio-s: 2px;
  --radio-m: 6px;
  --radio-l: 12px;
  --radio-pildora: 999px;
  --borde-fino: 1px;
  --borde-medio: 2px;
  --sombra-captura: 0px 1px 2px 0px #1113180F, 0px 12px 32px -8px #1113182E;
  --duracion-instantanea: 100ms;
  --duracion-rapida: 200ms;
  --duracion-base: 320ms;
  --duracion-lenta: 600ms;
  --duracion-dato: 1200ms;
  --curva-salida: cubic-bezier(0.16, 1, 0.3, 1);
  --curva-estandar: cubic-bezier(0.4, 0, 0.2, 1);
  --curva-entrada: cubic-bezier(0.7, 0, 0.84, 0);

  /* Semánticos, modo claro */
  --color-fondo-base: var(--dilo-neutro-0);
  --color-fondo-sutil: var(--dilo-neutro-50);
  --color-fondo-elevado: var(--dilo-neutro-0);
  --color-fondo-invertido: var(--dilo-neutro-950);
  --color-fondo-marca: var(--dilo-azul-600);
  --color-fondo-marca-sutil: var(--dilo-azul-50);
  --color-texto-principal: var(--dilo-neutro-950);
  --color-texto-secundario: var(--dilo-neutro-600);
  --color-texto-invertido: var(--dilo-neutro-0);
  --color-texto-marca: var(--dilo-azul-600);
  --color-texto-sobre-marca: var(--dilo-neutro-0);
  --color-borde-sutil: var(--dilo-neutro-200);
  --color-borde-control: var(--dilo-neutro-500);
  --color-borde-foco: var(--dilo-azul-600);
  --color-dato-antes: var(--dilo-rojo-500);
  --color-dato-antes-texto: var(--dilo-rojo-600);
  --color-dato-despues: var(--dilo-azul-600);
  --color-dato-pista: var(--dilo-neutro-100);
  --color-estado-exito: var(--dilo-verde-600);
  --color-estado-aviso: var(--dilo-ambar-600);
  --color-estado-error: var(--dilo-rojo-600);
  --color-estado-info: var(--dilo-azul-600);
  --color-acento-base: var(--dilo-chispa-500);
  --color-acento-sobre: var(--dilo-neutro-950);

  /* Tipografía web */
  --tipo-display-familia: var(--fuente-titular);
  --tipo-display-tamano: clamp(3rem, 1.8261rem + 5.2174vw, 6rem);
  --tipo-display-peso: 800;
  --tipo-display-interlineado: 0.92;
  --tipo-display-tracking: -0.035em;
  --tipo-titular-1-familia: var(--fuente-titular);
  --tipo-titular-1-tamano: clamp(2.5rem, 1.9130rem + 2.6087vw, 4rem);
  --tipo-titular-1-peso: 800;
  --tipo-titular-1-interlineado: 0.98;
  --tipo-titular-1-tracking: -0.03em;
  --tipo-titular-2-familia: var(--fuente-titular);
  --tipo-titular-2-tamano: clamp(2rem, 1.7065rem + 1.3043vw, 2.75rem);
  --tipo-titular-2-peso: 700;
  --tipo-titular-2-interlineado: 0.98;
  --tipo-titular-2-tracking: -0.03em;
  --tipo-titular-3-familia: var(--fuente-texto);
  --tipo-titular-3-tamano: clamp(1.25rem, 1.2011rem + 0.2174vw, 1.375rem);
  --tipo-titular-3-peso: 600;
  --tipo-titular-3-interlineado: 1.25;
  --tipo-titular-3-tracking: -0.01em;
  --tipo-entrada-familia: var(--fuente-texto);
  --tipo-entrada-tamano: 1.25rem;
  --tipo-entrada-peso: 400;
  --tipo-entrada-interlineado: 1.5;
  --tipo-entrada-tracking: 0em;
  --tipo-cuerpo-familia: var(--fuente-texto);
  --tipo-cuerpo-tamano: 1.0625rem;
  --tipo-cuerpo-peso: 400;
  --tipo-cuerpo-interlineado: 1.6;
  --tipo-cuerpo-tracking: 0em;
  --tipo-pequeno-familia: var(--fuente-texto);
  --tipo-pequeno-tamano: 0.875rem;
  --tipo-pequeno-peso: 400;
  --tipo-pequeno-interlineado: 1.5;
  --tipo-pequeno-tracking: 0em;
  --tipo-etiqueta-familia: var(--fuente-texto);
  --tipo-etiqueta-tamano: 0.75rem;
  --tipo-etiqueta-peso: 600;
  --tipo-etiqueta-interlineado: 1.3;
  --tipo-etiqueta-tracking: 0.1em;
  --tipo-cifra-familia: var(--fuente-titular);
  --tipo-cifra-tamano: clamp(4.5rem, 3.1304rem + 6.0870vw, 8rem);
  --tipo-cifra-peso: 800;
  --tipo-cifra-interlineado: 0.85;
  --tipo-cifra-tracking: -0.04em;
  --tipo-cifra-antes-familia: var(--fuente-titular);
  --tipo-cifra-antes-tamano: clamp(1.75rem, 1.4565rem + 1.3043vw, 2.5rem);
  --tipo-cifra-antes-peso: 500;
  --tipo-cifra-antes-interlineado: 1;
  --tipo-cifra-antes-tracking: 0em;
  --tipo-acento-familia: var(--fuente-acento);
  --tipo-acento-tamano: 1em;
  --tipo-acento-peso: 400;
  --tipo-acento-interlineado: 1;
  --tipo-acento-tracking: -0.01em;
}

/* Modo oscuro: sigue al sistema salvo que la página fije data-tema="claro". */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --color-fondo-base: var(--dilo-neutro-950);
    --color-fondo-sutil: var(--dilo-neutro-900);
    --color-fondo-elevado: var(--dilo-neutro-800);
    --color-fondo-invertido: var(--dilo-neutro-0);
    --color-fondo-marca: var(--dilo-azul-600);
    --color-fondo-marca-sutil: var(--dilo-azul-900);
    --color-texto-principal: var(--dilo-neutro-50);
    --color-texto-secundario: var(--dilo-neutro-400);
    --color-texto-invertido: var(--dilo-neutro-950);
    --color-texto-marca: var(--dilo-azul-300);
    --color-texto-sobre-marca: var(--dilo-neutro-0);
    --color-borde-sutil: var(--dilo-neutro-800);
    --color-borde-control: var(--dilo-neutro-500);
    --color-borde-foco: var(--dilo-azul-300);
    --color-dato-antes: var(--dilo-rojo-500);
    --color-dato-antes-texto: var(--dilo-rojo-300);
    --color-dato-despues: var(--dilo-azul-300);
    --color-dato-pista: var(--dilo-neutro-800);
    --color-estado-exito: var(--dilo-verde-300);
    --color-estado-aviso: var(--dilo-ambar-300);
    --color-estado-error: var(--dilo-rojo-300);
    --color-estado-info: var(--dilo-azul-300);
    --color-acento-base: var(--dilo-chispa-500);
    --color-acento-sobre: var(--dilo-neutro-950);
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --color-fondo-base: var(--dilo-neutro-950);
  --color-fondo-sutil: var(--dilo-neutro-900);
  --color-fondo-elevado: var(--dilo-neutro-800);
  --color-fondo-invertido: var(--dilo-neutro-0);
  --color-fondo-marca: var(--dilo-azul-600);
  --color-fondo-marca-sutil: var(--dilo-azul-900);
  --color-texto-principal: var(--dilo-neutro-50);
  --color-texto-secundario: var(--dilo-neutro-400);
  --color-texto-invertido: var(--dilo-neutro-950);
  --color-texto-marca: var(--dilo-azul-300);
  --color-texto-sobre-marca: var(--dilo-neutro-0);
  --color-borde-sutil: var(--dilo-neutro-800);
  --color-borde-control: var(--dilo-neutro-500);
  --color-borde-foco: var(--dilo-azul-300);
  --color-dato-antes: var(--dilo-rojo-500);
  --color-dato-antes-texto: var(--dilo-rojo-300);
  --color-dato-despues: var(--dilo-azul-300);
  --color-dato-pista: var(--dilo-neutro-800);
  --color-estado-exito: var(--dilo-verde-300);
  --color-estado-aviso: var(--dilo-ambar-300);
  --color-estado-error: var(--dilo-rojo-300);
  --color-estado-info: var(--dilo-azul-300);
  --color-acento-base: var(--dilo-chispa-500);
  --color-acento-sobre: var(--dilo-neutro-950);
  color-scheme: dark;
}

/* Clases de tipografía web */
.tipo-display { font-family: var(--tipo-display-familia); font-size: var(--tipo-display-tamano); font-weight: var(--tipo-display-peso); line-height: var(--tipo-display-interlineado); letter-spacing: var(--tipo-display-tracking); }
.tipo-titular-1 { font-family: var(--tipo-titular-1-familia); font-size: var(--tipo-titular-1-tamano); font-weight: var(--tipo-titular-1-peso); line-height: var(--tipo-titular-1-interlineado); letter-spacing: var(--tipo-titular-1-tracking); }
.tipo-titular-2 { font-family: var(--tipo-titular-2-familia); font-size: var(--tipo-titular-2-tamano); font-weight: var(--tipo-titular-2-peso); line-height: var(--tipo-titular-2-interlineado); letter-spacing: var(--tipo-titular-2-tracking); }
.tipo-titular-3 { font-family: var(--tipo-titular-3-familia); font-size: var(--tipo-titular-3-tamano); font-weight: var(--tipo-titular-3-peso); line-height: var(--tipo-titular-3-interlineado); letter-spacing: var(--tipo-titular-3-tracking); }
.tipo-entrada { font-family: var(--tipo-entrada-familia); font-size: var(--tipo-entrada-tamano); font-weight: var(--tipo-entrada-peso); line-height: var(--tipo-entrada-interlineado); letter-spacing: var(--tipo-entrada-tracking); }
.tipo-cuerpo { font-family: var(--tipo-cuerpo-familia); font-size: var(--tipo-cuerpo-tamano); font-weight: var(--tipo-cuerpo-peso); line-height: var(--tipo-cuerpo-interlineado); letter-spacing: var(--tipo-cuerpo-tracking); }
.tipo-pequeno { font-family: var(--tipo-pequeno-familia); font-size: var(--tipo-pequeno-tamano); font-weight: var(--tipo-pequeno-peso); line-height: var(--tipo-pequeno-interlineado); letter-spacing: var(--tipo-pequeno-tracking); }
.tipo-etiqueta { font-family: var(--tipo-etiqueta-familia); font-size: var(--tipo-etiqueta-tamano); font-weight: var(--tipo-etiqueta-peso); line-height: var(--tipo-etiqueta-interlineado); letter-spacing: var(--tipo-etiqueta-tracking); text-transform: uppercase; }
.tipo-cifra { font-family: var(--tipo-cifra-familia); font-size: var(--tipo-cifra-tamano); font-weight: var(--tipo-cifra-peso); line-height: var(--tipo-cifra-interlineado); letter-spacing: var(--tipo-cifra-tracking); }
.tipo-cifra-antes { font-family: var(--tipo-cifra-antes-familia); font-size: var(--tipo-cifra-antes-tamano); font-weight: var(--tipo-cifra-antes-peso); line-height: var(--tipo-cifra-antes-interlineado); letter-spacing: var(--tipo-cifra-antes-tracking); }
.tipo-acento { font-family: var(--tipo-acento-familia); font-size: var(--tipo-acento-tamano); font-weight: var(--tipo-acento-peso); line-height: var(--tipo-acento-interlineado); letter-spacing: var(--tipo-acento-tracking); }

/* Movimiento reducido: las animaciones se vuelven cortes o fundidos breves. */
@media (prefers-reduced-motion: reduce) {
  :root { --duracion-base: 1ms; --duracion-lenta: 1ms; --duracion-dato: 1ms; }
}

/* Dilo Digital · base de las piezas comerciales (one pager, presentación, guía de llamada).
   Colores y tiempos desde los tokens del manual; fuentes, las mismas de la web. */

@font-face { font-family: 'Bricolage Grotesque'; font-weight: 800; src: url('archivos/fuentes/bricolage-grotesque-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 600; src: url('archivos/fuentes/bricolage-grotesque-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 400; src: url('archivos/fuentes/hanken-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 600; src: url('archivos/fuentes/hanken-grotesk-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; src: url('archivos/fuentes/instrument-serif-latin-400-italic.woff2') format('woff2'); }

:root {
  --azul: #2140FF; --noche: #0D1A66; --hielo: #E3E8FF; --chispa: #FFC233; --tinta: #111318;
  --gris: #5A606C; --linea: #DCDFE4; --sutil: #F5F6F8;
  --f-tit: 'Bricolage Grotesque', 'Arial Black', Arial, sans-serif;
  --f-acento: 'Instrument Serif', Georgia, serif;
  --f-txt: 'Hanken Grotesk', Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { font-family: var(--f-txt); color: var(--tinta); background: #e9ebf0; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
em, .acento { font-family: var(--f-acento); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
h1, h2, h3 { font-family: var(--f-tit); font-weight: 800; letter-spacing: -.045em; text-wrap: balance; }
p, li { text-wrap: pretty; }
.etq { font: 600 .72em/1.2 var(--f-txt); letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .7em; }
.etq::before { content: ''; width: 1.8em; height: 2px; background: currentColor; }

/* Captura de web en un navegador simulado */
.nav { border-radius: 10px; overflow: hidden; background: #1A1D23; box-shadow: 0 18px 40px -18px rgba(13, 26, 102, .55); }
.nav__barra { display: flex; align-items: center; gap: 5px; padding: 7px 10px; }
.nav__barra i { width: 7px; height: 7px; border-radius: 50%; background: #3E434E; }
.nav__barra span { margin-left: 8px; padding: 2px 10px; border-radius: 99px; background: #262A33; color: #A9AEB8; font-size: 9px; }
.nav__pantalla { aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.nav__pantalla img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cel { border-radius: 18px; padding: 5px; background: var(--tinta); box-shadow: 0 18px 40px -16px rgba(13, 26, 102, .6); }
.cel__pantalla { border-radius: 13px; overflow: hidden; aspect-ratio: 9 / 18.5; background: #fff; }
.cel__pantalla img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.chip { display: inline-block; padding: .35em .9em; border-radius: 99px; border: 1.5px solid currentColor; font-weight: 600; font-size: .8em; }

@media screen { .pagina, .lamina { margin: 24px auto; box-shadow: 0 10px 40px rgba(0, 0, 0, .15); } }
@media print { body { background: none; } .nav, .cel { box-shadow: none; } }

/* Lámina "Nuestra tecnología": diagrama ERP ⇄ API ⇄ backend Dilo → web, datos e IA. Coordenadas de 1920×1080. */
.tec__tit { max-width: 1300px; }
.tec__mapa { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; }
.tec__mapa path { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 3; stroke-linecap: round; }
.tec__mapa .api { stroke: var(--chispa); stroke-dasharray: none; stroke-width: 4; }
.tec__caja { position: absolute; border-radius: 26px; padding: 30px 32px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; display: grid; gap: 10px; align-content: start; }
.tec__caja h3 { font-size: 34px; line-height: 1; letter-spacing: -.035em; }
.tec__caja p { font-size: 20px; line-height: 1.35; color: rgba(255,255,255,.78); }
.tec__caja .ico { font-size: 40px; color: var(--chispa); }
.tec__erp { left: 120px; top: 520px; width: 380px; }
.tec__nucleo { left: 700px; top: 470px; width: 460px; background: var(--azul); border-color: var(--azul); box-shadow: 0 0 0 14px rgba(33,64,255,.25), 0 40px 80px -30px rgba(0,0,0,.6); }
.tec__nucleo h3 { font-size: 44px; }
.tec__nucleo p { color: rgba(255,255,255,.92); }
.tec__nucleo .tec__logo { width: 64px; height: 64px; color: #fff; }
.tec__sale { left: 1380px; width: 420px; grid-template-columns: 60px 1fr; column-gap: 18px; align-items: center; padding: 24px 28px; }
.tec__sale h3 { font-size: 28px; }
.tec__sale p { font-size: 18px; grid-column: 2; }
.tec__s1 { top: 330px; } .tec__s2 { top: 560px; } .tec__s3 { top: 790px; }
.tec__sigla { width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; font: 800 24px/1 var(--f-tit); grid-row: span 2; }
.tec__sigla .ico { font-size: 32px; color: inherit; }
.tec__etq-api { position: absolute; left: 530px; top: 600px; padding: 8px 18px; border-radius: 99px; background: var(--chispa); color: var(--tinta); font: 800 22px/1 var(--f-tit); letter-spacing: .02em; }
.tec__chips { position: absolute; left: 700px; top: 760px; width: 460px; display: flex; flex-wrap: wrap; gap: 10px; }
.tec__chips span { padding: 8px 16px; border-radius: 99px; border: 1.5px solid rgba(255,255,255,.35); color: #fff; font: 600 18px var(--f-txt); }
.tec__paquete { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--chispa); box-shadow: 0 0 16px 4px rgba(255,194,51,.6); }

/* Presentación animada: escenario 1920×1080 escalado a la ventana. */
html, body { height: 100%; }
body { background: #07080c; overflow: hidden; cursor: default; }
#sala { position: fixed; inset: 0; overflow: hidden; }
#escenario { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; overflow: hidden; background: #fff; transform-origin: center; border-radius: 6px; }

.lamina { margin: 0 !important; box-shadow: none !important; position: absolute; inset: 0; padding: 96px 120px; overflow: hidden; visibility: hidden; background: #fff; color: var(--tinta); }
.lamina.activa { visibility: visible; }
.azul { background: var(--azul); color: #fff; }
.noche { background: var(--noche); color: #fff; }
.tinta { background: var(--tinta); color: #fff; }
.hielo { background: var(--hielo); }
.chispa { background: var(--chispa); }

.ico { display: inline-block; width: 1em; height: 1em; flex: none; } .ico svg { display: block; }
.etq { font-size: 20px; color: var(--azul); }
.azul .etq, .noche .etq, .tinta .etq { color: var(--chispa); }
.t-l { font-size: 112px; line-height: .92; letter-spacing: -.055em; }
.t-m { font-size: 78px; line-height: .98; letter-spacing: -.05em; }
h1 em, h2 em { color: var(--azul); font-size: 1.08em; }
.azul h2 em, .noche h2 em, .tinta h2 em { color: var(--chispa); }
.lead { font-size: 32px; line-height: 1.4; max-width: 32ch; }
.suave { color: var(--gris); }
.azul .lead { color: rgba(255,255,255,.92); }
.fuente { font-size: 16px; color: var(--gris); }
.tinta .fuente, .noche .fuente { color: #A9AEB8; }
.linea { display: block; }
.partir .palabra { display: inline-block; }

/* Orbes de luz que flotan en el fondo */
.orbe { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; pointer-events: none; }
.orbe--a { width: 900px; height: 900px; right: -200px; top: -300px; background: radial-gradient(circle, #6E83FF, transparent 70%); }
.orbe--b { width: 700px; height: 700px; left: -250px; bottom: -350px; background: radial-gradient(circle, #0D1A66, transparent 70%); opacity: .8; }
.orbe--c { width: 1000px; height: 1000px; left: 30%; top: -400px; background: radial-gradient(circle, rgba(33,64,255,.7), transparent 70%); }

/* Controles */
#controles { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 99px; background: rgba(17,19,24,.72); backdrop-filter: blur(10px); color: #fff; font: 600 14px var(--f-txt); opacity: 0; transition: opacity .4s; z-index: 10; }
body:hover #controles { opacity: 1; }
#controles button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 16px; cursor: pointer; }
#controles button:hover { background: var(--chispa); color: var(--tinta); }
#progreso { position: fixed; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.08); }
#progreso i { display: block; height: 100%; width: 0; background: var(--chispa); transition: width .6s cubic-bezier(.16,1,.3,1); }
#ayuda { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); color: #fff8; font: 13px var(--f-txt); z-index: 10; transition: opacity 1s; }
#salto { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); font: 800 120px var(--f-tit); color: #fff; z-index: 11; pointer-events: none; text-shadow: 0 10px 40px #0008; }

/* Transición entre láminas */
.cortina { position: absolute; inset: 0; z-index: 20; pointer-events: none; display: grid; grid-template-columns: repeat(5, 1fr); }
.cortina i { background: var(--azul); transform: scaleY(0); }
.cortina i:nth-child(2n) { background: var(--noche); }
.cortina i:nth-child(3) { background: var(--chispa); }

/* 1 Portada */
.portada__logo { position: relative; height: 62px; }
.portada__tit { position: relative; z-index: 2; margin-top: 70px; font-size: 168px; line-height: .86; letter-spacing: -.06em; width: 1150px; white-space: nowrap; }
.portada__tit .linea:nth-child(2) { padding-left: 90px; }
.magia { color: var(--chispa) !important; font-size: 1.12em; display: inline-block; }
.portada__sub { position: relative; z-index: 2; margin-top: 36px; font-size: 32px; line-height: 1.4; width: 640px; color: rgba(255,255,255,.92); }
.chispas { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.chispas i, .confeti i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--chispa); }
.muro { position: absolute; right: -430px; top: -260px; width: 1120px; height: 1700px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; transform: rotate(-12deg); }
.muro__pista { display: grid; gap: 28px; }
.vit { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); aspect-ratio: 16 / 12; }
.vit img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vit--cel { aspect-ratio: 9 / 17; width: 72%; justify-self: center; border: 8px solid var(--tinta); border-radius: 30px; }

/* 2 Problema */
.problema { display: grid; grid-template-columns: 1fr 820px; gap: 90px; align-items: center; height: 100%; }
.problema__txt { display: grid; gap: 40px; }
.espera { position: relative; }
.espera__pantalla { position: relative; aspect-ratio: 16 / 10; background: #fff; padding: 46px; }
.espera__barra { position: absolute; left: 0; top: 0; right: 0; height: 6px; background: #EBEDF0; }
.espera__barra i { display: block; height: 100%; width: 0; background: var(--azul); }
.espera__esqueleto { display: grid; gap: 22px; }
.espera__esqueleto b { height: 34px; border-radius: 10px; background: linear-gradient(90deg, #EBEDF0 0%, #F5F6F8 50%, #EBEDF0 100%); background-size: 200% 100%; animation: brillo 1.4s linear infinite; }
.espera__esqueleto b:first-child { height: 120px; }
.espera__esqueleto .corta { width: 55%; }
@keyframes brillo { to { background-position: -200% 0; } }
.espera__ruleta { position: absolute; left: 50%; top: 58%; width: 70px; height: 70px; margin: -35px; border-radius: 50%; border: 7px solid #DCDFE4; border-top-color: var(--azul); animation: girar .9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.reloj { position: absolute; right: -40px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: var(--tinta); color: #fff; display: grid; place-content: center; text-align: center; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }
.reloj__n { font: 800 80px/.9 var(--f-tit); letter-spacing: -.05em; }
.reloj small { font: 800 30px var(--f-tit); }
.reloj p { font-size: 15px; color: #A9AEB8; margin-top: 6px; }
.reloj.alerta { background: #E5484D; }
.reloj.alerta p { color: #fff; }
.adios { position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%); padding: 18px 30px; border-radius: 99px; background: #E5484D; color: #fff; font: 700 26px var(--f-txt); white-space: nowrap; box-shadow: 0 20px 40px -16px rgba(229,72,77,.6); }

/* 3 Costo */
.costo__grid { position: relative; margin-top: 90px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; perspective: 1400px; }
.costo__c { border-radius: 28px; padding: 44px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); display: grid; gap: 18px; align-content: start; min-height: 470px; }
.costo__c b { font: 800 128px/.85 var(--f-tit); letter-spacing: -.06em; color: var(--chispa); }
.costo__c p { font-size: 28px; line-height: 1.35; }

/* 4 Quiénes */
.nombre-fondo { position: absolute; left: 0; top: 60px; white-space: nowrap; font: 800 300px/.8 var(--f-tit); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 3px rgba(255,255,255,.2); }
.quienes { position: relative; display: grid; grid-template-columns: 760px 1fr; gap: 60px; align-items: end; height: calc(100% + 96px); }
.quienes__foto { position: relative; height: 920px; display: grid; justify-items: center; align-items: end; }
.sol { position: absolute; left: 80px; bottom: 140px; width: 600px; height: 600px; border-radius: 50%; background: var(--chispa); }
.quienes__foto img { position: relative; height: 100%; width: auto; max-width: none; filter: drop-shadow(0 40px 50px rgba(13,26,102,.5)); }
.credencial { position: absolute; right: 0; bottom: 220px; display: grid; gap: 4px; padding: 20px 26px; border-radius: 18px; background: #fff; color: var(--tinta); font-size: 18px; box-shadow: 0 30px 50px -20px rgba(13,26,102,.6); }
.credencial b { font: 800 26px var(--f-tit); letter-spacing: -.02em; }
.credencial span { color: var(--gris); }
.quienes__txt { padding-bottom: 190px; display: grid; gap: 34px; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; font-size: 24px; }

/* 5 Servicios */
.serv { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; perspective: 1600px; }
.serv__c { position: relative; overflow: hidden; border-radius: 28px; height: 340px; color: #fff; padding: 36px; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; transform-style: preserve-3d; }
.serv__c img { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; z-index: -2; }
.serv__c::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,26,102,.05), rgba(13,26,102,.92) 85%); }
.serv__c h3 { font-size: 46px; line-height: .98; letter-spacing: -.04em; }
.serv__c p { font-size: 22px; line-height: 1.35; margin-top: 10px; opacity: .92; }
.serv__c .ico { position: absolute; top: 30px; right: 30px; font-size: 44px; color: var(--chispa); }

/* 6 A medida */
.medida { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto auto; gap: 22px; }
.pil { border-radius: 26px; padding: 28px 30px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); display: grid; gap: 14px; align-content: start; }
.pil .ico { font-size: 50px; color: var(--chispa); }
.pil h3 { font-size: 36px; line-height: 1; letter-spacing: -.035em; }
.pil p { font-size: 22px; line-height: 1.4; color: rgba(255,255,255,.8); }
.pil--azul { grid-column: span 2; grid-row: span 2; background: var(--azul); border-color: var(--azul); }
.pil--azul h3 { font-size: 54px; }
.pil--azul p { color: #fff; }
.pil--ancho { grid-column: 1 / -1; grid-template-columns: auto auto 1fr; align-items: center; gap: 28px; border-color: rgba(255,194,51,.4); }
.codigo { margin-top: 10px; padding: 26px 30px; border-radius: 18px; background: var(--noche); font: 500 22px/1.55 ui-monospace, Menlo, Consolas, monospace; min-height: 0; color: #fff; white-space: pre; }
.codigo .k { color: #8EA0FF; } .codigo .f { color: var(--chispa); } .codigo .s { color: #7ee2b8; } .codigo .n { color: #ff9f7a; }
.codigo .cursor { display: inline-block; width: 12px; height: 28px; background: var(--chispa); vertical-align: -5px; animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* Casos */
.caso { display: grid; grid-template-columns: 1fr 1.2fr; gap: 90px; align-items: center; height: 100%; }
.caso__txt { display: grid; gap: 30px; }
.caso__lista { list-style: none; padding: 0; display: grid; gap: 20px; font-size: 27px; line-height: 1.35; }
.caso__lista li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; }
.caso__lista .ico { font-size: 36px; color: var(--azul); margin-top: 2px; }
.caso__visual { position: relative; }
.caso__visual .nav__barra span { font-size: 14px; }
.recorre { overflow: hidden; }
.recorre img { height: auto !important; object-fit: initial !important; }
.nav__pantalla.alta { aspect-ratio: 4 / 4.6; }
.caso__cel { position: absolute; width: 230px; right: -50px; bottom: -70px; }
.chat { position: absolute; right: -40px; bottom: -80px; width: 440px; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -24px rgba(13,26,102,.55); }
.chat__cab { display: flex; gap: 14px; align-items: center; padding: 16px 20px; background: #075E54; color: #fff; }
.chat__avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 26px; }
.chat__cab b { display: block; font-size: 20px; } .chat__cab small { font-size: 14px; opacity: .8; }
.chat__cuerpo { padding: 18px; display: grid; gap: 10px; background: #ECE5DD; min-height: 330px; align-content: start; }
.msj { max-width: 82%; padding: 12px 16px; border-radius: 16px; font-size: 18px; line-height: 1.35; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.msj--cli { justify-self: end; background: #DCF8C6; border-bottom-right-radius: 4px; }
.msj--bot { justify-self: start; background: #fff; border-bottom-left-radius: 4px; }
.escribiendo { justify-self: start; display: flex; gap: 6px; padding: 14px 18px; border-radius: 16px; background: #fff; }
.escribiendo i { width: 9px; height: 9px; border-radius: 50%; background: #A9AEB8; animation: rebote 1s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; } .escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes rebote { 50% { transform: translateY(-6px); } }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cifra { border-top: 3px solid var(--azul); padding-top: 16px; }
.cifra s { display: block; font: 600 34px/1 var(--f-tit); color: var(--gris); text-decoration-color: #E5484D; text-decoration-thickness: 3px; }
.cifra b { display: block; font: 800 76px/.9 var(--f-tit); letter-spacing: -.05em; color: var(--azul); margin-top: 8px; }
.cifra > span { font-size: 20px; color: var(--gris); }
.barra { margin-top: 14px; height: 10px; border-radius: 10px; background: #EBEDF0; overflow: hidden; }
.barra i { display: block; height: 100%; width: 100%; background: #E5484D; border-radius: inherit; }
.barra--sube i { background: var(--azul); }

/* 9 Portafolio */
.mas { margin-top: 60px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; perspective: 1600px; }
.mas__c { display: grid; gap: 18px; }
.mas__c .nav__barra span { font-size: 12px; }
.mas__c h3 { font-size: 34px; letter-spacing: -.04em; }
.mas__c p { font-size: 21px; line-height: 1.35; color: var(--gris); margin-top: -8px; }

/* 10 Proceso */
.pasos { margin-top: 90px; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.pasos__pista { position: absolute; left: 0; right: 0; top: 14px; height: 4px; border-radius: 4px; background: rgba(33,64,255,.15); }
.pasos__pista i { position: absolute; inset: 0; background: var(--azul); border-radius: inherit; transform-origin: left; transform: scaleX(0); }
.paso { position: relative; padding-top: 70px; display: grid; gap: 16px; }
.nodo { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 6px solid var(--azul); }
.nodo--chispa { background: var(--chispa); border-color: var(--chispa); }
.paso img { border-radius: 22px; aspect-ratio: 4 / 3; object-fit: cover; }
.paso small { font: 600 18px var(--f-txt); letter-spacing: .14em; text-transform: uppercase; color: var(--azul); }
.paso h3 { font-size: 54px; letter-spacing: -.045em; }
.paso p { font-size: 24px; line-height: 1.35; color: var(--gris); }

/* 11 Recibes */
.recibes { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; height: 100%; }
.recibes__txt { display: grid; gap: 32px; }
.checks { list-style: none; padding: 0; display: grid; gap: 22px; font-size: 28px; line-height: 1.35; }
.checks li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; padding: 22px 26px; border-radius: 22px; background: #fff; }
.checks b { display: block; }
.check { width: 46px; height: 46px; border-radius: 50%; background: var(--chispa); display: grid; place-items: center; }
.check svg { width: 26px; height: 26px; fill: none; stroke: var(--tinta); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* 12 Próximos */
.prox { margin-top: 80px; display: grid; grid-template-columns: 1fr 60px 1fr 60px 1fr; gap: 24px; align-items: center; }
.prox__c { border-radius: 28px; background: #fff; padding: 44px; display: grid; gap: 18px; align-content: start; min-height: 440px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.25); }
.prox__c b { font: 800 120px/.85 var(--f-tit); color: var(--azul); letter-spacing: -.05em; }
.prox__c h3 { font-size: 46px; letter-spacing: -.04em; line-height: 1; }
.prox__c p { font-size: 25px; line-height: 1.4; color: var(--gris); }
.prox__flecha { font: 800 64px var(--f-tit); text-align: center; color: var(--tinta); }

/* 13 Cierre */
.confeti { position: absolute; inset: 0; pointer-events: none; }
.cierre { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: center; height: 100%; }
.cierre__logo { height: 60px; }
.cierre__tit { margin-top: 70px; font-size: 200px; line-height: .86; letter-spacing: -.06em; }
.contacto { list-style: none; padding: 0; display: grid; gap: 20px; font-size: 32px; font-weight: 600; margin-top: 56px; }
.contacto li { display: flex; gap: 18px; align-items: center; }
.contacto .ico { font-size: 36px; color: var(--chispa); }
.qr { background: #fff; border-radius: 32px; padding: 48px; display: grid; gap: 20px; justify-items: center; color: var(--tinta); text-align: center; box-shadow: 0 40px 80px -30px rgba(0,0,0,.45); }
.qr img { width: 320px; height: 320px; }
.qr p { font: 800 36px/1 var(--f-tit); letter-spacing: -.03em; }
.qr small { font-size: 20px; color: var(--gris); }

[data-tilt] { transform-style: preserve-3d; will-change: transform; }
.credencial small { color: var(--azul); font-weight: 600; font-size: 15px; margin-top: 2px; }