@import url('https://fonts.googleapis.com/css2?family=Gloock&family=Instrument+Sans:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;1,14..32,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ================================================================
   YOD LABS — Sistema de diseño web v3 · "El gesto de luz"
   Fusión de las direcciones B (hero: la luz que nace del punto)
   y C (la consola: la evidencia). Noche profunda, un solo foco
   de oro, grano fotográfico. Todo CSS/SVG, sin imágenes externas.

   Reglas del sistema:
   · Gloock SOLO en el titular (h1 y el glifo hebreo). Nunca en párrafos.
   · Instrument Sans en cuerpo. Inter dentro de la consola (UI).
   · JetBrains Mono para datos, rótulos y trazas.
   ================================================================ */

/* Gloock local como red de seguridad si Google Fonts no carga */
@font-face { font-family:'GloockLocal'; src:url('fonts/Gloock-Regular.ttf'); font-display:swap; }

:root {
  /* --- noche --- */
  --cielo:#070B13;            /* fondo */
  --noche-2:#0A101A;
  --panel:rgba(14,21,35,.66);
  --panel-solid:#0E1523;
  --panel-2:#121A2A;

  /* --- líneas --- */
  --linea:rgba(198,161,91,.18);
  --linea-suave:rgba(160,180,210,.09);
  --linea-ui:rgba(242,234,219,.10);
  --linea-fuerte:rgba(242,234,219,.19);
  --linea-oro:rgba(198,161,91,.34);

  /* --- luz --- */
  --oro:#C6A15B;              /* 7.5:1 sobre cielo */
  --oro-luz:#E8CE96;
  --marfil:#F2EADB;
  --verde:#5FD6A4;

  /* --- texto (todos medidos sobre --cielo) --- */
  --texto-c:#C9D0DC;          /* 11.4:1 */
  --texto-2:#A9B1BF;          /* 8.1:1  */
  --texto-suave:#98A1B0;      /* 6.6:1  */

  /* --- tipografía --- */
  --display:'Gloock','GloockLocal',Georgia,'Times New Roman',serif;
  --texto:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --ui:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --maxw:1180px;
  --radio:14px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
::selection { background:rgba(198,161,91,.32); color:var(--marfil); }
:focus-visible { outline:2px solid var(--oro-luz); outline-offset:3px; border-radius:6px; }

body {
  background:var(--cielo); color:var(--texto-c);
  font-family:var(--texto); font-size:17px; line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

/* atmósfera de base (todas las páginas): nebulosa + grano fino.
   OJO: feTurbulence en 'overlay' sobre fondo oscuro es matemáticamente
   nulo. Aquí el ruido va en normal a opacidad baja; el grano grueso del
   hero se resuelve aparte, con partículas claras en 'screen'. */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 46% at 78% 6%, rgba(198,161,91,.10), transparent 64%),
    radial-gradient(46% 40% at 6% 96%, rgba(198,161,91,.06), transparent 62%),
    radial-gradient(52% 40% at 2% 2%, rgba(84,116,190,.06), transparent 60%);
}
body::after {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, nav, header, section, footer { position:relative; z-index:1; }

a { color:inherit; text-decoration:none; }
img, svg { display:block; }
img { max-width:100%; }
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.mono { font-family:var(--mono); letter-spacing:.18em; text-transform:uppercase; }

/* ================================================================
   GRANO DEL HERO (sólo portada) — dos capas SVG
   Un <svg> es elemento reemplazado: con position:fixed e inset:0 NO se
   estira, se queda en 300x150. Por eso llevan width/height explícitos.
   ================================================================ */
.grano-global, .grano-sombra {
  position:fixed; top:0; left:0; width:100%; height:100%;
  pointer-events:none;
}
.grano-global { z-index:80; opacity:.09; mix-blend-mode:screen; }  /* partículas claras: viven en las sombras */
.grano-sombra { z-index:81; opacity:.34; }                          /* partículas oscuras: texturan la luz */

/* ================================================================
   NAV — instrumento flotante
   ================================================================ */
.nav {
  /* Centrado con left/right+margin y NO con left:50%+translateX: con left:50%
     el ancho «shrink-to-fit» se calcula contra media pantalla, así que entre
     768 y 1440px la píldora se quedaba 30px corta y cortaba el CTA (medido). */
  position:fixed; top:20px; left:0; right:0; margin-inline:auto; width:max-content;
  z-index:100;
  display:flex; align-items:center; gap:4px;
  background:rgba(8,13,21,.80); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--linea); border-radius:999px; padding:8px 0 8px 16px;
  /* la sombra larga lavaba la banda marfil al pasar por debajo: medido,
     bajaba «El átomo…» de 4.4:1 a 2.6:1 mientras cruzaba la píldora */
  box-shadow:0 10px 26px rgba(0,0,0,.42);
  /* La píldora NUNCA esconde sus enlaces: si no cabe, se desliza.
     Va en la regla base (no sólo en móvil) para que una nav ancha en
     cualquier ancho intermedio se deslice en vez de desbordar la página. */
  max-width:calc(100vw - 20px);
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
}
.nav::-webkit-scrollbar { display:none; }
.nav .brand, .nav a.item, .nav a.cta { flex:0 0 auto; }
.nav .brand { display:flex; align-items:center; gap:11px; margin-right:14px; white-space:nowrap; }
.nav .brand img { width:30px; height:30px; }
/* El logotipo va en sans versalita, como en B y en C: Gloock queda reservado
   al titular y al glifo hebreo, y no aparece en ninguna UI ni en ningún párrafo. */
.nav .brand span { font-family:var(--texto); font-weight:600; font-size:14px; letter-spacing:.17em; text-transform:uppercase; color:var(--marfil); }
.nav a.item {
  position:relative; font-size:15.5px; font-weight:500; color:var(--texto-c);
  padding:8px 13px; border-radius:999px; white-space:nowrap;
  transition:color .22s ease, background .22s ease;
}
.nav a.item:hover { color:var(--oro-luz); background:rgba(198,161,91,.09); }
.nav a.cta {
  font-weight:600; font-size:15.5px; color:#0A0F17;
  background:linear-gradient(180deg,var(--oro-luz),var(--oro));
  border-radius:999px; padding:10px 21px; margin-left:8px; white-space:nowrap;
  /* el padding derecho del contenedor con overflow-x:auto NO entra en el
     área desplazable (el último hijo quedaba cortado): lo lleva el propio CTA */
  margin-right:10px;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
  transition:box-shadow .25s ease, transform .2s ease;
}
.nav a.cta:hover { transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 0 26px rgba(198,161,91,.45); }

/* ================================================================
   BOTONES
   ================================================================ */
.btn {
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font-family:var(--texto); font-weight:600; font-size:16px; letter-spacing:.005em;
  background:linear-gradient(180deg,var(--oro-luz),var(--oro)); color:#0A0F17;
  padding:15px 30px; border:1px solid transparent; border-radius:999px;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 34px -14px rgba(198,161,91,.9);
  transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 16px 44px -14px rgba(198,161,91,1); }
.btn:active { transform:translateY(0); }
.btn.oro {
  background:rgba(10,16,26,.55); color:var(--marfil); border-color:rgba(242,234,219,.26);
  box-shadow:none; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.btn.oro:hover { border-color:var(--oro); color:var(--oro-luz); box-shadow:none; }
.btn .flecha { transition:transform .28s cubic-bezier(.2,.7,.2,1); }
.btn:hover .flecha { transform:translateX(4px); }

/* ================================================================
   HERO — el gesto de luz
   La idea: el haz NACE del punto final de «Del punto, todo.»
   El origen (--ox/--oy) se calcula en CSS por defecto y lo afina un
   script de 10 líneas midiendo el punto real con getClientRects().
   ================================================================ */
.hero {
  position:relative; isolation:isolate; overflow:hidden;
  min-height:min(100svh,940px);
  display:flex; flex-direction:column; justify-content:center;
  --ox:44%; --oy:63%;         /* origen del gesto (fallback sin JS) */
  --ang:-15deg;               /* dirección del haz */
}

.gesto {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  filter:saturate(1.4);
  -webkit-mask-image:radial-gradient(150% 120% at var(--ox) var(--oy), #000 0%, #000 34%, rgba(0,0,0,.6) 58%, transparent 92%);
  mask-image:radial-gradient(150% 120% at var(--ox) var(--oy), #000 0%, #000 34%, rgba(0,0,0,.6) 58%, transparent 92%);
}
.gesto > * { position:absolute; mix-blend-mode:screen; will-change:transform; }

/* halo de origen: justo detrás del punto */
.nucleo {
  left:var(--ox); top:var(--oy);
  width:44vw; height:44vw; min-width:400px; min-height:400px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,
    rgba(244,214,156,.62) 0%,
    rgba(206,152,54,.34) 19%,
    rgba(150,100,28,.14) 44%,
    rgba(7,11,19,0) 72%);
  filter:blur(36px);
  animation:respira 11s ease-in-out infinite alternate;
}
/* abanico cónico: la "mano" que abre desde el punto */
.abanico {
  left:var(--ox); top:var(--oy);
  width:170vw; height:170vw;
  transform:translate(-50%,-50%) rotate(-14deg);
  background:conic-gradient(from 294deg at 50% 50%,
    rgba(7,11,19,0) 0deg,
    rgba(196,144,48,.26) 13deg,
    rgba(238,198,124,.34) 25deg,
    rgba(186,132,40,.10) 39deg,
    rgba(7,11,19,0) 57deg,
    rgba(7,11,19,0) 360deg);
  filter:blur(56px); opacity:.85;
  animation:barrido 34s ease-in-out infinite alternate;
}
/* haces: anclados EN el punto (transform-origin en su borde izquierdo),
   por eso la luz sale literalmente del punto y no de un porcentaje suelto */
.haz {
  left:var(--ox); top:var(--oy);
  border-radius:50%;
  transform-origin:0 50%;
}
.haz-1 {
  width:125vw; height:300px; margin-top:-150px;
  background:linear-gradient(90deg, rgba(232,196,124,.50) 0%, rgba(214,166,80,.40) 16%, rgba(176,124,38,.20) 52%, rgba(7,11,19,0) 88%);
  filter:blur(62px);
  transform:rotate(var(--ang));
  animation:deriva-a 28s ease-in-out infinite alternate;
}
.haz-2 { /* el filo: poco blur = bloom óptico */
  width:108vw; height:54px; margin-top:-27px;
  background:linear-gradient(90deg, rgba(255,240,206,.92) 0%, rgba(244,206,136,.72) 12%, rgba(226,178,94,.40) 38%, rgba(198,150,66,.14) 66%, rgba(7,11,19,0) 92%);
  filter:blur(12px); opacity:.94;
  transform:rotate(calc(var(--ang) + 3deg));
  animation:deriva-b 22s ease-in-out infinite alternate;
}
.haz-3 {
  width:140vw; height:440px; margin-top:-120px;
  background:linear-gradient(90deg, rgba(198,150,66,.30) 0%, rgba(168,112,32,.22) 34%, rgba(150,104,40,.12) 64%, rgba(7,11,19,0) 92%);
  filter:blur(92px);
  transform:rotate(calc(var(--ang) - 17deg));
  animation:deriva-c 41s ease-in-out infinite alternate;
}
.haz-frio { /* contraluz azul en el cuadrante muerto, lejos del oro:
               si se cruzan, se agrisan los dos */
  left:auto; right:62%; top:-16%;
  width:80vw; height:320px;
  transform-origin:50% 50%; transform:rotate(22deg);
  background:linear-gradient(90deg, rgba(7,11,19,0) 10%, rgba(58,96,178,.30) 46%, rgba(38,64,124,.12) 76%, rgba(7,11,19,0) 98%);
  filter:blur(88px);
  animation:deriva-d 37s ease-in-out infinite alternate;
}
/* polvo: puntos de bloom sueltos */
.polvo {
  left:0; top:0; width:100%; height:100%;
  background:
    radial-gradient(2.5px 2.5px at 61% 33%, rgba(232,206,150,.72), transparent 60%),
    radial-gradient(2px 2px at 72% 58%, rgba(232,206,150,.48), transparent 60%),
    radial-gradient(3px 3px at 47% 71%, rgba(198,161,91,.42), transparent 60%),
    radial-gradient(1.8px 1.8px at 83% 41%, rgba(232,206,150,.40), transparent 60%),
    radial-gradient(2.2px 2.2px at 38% 24%, rgba(198,161,91,.33), transparent 60%),
    radial-gradient(1.6px 1.6px at 90% 74%, rgba(232,206,150,.30), transparent 60%);
  filter:blur(1.1px); opacity:.9;
  animation:respira 9s ease-in-out infinite alternate;
}
/* grano grueso, sólo sobre el gesto */
.gesto > .grano-gesto {
  position:absolute; left:0; top:0; width:100%; height:100%;
  z-index:3; pointer-events:none; opacity:.40;
  mix-blend-mode:normal;   /* gana a `.gesto > *` por especificidad, no por orden */
}

/* velo lateral: protege la columna de texto sin matar el arte */
.velo {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(104deg,
    rgba(7,11,19,.96) 0%,
    rgba(7,11,19,.93) 17%,
    rgba(7,11,19,.74) 33%,
    rgba(7,11,19,.34) 49%,
    rgba(7,11,19,.08) 63%,
    rgba(7,11,19,0) 74%);
}
/* el arte no debe morir en un corte recto contra la sección siguiente */
.desvanece {
  position:absolute; left:0; right:0; bottom:0; z-index:5; pointer-events:none;
  height:clamp(90px,16vh,200px);
  background:linear-gradient(to bottom, rgba(7,11,19,0), var(--cielo));
}

.hero .contenido { position:relative; z-index:10; padding-top:132px; padding-bottom:clamp(60px,10vh,120px); }
.hero .kicker {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--oro); margin-bottom:26px;
  border:1px solid var(--linea-oro); border-radius:999px; padding:7px 15px 7px 12px;
  /* placa local: el oro sólo aguanta 4.5:1 si debajo hay noche, no el gesto */
  background:rgba(7,11,19,.90); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; animation:sube .8s ease .1s forwards;
}
.hero .kicker i {
  width:5px; height:5px; border-radius:50%; background:var(--oro-luz); flex:none;
  box-shadow:0 0 8px rgba(232,206,150,.9); animation:latido 3.4s ease-in-out infinite;
}
.hero h1 {
  font-family:var(--display); font-weight:400; color:var(--marfil);
  font-size:clamp(56px,9.4vw,132px); line-height:.98; letter-spacing:-.015em;
  opacity:0; animation:sube .9s ease .25s forwards;
}
.hero h1 .punto {
  position:relative; color:var(--oro-luz);
  text-shadow:0 0 16px rgba(232,206,150,.8), 0 0 52px rgba(198,161,91,.6), 0 0 110px rgba(198,161,91,.38);
  animation:latido-punto 5.5s ease-in-out infinite;
}
.hero .sub {
  max-width:38rem; font-size:clamp(16.5px,1.35vw,19px); line-height:1.62; margin-top:30px;
  color:var(--texto-c);
  opacity:0; animation:sube .9s ease .45s forwards;
}
.hero .acciones {
  display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:40px;
  opacity:0; animation:sube .9s ease .62s forwards;
}
.hero .marquee { position:absolute; bottom:28px; left:0; right:0; z-index:10; }
.hero .marquee .wrap { display:flex; justify-content:space-between; gap:12px 24px; font-size:10.5px; color:var(--texto-suave); }

@keyframes sube { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes respira { from { opacity:.78; transform:translate(-50%,-50%) scale(.96); } to { opacity:1; transform:translate(-50%,-50%) scale(1.06); } }
@keyframes barrido { from { transform:translate(-50%,-50%) rotate(-19deg); } to { transform:translate(-50%,-50%) rotate(-7deg); } }
@keyframes deriva-a { from { transform:rotate(calc(var(--ang) - 3deg)); } to { transform:rotate(calc(var(--ang) + 4deg)); } }
@keyframes deriva-b { from { transform:rotate(calc(var(--ang) + 1deg)); } to { transform:rotate(calc(var(--ang) + 5.5deg)); } }
@keyframes deriva-c { from { transform:rotate(calc(var(--ang) - 20deg)); } to { transform:rotate(calc(var(--ang) - 13deg)); } }
@keyframes deriva-d { from { transform:rotate(20deg) translate3d(2%,0,0); } to { transform:rotate(25deg) translate3d(-2%,3%,0); } }
@keyframes latido { 0%,100% { opacity:.45; } 50% { opacity:1; } }
@keyframes latido-punto {
  0%,100% { text-shadow:0 0 16px rgba(232,206,150,.72), 0 0 52px rgba(198,161,91,.52), 0 0 110px rgba(198,161,91,.32); }
  50%     { text-shadow:0 0 22px rgba(232,206,150,.98), 0 0 68px rgba(198,161,91,.76), 0 0 140px rgba(198,161,91,.48); }
}
/* la animación del núcleo/abanico ya usa translate: que no la pise otra */
.nucleo, .abanico { animation-composition:replace; }

/* ================================================================
   LA CONSOLA — la evidencia (segundo pliegue)
   Tipografía de UI propia: Inter dentro del panel, mono para datos.
   Eso es lo que la hace creíble: no parece la web, parece el producto.
   ================================================================ */
.evidencia { padding:clamp(52px,7vw,84px) 0 clamp(40px,5vw,60px); }
.evidencia .ev-head {
  display:flex; align-items:baseline; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-bottom:26px;
}
.evidencia .ev-head h2 {
  font-family:var(--texto); font-weight:500; font-size:clamp(21px,2.1vw,27px);
  letter-spacing:-.018em; color:var(--marfil); max-width:30ch;
}
.evidencia .ev-head .tag { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--oro); }

.consola {
  background:linear-gradient(180deg,#0C1320,#090E18);
  border:1px solid var(--linea-fuerte); border-radius:16px; overflow:hidden;
  box-shadow:0 2px 0 rgba(242,234,219,.05) inset, 0 40px 90px -28px rgba(0,0,0,.92), 0 0 0 1px rgba(0,0,0,.5);
  font-family:var(--ui); line-height:1.5;
}
.consola .cabecera {
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  border-bottom:1px solid var(--linea-ui); background:rgba(242,234,219,.02);
}
.consola .semaforo { display:flex; gap:6px; flex:none; }
.consola .semaforo i { width:9px; height:9px; border-radius:50%; background:rgba(242,234,219,.16); }
.consola .url {
  flex:1; min-width:0; display:flex; align-items:center; gap:7px; justify-content:center;
  background:rgba(7,11,19,.75); border:1px solid var(--linea-ui); border-radius:7px;
  padding:5px 12px; font-family:var(--mono); font-size:11.5px; color:var(--texto-suave);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.consola .candado { color:var(--verde); flex:none; }
.consola .estado {
  display:flex; align-items:center; gap:6px; flex:none;
  font-size:11px; font-weight:600; color:var(--verde);
  background:rgba(95,214,164,.10); border:1px solid rgba(95,214,164,.24);
  border-radius:999px; padding:4px 10px; white-space:nowrap;
}
.vivo { width:6px; height:6px; border-radius:50%; background:var(--verde); box-shadow:0 0 8px rgba(95,214,164,.9); animation:latir 2.4s ease-in-out infinite; flex:none; }
@keyframes latir { 0%,100% { opacity:1; } 50% { opacity:.35; } }

.consola .cuerpo { display:grid; grid-template-columns:168px minmax(0,1fr) 206px; min-height:452px; }

/* barra lateral */
.consola .lateral { border-right:1px solid var(--linea-ui); padding:14px 10px; background:rgba(7,11,19,.45); min-width:0; }
.consola .lat-marca { display:flex; align-items:center; gap:8px; padding:4px 8px 14px; }
.consola .lat-marca i { width:7px; height:7px; border-radius:50%; background:var(--oro); flex:none; }
.consola .lat-marca span { font-size:12px; font-weight:700; letter-spacing:.11em; color:var(--marfil); }
.consola .lat-t { font-size:9.5px; font-weight:700; letter-spacing:.14em; color:#98A1B0; padding:10px 8px 6px; text-transform:uppercase; }
.consola .lat-i {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 9px; border-radius:7px; font-size:12.5px; color:var(--texto-2); font-weight:500;
}
.consola .lat-i.on { background:rgba(198,161,91,.11); color:var(--oro-luz); box-shadow:inset 0 0 0 1px rgba(198,161,91,.22); }
.consola .lat-i .num { font-family:var(--mono); font-size:10.5px; color:var(--texto-suave); background:rgba(242,234,219,.06); border-radius:5px; padding:1px 6px; }
.consola .lat-i.on .num { color:#070B13; background:var(--oro); }

/* el hilo que se resuelve solo */
.consola .hilo { display:flex; flex-direction:column; min-width:0; }
.consola .hilo-cab { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--linea-ui); }
.consola .avatar {
  width:30px; height:30px; border-radius:9px; flex:none;
  background:linear-gradient(140deg,#20304d,#14203a); border:1px solid var(--linea-ui);
  display:grid; place-items:center; font-size:11.5px; font-weight:700; color:var(--oro-luz);
}
.consola .quien { font-size:13px; font-weight:600; color:var(--marfil); line-height:1.3; white-space:nowrap; }
.consola .canal { font-size:11px; color:var(--texto-suave); font-family:var(--mono); white-space:nowrap; }
.consola .etiqueta {
  margin-left:auto; font-size:10.5px; font-weight:600; color:var(--oro-luz); white-space:nowrap;
  border:1px solid rgba(198,161,91,.28); background:rgba(198,161,91,.08); border-radius:999px; padding:4px 9px;
}
.consola .mensajes { padding:15px 16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.consola .msg {
  max-width:78%; padding:9px 13px; font-size:13px; line-height:1.5; border-radius:13px;
  opacity:0; animation:entra .5s ease forwards;
}
.consola .msg .hora { display:block; margin-top:4px; font-family:var(--mono); font-size:9.5px; color:rgba(242,234,219,.78); }
.consola .ellos { align-self:flex-start; background:var(--panel-2); border:1px solid var(--linea-ui); border-bottom-left-radius:4px; color:#E7E1D6; }
.consola .bot { align-self:flex-end; background:rgba(198,161,91,.13); border:1px solid rgba(198,161,91,.24); border-bottom-right-radius:4px; color:#F5EEDF; }
@keyframes entra { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } }
.consola .traza {
  align-self:center; display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;
  font-family:var(--mono); font-size:10px; color:var(--texto-suave); text-align:center;
  border:1px dashed var(--linea-fuerte); border-radius:999px; padding:5px 12px; background:rgba(7,11,19,.5);
  opacity:0; animation:entra .5s ease forwards;
}
.consola .traza b { color:var(--verde); font-weight:500; }
.consola .escribe {
  align-self:flex-end; display:flex; gap:4px; padding:11px 14px;
  background:rgba(198,161,91,.10); border:1px solid rgba(198,161,91,.20);
  border-radius:13px; border-bottom-right-radius:4px; opacity:0; animation:entra .4s ease forwards;
}
.consola .escribe i { width:5px; height:5px; border-radius:50%; background:var(--oro-luz); animation:rebota 1.25s ease-in-out infinite; }
.consola .escribe i:nth-child(2) { animation-delay:.16s; }
.consola .escribe i:nth-child(3) { animation-delay:.32s; }
@keyframes rebota { 0%,60%,100% { opacity:.3; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }
.consola .pie-hilo { border-top:1px solid var(--linea-ui); padding:10px 16px; display:flex; align-items:center; gap:9px; }
.consola .campo {
  flex:1; min-width:0; background:rgba(7,11,19,.7); border:1px solid var(--linea-ui); border-radius:8px;
  padding:8px 11px; font-size:12px; color:var(--texto-suave);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.consola .enviar { width:30px; height:30px; border-radius:8px; background:var(--oro); display:grid; place-items:center; flex:none; color:#070B13; font-size:14px; }

/* rail de métricas */
.consola .rail { border-left:1px solid var(--linea-ui); padding:14px 13px; background:rgba(7,11,19,.45); display:flex; flex-direction:column; gap:13px; min-width:0; }
.consola .rail-t { font-size:9.5px; font-weight:700; letter-spacing:.14em; color:#98A1B0; text-transform:uppercase; }
.consola .tarjeta { border:1px solid var(--linea-ui); border-radius:10px; padding:11px; background:var(--panel-solid); }
.consola .tarjeta .k { font-size:11px; color:var(--texto-2); font-weight:500; }
.consola .tarjeta .v { font-family:var(--mono); font-size:21px; font-weight:500; color:var(--marfil); margin-top:3px; letter-spacing:-.02em; }
.consola .tarjeta .v em { font-style:normal; font-size:12px; color:var(--texto-suave); }
.consola .delta { font-size:10.5px; color:var(--verde); font-family:var(--mono); margin-top:3px; }
.consola .barras { display:flex; align-items:flex-end; gap:3px; height:34px; margin-top:9px; }
.consola .barras i {
  flex:1; background:linear-gradient(180deg,var(--oro),rgba(198,161,91,.22)); border-radius:2px 2px 0 0;
  transform-origin:bottom; animation:crece .9s cubic-bezier(.22,1,.36,1) backwards;
}
@keyframes crece { from { transform:scaleY(.06); opacity:.2; } to { transform:scaleY(1); opacity:1; } }
.consola .leyenda { font-size:10px; color:var(--texto-suave); font-family:var(--mono); display:flex; justify-content:space-between; margin-top:6px; }

/* el rótulo honesto: innegociable */
.nota { margin-top:14px; font-size:12.5px; color:var(--texto-suave); line-height:1.5; max-width:62ch; }

/* ================================================================
   SECCIONES
   ================================================================ */
section.bloque { padding:110px 0; }
.sec-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:48px; gap:20px; flex-wrap:wrap; }
.sec-head h2 {
  font-family:var(--texto); font-weight:500; font-size:clamp(28px,3.4vw,42px);
  color:var(--marfil); line-height:1.12; letter-spacing:-.022em; max-width:22ch;
}
.sec-head .tag { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--oro); }

/* verticales: placas de instrumento */
.verticales { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.vcard {
  position:relative; background:var(--panel); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid var(--linea-suave); border-radius:12px;
  padding:38px 36px 34px; overflow:hidden; min-width:0;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.vcard:hover { transform:translateY(-5px); border-color:var(--linea); box-shadow:0 24px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(198,161,91,.12); }
.vcard .num { font-family:var(--mono); font-size:10px; color:var(--oro); letter-spacing:.22em; }
.vcard h3 { font-family:var(--texto); font-weight:500; font-size:25px; letter-spacing:-.02em; color:var(--marfil); margin:16px 0 12px; }
.vcard p { font-size:16px; line-height:1.62; color:var(--texto-c); text-wrap:pretty; }
.vcard .link { display:inline-block; margin-top:22px; font-weight:600; font-size:15.5px; color:var(--oro-luz); border-bottom:1px solid rgba(198,161,91,.4); padding-bottom:2px; transition:border-color .2s; }
.vcard .link:hover { border-color:var(--oro-luz); }
.vcard::after {
  content:''; position:absolute; top:28px; right:28px; width:9px; height:9px; border-radius:50%;
  background:var(--oro); box-shadow:0 0 10px rgba(198,161,91,.7); transition:transform .3s, box-shadow .3s;
}
.vcard:hover::after { transform:scale(1.6); box-shadow:0 0 20px rgba(232,206,150,.9); }
.vcard.dark { background:linear-gradient(150deg, rgba(198,161,91,.14), rgba(17,26,40,.72) 55%); border-color:var(--linea); }
.vcard.dark h3 { color:var(--oro-luz); }

/* números: lecturas del instrumento */
.numeros {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); text-align:center;
  border-top:1px solid var(--linea-suave); border-bottom:1px solid var(--linea-suave);
}
.numero { padding:42px 14px; border-left:1px solid var(--linea-suave); min-width:0; }
.numero:first-child { border-left:none; }
.numero .cifra {
  font-family:var(--mono); font-weight:500; font-size:clamp(28px,3.6vw,46px);
  color:var(--marfil); letter-spacing:-.04em; line-height:1.05;
  font-variant-numeric:tabular-nums lining-nums;
}
.numero .cifra em { font-style:normal; color:var(--oro-luz); }
.numero .desc { font-size:10.5px; color:var(--texto-suave); margin-top:13px; text-wrap:pretty; }

/* casos */
.casos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.caso { background:var(--panel); border:1px solid var(--linea-suave); border-radius:12px; padding:32px 30px; min-width:0; transition:border-color .3s, transform .3s; }
.caso:hover { border-color:var(--linea); transform:translateY(-4px); }
.caso .rubro { font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--oro); }
.caso h3 { font-family:var(--texto); font-weight:500; font-size:20px; letter-spacing:-.018em; color:var(--marfil); margin:14px 0 10px; line-height:1.28; }
.caso p { font-size:15px; line-height:1.6; color:var(--texto-c); text-wrap:pretty; }
.caso .metrica { font-family:var(--mono); font-weight:500; font-size:32px; letter-spacing:-.03em; color:var(--oro-luz); margin-top:20px; }
.caso .metrica-l { font-size:10px; color:var(--texto-suave); margin-top:5px; }

/* ================================================================
   BANDA MARFIL — el manuscrito (único contrapunto de luz)
   ================================================================ */
.banda { background:var(--marfil); color:#28313f; padding:110px 0; position:relative; overflow:hidden; }
.banda .grid2 { display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center; }
.banda h2 { font-family:var(--texto); font-weight:500; font-size:clamp(28px,3.4vw,44px); line-height:1.18; letter-spacing:-.022em; color:#0F2138; }
/* #8A6520 daba 3.52:1: pasa el mínimo de texto grande (3.0) pero no el 4.5
   plano que nos exigimos. Ocre oscuro, sigue leyéndose como oro. */
.banda h2 .oro { color:#6A4A00; }
.banda p { color:#3B485F; margin-top:22px; font-size:17px; }   /* 8.3:1 sobre marfil */
.banda .glifo { font-family:var(--display); font-size:clamp(120px,17vw,210px); color:#0F2138; text-align:center; line-height:1; }
/* #7A5A1C daba 4.18:1 sobre los píxeles de marfil que el grano oscurece.
   #5C4410 = 4.9:1 contra el marfil MÁS oscuro medido (195,191,183). */
.banda .glifo-l { text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#5C4410; margin-top:10px; }

/* ================================================================
   FAQ
   ================================================================ */
.faq { max-width:840px; }
.faq details { background:var(--panel); border:1px solid var(--linea-suave); border-radius:10px; padding:22px 30px; margin-bottom:14px; transition:border-color .3s; }
.faq details:hover { border-color:var(--linea); }
.faq summary {
  font-family:var(--texto); font-weight:500; font-size:18.5px; letter-spacing:-.015em;
  color:var(--marfil); cursor:pointer; list-style:none; position:relative; padding-right:32px;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:''; position:absolute; right:4px; top:10px; width:8px; height:8px; border-radius:50%;
  background:var(--oro); box-shadow:0 0 8px rgba(198,161,91,.6); transition:transform .25s;
}
.faq details[open] summary::after { transform:scale(.5); }
.faq details p { margin-top:14px; font-size:16px; color:var(--texto-c); }

/* ================================================================
   CIERRE
   ================================================================ */
.cierre { text-align:center; padding:130px 0 140px; position:relative; overflow:hidden; }
.cierre::before {
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(900px,140vw); height:min(900px,140vw); border-radius:50%;
  background:radial-gradient(circle, rgba(198,161,91,.13), transparent 60%); pointer-events:none;
}
.cierre h2 {
  font-family:var(--texto); font-weight:500; font-size:clamp(30px,4.4vw,56px);
  color:var(--marfil); line-height:1.1; letter-spacing:-.025em; position:relative;
}
.cierre h2 span { text-shadow:0 0 28px rgba(198,161,91,.6); }
.cierre p { margin:24px auto 40px; max-width:54ch; font-size:17.5px; position:relative; color:var(--texto-c); }

/* ================================================================
   FOOTER
   ================================================================ */
footer { background:#050810; border-top:1px solid var(--linea-suave); color:var(--texto-suave); padding:58px 0 40px; }
footer .fila { display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap; }
footer .marca { display:flex; align-items:center; gap:12px; }
footer .marca img { width:32px; }
footer .marca span { font-family:var(--texto); font-weight:600; font-size:15px; letter-spacing:.17em; text-transform:uppercase; color:var(--marfil); }
/* la línea legal estaba en rgba(...,.42) = 3.41:1 sobre #050810. Sólido y medido. */
footer .legal { font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:#A39C92; margin-top:26px; line-height:1.85; }
footer nav { display:flex; flex-wrap:wrap; gap:12px 22px; font-size:15px; }
footer nav a { transition:color .2s; }
footer nav a:hover { color:var(--oro-luz); }

/* ================================================================
   PÁGINAS INTERIORES (9 páginas comparten estas clases)
   ================================================================ */
.pagina-head { padding:172px 0 56px; }
.pagina-head .kicker { font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--oro); margin-bottom:20px; }
.pagina-head h1 {
  font-family:var(--display); font-weight:400; font-size:clamp(38px,5.4vw,72px);
  color:var(--marfil); line-height:1.06; letter-spacing:-.015em; max-width:20ch;
}
.answer-box {
  background:var(--panel); border:1px solid var(--linea-suave); border-left:3px solid var(--oro);
  border-radius:0 12px 12px 0; padding:26px 32px; margin:42px 0; max-width:75ch;
}
.answer-box .lbl { font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--oro); margin-bottom:12px; }
.answer-box p { font-size:17.5px; line-height:1.6; color:var(--marfil); }
.prosa { max-width:72ch; }
/* Las interiores traen <div class="wrap prosa">: al estrechar el ancho, el
   margin:auto de .wrap centraba la columna y quedaba desalineada del h1 y de
   la answer-box (medido: prosa en x=255, h1 en x=78). El .wrap conserva su
   ancho y la medida la fijan los hijos, así todo cae en el mismo eje. */
.wrap.prosa { max-width:var(--maxw); }
.wrap.prosa > * { max-width:72ch; }
.prosa h2 { font-family:var(--texto); font-weight:500; font-size:27px; letter-spacing:-.022em; color:var(--marfil); margin:50px 0 16px; line-height:1.2; }
.prosa h3 { font-family:var(--texto); font-weight:500; font-size:20px; letter-spacing:-.015em; color:var(--marfil); margin:32px 0 12px; }
.prosa p { margin-bottom:16px; }
.prosa ul, .prosa ol { margin:0 0 16px 22px; }
.prosa li { margin-bottom:8px; }
.prosa b, .prosa strong { color:var(--marfil); font-weight:600; }
.prosa a { color:var(--oro-luz); border-bottom:1px solid rgba(198,161,91,.35); }
.prosa a:hover { border-color:var(--oro-luz); }
.prosa table { width:100%; border-collapse:collapse; margin:0 0 18px; font-size:15.5px; }
.prosa th, .prosa td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--linea-suave); }
.prosa th { color:var(--marfil); font-weight:600; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1180px) {
  /* la nav de 6 verticales se comprime antes de volverse deslizable */
  .nav { gap:1px; padding:7px 8px 7px 14px; }
  .nav .brand { margin-right:9px; }
  .nav .brand span { font-size:13px; letter-spacing:.14em; }
  .nav a.item { font-size:14.5px; padding:7px 9px; }
  .nav a.cta { font-size:14.5px; padding:9px 16px; margin-left:5px; }
  .consola .cuerpo { grid-template-columns:152px minmax(0,1fr) 190px; }
}

@media (max-width:1000px) {
  .consola .cuerpo { grid-template-columns:150px minmax(0,1fr); min-height:400px; }
  .consola .rail { display:none; }
}

@media (max-width:900px) {
  .verticales, .casos { grid-template-columns:minmax(0,1fr); }
  .numeros { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .numero { border-left:none; border-top:1px solid var(--linea-suave); }
  .numero:first-child, .numero:nth-child(2) { border-top:none; }
  .banda .grid2 { grid-template-columns:minmax(0,1fr); gap:38px; }
  .wrap { padding:0 20px; }
  .pagina-head { padding:142px 0 40px; }
  section.bloque { padding:78px 0; }
  .cierre { padding:100px 0 110px; }
  .sec-head { margin-bottom:34px; }

  /* Los dos botones del hero no envolvían: sumaban más que el ancho del
     teléfono y estiraban la página (overflow-x lo tapaba, no lo resolvía). */
  .hero { min-height:auto; padding-bottom:96px; }
  .hero .contenido { padding-top:116px; padding-bottom:52px; }
  .hero .acciones { flex-wrap:wrap; gap:14px; }
  .hero .acciones .btn { flex:1 1 auto; }
  .btn { font-size:15.5px; padding:14px 26px; }
  .hero .sub { max-width:100%; }
  .hero .marquee { bottom:22px; }
  .hero .marquee .wrap { flex-wrap:wrap; gap:4px 18px; justify-content:flex-start; }

  /* En el teléfono «todo.» ocupa poco más de un tercio de la línea: el hueco
     libre sigue estando A LA DERECHA del punto, igual que en el escritorio.
     Por eso el haz mantiene su ángulo y el velo se abre en una lente a la
     altura del punto, no en la esquina de abajo. (Medido: con el haz hacia
     abajo y el velo en la esquina, la luz salía de pantalla antes de llegar
     al hueco y el teléfono quedaba negro.) */
  .hero { --ang:-12deg; padding-bottom:104px; }
  .hero .contenido { padding-bottom:56px; }
  .velo {
    background:radial-gradient(88% 34% at 104% 43%,
      rgba(7,11,19,0) 0%,
      rgba(7,11,19,.16) 28%,
      rgba(7,11,19,.66) 58%,
      rgba(7,11,19,.90) 82%,
      rgba(7,11,19,.95) 100%);
  }
  /* menos desenfoque: sobre 390px de ancho, 60-90px de blur es niebla gris */
  .nucleo { min-width:260px; min-height:260px; width:78vw; height:78vw; filter:blur(26px); }
  .abanico { width:220vw; height:220vw; filter:blur(40px); }
  .haz-1 { width:150vw; height:200px; margin-top:-100px; filter:blur(40px); }
  .haz-2 { width:140vw; height:34px; margin-top:-17px; filter:blur(9px); }
  .haz-3 { width:180vw; height:280px; margin-top:-80px; filter:blur(58px); }
  .haz-frio { right:44%; top:-8%; width:140vw; filter:blur(60px); }

  /* La nav NO se esconde: aquí ya se desliza de verdad (los seis enlaces
     no caben). Antes hacía display:none a los ítems y el teléfono se
     quedaba sin ninguna forma de llegar a las verticales. */
  .nav { justify-content:flex-start; }
}

@media (max-width:720px) {
  .consola .cuerpo { grid-template-columns:minmax(0,1fr); min-height:0; }
  .consola .lateral { display:none; }
  .consola .msg { max-width:88%; }
  .consola .estado { display:none; }
  .consola .url { font-size:10.5px; }
  .consola .etiqueta { font-size:9.5px; padding:3px 7px; }
  .evidencia .ev-head { margin-bottom:20px; }
  .vcard { padding:30px 24px 28px; }
  .caso { padding:26px 22px; }
  .faq details { padding:20px 22px; }
  .answer-box { padding:22px 24px; }
}

@media (max-width:460px) {
  .numero { padding:30px 10px; }
  .numero .cifra { font-size:26px; }   /* a 30px «2-4 sem» partía en dos líneas */
  .numero .desc { font-size:9.5px; }
  .consola .traza { font-size:9px; padding:5px 9px; }
  .consola .mensajes { padding:13px 12px; }
  .banda { padding:76px 0; }
  footer .legal { letter-spacing:.1em; }
}

@media (max-width:420px) {
  .nav .brand span { display:none; }   /* bajo 420 manda el isotipo solo */
  .nav .brand { margin-right:6px; }
}

@media (min-width:1600px) {
  :root { --maxw:1300px; }
}

/* quien prefiere menos movimiento, no lo tiene */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .hero .kicker, .hero h1, .hero .sub, .hero .acciones { opacity:1 !important; transform:none !important; }
  .consola .msg, .consola .traza, .consola .escribe { opacity:1 !important; transform:none !important; }
  .nucleo, .abanico { transform:translate(-50%,-50%) !important; }
}