/* ============================================================
   PRISMA CACTUS · SISTEMA DE DISEÑO
   ------------------------------------------------------------
   Mundo: lámina de óptica. Una luz entra, ocho oficios salen.
   Fondo azul noche a escala de página, tinta tiza, naranja de
   sol como única acción primaria, y los ocho rayos del globo
   como sistema funcional de color — uno por rubro.

   REGLA DURA DE ESTE MUNDO, no negociable al editar:
   la profundidad sale del SOLAPE de campos de color plano.
   Cero box-shadow. Cero degradado. Cero backdrop-filter de
   adorno. Cero resplandor. Si algo necesita despegarse del
   fondo, usa un plano de color y una regla de 1px, no una
   sombra. Eso es también lo que mantiene la página liviana
   en un teléfono modesto con conexión intermitente.
   ============================================================ */

/* ── Tipografías, auto-hospedadas ───────────────────────────
   Archivo (Omnibus-Type, Buenos Aires): grotesca de trabajo
   latinoamericana, variable en peso Y en ancho — el eje de
   ancho es lo que da los títulos de lámina sin traer una
   segunda familia de display.
   Overpass Mono: linaje de Highway Gothic, lettering de
   ingeniería. Se usa SOLO para medición, cifras y acotación,
   nunca como disfraz de "técnico".

   Va SOLO el subconjunto latin. Se midió el texto renderizado de
   las tres páginas: ni una palabra necesita Latin Extended-A — el
   español entero (á é í ó ú ñ ü ¿ ¡ ·) vive en U+0000-00FF. Los
   tres archivos -ext eran 211 KB que nunca llegaban a servir un
   glifo, sobre una página que ya carga Three.js. Si algún día
   entra texto con caracteres de Europa central, hay que volver a
   traerlos.                                                   */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('../assets/fuentes/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* La itálica va EMBARCADA, no sintetizada. Nueve de los diez
   titulares del sitio apoyan su acento en <em>, y sin esta cara el
   navegador inclina la romana por cizalla: a 84px eso se ve, y es
   justo el gesto más grande de la página. */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400 800;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('../assets/fuentes/archivo-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Overpass Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fuentes/overpass-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Sistema tipográfico de marca, auto-hospedado para todas las vistas. */
@font-face {
  font-family: 'Clash Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fuentes/clash-display-semibold.otf') format('opentype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fuentes/poppins-regular.otf') format('opentype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../assets/fuentes/poppins-semibold.otf') format('opentype');
}
@font-face {
  font-family: 'Teko';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fuentes/teko-regular.otf') format('opentype');
}

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  /* Suelo. #0a1220 es el fondo NATIVO de la escena 3D del globo
     (assets/prisma-cactus-3d.js), así que la página y el canvas
     se funden sin costura y sin tocar el globo. */
  --noche:        #05070c;   /* fondo negro de la página y de la escena del globo */
  --noche-alta:   #101b2e;   /* plano levantado: tarjetas, paneles */
  --noche-mas:    #16233a;   /* plano levantado 2: hover, activo */
  --noche-honda:  #020307;   /* plano hundido: pie, campos */

  /* Tinta. Los secundarios están TEÑIDOS del azul del fondo,
     nunca gris neutro — sobre superficie de color, el gris se
     ve sucio. */
  --tiza:         #f2f4ef;   /* 16.1:1 sobre noche */
  --tiza-2:       #aebac8;   /*  9.5:1 */
  --tiza-3:       #8695a8;   /*  6.2:1 — piso para texto de apoyo */
  --linea:        #22304a;   /* regla de lámina, 1px */
  --linea-viva:   #3a4c6b;   /* regla en foco / borde de control */

  /* Acción. Una sola, sacada del sol del diorama del globo. */
  --sol:          #f5872b;   /*  7.4:1 sobre noche */
  --sol-alto:     #ffa35a;
  /* Color principal: el verde prisma (el del cactus y del hover del
     menú). Va en lo que se destaca: la palabra clave de cada título,
     "CACTUS" de la marca. La arena (ocre piel) queda de secundario
     para detalles: etiquetas, íconos, datos pequeños. */
  --prisma:       #3ddc6e;
  --arena:        #dda45e;   /* secundario: ocre de la arena del globo */
  --wa:           #25d366;   /* verde WhatsApp — SIEMPRE con tinta oscura */

  /* Espectro: los ocho rayos que el globo ya proyecta.
     No son adornos, son roles: uno por rubro. */
  --ray-1: #ff3b30;   /* comida        */
  --ray-2: #ff8c1a;   /* productos     */
  --ray-3: #ffd63d;   /* por cita      */
  --ray-4: #3ddc6e;   /* para adentro  */
  --ray-5: #2ee0e0;   /* presentarme   */
  --ray-6: #2f7fe8;
  --ray-7: #9b4dea;
  --ray-8: #d94ad8;
  /* Los mismos ocho, en canales sueltos: los degradados con capas de
     opacidad (el borde iluminado de las demos) necesitan rgb(... / a). */
  --ray-1-rgb: 255 59 48;    --ray-2-rgb: 255 140 26;
  --ray-3-rgb: 255 214 61;   --ray-4-rgb: 61 220 110;
  --ray-5-rgb: 46 224 224;   --ray-6-rgb: 47 127 232;
  --ray-7-rgb: 155 77 234;   --ray-8-rgb: 217 74 216;

  /* Estado */
  --ok:    #3ddc6e;
  --error: #ff6b5e;   /* aclarado del ray-1 para pasar AA en texto */

  /* Ritmo. Una sola escala, en todo el sitio. */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 18px;
  --e5: 26px; --e6: 38px; --e7: 56px; --e8: 80px; --e9: 120px;

  /* Medida de lectura: 68ch, dentro del rango cómodo. */
  --medida: 68ch;

  /* Esquinas: casi rectas. Una lámina impresa no tiene píldoras. */
  --r1: 2px;  --r2: 4px;  --r3: 8px;

  /* Movimiento: salida exponencial, nunca rebote. */
  --sal:  cubic-bezier(.16, 1, .3, 1);
  --sal2: cubic-bezier(.22, 1, .36, 1);

  --nav-h: 62px;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  /* el nav fijo no debe tapar el destino de un ancla */
  scroll-padding-top: calc(var(--nav-h) + var(--e4));
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--noche);
  color: var(--tiza);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;   /* cifras que se alinean en columna */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Roles tipográficos. La especificidad y !important solo fijan la familia
   y el peso; tamaños, colores, cursivas y composición siguen en cada vista. */
h1, h2, h3, h4, h5, h6,
.marca-tx,
.t-lamina, .panel-t, .paso-t, .bd-cat-nm, .bd-card-nm,
.sv-item-nm, .pq-titulo, .pie-nm, .form-intro,
.vit-banner-nm, .wiz-fase .t, .vacio-estado .t {
  font-family: 'Clash Display', 'Poppins', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-stretch: normal !important;
}

button, .btn,
.nav-link, .nav-ico, .guia-btn,
.acot, .paso-n, .sv-num, .bd-cat-cont,
.sv-visor-pie, .tl-num, .cambio-n, .tl-cuenta,
.tag, .badge, .chip .n, [data-numero] {
  font-family: 'Teko', 'Poppins', sans-serif !important;
  font-weight: 400 !important;
  font-stretch: normal !important;
}

/* Teko tiene una altura visual menor que Poppins: se compensa solo en
   controles con texto para mantenerlos claros sin cambiar sus cajas. */
.btn, .guia-btn { font-size: 20px !important; }
.nav-link { font-size: 19px !important; }

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

/* ── Superficies del navegador ──────────────────────────────
   Lo que no dibujamos también lleva el diseño. Sin esto la
   página se ve armada, no construida.                      */
::selection { background: var(--sol); color: var(--noche); }
::-webkit-selection { background: var(--sol); color: var(--noche); }

* { caret-color: var(--sol); }

/* barra de scroll: una regla de lámina, no un tubo gris */
* { scrollbar-width: thin; scrollbar-color: var(--linea-viva) var(--noche-honda); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--noche-honda); }
::-webkit-scrollbar-thumb {
  background: var(--linea-viva);
  border: 3px solid var(--noche-honda);   /* el borde hace el "riel" sin sombra */
}
::-webkit-scrollbar-thumb:hover { background: var(--tiza-3); }
::-webkit-scrollbar-corner { background: var(--noche-honda); }

/* foco: un marco de lámina, visible sobre cualquier plano */
:focus-visible {
  outline: 2px solid var(--sol);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* subrayado: separado de la línea base, como en una lámina rotulada */
a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--linea-viva);
  transition: text-decoration-color .2s var(--sal);
}
a:not([class]):hover { text-decoration-color: var(--sol); }

::placeholder { color: var(--tiza-3); opacity: 1; }

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

/* Título de lámina: Archivo ancho y pesado. El eje de ancho
   (font-stretch) es lo que le da presencia sin otra familia. */
.t-lamina {
  font-family: 'Clash Display', 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-stretch: normal;
  line-height: .96;
  letter-spacing: -.028em;   /* piso de tracking: -.04em */
  text-wrap: balance;
}

.d1 { font-size: clamp(38px, 8.2vw, 84px);  }   /* < 6rem de techo real */
.d2 { font-size: clamp(30px, 5.4vw, 54px);  }
.d3 { font-size: clamp(23px, 3.4vw, 34px);  }

/* Acento en cursiva: la marca ya usa este gesto ("Pruébalo tú.").
   Se conserva porque es voz, no adorno. */
.t-lamina em { font-style: italic; font-weight: 700; color: var(--prisma); }

/* Cuerpo */
.cuerpo    { font-size: 16.5px; line-height: 1.62; color: var(--tiza-2); max-width: var(--medida); }
.cuerpo-lg { font-size: clamp(17px, 2.1vw, 20px); line-height: 1.55; color: var(--tiza-2); max-width: 56ch; }
.cuerpo b, .cuerpo strong, .cuerpo-lg b, .cuerpo-lg strong { color: var(--tiza); font-weight: 700; }

/* Acotación: mono, exclusivo de cifras y medición.
   11px es el piso de este sitio, sin excepciones. */
.acot {
  font-family: 'Teko', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tiza-3);
  font-variant-numeric: tabular-nums;
}
.acot-lg { font-size: 13px; letter-spacing: .03em; }

/* ── Regla de lámina ────────────────────────────────────────
   El elemento estructural del mundo: una línea de 1px que
   organiza sin encajonar. Reemplaza a la tarjeta.          */
.regla      { border: 0; border-top: 1px solid var(--linea); width: 100%; }
.regla-viva { border: 0; border-top: 1px solid var(--linea-viva); width: 100%; }

/* Encabezado de sección: la regla y el título comparten línea,
   con la anotación al FINAL de la regla — no arriba del título.
   Aquí no hay eyebrows. */
.sec-cab {
  display: flex; align-items: baseline; gap: var(--e4);
  /* wrap obligatorio: sin él, la anotación del final de la regla no
     tenía dónde caer en un teléfono y empujaba el documento a 458px
     de ancho — scroll horizontal en toda la página por un rótulo. */
  flex-wrap: wrap;
  border-top: 1px solid var(--linea);
  padding-top: var(--e4);     /* el título no va pegado a su regla */
  margin-bottom: var(--e6);   /* más aire debajo del bloque que dentro */
}
.sec-cab > .t-lamina { flex: 1 1 320px; min-width: 0; }
.sec-cab > .acot { flex: 0 1 auto; padding-top: var(--e1); }

/* Más espacio ARRIBA de un encabezado que debajo. */
.sec-cab { margin-top: var(--e2); }

/* ── Contenedor ─────────────────────────────────────────── */
.env {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--e5);
}
@media (max-width: 620px), (hover: none) { .env { padding-inline: var(--e4); } }

.seccion { padding-block: var(--e8); }
@media (max-width: 720px) { .seccion { padding-block: var(--e7); } }

/* ── Botones ────────────────────────────────────────────────
   Rectos, planos, sin sombra. La jerarquía la hace el relleno
   de color, no la elevación.                                */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e2);
  font-weight: 700; font-stretch: 106%; font-size: 15.5px;
  letter-spacing: -.005em;
  padding: 15px 26px;
  border-radius: var(--r2);
  text-decoration: none;
  transition: background-color .18s var(--sal), color .18s var(--sal),
              border-color .18s var(--sal), transform .18s var(--sal);
  min-height: 48px;              /* objetivo táctil real */
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; fill: currentColor; }

/* Primario: el naranja del sol, con tinta noche. 7.4:1 */
.btn-sol { background: var(--sol); color: var(--noche); }
.btn-sol:hover { background: var(--sol-alto); }
.btn-sol:active { transform: translateY(1px); }

/* WhatsApp: el verde de la marca de WhatsApp CON TINTA OSCURA.
   Blanco sobre #25d366 daba 2.0:1 y era el fallo de contraste
   más repetido del sitio viejo. Con tinta noche da 9.5:1. */
.btn-wa { background: var(--wa); color: #06230f; }
.btn-wa:hover { background: #43e07f; }
.btn-wa:active { transform: translateY(1px); }
.btn-wa-ico { width: 48px; padding: 0; }

/* Secundario: solo regla. */
.btn-regla {
  border: 1px solid var(--linea-viva);
  color: var(--tiza);
  background: transparent;
}
.btn-regla:hover { border-color: var(--sol); color: var(--sol); }

.btn-fantasma { color: var(--tiza-2); padding: 12px 14px; }

/* Tamaños: chico para acciones dentro de pistas y pies de diálogo;
   ancho para el envío de un formulario. */
.btn-chico { padding: 11px 18px; min-height: 42px; font-size: 14px; }
.btn-ancho { width: 100%; }
.btn-fantasma:hover { color: var(--sol); }

/* Instagram: el degradado ES la marca de Instagram, igual que el verde
   es la de WhatsApp; es la única excepción a la regla de "sin degradado".
   Los tonos se eligieron para que el texto blanco se lea en todo el
   recorrido (ninguno baja de ~4:1). */
.btn-ig {
  color: #fff;
  background: linear-gradient(45deg, #4f5bd5 0%, #962fbf 38%, #d62976 72%, #e0405f 100%);
  background-size: 140% 140%;
  background-position: 0% 50%;
  transition: background-position .5s var(--sal), transform .18s var(--sal);
}
.btn-ig:hover { background-position: 100% 50%; }
.btn-ig:active { transform: translateY(1px); }

/* Enlace de texto con flecha: acción terciaria que no compite con los
   botones de relleno. */
.btn-texto {
  min-height: 44px;
  padding: 10px 2px;
  color: var(--tiza-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  text-decoration-color: var(--linea-viva);
}
.btn-texto:hover { color: var(--tiza); text-decoration-color: var(--sol); }
.btn-texto svg { transition: transform .2s var(--sal); }
.btn-texto:hover svg { transform: translateX(3px); }

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--noche-alta);
  color: var(--tiza-3);
  border-color: var(--linea);
  cursor: not-allowed;
  transform: none;
}

/* Estado cargando: la regla inferior avanza. Sin spinner. */
.btn.cargando { position: relative; color: transparent; pointer-events: none; }
.btn.cargando::after {
  content: attr(data-cargando);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--noche);
  font-family: 'Teko', sans-serif; font-size: 12.5px;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ── Chip de rubro ──────────────────────────────────────────
   El control firma del sitio: un cuadro de color del rayo que
   le corresponde + rótulo. Es el filtro real de demos.     */
.chip {
  display: flex; align-items: center; gap: var(--e3);
  width: 100%;
  padding: 13px var(--e4) 13px var(--e3);
  border: 1px solid var(--linea);
  border-radius: var(--r2);
  background: var(--noche-alta);
  text-align: left;
  text-decoration: none;
  min-height: 52px;
  transition: background-color .18s var(--sal), border-color .18s var(--sal),
              transform .2s var(--sal);
}
.chip:hover, .chip:focus-visible {
  background: var(--noche-mas);
  border-color: var(--rc, var(--linea-viva));
  transform: translateX(3px);
}
/* Alineado con el eje de refracción: el rayo que "apunta" acá. */
.chip.alineado {
  border-color: var(--rc);
  background: var(--noche-mas);
}
.chip .cuadro {
  width: 16px; height: 16px; flex: 0 0 auto;
  background: var(--rc);
  border-radius: 1px;
}
.chip .ico { width: 22px; height: 22px; flex: 0 0 auto; color: var(--tiza-2); }
.chip .rot { font-weight: 650; font-size: 15.5px; flex: 1 1 auto; }
.chip .num {
  font-family: 'Teko', sans-serif; font-size: 11.5px;
  color: var(--tiza-3); flex: 0 0 auto;
}
.chip:hover .ico, .chip.alineado .ico { color: var(--rc); }

/* ── Clave reglada ──────────────────────────────────────────
   Donación de "Código de Uniforme Anotado": la ausencia se
   dibuja con el mismo cuidado que la presencia. Un cupo libre
   se acota, no se esconde.                                  */
.clave {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5);
  border-top: 1px solid var(--linea);
  padding-top: var(--e3);
}
.clave-it { display: flex; align-items: center; gap: var(--e2); }
.clave-it .cuadro { width: 11px; height: 11px; background: var(--rc); border-radius: 1px; }
/* El cuadro de la vacante: mismo tamaño, misma regla, sin relleno.
   Se llama .libre y no .vacio porque el portal ya usa .vacio para su
   estado vacío, y la colisión inflaba este cuadro a 38x78. */
.clave-it .cuadro.libre { background: transparent; border: 1px solid var(--linea-viva); }
.clave-it span {
  font-family: 'Teko', sans-serif; font-size: 11.5px;
  letter-spacing: .03em; color: var(--tiza-3); text-transform: uppercase;
}

/* ── Campos ─────────────────────────────────────────────── */
.campo { display: block; margin-bottom: var(--e4); }
.campo > label,
.campo > .etq {
  display: block;
  font-family: 'Teko', sans-serif;
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tiza-2);
  margin-bottom: var(--e2);
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  background: var(--noche-honda);
  border: 1px solid var(--linea);
  border-radius: var(--r2);
  padding: 14px var(--e3);
  min-height: 50px;
  font-size: 16px;             /* 16px evita el zoom automático en iOS */
  color: var(--tiza);
  transition: border-color .18s var(--sal), background-color .18s var(--sal);
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--linea-viva); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--sol);
  background: var(--noche-alta);
}
.campo select {
  appearance: none;
  /* la flecha se dibuja como parte del control, no con un glifo unicode */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238695a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e3) center;
  background-size: 12px 8px;
  padding-right: var(--e6);
}
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: var(--error); }

/* Grupo de opciones: rectas, planas, una sola activa. */
.opts { display: flex; flex-wrap: wrap; gap: var(--e2); }
.opt {
  border: 1px solid var(--linea);
  border-radius: var(--r2);
  padding: 11px var(--e3);
  font-size: 14.5px; font-weight: 600;
  color: var(--tiza-2);
  background: var(--noche-honda);
  min-height: 44px;
  transition: border-color .18s var(--sal), color .18s var(--sal), background-color .18s var(--sal);
}
.opt:hover { border-color: var(--linea-viva); color: var(--tiza); }
.opt.sel { border-color: var(--sol); color: var(--noche); background: var(--sol); }

/* Mensajes */
.msg {
  display: none;
  margin-top: var(--e3);
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linea);
  border-radius: var(--r2);
  font-size: 14.5px;
  background: var(--noche-alta);
}
.msg.on { display: block; }
.msg.ok  { border-color: var(--ok);    color: var(--ok);    }
.msg.err { border-color: var(--error); color: var(--error); }
.msg a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* ── Estado vacío ───────────────────────────────────────── */
.vacio-estado {
  border: 1px dashed var(--linea-viva);
  border-radius: var(--r3);
  padding: var(--e6) var(--e5);
  text-align: center;
  color: var(--tiza-3);
}
.vacio-estado .t { color: var(--tiza-2); font-weight: 650; margin-bottom: var(--e2); }

/* ── Velo y caja modal ──────────────────────────────────── */
.velo {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(4, 8, 15, .86);
  display: flex; align-items: center; justify-content: center;
  padding: var(--e5) var(--e4);
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--sal), visibility .28s;
}
.velo.on { opacity: 1; visibility: visible; }
.caja {
  position: relative;
  width: 100%; max-width: 720px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--noche-alta);
  border: 1px solid var(--linea-viva);
  border-radius: var(--r3);
  padding: var(--e6) var(--e5) var(--e5);
  transform: translateY(12px);
  transition: transform .3s var(--sal);
}
.velo.on .caja { transform: none; }
.caja-angosta { max-width: 620px; }
.caja-x {
  position: absolute; top: var(--e3); right: var(--e3);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--linea);
  border-radius: var(--r2);
  color: var(--tiza-2);
  transition: border-color .18s var(--sal), color .18s var(--sal);
}
.caja-x:hover { border-color: var(--sol); color: var(--sol); }
.caja-x svg { width: 15px; height: 15px; }
.caja-scroll { overflow-y: auto; margin-top: var(--e4); }

/* ── Utilidades ─────────────────────────────────────────── */
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Un enlace de salto que nunca se ve no sirve de nada: al recibir
   foco de teclado tiene que aparecer. Solo afecta a lo que es
   enfocable, así que el texto realmente oculto sigue oculto. */
.oculto-visual:focus-visible {
  position: fixed; top: var(--e2); left: var(--e2); z-index: 999;
  width: auto; height: auto;
  clip: auto; overflow: visible;
  margin: 0; padding: 12px var(--e4);
  background: var(--sol); color: var(--noche);
  border-radius: var(--r2);
  font-weight: 700; text-decoration: none;
}
.solo-movil { display: none; }
@media (max-width: 899px), (hover: none) { .solo-movil { display: revert; } .solo-pc { display: none !important; } }

/* ── Movimiento ─────────────────────────────────────────────
   Contenido visible por defecto: toda entrada anima DESDE
   visible, nunca hacia visible. Si el disparador falla, el
   texto ya está ahí.                                       */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}