/* =============================================================
   Tacógrafo.app — hoja de estilo de la web pública
   =============================================================

   Mismo lenguaje visual que Almacenae y Gestionae: fondo oscuro casi
   negro, tipografía de display muy apretada, rótulos en monoespaciada,
   paneles de vidrio sobre una retícula tenue y auroras difuminadas al
   fondo. Lo que cambia es el color, porque la marca es otra: donde
   Almacenae pone menta y Gestionae cian, Tacógrafo.app pone el ámbar
   de la pantalla del tacógrafo.

   Las decisiones de la casa se mantienen:

   - **Oscuro por defecto, y no por preferencia del sistema.** El claro
     se elige en el interruptor y vive solo bajo «[data-tema="claro"]».

   - **Figtree para el texto, Archivo para los titulares e IBM Plex Mono
     para los rótulos.**

   - **Las tres fuentes se sirven desde este dominio.** La CSP de
     «vercel.json» es «font-src 'self' data:». Son OFL 1.1 y sus
     licencias están en marca/fuentes/OFL.txt.

   Un cambio respecto a Gestionae: allí el ámbar era el color de aviso.
   Aquí el ámbar es la marca, así que los avisos (límite cerca, límite
   pasado) van en coral, que se distingue de un vistazo.
   ============================================================= */

@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('marca/fuentes/figtree-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 900; font-display: swap;
  src: url('marca/fuentes/archivo-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('marca/fuentes/plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('marca/fuentes/plex-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ============ TEMA OSCURO (el de partida, y el de por defecto) ============ */
:root {
  --fondo: #070C12;
  --panel: #101A24;
  --borde: #1E2C3A;
  --borde-vivo: #2E4356;
  --texto: #E8F1F5;
  --texto-2: #9AACBA;
  --texto-3: #8397A5;

  /* El ámbar de la pantalla del tacógrafo es el acento principal. */
  --acento: #FFC24B;       /* para texto y trazos */
  --acento-vivo: #FFB020;  /* para rellenos y resplandores */
  --acento-2: #FF8A3D;     /* el segundo tono del degradado */

  /* Avisos: límite cerca o pasado. */
  --aviso: #FF8577;
  --aviso-viva: #FF6B5B;
  --aviso-fondo: rgba(255, 107, 91, .14);
  --aviso-borde: rgba(255, 107, 91, .28);
  --aviso-panel: rgba(255, 107, 91, .07);
  --aviso-texto: #F7CBC4;

  --vidrio-1: rgba(255, 255, 255, .05);
  --vidrio-2: rgba(255, 255, 255, .012);
  --vidrio-hover: rgba(255, 255, 255, .045);
  --vidrio-sutil: rgba(255, 255, 255, .03);
  --sombra: rgba(0, 0, 0, .5);
  --sombra-suave: rgba(0, 0, 0, .35);
  --rejilla: rgba(255, 255, 255, .015);
  --grano-op: .04;
  --barra-fondo: rgba(7, 12, 18, .76);
  --resplandor: rgba(255, 176, 32, .13);

  --btn-1: #FFB020; --btn-2: #FF8A3D; --btn-texto: #1E1200;
  --btn-sombra: rgba(255, 176, 32, .26);
  --btn-sombra-fuerte: rgba(255, 176, 32, .42);
  --btn-destello: rgba(255, 255, 255, .6);

  --aurora-1: rgba(255, 176, 32, .26);
  --aurora-2: rgba(255, 138, 61, .20);
  --aurora-3: rgba(76, 134, 232, .16);

  --campo-fondo: rgba(255, 255, 255, .04);
  --ok: #4BD6A0;
  --error: #FF8A80;

  --display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --texto-f: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --suave: cubic-bezier(.22, .61, .36, 1);
  --muelle: cubic-bezier(.34, 1.3, .64, 1);
}

/* ============ TEMA CLARO ============
   El ámbar vivo sobre blanco no se lee, así que los acentos de texto bajan
   de luminosidad y los vivos se reservan para rellenos. */
:root[data-tema="claro"] {
  color-scheme: light;
  --fondo: #F4F7F9;
  --panel: #FFFFFF;
  --borde: #DDE5EA;
  --borde-vivo: #AEBFC9;
  --texto: #0B1519;
  --texto-2: #48575F;
  --texto-3: #5E6F7B;

  --acento: #8A5700;
  --acento-vivo: #D08A00;
  --acento-2: #B4541A;

  --aviso: #B3261E;
  --aviso-viva: #D8453A;
  --aviso-fondo: rgba(216, 69, 58, .10);
  --aviso-borde: rgba(216, 69, 58, .30);
  --aviso-panel: rgba(216, 69, 58, .06);
  --aviso-texto: #8C1D16;

  --vidrio-1: rgba(255, 255, 255, .9);
  --vidrio-2: rgba(255, 255, 255, .5);
  --vidrio-hover: rgba(255, 255, 255, 1);
  --vidrio-sutil: rgba(255, 255, 255, .7);
  --sombra: rgba(18, 42, 52, .14);
  --sombra-suave: rgba(18, 42, 52, .08);
  --rejilla: rgba(11, 21, 25, .045);
  --grano-op: .022;
  --barra-fondo: rgba(244, 247, 249, .82);
  --resplandor: rgba(208, 138, 0, .12);

  --btn-1: #8A5700; --btn-2: #B4541A; --btn-texto: #FFFFFF;
  --btn-sombra: rgba(138, 87, 0, .24);
  --btn-sombra-fuerte: rgba(138, 87, 0, .38);
  --btn-destello: rgba(255, 255, 255, .45);

  --aurora-1: rgba(208, 138, 0, .18);
  --aurora-2: rgba(180, 84, 26, .12);
  --aurora-3: rgba(31, 95, 191, .10);

  --campo-fondo: rgba(255, 255, 255, .9);
  --ok: #10774F;
  --error: #C0392B;
}

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--texto-f);
  font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background-color .4s var(--suave), color .4s var(--suave); }
img, svg { max-width: 100%; }

.envoltorio { max-width: 1140px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 3; }

body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(var(--rejilla) 1px, transparent 1px), linear-gradient(90deg, var(--rejilla) 1px, transparent 1px);
  background-size: 36px 36px; mask-image: radial-gradient(circle at 50% 30%, #000 20%, transparent 78%); }
body::after { content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: var(--grano-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.auroras { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora { position: absolute; border-radius: 50%; filter: blur(100px); }
.aurora--1 { width: 660px; height: 660px; top: -240px; left: -180px; background: radial-gradient(circle, var(--aurora-1) 0%, transparent 70%); animation: vagar1 26s ease-in-out infinite; }
.aurora--2 { width: 580px; height: 580px; top: 100px; right: -200px; background: radial-gradient(circle, var(--aurora-2) 0%, transparent 70%); animation: vagar2 32s ease-in-out infinite; }
.aurora--3 { width: 500px; height: 500px; top: 60%; left: 32%; background: radial-gradient(circle, var(--aurora-3) 0%, transparent 70%); animation: vagar3 38s ease-in-out infinite; }
@keyframes vagar1 { 0%,100% { transform: none; } 50% { transform: translate(130px, 90px) scale(1.16); } }
@keyframes vagar2 { 0%,100% { transform: none; } 50% { transform: translate(-120px, 140px) scale(.86); } }
@keyframes vagar3 { 0%,100% { transform: none; } 50% { transform: translate(100px, -120px) scale(1.22); } }

.progreso { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--acento-vivo), var(--acento-2), var(--aviso-viva)); z-index: 90; }

/* ------------------------------------------------------------------
   Barra superior
   ------------------------------------------------------------------ */
header.barra { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid transparent;
  transition: background-color .3s var(--suave), border-color .3s var(--suave); }
header.barra[data-desplazada="si"] { background: var(--barra-fondo); backdrop-filter: saturate(160%) blur(14px); border-bottom-color: var(--borde); }
.barra__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; }
.barra__acciones { display: flex; align-items: center; gap: 10px; }
.barra__enlaces { display: flex; align-items: center; gap: 26px; }
.barra__enlaces a { font-size: 15.5px; color: var(--texto-2); text-decoration: none; transition: color .25s var(--suave); }
.barra__enlaces a:hover { color: var(--acento); }

.marca { display: inline-flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 900;
  font-size: 21px; letter-spacing: -.025em; color: var(--texto); text-decoration: none; }
.marca .dominio { color: var(--texto-3); font-weight: 700; }
.logo-mark { display: block; width: 32px; height: 32px; flex: none; }

.pastilla { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px;
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--acento);
  background: var(--resplandor); border: 1px solid var(--borde-vivo); padding: 4px 9px; border-radius: 100px; }
.punto { width: 6px; height: 6px; border-radius: 50%; background: var(--acento-vivo); animation: latir 2.2s ease-in-out infinite; }
@keyframes latir { 0%,100% { opacity: 1; } 70% { opacity: .35; } }

.tema { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 100px; flex: none;
  border: 1px solid var(--borde-vivo); background: var(--vidrio-sutil); color: var(--texto); cursor: pointer; padding: 0;
  transition: border-color .25s var(--suave), color .25s var(--suave), transform .25s var(--muelle); }
.tema:hover { border-color: var(--acento); color: var(--acento); transform: rotate(-18deg) scale(1.06); }
.tema svg { grid-area: 1 / 1; transition: opacity .3s var(--suave), transform .4s var(--muelle); }
.tema .luna { opacity: 1; transform: none; }
.tema .sol { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root[data-tema="claro"] .tema .luna { opacity: 0; transform: rotate(90deg) scale(.5); }
:root[data-tema="claro"] .tema .sol { opacity: 1; transform: none; }

/* ------------------------------------------------------------------
   Botones
   ------------------------------------------------------------------ */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; font-family: var(--texto-f); font-size: 16px; font-weight: 600; padding: 14px 26px;
  border-radius: 100px; text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .25s var(--muelle), box-shadow .25s var(--suave), border-color .25s, color .25s; }
.btn--principal { background: linear-gradient(120deg, var(--btn-1), var(--btn-2)); color: var(--btn-texto); box-shadow: 0 8px 30px var(--btn-sombra); }
.btn--principal:hover { box-shadow: 0 16px 44px var(--btn-sombra-fuerte); }
.btn--principal::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, var(--btn-destello), transparent); transform: skewX(-18deg); }
.btn--principal:hover::after { animation: destello .85s var(--suave); }
@keyframes destello { to { left: 140%; } }
.btn--linea { border-color: var(--borde-vivo); color: var(--texto); background: var(--vidrio-sutil); }
.btn--linea:hover { border-color: var(--acento); color: var(--acento); transform: translateY(-3px); }
.btn--pequeno { padding: 9px 18px; font-size: 15px; }
.btn .flecha { transition: transform .3s var(--muelle); }
.btn:hover .flecha { transform: translateX(5px); }
a:focus-visible, .btn:focus-visible, button:focus-visible { outline: 2.5px solid var(--acento-vivo); outline-offset: 3px; }

/* ------------------------------------------------------------------
   Tipografía
   ------------------------------------------------------------------ */
.rotulo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px;
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); margin: 0 0 14px; }
.rotulo::before { content: ""; width: 22px; height: 1px; background: var(--acento); opacity: .6; }

h1 { font-family: var(--display); font-weight: 900; font-size: clamp(38px, 6.4vw, 72px);
  line-height: .96; letter-spacing: -.042em; margin: 0 0 20px; text-wrap: balance; }
.brillo { background: linear-gradient(100deg, var(--acento), var(--acento-2) 45%, var(--acento));
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; animation: correr-brillo 7s linear infinite; }
@keyframes correr-brillo { to { background-position: 220% center; } }

h2 { font-family: var(--display); font-weight: 800; font-size: clamp(27px, 4vw, 42px); line-height: 1.06;
  letter-spacing: -.03em; margin: 0 0 18px; text-wrap: balance; }
h3 { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -.012em; margin: 0 0 8px; }
p { margin: 0 0 16px; max-width: 62ch; color: var(--texto-2); }
.grande { font-size: 19.5px; }
a { color: var(--acento); }

section { padding: 100px 0; position: relative; }
.raya { border-top: 1px solid var(--borde); }

.js .revela { opacity: 0; transform: translateY(30px); transition: opacity .85s var(--suave), transform .85s var(--suave); }
.js .revela[data-visto="si"] { opacity: 1; transform: none; }
.js .revela[data-retardo="1"] { transition-delay: .1s; }
.js .revela[data-retardo="2"] { transition-delay: .2s; }
.js .revela[data-retardo="3"] { transition-delay: .3s; }

/* ------------------------------------------------------------------
   Portada
   ------------------------------------------------------------------ */
.portada { padding: 66px 0 76px; position: relative; }
.portada__rejilla { display: grid; gap: 46px; align-items: center; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 13px; margin: 30px 0 0; }

figure { margin: 0; }
figcaption { margin-top: 14px; font-family: var(--mono); font-size: 11.5px; color: var(--texto-3); text-align: center; }

.marco-escena { position: relative; border-radius: 18px; padding: 16px; overflow: hidden;
  background: linear-gradient(160deg, var(--vidrio-1), var(--vidrio-2) 60%);
  border: 1px solid var(--borde); box-shadow: 0 30px 80px var(--sombra); }

.escenas { display: grid; gap: 14px; }
.ventana { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; }
.ventana__cabecera { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--borde); background: var(--vidrio-sutil); }
.semaforo { display: flex; gap: 6px; }
.semaforo i { width: 9px; height: 9px; border-radius: 50%; background: var(--borde-vivo); display: block; }
.ventana__titulo { font-family: var(--mono); font-size: 11px; color: var(--texto-3); letter-spacing: .06em; }
.ventana__vivo { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--acento); font-variant-numeric: tabular-nums; }
.ventana__vivo i { width: 5px; height: 5px; border-radius: 50%; background: var(--acento-vivo); animation: latir 1.6s ease-in-out infinite; }
.ventana__estado { margin: 0; padding: 14px 16px 4px; font-family: var(--display); font-weight: 700; font-size: 18px;
  letter-spacing: -.015em; color: var(--texto); min-height: 3.6em; max-width: none; }
.ventana__estado[data-nivel="cerca"], .ventana__estado[data-nivel="pasado"] { color: var(--aviso); }
.ventana__lista { list-style: none; margin: 0; padding: 8px; display: grid; gap: 6px; }
.fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; border-radius: 10px; background: var(--vidrio-sutil); align-items: center; }
.fila__que { font-size: 14px; font-weight: 600; color: var(--texto); }
.fila__plazo { font-family: var(--display); font-weight: 800; font-size: 15px; text-align: right; font-variant-numeric: tabular-nums; color: var(--acento); }
.fila__plazo[data-nivel="cerca"], .fila__plazo[data-nivel="pasado"] { color: var(--aviso); }
.fila__pie { font-family: var(--mono); font-size: 11.5px; color: var(--texto-3); text-align: right; }
.fila__barra { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--borde); overflow: hidden; }
.fila__barra i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--acento-vivo), var(--acento-2)); transition: width .5s var(--suave); }
.fila__barra[data-nivel="cerca"] i, .fila__barra[data-nivel="pasado"] i { background: var(--aviso-viva); }

/* Los cuatro símbolos del tacógrafo, como botones de la demo. */
.actividades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0 8px 8px; }
.actividad { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-3); background: var(--vidrio-sutil); border: 1px solid var(--borde); border-radius: 10px;
  padding: 10px 4px 8px; cursor: pointer; display: grid; justify-items: center; gap: 5px;
  transition: border-color .25s var(--suave), color .25s var(--suave), background-color .25s var(--suave); }
.actividad svg { width: 22px; height: 22px; }
.actividad:hover { border-color: var(--borde-vivo); color: var(--texto); }
.actividad[aria-pressed="true"] { color: var(--btn-texto); background: linear-gradient(120deg, var(--btn-1), var(--btn-2)); border-color: transparent; }
.reiniciar { background: none; border: 0; padding: 0; font: inherit; color: var(--texto-3); text-decoration: underline; cursor: pointer; }
.reiniciar:hover { color: var(--acento); }

/* Nota de confianza bajo los botones de la portada. */
.nota-linea { display: inline-flex; align-items: flex-start; gap: 9px; margin: 26px 0 0; font-size: 15px; color: var(--texto-2); max-width: 58ch; }
.nota-linea svg { flex: none; margin-top: 3px; color: var(--acento); }

/* ------------------------------------------------------------------
   Cinta
   ------------------------------------------------------------------ */
.cinta { border-block: 1px solid var(--borde); padding: 18px 0; overflow: hidden; position: relative; z-index: 3; }
.cinta::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--fondo) 0%, transparent 12%, transparent 88%, var(--fondo) 100%); }
.cinta__pista { display: flex; width: max-content; animation: rodar 34s linear infinite; }
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__pista span { font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-3); padding: 0 26px; white-space: nowrap; display: inline-flex; align-items: center; gap: 26px; }
.cinta__pista span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--acento); opacity: .6; }
@keyframes rodar { to { transform: translateX(-50%); } }

.tira { padding: 16px 0 0; text-align: center; }
.tira p { margin: 0 auto; font-size: 15px; color: var(--texto-3); max-width: 70ch; }

/* ------------------------------------------------------------------
   Cifras grandes
   ------------------------------------------------------------------ */
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cifra { padding: 32px 28px; border: 1px solid var(--borde); border-radius: 18px;
  background: linear-gradient(165deg, var(--vidrio-1), var(--vidrio-2));
  transition: border-color .3s var(--suave), transform .3s var(--suave), box-shadow .3s var(--suave); }
.cifra:hover { border-color: var(--borde-vivo); transform: translateY(-6px); box-shadow: 0 18px 40px var(--sombra-suave); }
.cifra__num { font-family: var(--display); font-weight: 900; font-size: clamp(42px, 6.6vw, 68px);
  line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--acento), var(--acento-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.cifra__que { display: block; margin-top: 6px; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; color: var(--texto); }
.cifra__pie { margin: 12px 0 0; font-size: 15.5px; color: var(--texto-2); max-width: none; }
.cifra__pie strong { color: var(--texto); }

/* ------------------------------------------------------------------
   Símbolos, guía y listas
   ------------------------------------------------------------------ */
.simbolos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.simbolo { padding: 26px 24px; border: 1px solid var(--borde); border-radius: 18px; background: var(--vidrio-sutil); }
.simbolo svg { width: 38px; height: 38px; color: var(--acento); margin-bottom: 14px; }
.simbolo p { margin: 0; font-size: 15.5px; }

.guia { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lista-ves { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista-ves li, .guia li { position: relative; border: 1px solid var(--borde); border-radius: 14px; padding: 22px 24px;
  background: var(--vidrio-sutil); transition: border-color .3s var(--suave), transform .3s var(--suave), background-color .3s var(--suave); }
.lista-ves li::after, .guia li::after { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0;
  background: linear-gradient(var(--acento-vivo), var(--acento-2)); border-radius: 3px; transform: translateY(-50%); transition: height .35s var(--suave); }
.lista-ves li:hover, .guia li:hover { border-color: var(--borde-vivo); transform: translateX(10px); background: var(--vidrio-hover); }
.lista-ves li:hover::after, .guia li:hover::after { height: 62%; }
.lista-ves p, .guia p { margin: 0; font-size: 15.5px; }
.guia h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.honesto { background: linear-gradient(180deg, var(--resplandor), transparent 62%); }
.aviso-piloto { margin-top: 32px; padding: 15px 19px; background: var(--aviso-panel);
  border: 1px solid var(--aviso-borde); border-left: 3px solid var(--aviso-viva); border-radius: 4px;
  font-size: 15.5px; color: var(--aviso-texto); max-width: 70ch; }
.aviso-piloto strong { color: var(--aviso); }

/* ------------------------------------------------------------------
   Beta
   ------------------------------------------------------------------ */
.beta { display: grid; gap: 44px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
.ficha { background: linear-gradient(165deg, var(--vidrio-1), var(--vidrio-2)); border: 1px solid var(--borde); border-radius: 18px; padding: 30px; }
.ficha dl { margin: 0; display: grid; gap: 18px; }
.ficha dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--acento); margin-bottom: 4px; }
.ficha dd { margin: 0; font-weight: 500; color: var(--texto-2); }

/* ------------------------------------------------------------------
   Cierre y pie
   ------------------------------------------------------------------ */
.cierre { text-align: center; }
.cierre p { margin-inline: auto; }

footer { border-top: 1px solid var(--borde); padding: 30px 0 44px; font-size: 14px; color: var(--texto-3); position: relative; z-index: 3; }
footer a { color: var(--texto-2); text-decoration: none; }
footer a:hover { color: var(--acento); }
.pie__rejilla { display: grid; gap: 36px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); padding-bottom: 26px; }
.pie__cols { display: grid; gap: 26px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pie__col h4 { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: var(--acento); margin: 0 0 12px; }
.pie__col a { display: block; margin-bottom: 8px; }
.pie__marca p { font-size: 14px; max-width: 30ch; margin: 12px 0 0; }
.pie__abajo { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; border-top: 1px solid var(--borde); padding-top: 22px; }

/* ------------------------------------------------------------------
   Pantallas estrechas
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .barra__acciones .btn--principal { display: none; }
  .marca .dominio { display: none; }
}
@media (max-width: 900px) {
  .portada__rejilla, .beta, .pie__rejilla { grid-template-columns: 1fr; }
  .pie__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras, .guia { grid-template-columns: 1fr; }
  .simbolos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barra__enlaces { display: none; }
  section { padding: 68px 0; }
  .portada { padding: 40px 0 56px; }
}
@media (max-width: 480px) { .simbolos { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revela { opacity: 1 !important; transform: none !important; }
  .btn, .cifra, .lista-ves li, .guia li { transform: none !important; }
  .brillo { -webkit-text-fill-color: initial; color: var(--acento); }
}

/* ------------------------------------------------------------------
   Páginas legales (mismo criterio que en Gestionae)
   ------------------------------------------------------------------ */
.envoltorio--estrecho { max-width: 820px; }
.legal { padding: 56px 0 90px; position: relative; z-index: 3; }
.legal h1 { font-size: clamp(30px, 4.6vw, 48px); margin-bottom: 10px; }
.legal h2 { font-size: clamp(21px, 2.6vw, 28px); margin-top: 44px; }
.legal h3 { margin-top: 26px; }
.legal p, .legal li { color: var(--texto-2); }
.legal ul, .legal ol { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--texto); }
.legal__fecha { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-3); margin-bottom: 34px; }
.legal__volver { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); text-decoration: none;
  margin: 40px 0 0; transition: color .25s var(--suave); }
.legal__volver:hover { color: var(--acento); }
.legal__borrador { margin: 0 0 34px; padding: 15px 19px; background: var(--aviso-panel);
  border: 1px solid var(--aviso-borde); border-left: 3px solid var(--aviso-viva); border-radius: 4px;
  font-size: 15.5px; color: var(--aviso-texto); max-width: none; }
.legal__borrador strong { display: block; margin-bottom: 6px; color: var(--aviso); }
.legal code { font-family: var(--mono); font-size: .88em; background: var(--vidrio-1);
  border: 1px solid var(--borde); padding: 1px 6px; border-radius: 5px; }
.legal__borrador code { background: var(--aviso-fondo); border-color: var(--aviso-borde); }

/* ------------------------------------------------------------------
   Guía del tacógrafo
   ------------------------------------------------------------------ */
.guia h3 a { color: var(--texto); text-decoration: none; }
.guia h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.guia h3 a:hover { color: var(--acento); }
.guia h3 a:focus-visible { outline: none; }
.guia li:focus-within { border-color: var(--acento); }
.guia-pagina .aviso-piloto { margin: 8px 0 0; }
.indice { margin: 36px 0 12px; padding: 20px 24px; border: 1px solid var(--borde); border-radius: 14px; background: var(--vidrio-sutil); }
.indice ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.indice a { color: var(--texto); text-decoration: none; }
.indice a:hover { color: var(--acento); }
.apartado { padding: 12px 0 0; scroll-margin-top: 90px; }
.fuente { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--borde); font-family: var(--mono);
  font-size: 12px; letter-spacing: .03em; color: var(--texto-3); max-width: none; }