/* ============================================================
   Tesla Technologies · portada · hoja de estilos
   Vanilla CSS, sin frameworks. Móvil primero: lo que no lleva
   media query es el estado de 390 px; 640/900/1100 son las
   excepciones de pantallas mayores.

   Tokens del doc 10 §03. Papeles del color, no intercambiables:
   azul = estructura, enlace, procedencia · naranja = medida
   alcanzada y acción primaria, nada más.

   En producción, Inter pasa a autoalojada (doc 10 §04) y este
   fichero se sirve desde el propio host: cero terceros.
   ============================================================ */

:root{
  --ink:#060911;      --ink2:#0A0F1C;
  --surface:#0E1524;  --surface2:#131C2E;
  --line:#1E2A42;     --strong:#5A6B8A;
  --txt:#E8EDF7;      --soft:#A3B0C7;     --dim:#6F7E99;
  --blue:#2E9BE0;     --deep:#00529B;
  --orange:#FD6A02;   --orange-ink:#16100A;
  --paper:#F5F6F8;    --paper-ink:#0B0F14;
  --paper-soft:#475569; --paper-line:#E2E6EC;

  --sans:'Inter',system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --col:72rem;  --gut:1.25rem;  --r:3px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--ink); color:var(--txt);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg,canvas{ max-width:100%; height:auto; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,select,textarea{ font:inherit; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
::selection{ background:var(--deep); color:#fff; }

/* anillo de foco de dos tonos (doc 10 §03) */
:focus-visible{
  outline:2px solid var(--orange); outline-offset:2px;
  box-shadow:0 0 0 2px var(--ink); border-radius:2px;
}
[id]{ scroll-margin-top:6.5rem; }          /* WCAG 2.2 SC 2.4.11 */

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--orange); color:var(--orange-ink);
  padding:.6rem 1rem; font-weight:600; font-size:.9rem;
}
.skip:focus{ left:.5rem; top:.5rem; }

.wrap{ max-width:var(--col); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut); }
/* OJO al tocar los `*-in`: son elementos `.wrap` y llevan su propio relleno
   vertical. Escrito como abreviatura —`padding:3rem 0`— la abreviatura pone a
   cero los lados y se lleva por delante el margen de esta regla, así que en
   móvil el texto quedaba pegado a los dos bordes de la pantalla y en
   escritorio esas secciones iban 20 px a la izquierda de las demás. Por eso
   van todas con `padding-block`, que no toca los lados. */
.tnum{ font-variant-numeric:tabular-nums; }
.hot{ color:var(--orange); }

/* ---------- tipos de sección ---------- */
.kick{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blue);
}
.h2{
  margin-top:.5rem; font-size:1.75rem; line-height:1.15;
  font-weight:700; letter-spacing:-.01em; color:var(--txt);
}
.sect-sub{ margin-top:.75rem; color:var(--soft); max-width:68ch; }
@media (min-width:900px){ .h2{ font-size:2.25rem; } }

/* ---------- botones ---------- */
/* Los botones eran los únicos elementos interactivos de la página que no se
   movían: sin transición, el hover era un salto de color instantáneo, y la
   flecha estaba quieta mientras los cuños se elevan y las placas de logo
   también. Aquí entran en el mismo lenguaje que el resto.

   Proporción más ajustada —de .85/1.5rem a .75/1.3rem— porque la tipografía
   de esta página es apretada y el botón grueso se leía prestado de otra. */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem; padding:.75rem 1.3rem; border-radius:var(--r);
  font-size:.95rem; font-weight:600; letter-spacing:-.005em;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  white-space:nowrap;
}
.btn:hover{ text-decoration:none; }
/* La flecha es la misma pieza en los dos botones, con clase o sin ella. */
.btn > span[aria-hidden="true"], .btn .go{ display:inline-block; }

/* Primario: relleno naranja con un filo de luz arriba y sombra proyectada.
   Es la única acción principal, así que tiene que leerse como una tecla y no
   como un rectángulo de color. */
.btn-primary{
  background:var(--orange); color:var(--orange-ink); border-color:#FF7D22;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.35);
}
.btn-primary:hover{
  background:#FF7D22; border-color:#FF9147;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 5px 16px rgba(253,106,2,.24);
}
.btn-primary:active{ background:var(--orange); box-shadow:inset 0 1px 3px rgba(0,0,0,.32); }

/* Fantasma: superficie propia en vez de solo contorno, para que sea una tecla
   secundaria y no un hueco. */
.btn-ghost{
  background:var(--surface); border-color:var(--line); color:var(--txt);
  box-shadow:inset 0 1px 0 rgba(231,238,242,.05);
}
.btn-ghost:hover{
  background:var(--surface2); border-color:var(--blue); color:var(--txt);
  box-shadow:inset 0 1px 0 rgba(231,238,242,.08);
}
.btn-ghost:active{ background:var(--surface); box-shadow:inset 0 1px 3px rgba(0,0,0,.3); }
.btn-ghost .go{ color:var(--blue); }
.btn-sm{ padding:.55rem 1rem; font-size:.875rem; gap:.45rem; }
.btn-row{ margin-top:1.75rem; display:flex; flex-direction:column; gap:.75rem; }
@media (min-width:640px){ .btn-row{ flex-direction:row; } }

/* ---------- etiqueta de evidencia (doc 10 §02) ---------- */
.ev{
  display:inline-flex; align-items:center; justify-content:flex-start; gap:.45rem;
  min-height:1.75rem; padding:.2rem .6rem; line-height:1;
  background:var(--surface); border:1px solid var(--strong); border-radius:2px;
  font-size:.8125rem; font-weight:600; letter-spacing:.04em;
  color:var(--txt); text-decoration:none; white-space:nowrap;
}
.ev small{ font-weight:400; letter-spacing:.02em; color:var(--soft); font-size:.75rem; line-height:1; }
.ev .go{ color:var(--blue); opacity:.65; line-height:1; font-size:.8125rem; }
a.ev:hover{ text-decoration:none; }
a.ev:hover small{ text-decoration:underline; text-underline-offset:3px; }
a.ev:hover .go{ opacity:1; }
.ev-solid { border-left:3px solid var(--strong); }
.ev-dashed{ border-left:3px dashed var(--strong); }
.ev-dotted{ border-left:3px dotted var(--strong); }
.ev-lvl{ text-transform:uppercase; font-size:.75rem; line-height:1; }

/* ---------- elevaciones, solo con puntero fino ---------- */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .btn{ transition:background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
  .btn > span[aria-hidden="true"], .btn .go{ transition:transform .16s ease; }
  .btn:hover{ transform:translateY(-1px); }
  .btn:active{ transform:translateY(0); }
  /* La flecha avanza: el gesto dice «esto lleva a algún sitio» sin una
     palabra más. */
  .btn:hover > span[aria-hidden="true"], .btn:hover .go{ transform:translateX(3px); }
  .lift{ transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
  .lift:hover{ transform:translateY(-8px); box-shadow:0 14px 34px rgba(0,0,0,.45); border-color:var(--strong); }
  .logocell{ transition:transform .15s ease, border-color .15s ease; }
  .logocell:hover{ transform:translateY(-2px); border-color:var(--strong); }
}

/* ---------- entradas con desvanecido: sin JS, todo visible ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .45s ease, transform .45s ease; }
  html.js .reveal.in{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ============================================================
   CABECERA
   ============================================================ */
.top{
  position:sticky; top:0; z-index:50;
  background:rgba(6,9,17,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.top-in{ display:flex; align-items:center; gap:.75rem; height:4.5rem; }
.brand img{ height:3rem; width:auto; display:block; }
@media (min-width:900px){
  .top-in{ height:5rem; }
  .brand img{ height:3.5rem; }
}

.nav{ display:none; }
@media (min-width:900px){
  .nav{ display:flex; align-items:center; gap:1.75rem; margin-left:2rem; font-size:.95rem; }
}
.nav > a, .drop-btn{
  color:var(--soft); padding-bottom:.15rem;
  border-bottom:1px solid transparent; text-decoration:none;
}
.nav > a:hover, .drop-btn:hover{ color:var(--txt); border-bottom-color:var(--blue); text-decoration:none; }

/* desplegable de proyectos */
.drop{ position:relative; }
.drop-btn{ display:inline-flex; align-items:center; gap:.4rem; }
.drop-btn svg{ width:.65rem; height:.65rem; margin-top:.15rem; }
.drop-menu{
  position:absolute; left:50%; transform:translateX(-50%);
  top:calc(100% + .9rem); width:30rem; z-index:50;
  background:var(--surface); border:1px solid var(--strong); border-radius:var(--r);
  box-shadow:0 18px 50px rgba(0,0,0,.55); padding:1rem;
}
.drop-menu ul{ display:grid; grid-template-columns:1fr 1fr; column-gap:1.5rem; }
.drop-menu ul a{
  display:flex; justify-content:space-between; align-items:baseline; gap:.75rem;
  padding:.4rem 0; color:var(--txt); font-size:.9rem;
}
.drop-menu ul a:hover{ color:var(--blue); text-decoration:none; }
.drop-menu ul a small{ color:var(--dim); font-size:.72rem; }
.drop-foot{
  margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:.5rem;
  font-size:.9rem; font-weight:600; color:var(--blue);
}

/* idioma: objetivos ≥24 px, nunca dentro de la hamburguesa */
.lang{
  margin-left:auto; display:flex; align-items:center; overflow:hidden;
  border:1px solid var(--strong); border-radius:var(--r);
  font-size:.75rem; font-weight:600;
}
.lang a{
  min-width:2.4rem; min-height:1.8rem;
  display:grid; place-items:center; color:var(--soft);
  text-decoration:none;
}
.lang a + a{ border-left:1px solid var(--strong); }
.lang a:hover{ color:var(--txt); background:var(--surface); text-decoration:none; }
.lang a.on{ background:var(--deep); color:#fff; }

.burger{
  width:2.75rem; height:2.75rem; display:grid; place-items:center;
  border:1px solid var(--strong); border-radius:var(--r);
}
.burger i{
  display:block; width:1.25rem; border-top:2px solid var(--txt); position:relative;
}
.burger i::before,.burger i::after{
  content:''; position:absolute; left:0; width:1.25rem; border-top:2px solid var(--txt);
}
.burger i::before{ top:-7px; } .burger i::after{ top:5px; }
@media (min-width:900px){ .burger{ display:none; } }

.mnav{ border-top:1px solid var(--line); padding-block:.75rem 1rem; }
.mnav > ul > li > a{ display:block; padding:.65rem 0; color:var(--soft); }
.mnav > ul > li > a:hover{ color:var(--txt); text-decoration:none; }
.mnav-sub{ display:grid; grid-template-columns:1fr 1fr; column-gap:1rem; padding:0 0 .4rem 1rem; }
.mnav-sub a{ display:block; padding:.35rem 0; color:var(--dim); font-size:.9rem; }
.mnav-sub a:hover{ color:var(--txt); text-decoration:none; }
@media (min-width:900px){ .mnav{ display:none !important; } }

/* ============================================================
   HÉROE · estructura de la versión de pruebas
   ============================================================ */
.hero{
  position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background-image:
    linear-gradient(to right, rgba(46,155,224,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(46,155,224,.05) 1px, transparent 1px);
  background-size:56px 56px;
}
.hero-in{ position:relative; }
.hero-txt{ padding:3rem 0; }
.hero-kick{ font-family:var(--mono); font-size:.75rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); }
.hero-h1{
  margin-top:1rem; font-weight:700; letter-spacing:-.015em; color:var(--txt);
  font-size:clamp(2.25rem, 1.5rem + 3vw, 3.75rem); line-height:1.05;
}
.hero-sub{ margin-top:1.25rem; color:var(--soft); max-width:68ch; }
.hero-sub .more{ display:none; }
@media (min-width:900px){
  .hero-in{ display:grid; grid-template-columns:1.1fr .9fr; gap:0 2.5rem; align-items:center; min-height:62vh; }
  .hero-txt{ padding:3.5rem 0; }
  .hero-sub{ font-size:1.25rem; }
  .hero-sub .more{ display:inline; }        /* la 3ª frase, solo escritorio */
  .only-desktop{ display:inline-flex; }
}
.only-desktop{ display:none; }

/* cartera de cinco proyectos: la enciende la nube */
.folio{ display:none; }
@media (min-width:640px){
  .folio{
    display:flex; flex-wrap:wrap; gap:.55rem 1.6rem;
    margin-top:1.6rem; padding-top:.9rem; border-top:1px solid var(--line);
  }
}
.folio a{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.05em;
  color:var(--txt); text-decoration:none; display:grid; gap:.1rem;
  border-bottom:1px solid transparent; padding-bottom:.1rem;
  transition:color .35s ease, border-color .35s ease;
}
.folio a span{ font-size:.615rem; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); }
.folio a:hover{ border-bottom-color:var(--orange); }
.folio a:hover span{ color:var(--blue); }
.folio a.on{ color:var(--orange); border-bottom-color:var(--orange); }
.folio a.on span{ color:var(--blue); }

/* nube, HUD y nota */
.cloud{ display:none; }
@media (min-width:900px){
  .cloud{ display:block; position:relative; height:min(58vh,520px); min-height:340px; }
}
.cloud canvas{ position:absolute; inset:0; max-width:100%; }
.cloud-off{ display:none; }
.hud{ position:absolute; z-index:2; left:0; bottom:.4rem; display:grid; gap:.3rem; pointer-events:none; }
.hud span{
  font-family:var(--mono); font-size:.655rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim);
  background:rgba(6,9,17,.62); border-left:1px solid var(--blue);
  padding:.2rem .5rem; width:max-content;
}
.hud b{ color:var(--txt); font-weight:400; }
.hud .live{ color:var(--orange); border-left-color:var(--orange); }
.hud-label{ font-size:.72rem !important; letter-spacing:.13em !important; color:var(--txt) !important; }
@media (prefers-reduced-motion:no-preference){
  .hud .live b{ animation:hudpulse 1.9s ease-in-out infinite; }
  @keyframes hudpulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
}
.cloud-note{
  position:absolute; z-index:2; right:.2rem; top:.6rem;
  font-family:var(--mono); font-size:.61rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim);
}

/* ============================================================
   FRANJA DE PRUEBA · sellos de instrumento
   ============================================================ */
.proof{ background:var(--ink2); border-bottom:1px solid var(--line); }
.proof-in{ padding-block:3.5rem 2.5rem; }
.seals{ display:grid; grid-template-columns:1fr; gap:.75rem; }
@media (min-width:640px){ .seals{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){
  .seals{ grid-template-columns:repeat(4,1fr); }
  .o1{ order:1 } .o2{ order:2 } .o3{ order:3 } .o4{ order:4 }
}

.seal{
  position:relative; display:flex; flex-direction:column; height:100%; overflow:hidden;
  padding:.9rem 1.05rem .85rem; border-radius:var(--r);
  background:linear-gradient(160deg, rgba(0,82,155,.18), rgba(14,21,36,0) 58%), var(--surface);
  border:1px solid var(--line); color:inherit; text-decoration:none;
}
a.seal:hover{ text-decoration:none; }
.seal .rule{
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--blue), rgba(46,155,224,0) 75%);
}
.seal::before,.seal::after{
  content:''; position:absolute; width:14px; height:14px; pointer-events:none;
  border:1.5px solid rgba(46,155,224,.55);
}
.seal::before{ top:7px; left:7px; border-right:0; border-bottom:0; }
.seal::after{ bottom:7px; right:7px; border-left:0; border-top:0; }

.seal-hot{ background:linear-gradient(160deg, rgba(253,106,2,.16), rgba(14,21,36,0) 58%), var(--surface); }
.seal-hot .rule{ background:linear-gradient(90deg, var(--orange), rgba(253,106,2,0) 75%); }
.seal-hot::before,.seal-hot::after{ border-color:rgba(253,106,2,.6); }

.seal-head{ display:flex; align-items:center; gap:.65rem; }
.seal-head svg{ width:1.75rem; height:1.75rem; flex:0 0 auto; }
.kick2{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
}
.seal-val,
.seal-title{ margin-top:.55rem; font-size:1.55rem; line-height:1.15; font-weight:700; letter-spacing:-.015em; }
.seal-val{ color:var(--orange); }
.seal-title{ color:var(--txt); }
.seal-sub{ margin-top:.35rem; margin-bottom:.75rem; font-size:.875rem; color:var(--soft); }
/* `auto` empuja el sello al fondo: sin esto quedaba a cuatro alturas
   distintas segun lo que midiera el texto de encima. El hueco lo pone el
   margen de `.seal-sub`, nunca el relleno del propio recuadro. */
.seal .ev{ margin-top:auto; align-self:flex-start; }
.seal .wm{
  position:absolute; right:-14px; bottom:-16px; width:108px; height:108px;
  opacity:.08; pointer-events:none;
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .seal{ transition:transform .15s ease, border-color .15s ease; }
  a.seal:hover{ transform:translateY(-4px); border-color:var(--strong); }
  a.seal:hover .wm{ opacity:.14; }
}
.seal .beam{
  position:absolute; top:0; bottom:0; width:34%; left:-40%;
  background:linear-gradient(100deg, transparent, rgba(253,106,2,.14) 45%, rgba(231,238,242,.10) 55%, transparent);
  transform:skewX(-14deg); pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  html.js .reveal.in .beam{ animation:beamsweep 1.25s ease .35s 1 both; }
  @keyframes beamsweep{ from{ left:-40% } to{ left:120% } }
}

/* ============================================================
   FRANJA DE EVENTO · IBC
   ============================================================ */
.event{ background:var(--surface); border-bottom:1px solid var(--line); }
.event-in{ padding-block:2rem; }
.event-grid{ display:grid; gap:2rem; }
@media (min-width:900px){
  .event-grid{ grid-template-columns:7fr 5fr; gap:2.5rem; align-items:center; }
}
.event-head{ display:flex; align-items:center; gap:1rem; }
.event-roundel{
  flex:0 0 auto; height:4rem; width:4rem; border-radius:50%;
  overflow:hidden; background:#fff; border:1px solid var(--paper-line);
}
.event-roundel img{ height:100%; width:auto; max-width:none; object-fit:cover; object-position:left; }
@media (min-width:900px){ .event-roundel{ height:5rem; width:5rem; } }
.event-title{ margin-top:.25rem; font-size:1.25rem; font-weight:700; letter-spacing:-.01em; color:var(--txt); }
/* La única línea accionable del bloque para quien va a la feria: en su propia
   línea y un cuerpo por debajo, para que se lea como llamada y no se parta
   por «Hall / 14». */
.ibc-find{ display:block; margin-top:.45rem; font-size:.82em; }
@media (min-width:900px){ .event-title{ font-size:1.5rem; } }
.event-body{ margin-top:1rem; color:var(--soft); max-width:62ch; }
.event-list{ margin-top:1rem; display:grid; gap:.4rem; font-size:.9rem; color:var(--soft); }
.event-list li{ display:flex; gap:.65rem; }
.event-list li::before{ content:'▸'; font-family:var(--mono); color:var(--blue); }
.event .btn{ margin-top:1.25rem; }

.event-photo{
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r); margin-bottom:.75rem;
}
.event-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.event-photo figcaption,.event-photo .cap{
  position:absolute; left:.5rem; bottom:.5rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt); background:rgba(6,9,17,.9); box-shadow:0 0 0 1px rgba(6,9,17,.55);
  border-radius:2px; padding:.16rem .4rem;
}
.partners-note{ font-size:.75rem; color:var(--dim); margin-bottom:.6rem; }
.partners{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; align-items:stretch; }
/* Alto propio, por encima de .logocell, y tamaño óptico por proporción: el
   lockup del IET es casi 6:1 y AP es cuadrado, así que a igual alto uno se
   ve diminuto y el otro gigante. */
.partners .plate{ height:5.25rem; padding:.85rem; }
.partners .plate img{ max-height:100%; max-width:100%; width:auto; }
.partners .plate img[alt="Associated Press"]{ max-height:2.1rem; }
.partners .plate img[alt="BFBS"]{ max-height:1.9rem; }
.plate{
  border-radius:var(--r); background:#fff; border:1px solid var(--paper-line);
  padding:.75rem; display:grid; place-items:center; height:5rem;
}
.plate img{ max-height:100%; width:auto; }
.event-note{ margin-top:.6rem; font-size:.75rem; color:var(--dim); }

/* ============================================================
   FRANJA DE P2 · solo móvil (doc 11 §06)
   ============================================================ */
.pstrip{ background:var(--surface); border-bottom:1px solid var(--line); }
.pstrip-in{ padding-block:1.75rem; }
.pstrip .h3{ margin-top:.4rem; font-size:1.15rem; font-weight:700; color:var(--txt); }
.pstrip p{ margin-top:.35rem; font-size:.9rem; color:var(--soft); }
.pstrip .btn{ margin-top:1.1rem; }
@media (min-width:900px){ .pstrip{ display:none; } }

/* ============================================================
   CAPACIDADES
   ============================================================ */
.caps-in{ padding-block:3rem; }
@media (min-width:900px){ .caps-in{ padding-block:5rem; } }
.caps-grid{ margin-top:2rem; border-top:1px solid var(--line); }
.cap{ position:relative; border-bottom:1px solid var(--line); }
.cap-in{ display:flex; gap:1rem; padding:1.25rem 0; }
.cap-tray{
  flex:0 0 auto; width:4rem; height:4rem;
  display:grid; place-items:center;
}
.cap-tray svg{ width:3.5rem; height:3.5rem; }
.cap-body{ min-width:0; display:flex; flex-direction:column; }
/* Es un <button>: abre el mismo panel que «In practice». Era un enlace a una
   ficha de capacidad que todavía no existe, y enlazar un 404 desde el titular
   de la tarjeta es lo peor que puede hacer un titular. */
.cap-title{
  appearance:none; -webkit-appearance:none; background:none; border:0;
  padding:0; margin:0; font:inherit; text-align:left; cursor:pointer;
  font-weight:600; color:var(--txt); text-decoration:none;
}
.cap-title:hover{ color:var(--blue); text-decoration:none; }
.cap-title:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:3px; }
.cap-sub{ margin-top:.35rem; font-size:.9rem; color:var(--soft); }
.cap-proven{ margin-top:.75rem; font-size:.78rem; color:var(--dim); }
.cap-proven a{ color:var(--blue); }
.cap-more{
  margin-top:.75rem; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.9rem; font-weight:600; color:var(--blue);
}
.cap-more:hover{ text-decoration:underline; text-underline-offset:4px; }
.cap-more b{ font-size:1.05rem; line-height:1; font-weight:600; }

@media (min-width:900px){
  .caps-grid{
    border-top:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
  }
  .cap{
    border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  }
  .cap-in{ flex-direction:column; padding:1.25rem; height:100%; }
  .cap-tray{
    width:100%; height:7rem; background:var(--ink2);
    border:1px solid var(--line); border-radius:var(--r);
  }
  .cap-tray svg{ width:4.5rem; height:4.5rem; }
  .cap-sub{ min-height:3.4rem; }
  .cap-proven{ margin-top:auto; padding-top:.75rem; }
  @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
    .cap-tray svg{ transition:transform .18s ease; }
    .cap:hover .cap-tray svg{ transform:scale(1.12); }
    .cap:hover .cap-tray{ border-color:var(--blue); }
  }
}
@media (min-width:1100px){ .caps-grid{ grid-template-columns:repeat(5,1fr); } }

.caps-cta{
  margin-top:2rem; display:flex; flex-direction:column; gap:1rem;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:1.25rem;
}
.caps-cta p{ flex:1; color:var(--txt); }
.caps-cta p span{ color:var(--soft); }
@media (min-width:640px){ .caps-cta{ flex-direction:row; align-items:center; } }

/* ============================================================
   DIÁLOGOS
   ============================================================ */
dialog.cap-dlg{
  background:var(--surface); color:var(--txt);
  border:1px solid var(--strong); border-top:3px solid var(--acc,var(--blue));
  border-radius:var(--r); padding:0; width:100%; max-width:min(92vw,40rem);
}
dialog.cap-dlg::backdrop{ background:rgba(6,9,17,.78); backdrop-filter:blur(6px); }
.dlg-head{ display:flex; align-items:center; gap:1rem; padding:1.25rem 1.4rem 0; }
.dlg-body{ padding:1rem 1.4rem 1.4rem; }
.dlg-kick{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--acc,var(--blue));
}
.dlg-title{ font-size:1.125rem; font-weight:700; line-height:1.35; color:var(--txt); }
.dlg-glyph{ color:var(--acc,var(--blue)); flex:0 0 auto; }
.dlg-glyph svg{ width:3rem; height:3rem; }
.dlg-x{
  margin-left:auto; width:44px; height:44px; flex:0 0 auto;
  display:grid; place-items:center; border:1px solid var(--strong); border-radius:var(--r);
  color:var(--soft); font-size:1.15rem; line-height:1;
}
.dlg-x:hover{ color:var(--txt); border-color:var(--blue); }
.dlg-scene{ color:var(--soft); }
.dlg-scene b{ color:var(--acc,var(--blue)); font-weight:600; }
.dlg-kpis{ display:grid; gap:.6rem; margin-top:1rem; }
.dlg-kpi{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .8rem;
  border:1px solid var(--line); border-left:3px solid var(--strong); border-radius:2px;
  background:var(--ink2); padding:.65rem .8rem;
}
.dlg-kpi > b{ font-weight:600; color:var(--txt); }
.dlg-kpi > span{ font-size:.9rem; color:var(--soft); }
.dlg-limit{
  margin-top:1.1rem; border-left:3px solid var(--strong);
  padding:.15rem 0 .15rem .9rem; color:var(--soft); font-size:.925rem;
}
.dlg-limit strong{ color:var(--txt); }
.dlg-actions{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:.75rem; }

/* ---------- formulario único ---------- */
.f-grid2{ display:grid; gap:1rem; }
@media (min-width:640px){ .f-grid2{ grid-template-columns:1fr 1fr; } }
.f-field{ margin-top:0; }
.f-mt{ margin-top:1rem; }
.f-label{
  display:block; font-size:.8125rem; font-weight:600; letter-spacing:.03em;
  color:var(--soft); margin-bottom:.3rem;
}
.f-in{
  width:100%; color:var(--txt); background:var(--ink2);
  border:1px solid var(--strong); border-radius:var(--r); padding:.6rem .7rem;
}
.f-in::placeholder{ color:var(--dim); }
textarea.f-in{ min-height:6rem; resize:vertical; }
.consent{
  margin-top:1rem; display:flex; align-items:flex-start; gap:.65rem;
  font-size:.9rem; color:var(--soft); cursor:pointer;
}
.consent input{ margin-top:.25rem; width:1rem; height:1rem; accent-color:var(--orange); }
.form-actions{ margin-top:1.25rem; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
.f-note{ font-size:.75rem; color:var(--dim); }
/* Error de envío: junto al botón, donde estaba el foco. */
.f-err{
  margin-top:1rem; border-left:3px solid #F0685A; padding-left:.75rem;
  font-size:.9rem; color:var(--soft);
}
.f-err a{ color:var(--blue); }

/* Confirmación. SUSTITUYE al formulario, así que puede ocupar el centro de la
   modal en vez de ser una nota al pie con los campos todavía llenos detrás. */
.f-done{ padding:1.5rem 0 .5rem; text-align:center; }
.f-done:focus{ outline:none; }
.f-done-t{
  font-size:1.25rem; font-weight:700; color:var(--txt);
  padding-top:2.75rem; position:relative;
}
/* La marca de verificación, dibujada en CSS: no hace falta un SVG para dos
   trazos, y hereda el verde de las etiquetas de evidencia cumplida. */
.f-done-t::before{
  content:''; position:absolute; top:0; left:50%; margin-left:-1rem;
  width:2rem; height:2rem; border-radius:50%;
  border:2px solid #46C39B;
}
.f-done-t::after{
  content:''; position:absolute; top:.72rem; left:50%; margin-left:-.42rem;
  width:.85rem; height:.45rem;
  border-left:2px solid #46C39B; border-bottom:2px solid #46C39B;
  transform:rotate(-45deg);
}
.f-done-b{
  margin:.6rem auto 0; max-width:46ch;
  font-size:.95rem; line-height:1.6; color:var(--soft);
}
.f-done .btn{ margin-top:1.5rem; }

/* ============================================================
   ÍNDICE DE PROYECTOS
   ============================================================ */
.projects{ background:var(--ink2); border-bottom:1px solid var(--line); }
.projects-in{ padding-block:3rem; }
@media (min-width:900px){ .projects-in{ padding-block:5rem; } }

.proj-grid{ margin-top:2rem; display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:640px){ .proj-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .proj-grid{ grid-template-columns:repeat(4,1fr); } }

.pcard{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
}
.pcard-body{ padding:1rem; flex:1; display:flex; flex-direction:column; gap:.35rem; }
.pcard h3{ font-size:1rem; font-weight:600; }
.pcard h3 a{ color:var(--txt); text-decoration:none; }
.pcard h3 a::after{ content:''; position:absolute; inset:0; }
.pcard h3 a:hover{ color:var(--blue); }
.pmeta{ margin-top:0; font-size:.85rem; color:var(--soft); }
.pmeta-2{ font-size:.85rem; color:var(--dim); display:none; }
@media (min-width:640px){ .pmeta-2{ display:block; } }
.pval{ margin-top:.2rem; font-size:1.1rem; font-weight:600; color:var(--txt); }
.pcard .ev{ margin-top:auto; align-self:flex-start; }
.chip-deep{
  display:inline-block; background:var(--deep); color:#fff; border-radius:2px;
  padding:.1rem .4rem; font-size:.72rem; font-weight:600;
}

/* cabecera visual 16:10, idéntica en las ocho (doc 11 §04) */
.shot{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:linear-gradient(145deg,#0F2432 0%, var(--surface) 55%, var(--ink2) 100%);
  border-bottom:1px solid var(--line);
}
.shot .cap{
  position:absolute; left:.45rem; bottom:.45rem;
  font-family:var(--mono); font-size:.5625rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--txt);
  background:rgba(6,9,17,.9); box-shadow:0 0 0 1px rgba(6,9,17,.55);
  padding:.16rem .45rem; border-radius:2px;
}
.shot-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Logo pegado ARRIBA, y con la franja del badge reservada por CSS.
   Antes esto era `display:grid; place-items:center` con `max-height:78%`, y el
   `max-height` en porcentaje no resolvía: el alto del ítem de grid no era
   definido, así que la única restricción que actuaba era `max-width:82%` y la
   imagen SE SALÍA por abajo de la caja. Con `overflow:hidden` no se veía, pero
   el efecto era doble: el logo aparecía más grande de lo previsto y su parte
   inferior quedaba recortada, así que el badge caía encima de la marca.
   Y cualquier aire que se dejase abajo en el propio fichero se perdía fuera de
   la caja, que es justo lo que no funcionaba.
   Con las cuatro esquinas fijadas la caja SÍ es definida, y `object-position`
   pega el contenido arriba. El inset inferior es la reserva del badge. */
.shot-logo{ background:var(--paper); padding:.9rem 1.3rem 1.9rem; }
.shot-logo img{ display:block; margin:0 auto; width:auto; height:auto; max-width:100%; max-height:100%; }
/* Gráfico con su propio fondo blanco y texto dentro —la tarjeta social del
   Accelerator—: se muestra ENTERO sobre la plancha de papel, y su blanco y el
   de la plancha son el mismo, así que se lee como un solo panel. Sin relleno
   lateral porque la composición ya trae sus márgenes; el inset inferior es la
   reserva del badge, igual que en .shot-logo. */
.shot-card{ background:var(--paper); padding:0 0 1.9rem; }
.shot-card img{ display:block; margin:0 auto; width:auto; height:auto; max-width:100%; max-height:100%; }

.shot-logo .cap,
.shot-card .cap{
  color:var(--paper-ink); background:rgba(255,255,255,.92);
  box-shadow:0 0 0 1px var(--paper-line);
}

/* ---------- marcador de KPIs ---------- */
.score{
  margin-top:2rem; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
}
.score-rule{ display:block; height:2px; background:linear-gradient(90deg,var(--orange),rgba(253,106,2,0) 75%); }
.score-in{ padding:1.5rem; }
@media (min-width:900px){
  .score-in{ display:grid; grid-template-columns:4fr 8fr; gap:2rem; align-items:center; }
}
.score-left{ text-align:center; }
@media (min-width:900px){ .score-left{ border-right:1px solid var(--line); padding-right:2rem; } }
.score-num{ margin-top:.5rem; font-weight:700; line-height:1; }
.score-num .n{ font-size:3.4rem; color:var(--orange); }
.score-num .d{ font-size:2rem; color:var(--dim); }
.score-sub{ margin-top:.35rem; font-size:.9rem; color:var(--soft); }
.ticks{ margin-top:.85rem; display:flex; justify-content:center; gap:.4rem; }
.tick{ width:1.25rem; height:.625rem; border-radius:2px; background:var(--orange); }
.tick-miss{ background:none; border:1px solid var(--strong); }
.score-right{ margin-top:1.5rem; }
@media (min-width:900px){ .score-right{ margin-top:0; } }
.score-h3{ font-size:1.15rem; font-weight:700; letter-spacing:-.01em; color:var(--txt); }
@media (min-width:900px){ .score-h3{ font-size:1.25rem; } }
.score-body{ margin-top:.6rem; color:var(--soft); max-width:62ch; }
.score-body strong{ color:var(--txt); }
.score-right .ev{ margin-top:1rem; }

/* ---------- banda de trabajo privado ---------- */
.nda{
  margin-top:2rem; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
}
.nda-in{ padding:1.5rem; }
@media (min-width:900px){
  .nda-in{ display:grid; grid-template-columns:7fr 5fr; gap:2.5rem; align-items:center; padding:1.75rem; }
}
.nda-title{ margin-top:.75rem; font-size:1.25rem; font-weight:700; letter-spacing:-.01em; color:var(--txt); max-width:46ch; }
@media (min-width:900px){ .nda-title{ font-size:1.5rem; } }
.sector-grid{ margin-top:1rem; display:grid; grid-template-columns:1fr 1fr; gap:.6rem; max-width:28rem; }
.sector{
  display:flex; align-items:center; gap:.75rem;
  border:1px solid var(--line); border-radius:var(--r); background:var(--ink2);
  padding:.6rem .75rem;
}
.sector svg{ width:2rem; height:2rem; flex:0 0 auto; }
.sector b{ display:block; font-size:.875rem; font-weight:600; color:var(--txt); }
.sector small{ display:block; font-size:.75rem; color:var(--dim); }
.nda-body{ margin-top:1rem; color:var(--soft); max-width:62ch; }
.nda .btn{ margin-top:1.25rem; }
.nda-logos{ margin-top:2rem; }
@media (min-width:900px){ .nda-logos{ margin-top:0; } }
.logo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; align-items:center; }
.logocell{
  border-radius:var(--r); background:var(--paper); border:1px solid var(--paper-line);
  padding:.6rem; display:grid; place-items:center; height:4rem;
}
.logocell img{ width:auto; }
.projects .index-cta{ margin-top:2rem; }

/* ============================================================
   CONFIANZA · cuños sobre tarjeta de instrumento
   ============================================================ */
.trust-in{ padding-block:3rem; }
@media (min-width:900px){ .trust-in{ padding-block:5rem; } }
.trust-grid{ margin-top:2rem; display:grid; gap:1rem; }
@media (min-width:900px){ .trust-grid{ grid-template-columns:repeat(3,1fr); } }
.tseal{ text-align:center; }
.tseal-plate{
  margin:0.5rem auto 0; width:7rem; height:7rem; border-radius:50%;
  background:#fff; border:4px solid var(--paper-line);
  box-shadow:0 10px 28px rgba(0,0,0,.4);
  display:grid; place-items:center; overflow:hidden; padding:.75rem;
}
@media (min-width:900px){ .tseal-plate{ width:8rem; height:8rem; } }
/* Alto máximo en rem y no en porcentaje: la placa es un ítem de grid centrado
   y ahí `max-height:100%` no resuelve —el mismo fallo que tenían las tarjetas
   de proyecto—. El distintivo ENS se salía 5 px por abajo y el borde circular
   le cortaba el «/2022» de la fecha. */
.tseal-plate img{ max-height:5rem; max-width:100%; width:auto; }
@media (min-width:900px){ .tseal-plate img{ max-height:6rem; } }
/* El glifo se dibuja a 5.25rem y no a 4: los otros dos cuños son insignias a
   todo color que llenan su placa (6.5rem de caja útil), y a 4rem el trazo
   quedaba con la mitad de peso visual que sus vecinos. Sigue con más aire que
   ellos porque una línea necesita respirar más que una insignia con borde. */
.tseal-plate svg{ width:5.25rem; height:5.25rem; }
.tseal .kick2{ display:block; margin-top:1.25rem; }
.tseal-title{ display:block; margin-top:.4rem; font-size:1.125rem; font-weight:700; color:var(--txt); }
.tseal-sub{ display:block; margin-top:.4rem; padding:0 .5rem; font-size:.9rem; color:var(--soft); }
.tseal-sub{ margin-bottom:1rem; }
.tseal .ev{ margin-top:auto; align-self:center; }

/* ============================================================
   PRESENCIA · el mapa de la web actual
   ============================================================ */
.pres{ background:var(--ink2); border-bottom:1px solid var(--line); }
.pres-in{ padding-block:3rem; }
@media (min-width:900px){ .pres-in{ padding-block:5rem; } }
.pres-grid{ margin-top:2rem; display:grid; gap:2rem; }
@media (min-width:900px){
  .pres-grid{ grid-template-columns:7fr 5fr; gap:2.5rem; align-items:center; }
}
.map-wrap{ display:none; }
@media (min-width:900px){
  .map-wrap{
    display:block; position:relative; aspect-ratio:2/1; overflow:hidden;
    border:1px solid var(--line); border-radius:var(--r); background:var(--ink);
  }
}
.map-wrap > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; opacity:.2;
}
.map-node{
  position:absolute; transform:translate(-50%,-50%);
  width:26px; height:26px; border-radius:50%;
  background:rgba(0,82,155,.22);
  display:flex; justify-content:center; align-items:center;
}
.map-node::after{
  content:''; width:9px; height:9px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 10px var(--blue);
  transition:all .3s ease;
}
.map-node:hover{ background:rgba(253,106,2,.35); }
.map-node:hover::after{ background:var(--orange); box-shadow:0 0 14px var(--orange); }
.map-hq::after{ background:var(--orange); box-shadow:0 0 12px var(--orange); }
@media (prefers-reduced-motion:no-preference){
  .map-hq{ animation:mappulse 3s infinite cubic-bezier(.66,0,0,1); }
  @keyframes mappulse{
    0%,100%{ transform:translate(-50%,-50%) scale(1); background:rgba(0,82,155,.22); }
    50%{ transform:translate(-50%,-50%) scale(1.5); background:rgba(0,82,155,.42); }
  }
}
.map-node .tag{
  position:absolute; top:-1.9rem; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--soft); background:rgba(6,9,17,.8); border:1px solid var(--line);
  border-radius:2px; padding:.15rem .4rem;
  opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.map-node:hover .tag{ opacity:1; }
.map-hq .tag{ opacity:1; }

.hub-list{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.hub{ display:flex; align-items:center; gap:.75rem; padding:.9rem 0; }
.hub + .hub{ border-top:1px solid var(--line); }
.dot{ flex:0 0 auto; width:.625rem; height:.625rem; border-radius:50%; background:var(--blue); }
.dot-hq{ background:var(--orange); box-shadow:0 0 8px var(--orange); }
.hub span{ display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; min-width:0; }
.hub b{ font-weight:600; color:var(--txt); }
.hub small{ font-size:.875rem; color:var(--soft); }

/* ============================================================
   CIERRE · con los recibos de lo que se ha visto
   ============================================================ */
.close{
  border-bottom:1px solid var(--line); text-align:center;
  background:
    radial-gradient(60rem 22rem at 50% 115%, rgba(253,106,2,.09), transparent 60%),
    linear-gradient(to right, rgba(46,155,224,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(46,155,224,.045) 1px, transparent 1px);
  background-size:auto, 56px 56px, 56px 56px;
}
.close-in{ padding-block:4rem; }
@media (min-width:900px){ .close-in{ padding-block:6rem; } }
.close .h2{ margin-top:.75rem; font-size:1.75rem; }
@media (min-width:900px){ .close .h2{ font-size:2.5rem; } }
br.sm{ display:none; }
@media (min-width:640px){ br.sm{ display:block; } }
.close-sub{ margin-top:1rem; color:var(--soft); max-width:60ch; margin-left:auto; margin-right:auto; }
.receipts{
  margin-top:1.75rem; display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem;
}
.receipt{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--line); border-radius:2rem; background:var(--surface);
  padding:.45rem .95rem; font-size:.85rem; color:var(--soft);
}
.receipt b{ color:var(--txt); font-weight:600; }
.receipt .tick-dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--orange); flex:0 0 auto; }
.receipt .tick-dot.b{ background:var(--blue); }
/* Apilado en todos los tamaños, no en fila desde 640: el correo es una
   alternativa y no un igual del botón. En horizontal pesaban lo mismo y
   obligaban a elegir entre dos cosas justo en el momento de conversión. */
.close-actions{
  margin-top:2rem; display:flex; flex-direction:column; align-items:center; gap:.9rem;
}
.close-mail{ font-size:.85rem; color:var(--dim); }
.close-mail a{ color:var(--blue); }

/* ============================================================
   PIE
   ============================================================ */
.foot{ background:var(--ink2); border-top:1px solid var(--line); }
.foot-in{ padding-block:3rem 2rem; }
.foot-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem 2rem; font-size:.9rem; }
@media (min-width:900px){
  .foot-grid{ grid-template-columns:3.7fr 3.7fr 2fr 2.6fr; }
}
.foot-brand{ grid-column:1 / -1; }
@media (min-width:900px){ .foot-brand{ grid-column:auto; } }
.foot-brand img{ height:3rem; width:auto; }
.foot-tag{ margin-top:1rem; color:var(--soft); max-width:36ch; }
.foot-dim{ margin-top:1rem; font-size:.75rem; color:var(--dim); }
.foot-dim + .foot-dim{ margin-top:.25rem; }
.foot h3{ font-size:.95rem; font-weight:600; color:var(--txt); margin-bottom:.75rem; }
.foot-links li{ padding:.2rem 0; }
.foot-links a{ color:var(--soft); }
.foot-links a:hover{ color:var(--blue); text-decoration:none; }
.foot-links-2col{ display:grid; grid-template-columns:1fr 1fr; column-gap:1.5rem; }
.foot .index-link{
  margin-top:.75rem; display:inline-flex; align-items:center; gap:.4rem;
  color:var(--blue); font-weight:600;
}
.foot .mail{ word-break:normal; overflow-wrap:break-word; hyphens:none; }
.foot .btn{ margin-top:1rem; }
.foot-bar{
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.75rem;
  font-size:.75rem; color:var(--dim);
}
@media (min-width:640px){ .foot-bar{ flex-direction:row; align-items:center; } }
.foot-bar .legal{ display:flex; gap:1rem; }
@media (min-width:640px){ .foot-bar .legal{ margin-left:auto; } }
.foot-bar .legal a{ color:var(--dim); }
.foot-bar .legal a:hover{ color:var(--txt); text-decoration:none; }

/* ============================================================
   PÁGINAS LEGALES
   Las clases que usaba el marcado anterior —`legal-hero`,
   `legal-doc`— no existían en ninguna hoja del repositorio: las
   dos páginas dependían de Tailwind desde un CDN y del `prose`
   por defecto. Aquí van, en el sistema de esta página.
   ============================================================ */
.legal-in{ padding-block:3rem 5rem; max-width:52rem; }
.legal-back{ font-size:.875rem; }
.legal-back a{ color:var(--soft); text-decoration:none; }
.legal-back a:hover{ color:var(--txt); }
.legal-in .kick{ margin-top:2.5rem; }
.legal-h1{
  margin-top:.4rem; font-size:clamp(2rem,5vw,2.75rem); font-weight:700;
  line-height:1.08; letter-spacing:-.02em; color:var(--txt);
}
.legal-date{
  margin-top:.75rem; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--dim);
}
/* Medida de lectura: un texto legal se lee de arriba abajo y a 68
   caracteres por línea, no al ancho de la retícula. */
.legal-doc{
  margin-top:2.5rem; padding-top:2rem; border-top:1px solid var(--line);
  max-width:68ch;
}
.legal-doc h2{
  margin-top:2.25rem; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue);
}
.legal-doc h2:first-child{ margin-top:0; }
.legal-doc p{ margin-top:.85rem; color:var(--soft); line-height:1.7; }
.legal-doc a{ color:var(--blue); }
.legal-also{
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line);
  max-width:68ch; font-size:.875rem; color:var(--dim);
}
.legal-also a{ color:var(--blue); }

/* ============================================================
   /projects/ · ÍNDICE COMPLETO
   Tabla y no rejilla (doc 11·4): aquí el trabajo es comparar
   ocho filas columna a columna, y las cifras van tabulares.
   ============================================================ */
.idx-in{ padding-block:3rem 4rem; }
@media (min-width:900px){ .idx-in{ padding-block:4rem 5rem; } }
.idx-h1{
  margin-top:.4rem; font-size:clamp(1.9rem,4.5vw,2.6rem); font-weight:700;
  line-height:1.08; letter-spacing:-.02em; color:var(--txt);
}
.idx-sub{ margin-top:1rem; color:var(--soft); max-width:70ch; }

/* Filtros: enlaces con estado, no formulario. Sin JS se ven las ocho filas. */
.idx-filters{
  margin-top:2rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem;
  padding-bottom:1rem; border-bottom:1px solid var(--line);
}
.idx-f-label{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
}
.idx-f-group{ display:flex; flex-wrap:wrap; gap:.35rem; }
.idx-f{
  font-family:var(--sans); font-size:.8rem; font-weight:600; color:var(--soft);
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:.3rem .7rem; cursor:pointer;
}
.idx-f:hover{ color:var(--txt); border-color:var(--strong); }
.idx-f.on{ color:var(--txt); border-color:var(--blue); background:var(--deep); }
.idx-count{
  margin:0 0 0 auto; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.06em; color:var(--dim);
}
.idx-count b{ color:var(--txt); font-weight:400; font-variant-numeric:tabular-nums; }

/* La tabla desborda en móvil por su propio contenedor, nunca por la página. */
.idx-scroll{ margin-top:1.5rem; overflow-x:auto; }
.idx-table{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:56rem; }
.idx-table th, .idx-table td{
  text-align:left; padding:.8rem .6rem; border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.idx-table th:first-child, .idx-table td:first-child{ padding-left:0; }
.idx-table th:last-child,  .idx-table td:last-child{ padding-right:0; }
.idx-table thead th{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--dim); font-weight:400;
  border-bottom-color:var(--strong); white-space:nowrap;
}
.idx-table tbody tr:hover{ background:var(--surface); }
.idx-table tbody tr[hidden]{ display:none; }
.idx-name{ font-size:1rem; font-weight:600; color:var(--txt); white-space:nowrap; }
.idx-name a{ color:var(--txt); text-decoration:none; }
.idx-name a:hover{ color:var(--blue); text-decoration:underline; text-underline-offset:4px; }
.idx-table td{ color:var(--soft); }
/* El resultado puede partir de línea: con ocho columnas, mantenerlo en una
   sola era lo que sacaba la tabla del ancho de la página en escritorio. */
.idx-val{ white-space:normal; }
.idx-table td, .idx-table th{ hyphens:none; }
.idx-nofig{ color:var(--dim); font-style:italic; }

/* La salida, pedida en voz alta. Una tabla se lee en horizontal y el nombre
   enlazado no es una llamada: la última columna sí lo es. */
.idx-go{ white-space:nowrap; text-align:right; }
.idx-cta{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.8rem; font-weight:600; color:var(--blue); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:.3rem .6rem;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.idx-cta .go{ transition:transform .18s ease; }
.idx-cta:hover{ color:var(--txt); border-color:var(--blue); background:var(--deep); }
.idx-cta:hover .go{ transform:translateX(3px); }
.idx-cta:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* El PROGRAMA es el enlace a su registro público. Había una columna de
   financiación aparte cuyo contenido era «GA 101119681»: el número sigue en el
   href y en la etiqueta accesible, pero lo que se lee es el nombre. */
.idx-progc{ white-space:nowrap; }
.idx-prog{
  display:inline-flex; align-items:baseline; gap:.3rem;
  color:var(--soft); text-decoration:none;
  border-bottom:1px solid var(--line); transition:color .18s ease, border-color .18s ease;
}
.idx-prog .go{ font-size:.72em; color:var(--dim); transition:color .18s ease; }
.idx-prog:hover{ color:var(--txt); border-color:var(--blue); }
.idx-prog:hover .go{ color:var(--blue); }
.idx-prog:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* El TRL solo existe cuando hay programa, así que viaja pegado a él en vez de
   gastar una columna que estaría vacía en seis filas de ocho. */
.idx-trl{
  display:block; margin-top:.15rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim);
}

/* TIPO · dos marcadores independientes. El primero dice de quién es el
   trabajo —naranja de marca el producto propio, neutro el resto—; el segundo
   dice si es I+D, y va en azul. Con un solo badge excluyente, un proyecto que
   es producto propio Y de I+D perdía la mitad, y son cinco de ocho. Quién lo
   financia es la columna de al lado. */
.idx-tag{
  display:inline-block; white-space:nowrap;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.09em;
  text-transform:uppercase; font-weight:500;
  padding:.28rem .5rem; border-radius:4px;
  border:1px solid var(--line); color:var(--soft); background:var(--surface);
}
.idx-tag-own{ color:#FFB273; border-color:rgba(253,106,2,.42); background:rgba(253,106,2,.1); }
/* El azul significa siempre investigación, en las dos columnas de marcadores. */
.idx-tag-rd{ color:#8FD0F5; border-color:rgba(46,155,224,.45); background:rgba(46,155,224,.1); }
.idx-tags{ white-space:nowrap; }
.idx-tags .idx-tag + .idx-tag{ margin-left:.3rem; }

.idx-coord{ font-weight:600; color:var(--txt); }
.idx-dash{ color:var(--dim); }




/* ============================================================
   /partner/ · SOCIO DE CONSORCIO
   Misma paleta y mismos papeles del color que el resto: azul
   para estructura y procedencia, naranja solo para la acción
   principal. Nada en esta página compite con el naranja del
   botón, que es lo único que se quiere que se pulse.

   Rejillas de dos columnas y no de tres en las secciones de
   lectura: el texto de un asiento son dos frases y a tres
   columnas quedan renglones de siete palabras.
   ============================================================ */
.pt-hero-in{ padding-block:3rem 2.25rem; }
@media (min-width:900px){ .pt-hero-in{ padding-block:4.5rem 3rem; } }
.pt-h1{
  margin-top:.4rem; font-size:clamp(1.9rem,4.5vw,2.6rem); font-weight:700;
  line-height:1.08; letter-spacing:-.02em; color:var(--txt); max-width:34ch;
}
.pt-sub{ margin-top:1.1rem; color:var(--soft); max-width:66ch; font-size:1.0625rem; }
/* La línea de entidad va en mono y pequeña a propósito: es dato de ficha, no
   argumento, y en cuerpo de texto competía con la frase de encima. */
.pt-meta{
  margin-top:1rem; font-family:var(--mono); font-size:.78rem; line-height:1.5;
  color:var(--dim); max-width:60ch;
}

/* ---------- los cuatro datos comprobables ---------- */
.pt-facts{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pt-facts-in{ padding-block:2rem; }
@media (min-width:900px){ .pt-facts-in{ padding-block:2.5rem; } }
.pt-facts-grid{ display:grid; grid-template-columns:1fr; gap:.75rem; }
@media (min-width:640px){ .pt-facts-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .pt-facts-grid{ grid-template-columns:repeat(4,1fr); } }
.pt-fact{
  position:relative; display:flex; flex-direction:column; height:100%; overflow:hidden;
  padding:1rem 1.05rem .85rem; border-radius:var(--r);
  background:linear-gradient(160deg, rgba(0,82,155,.18), rgba(14,21,36,0) 58%), var(--ink2);
  border:1px solid var(--line); color:inherit; text-decoration:none;
}
a.pt-fact:hover{ text-decoration:none; }
.pt-fact .rule{
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--blue), rgba(46,155,224,0) 75%);
}
.pt-fact-val{
  font-size:2.4rem; line-height:1; font-weight:700; letter-spacing:-.03em; color:var(--txt);
}
/* Las dos placas de certificación no llevan cifra sino nombre de norma, así
   que bajan de cuerpo para ocupar el mismo alto que los dígitos. */
.pt-fact-cert{ font-size:1.1rem; line-height:1.15; letter-spacing:-.01em; color:var(--txt); }
.pt-fact-t{ margin-top:.5rem; font-size:.9375rem; font-weight:600; color:var(--txt); }
.pt-fact-s{ margin-top:.2rem; margin-bottom:.85rem; font-size:.82rem; color:var(--soft); }
.pt-fact .ev{ margin-top:auto; align-self:flex-start; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .pt-fact{ transition:transform .15s ease, border-color .15s ease; }
  a.pt-fact:hover{ transform:translateY(-4px); border-color:var(--strong); }
}

/* ---------- secciones ---------- */
.pt-sect{ padding:3rem 0; border-bottom:1px solid var(--line); }
@media (min-width:900px){ .pt-sect{ padding:4.5rem 0; } }
.pt-sect-alt{ background:var(--ink2); }

/* ---------- el asiento ---------- */
.pt-seats{ margin-top:2rem; display:grid; gap:1px; background:var(--line); }
@media (min-width:900px){ .pt-seats{ grid-template-columns:1fr 1fr; } }
/* Un pixel de rejilla como separador en vez de bordes por tarjeta: así las
   cuatro forman un bloque y no cuatro cajas flotando. */
.pt-seat{ background:var(--ink); padding:1.5rem 1.25rem; }
.pt-sect-alt .pt-seat{ background:var(--ink2); }
.pt-seat-role{
  font-size:1.0625rem; font-weight:700; line-height:1.25; color:var(--txt);
  padding-left:.85rem; border-left:3px solid var(--blue);
}
.pt-seat-body{ margin-top:.75rem; font-size:.9375rem; color:var(--soft); }
.pt-seat-proof{
  margin-top:1rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-size:.875rem;
}
.pt-seat-lab{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim);
}
/* El registro público se distingue del enlace a nuestra propia ficha: lo que
   nos verifica sin depender de nosotros va enmarcado. */
.pt-reg{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.15rem .45rem; border:1px solid var(--line); border-radius:2px;
  color:var(--soft); font-size:.8125rem;
}
.pt-reg .go{ font-size:.72em; color:var(--dim); }
.pt-reg:hover{ color:var(--txt); border-color:var(--blue); text-decoration:none; }
.pt-reg:hover .go{ color:var(--blue); }

/* ---------- lo que entra en el paquete ---------- */
.pt-wps{ margin-top:2rem; border-top:1px solid var(--line); }
.pt-wp{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.1rem 0; border-bottom:1px solid var(--line);
}
.pt-wp-n{
  flex:0 0 auto; width:2rem; font-size:1.5rem; font-weight:700;
  line-height:1.1; color:var(--strong);
}
.pt-wp-t{ font-size:1.0625rem; font-weight:600; line-height:1.3; color:var(--txt); }
.pt-wp-s{ margin-top:.2rem; font-size:.9375rem; color:var(--soft); }
.pt-wp-p{ margin-top:.55rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.875rem; }

.pt-wp-note, .pt-deadline{
  margin-top:2rem; padding:1rem 1.15rem; border-radius:var(--r);
  border:1px solid var(--line); border-left:3px solid var(--blue);
  background:var(--surface); font-size:.9375rem; color:var(--soft); max-width:72ch;
}
.pt-wp-note strong, .pt-deadline strong{ color:var(--txt); font-weight:600; }

/* ---------- due diligence ---------- */
.pt-dd{ display:grid; gap:2rem; }
@media (min-width:900px){ .pt-dd{ grid-template-columns:minmax(0,26rem) minmax(0,1fr); gap:3rem; } }
.pt-dl{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.pt-dl > div{ background:var(--ink); padding:.8rem 1rem; }
.pt-sect-alt .pt-dl > div{ background:var(--ink2); }
@media (min-width:640px){
  .pt-dl > div{ display:grid; grid-template-columns:minmax(0,11rem) minmax(0,1fr); gap:1rem; align-items:baseline; }
}
.pt-dl dt{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); line-height:1.6;
}
.pt-dl dd{ margin:0; font-size:.9375rem; color:var(--txt); }
.pt-dl dd .go{ font-size:.72em; color:var(--blue); margin-left:.25rem; }

/* ---------- las reglas ---------- */
.pt-rules{ margin-top:2rem; display:grid; gap:1.5rem; }
@media (min-width:900px){ .pt-rules{ grid-template-columns:1fr 1fr; gap:2.5rem; } }
.pt-will, .pt-wont{ display:grid; gap:.9rem; font-size:.9375rem; }
.pt-will li, .pt-wont li{ display:flex; gap:.75rem; }
.pt-will li{ color:var(--soft); }
.pt-will li::before{
  content:'✓'; flex:0 0 auto; color:var(--blue); font-weight:700; line-height:1.5;
}
/* Lo que no hacemos se lee igual de claro pero sin acento de color: es un
   compromiso, no una oferta, y el color aquí sería énfasis mal puesto. */
.pt-wont li{ color:var(--dim); }
.pt-wont li::before{
  content:'✕'; flex:0 0 auto; color:var(--strong); font-weight:700; line-height:1.5;
}

/* ---------- el arranque ---------- */
.pt-steps{ margin-top:2rem; display:grid; gap:1.25rem; counter-reset:none; }
@media (min-width:900px){ .pt-steps{ grid-template-columns:repeat(3,1fr); gap:2rem; } }
.pt-step{ padding-top:1rem; border-top:2px solid var(--line); }
.pt-step-n{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; color:var(--blue);
}
.pt-step-t{ margin-top:.35rem; font-size:1.0625rem; font-weight:700; color:var(--txt); }
.pt-step-b{ margin-top:.5rem; font-size:.9375rem; color:var(--soft); }

/* ---------- cierre ---------- */
.pt-close{ background:var(--surface); }
.pt-close-in{ padding-block:3rem; }
@media (min-width:900px){ .pt-close-in{ padding-block:4rem; } }
.pt-close p{ margin-top:.75rem; color:var(--soft); max-width:60ch; }
.pt-close .mail{ font-size:.9375rem; }
/* Separador entre pruebas. Va como elemento propio y no como ::after del
   enlace: dentro del enlace, el punto se subrayaba al pasar por encima. */
.pt-sep{ color:var(--dim); }

/* ============================================================
   /ibc2026/ · LANDING DE FERIA
   Reutiliza todo lo que ya existe —.wrap, .kick, .h2, .btn,
   .ev, .f-in, .consent, .reveal, .lift— y solo añade lo que
   esta página tiene y ninguna otra: el bloque de evento, el
   visor volumétrico y la banda blanca del consorcio.
   La versión de 2025 traía Tailwind y Lucide desde CDN para
   esto; son 27 reglas.
   ============================================================ */
.ib-hero{ background:var(--ink2); border-bottom:1px solid var(--line); }
.ib-hero-in{ padding-block:2.5rem 3rem; display:grid; gap:2rem; }
@media (min-width:900px){
  .ib-hero-in{ grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center;
               padding-block:3.5rem 4rem; }
}
/* El lockup ya lleva dentro «11-14 SEPT 2026 · RAI AMSTERDAM», así que manda
   sobre el kicker: no hay kicker de fechas al lado. */
.ib-lockup{ display:block; height:3.5rem; width:auto; margin-bottom:1.5rem; }
@media (min-width:900px){ .ib-lockup{ height:4rem; } }
/* 34ch y no 26: el titular nombra las dos zonas y el problema, así que ocupa
   tres líneas en escritorio. A 26ch se iba a cinco. */
.ib-h1{
  font-size:clamp(1.8rem,4.2vw,2.5rem); font-weight:700;
  line-height:1.1; letter-spacing:-.02em; color:var(--txt); max-width:34ch;
  /* Cuatro líneas en inglés, y sin esto la última era «networks» sola. Con
     balance, el resalte cae entero en su renglón. Donde no se soporte, se ve
     el reparto normal: no hay nada que se rompa. */
  text-wrap:balance;
}
.ib-sub{ margin-top:1.1rem; color:var(--soft); max-width:62ch; }

/* Los dos números de stand: el dato por el que se comparte esta página. */
.ib-stands{ margin-top:1.5rem; display:grid; gap:.6rem; }
@media (min-width:520px){ .ib-stands{ grid-template-columns:1fr 1fr; } }
.ib-stands a{
  display:block; padding:.8rem .9rem; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line); color:inherit;
}
.ib-stands a:hover{ border-color:var(--orange); text-decoration:none; }
.ib-stand-n{ display:block; font-size:1.35rem; font-weight:700; letter-spacing:-.02em; color:var(--orange); }
.ib-stand-p{ display:block; margin-top:.15rem; font-size:.9rem; font-weight:600; color:var(--txt); }
.ib-stand-z{ display:block; font-size:.78rem; color:var(--dim); }

/* ---------- bloque de evento de tres estados ---------- */
.ib-ev{ padding:1.4rem; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); }
.ib-cd{ margin-top:1.1rem; display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
.ib-cd b{ display:block; font-size:clamp(1.6rem,5vw,2.25rem); font-weight:700; line-height:1; color:var(--txt); }
.ib-cd-hot{ color:var(--orange) !important; }
.ib-cd span{
  display:block; margin-top:.45rem; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
}
.ib-ev-t{ margin-top:.6rem; font-size:1.25rem; font-weight:700; line-height:1.3; color:var(--txt); }
.ib-ev-hours{ margin-top:.6rem; color:var(--soft); }
.ib-ev-hours b{ color:var(--txt); }
.ib-ev-note{ margin-top:1rem; font-size:.9rem; color:var(--soft); }
/* Punto pulsante del estado «estamos allí ahora». */
.ib-live{ display:flex; align-items:center; gap:1.1rem; }
.ib-dot{ position:relative; width:.55rem; height:.55rem; border-radius:50%; background:var(--orange); flex:0 0 auto; }
.ib-dot::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--orange); opacity:.7;
}
@media (prefers-reduced-motion:no-preference){
  .ib-dot::after{ animation:ibPulse 1.8s cubic-bezier(.2,.6,.3,1) infinite; }
  @keyframes ibPulse{ 0%{ transform:scale(.7); opacity:.8 } 100%{ transform:scale(1.9); opacity:0 } }
}

/* ---------- secciones ---------- */
.ib-sect{ padding-block:3rem; border-bottom:1px solid var(--line); }
@media (min-width:900px){ .ib-sect{ padding-block:4.5rem; } }
.ib-sect-alt{ background:var(--ink2); }
.ib-prose{ margin-top:1.25rem; display:grid; gap:1rem; color:var(--soft); max-width:60ch; }
.ib-prose strong{ color:var(--txt); font-weight:600; }
.ib-official{
  margin-top:.75rem; font-family:var(--mono); font-size:.78rem; line-height:1.5;
  color:var(--dim); max-width:52ch;
}
.ib-note{ margin-top:1rem; font-size:.8rem; color:var(--dim); max-width:70ch; }
.ib-link{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.5rem; font-weight:600; }
.ib-link .go{ transition:transform .18s ease; }
.ib-link:hover .go{ transform:translateX(3px); }
.ib-out{ margin-top:2rem; }
/* Eje alternado: HoloCast a la izquierda, Q-Stream invertido. En móvil todo se
   apila y el TEXTO va siempre primero, que es lo que se lee. */
.ib-split{ display:grid; gap:2rem; }
@media (min-width:900px){
  .ib-split{ grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
  .ib-split-rev{ grid-template-columns:.95fr 1.05fr; }
  .ib-split-rev > :first-child{ order:1; }
}
.ib-fig{ order:2; }
@media (min-width:900px){ .ib-fig{ order:0; } }
.ib-svg{ width:100%; height:auto; }

/* ---------- tarjetas de stand ---------- */
.ib-cards{ margin-top:2rem; display:grid; gap:1rem; }
@media (min-width:640px){ .ib-cards{ grid-template-columns:1fr 1fr; } }
.ib-card, .ib-fact{
  position:relative; display:flex; flex-direction:column; height:100%; overflow:hidden;
  padding:1.4rem 1.3rem 1.2rem; border-radius:var(--r);
  background:linear-gradient(160deg, rgba(0,82,155,.18), rgba(14,21,36,0) 58%), var(--surface);
  border:1px solid var(--line); color:inherit; text-decoration:none;
}
a.ib-card:hover, a.ib-fact:hover{ text-decoration:none; }
.ib-card .rule, .ib-fact .rule{
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--blue), rgba(46,155,224,0) 75%);
}
/* La tarjeta del stand propio es la naranja: es nuestro, y es el único sitio de
   la página donde el naranja marca propiedad y no acción. */
.ib-card-hot{ background:linear-gradient(160deg, rgba(253,106,2,.16), rgba(14,21,36,0) 58%), var(--surface); }
.ib-card-hot .rule{ background:linear-gradient(90deg, var(--orange), rgba(253,106,2,0) 75%); }
.ib-card-n{ margin-top:.5rem; font-size:2.4rem; font-weight:700; line-height:1; letter-spacing:-.03em; color:var(--txt); }
.ib-card-hot .ib-card-n{ color:var(--orange); }
.ib-card-t{ margin-top:.6rem; font-size:1.125rem; font-weight:700; color:var(--txt); }
.ib-card-b{ margin-top:.4rem; margin-bottom:1rem; font-size:.9375rem; color:var(--soft); }
.ib-card .ev, .ib-fact .ev{ margin-top:auto; align-self:flex-start; }

/* ---------- horarios ---------- */
.ib-hours{ margin-top:1.5rem; padding:1.3rem; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); }
.ib-hours dl{ margin-top:1rem; display:grid; gap:.6rem 2rem; }
@media (min-width:640px){ .ib-hours dl{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .ib-hours dl{ grid-template-columns:repeat(4,1fr); } }
.ib-hours dl > div{ display:flex; justify-content:space-between; gap:1rem; padding-bottom:.5rem; border-bottom:1px solid var(--line); font-size:.9rem; }
.ib-hours dt{ color:var(--soft); }
.ib-hours dd{ margin:0; font-weight:600; color:var(--txt); }
.ib-hours-note{ margin-top:1rem; font-size:.8rem; color:var(--dim); }

/* ---------- visor volumétrico ---------- */
.ib-holo{ position:relative; border-radius:var(--r); background:var(--ink); overflow:hidden; aspect-ratio:5/4; }
@media (min-width:900px){ .ib-holo{ aspect-ratio:4/5; } }
.ib-holo canvas{ display:block; width:100%; height:100%; }
.ib-corner{ position:absolute; width:26px; height:26px; border:2px solid rgba(46,155,224,.45); }
.ib-corner.tl{ top:14px; left:14px; border-right:0; border-bottom:0; }
.ib-corner.tr{ top:14px; right:14px; border-left:0; border-bottom:0; }
.ib-corner.bl{ bottom:14px; left:14px; border-right:0; border-top:0; }
.ib-corner.br{ bottom:14px; right:14px; border-left:0; border-top:0; }
/* Línea de barrido tenue, como un monitor de captura. */
.ib-holo::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(232,237,247,.028) 0 1px, transparent 1px 3px);
}
/* El HUD se sube por encima de las escuadras inferiores: a 4/5 la columna es
   estrecha, el texto ocupa dos líneas y a .9rem se solapaba con ellas. */
.ib-hud{
  position:absolute; left:1rem; right:1rem; bottom:2.9rem;
  display:flex; flex-wrap:wrap; gap:.35rem 1.1rem;
  font-family:var(--mono); font-size:.66rem; color:var(--soft);
}
.ib-hud b{ color:var(--blue); font-weight:700; }

/* ---------- KPI ---------- */
.ib-kpis{ margin-top:2.5rem; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (min-width:640px){ .ib-kpis{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .ib-kpis{ grid-template-columns:repeat(4,1fr); } }
/* Columna con el sello al fondo: sin esto, la etiqueta de nivel quedaba a dos
   alturas distintas según si el rótulo ocupaba una línea o dos. */
.ib-kpis li{ background:var(--ink2); padding:1.2rem 1.1rem; display:flex; flex-direction:column; }
.ib-kpis .ev{ margin-top:auto; align-self:flex-start; }
.ib-sect .ib-kpis li{ background:var(--ink); }
.ib-sect-alt .ib-kpis li{ background:var(--ink2); }
.ib-kpi-v{ font-size:1.65rem; font-weight:700; line-height:1.1; letter-spacing:-.02em; color:var(--blue); }
.ib-kpi-hot{ color:var(--orange); }
.ib-kpi-l{ margin-top:.35rem; margin-bottom:.85rem; font-size:.875rem; color:var(--soft); }

/* ---------- reto y enfoque ---------- */
.ib-two{ margin-top:2.5rem; display:grid; gap:1rem; }
@media (min-width:900px){ .ib-two{ grid-template-columns:1fr 1fr; } }
.ib-box{ padding:1.4rem 1.3rem; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); }
/* Título a la izquierda e icono a la derecha, en la misma línea: el icono deja
   de sumar altura y las dos tarjetas crecen solo con su texto. */
.ib-box-h{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.ib-box-i{ flex:0 0 auto; line-height:0; }
.ib-box-i svg{ width:2.5rem; height:2.5rem; }
.ib-box-t{ font-size:1.0625rem; font-weight:700; color:var(--txt); }
.ib-box-b{ margin-top:.5rem; font-size:.9375rem; color:var(--soft); }

/* ---------- banda del consorcio ----------
   Blanca a propósito: varias marcas del consorcio son oscuras sobre
   transparente y sobre el fondo de la sección desaparecerían. Es el mismo
   recurso que el pie de aurasec-resilmesh/. */
.ib-band{ margin-top:1rem; padding:1.6rem 1.5rem; border-radius:var(--r); background:var(--paper); }
.ib-band .kick2{ color:var(--paper-soft); }
.ib-band-2{ margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--paper-line); }
.ib-logos{ margin-top:1rem; display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem 2.5rem; }
.ib-logos img{ width:auto; max-width:100%; }
.ib-logo-txt{ font-size:1rem; font-weight:600; color:var(--paper-soft); }

/* ---------- detrás de los dos stands ---------- */
.ib-facts{ margin-top:2rem; display:grid; gap:1rem; }
@media (min-width:640px){ .ib-facts{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .ib-facts{ grid-template-columns:repeat(3,1fr); } }
.ib-fact-v{ font-size:2.4rem; font-weight:700; line-height:1; letter-spacing:-.03em; color:var(--txt); }
.ib-fact-cert{ font-size:1.1rem; line-height:1.15; letter-spacing:-.01em; }
.ib-fact-t{ margin-top:.5rem; font-size:.9375rem; font-weight:600; color:var(--txt); }
.ib-fact-s{ margin-top:.2rem; margin-bottom:.85rem; font-size:.82rem; color:var(--soft); }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .ib-card, .ib-fact{ transition:transform .15s ease, border-color .15s ease; }
  a.ib-card:hover, a.ib-fact:hover{ transform:translateY(-4px); border-color:var(--strong); }
}

/* ---------- reserva ---------- */
.ib-book{ background:var(--surface); }
.ib-book-in{ padding-block:3rem; }
@media (min-width:900px){ .ib-book-in{ padding-block:4.5rem; } }
.ib-form{ margin-top:2rem; max-width:44rem; }
.ib-fs{ margin-top:1rem; border:0; padding:0; }
.ib-fs > label{
  display:inline-flex; align-items:center; gap:.5rem; margin:.55rem 1.5rem 0 0;
  font-size:.9rem; color:var(--soft); cursor:pointer;
}
.ib-fs input{ width:1rem; height:1rem; accent-color:var(--orange); }
.ib-fs small{ color:var(--dim); }
.ib-mail{ font-size:.9rem; }
/* Campo trampa: fuera de la pantalla, nunca display:none —hay bots que lo
   detectan— y fuera del recorrido de foco por tabindex. */
.ib-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* Llamada a la acción dentro de una tarjeta de stand. No usa .ev a propósito:
   esa familia significa nivel de evidencia en todo el sitio. */
.ib-more{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.875rem; font-weight:600; color:var(--txt);
}
.ib-more .go{ color:var(--blue); transition:transform .18s ease; }
a.ib-card:hover .ib-more .go{ transform:translateX(3px); }

/* Perfil social en el pie. El glifo va en línea con el texto y hereda su
   color: en una lista de enlaces de texto, un icono con color propio se lee
   como un botón y no como lo que es. */
.foot-social{ display:inline-flex; align-items:center; gap:.5rem; }
.foot-social svg{ width:1rem; height:1rem; flex:0 0 auto; }

/* ---------- barra de reserva ----------
   Fija abajo, por debajo de la cabecera en el orden de apilado (49 frente a
   50) y muy por debajo del salto de contenido (100). En móvil solo el botón:
   los dos números ocupan más que el sitio que hay, y el botón es lo que se
   pulsa. */
.ib-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:49;
  background:rgba(6,9,17,.92); backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
.ib-bar[hidden]{ display:none; }
.ib-bar-in{
  padding-block:.6rem; display:flex; align-items:center;
  justify-content:center; gap:1rem;
}
.ib-bar .btn{ flex:0 0 auto; }
.ib-bar-t{ display:none; font-size:.9rem; color:var(--soft); }
@media (min-width:640px){
  .ib-bar-in{ justify-content:space-between; }
  .ib-bar-t{ display:flex; align-items:baseline; gap:.55rem; }
}
.ib-bar-t b{ color:var(--txt); font-weight:600; }
.ib-bar-t .tnum{ color:var(--orange); font-weight:600; }
.ib-bar-sep{ color:var(--dim); }
@media (prefers-reduced-motion:no-preference){
  .ib-bar{ animation:ibBar .22s ease both; }
  @keyframes ibBar{ from{ transform:translateY(100%) } to{ transform:none } }
}