/* Marca Snowlytics: la única fuente de colores, tipografía y esquinas.
   La usan la plataforma (frontend/, tablet, superadmin) y la web comercial
   (web/construir.py la pone delante de sus hojas). Si cambia un color aquí,
   cambia en las dos.

   Reglas:
   - El naranja es de la marca y de las acciones (botón principal, lo
     seleccionado). Nunca para pintar un dato.
   - Los datos llevan su propia paleta (--dato-*), validada para daltonismo y
     contraste sobre --superficie. Un estado (ok/aviso/crítico) siempre va con
     su texto o icono, nunca solo el color. Solo tres: un naranja intermedio
     no se distingue del de la marca.
   - Los colores de dificultad de pista son solo para el trazado de pistas. */

/* Fuentes de respaldo con las proporciones de las de la marca: mientras
   llegan Barlow y Azeret Mono, el texto ocupa casi lo mismo y nada salta. */
/* medido: Barlow Condensed 800 ocupa el 61,9 % del ancho de Arial; Barlow, el 95,2 % */
@font-face { font-family: "Rotulo respaldo"; src: local("Arial"); size-adjust: 62%; }
@font-face { font-family: "Texto respaldo"; src: local("Arial"); size-adjust: 95%; }
@font-face { font-family: "Dato respaldo"; src: local("Courier New"); size-adjust: 100%; }

:root {
  /* superficies y tinta */
  --fondo: #0a0d11;
  --superficie: #10151b;
  --linea: #1a222b;
  --hielo: #e8eef3;
  --gris: #8b97a3;
  --gris-osc: #4a5560;

  /* marca y acciones */
  --naranja: #ff6b1a;
  --naranja-claro: #ff8240;
  --naranja-tinta: #1a0a02;          /* texto sobre fondo naranja */

  /* estados (siempre con texto o icono al lado) */
  --dato-ok: #4cc77a;
  --dato-aviso: #fab219;             /* atención */
  --dato-critico: #e5484d;
  --dato-neutro: #66727e;            /* sin datos, apagado */
  --ok: var(--dato-ok);

  /* series de gráficas y categorías, en este orden y sin saltarse ninguno
     (el orden es lo que las hace distinguibles para daltónicos) */
  --dato-serie-1: #3987e5;           /* azul: la serie principal */
  --dato-serie-2: #199e70;           /* aguamarina */
  --dato-serie-3: #c98500;           /* ámbar */
  --dato-serie-4: #9085e9;           /* violeta */
  --dato-serie-5: #d55181;           /* magenta */
  --dato-info: var(--dato-serie-1);

  /* dificultad de pista: solo para el trazado */
  --pista-verde: #3fae5a;
  --pista-azul: #2f7de1;
  --pista-roja: #e5383b;
  --pista-negra: #05070a;

  /* tipografía */
  --f-rotulo: "Barlow Condensed", "Rotulo respaldo", "Arial Narrow", sans-serif;   /* titulares, en mayúsculas */
  --f-texto: "Barlow", "Texto respaldo", system-ui, sans-serif;
  --f-dato: "Azeret Mono", "Dato respaldo", ui-monospace, monospace;             /* cifras y cotas */

  /* esquinas casi rectas: aire técnico y caben más datos */
  --radio: 4px;
  --radio-s: 2px;
}

/* Colores, tipografía y esquinas vienen de la marca común
   (frontend/css/marca.css, que construir.py pone delante de esta hoja).
   Aquí solo lo propio de la web. */
/* Tokens de la web: el plano 3D de la estación (referencia aprobada p6).
   Solo modo oscuro. Los colores de dificultad de pista son SOLO para el
   trazado de las pistas (3D, plano SVG, leyenda); nunca para textos ni botones. */
:root {
  /* superficies propias */
  --cartel-fondo: rgba(16, 21, 27, .94);
  --velo: rgba(10, 13, 17, .8);

  /* tipografía */
  --t-base: 17px;
  --t-h1: clamp(2.7rem, 7vw, 6.4rem);
  --t-h2: clamp(2.4rem, 6vw, 4.6rem);
  --t-cartel: clamp(2rem, 3.4vw, 3rem);

  /* medidas */
  --ancho: 1240px;
  --margen: max(16px, env(safe-area-inset-left, 0px));
  --sombra: 0 24px 60px rgba(0, 0, 0, .45);
  --cabecera-alto: 60px;

  /* capas */
  --z-escena: 0;
  --z-rotulos: 2;
  --z-contenido: 3;
  --z-ficha: 40;
  --z-cabecera: 50;
  --z-progreso: 70;

  /* movimiento */
  --curva: cubic-bezier(.2, .8, .2, 1);
  --rapido: .2s;
  --medio: .35s;

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --rapido: 0s; --medio: 0s; }
}

/* Componentes de la web (estilo p6: el plano de pistas). Cada bloque es una
   pieza de web/componentes.py con el mismo nombre. */

/* -- base ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--hielo); font-family: var(--f-texto); font-size: var(--t-base);
  line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--fondo); }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; }
.gut { padding-left: var(--margen); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: var(--ancho); margin-inline: auto; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 80; background: var(--naranja); color: var(--naranja-tinta); padding: 8px 14px;
  font: 700 15px var(--f-rotulo); text-transform: uppercase; letter-spacing: .08em; }
.saltar:focus { left: 8px; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* rótulo pequeño en mono (cotas, claves, etiquetas) */
.mono { font-family: var(--f-dato); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.antetitulo { display: flex; align-items: center; gap: 10px; }
.antetitulo::before { content: ""; width: 22px; height: 6px; flex: none;
  background: repeating-linear-gradient(90deg, var(--naranja) 0 6px, transparent 6px 9px); }
.etiqueta-demo { display: inline-block; font-family: var(--f-dato); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris); border: 1px solid var(--linea); padding: 3px 7px; border-radius: 3px; white-space: nowrap; }
.titulo-seccion { font: 800 var(--t-h2)/.92 var(--f-rotulo); text-transform: uppercase; margin: 14px 0 36px; max-width: 18ch; }
.entradilla { font-size: clamp(1.02rem, 1.8vw, 1.22rem); max-width: 52ch; }
.entradilla .tenue, .tenue { color: var(--gris); }

/* -- botón ------------------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 700 16px/1 var(--f-rotulo); letter-spacing: .1em; text-transform: uppercase;
  padding: 13px 20px; background: var(--naranja); color: var(--naranja-tinta); border: 0; border-radius: 3px; cursor: pointer;
  transition: transform var(--rapido), background var(--rapido), box-shadow var(--rapido), color var(--rapido); }
.btn:hover { transform: translateY(-2px); background: var(--naranja-claro); }
/* botones magnéticos (cursor.js): se acercan al cursor y vuelven con rebote */
.btn.magnetico { transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background var(--rapido), box-shadow var(--rapido), color var(--rapido); }
.btn.magnetico.atraido { transition: transform .15s ease-out, background var(--rapido), box-shadow var(--rapido), color var(--rapido); }
.btn.magnetico:hover { transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 2px)); }
.btn .flecha { transition: transform .25s; }
.btn:hover .flecha { transform: translateX(4px); }
.btn.fantasma { background: rgba(10, 13, 17, .5); color: var(--hielo); box-shadow: inset 0 0 0 1px var(--linea); }
.btn.fantasma:hover { box-shadow: inset 0 0 0 1px var(--naranja); color: var(--naranja); }
.botones { display: flex; flex-wrap: wrap; gap: 12px; }

/* -- cabecera y menú ------------------------------------------------------------------ */
.cabecera { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-cabecera); background: var(--velo);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.cabecera-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--cabecera-alto); }
.marca { display: flex; align-items: center; gap: 9px; font: 800 24px/1 var(--f-rotulo); letter-spacing: .05em; text-transform: uppercase; flex: none; }
.marca svg { width: 26px; height: 26px; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav-lista { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.nav-enlace, .menu-mod > .menu-mod-abre { font: 600 15px var(--f-rotulo); letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
  background: none; border: 0; padding: 8px 0; cursor: pointer; text-decoration: none; }
.nav-enlace:hover, .menu-mod > .menu-mod-abre:hover, .menu-mod.abierto > .menu-mod-abre { color: var(--hielo); }
.menu-mod > .menu-mod-abre::after { content: ""; display: inline-block; margin-left: 7px; vertical-align: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.menu-movil { display: none; }
.nav .btn .corto { display: none; }

/* desplegable: categorías a la izquierda; su poste de señales a la derecha */
.menu-mod { position: relative; }
.desplegable-mod { position: absolute; top: calc(100% + 12px); left: -16px; display: none; grid-template-columns: 250px 300px;
  column-gap: 26px; padding: 14px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra); }
.desplegable-mod::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; } /* puente para el ratón */
.menu-mod.abierto .desplegable-mod { display: grid; }
@media (hover: hover) and (min-width: 901px) { .menu-mod:hover .desplegable-mod, .menu-mod:focus-within .desplegable-mod { display: grid; } }
.categorias, .categorias > li { display: contents; }
.cat-boton { grid-column: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; margin-bottom: 6px;
  padding: 11px 14px; background: var(--fondo); color: var(--hielo); border: 1px solid var(--linea); border-left: 4px solid var(--linea);
  border-radius: 3px; font: 700 17px/1 var(--f-rotulo); letter-spacing: .05em; text-transform: uppercase; text-align: left; cursor: pointer;
  transition: background var(--rapido), color var(--rapido), border-color var(--rapido); }
.cat-boton small { font: 500 10.5px var(--f-dato); letter-spacing: .1em; color: var(--gris); }
.cat.activa > .cat-boton, .cat-boton:hover { background: var(--naranja); color: var(--naranja-tinta); border-color: var(--naranja); }
.cat.activa > .cat-boton small, .cat-boton:hover small { color: var(--naranja-tinta); }
.poste.poste-menu { grid-column: 2; grid-row: 1 / span 6; display: none; align-self: start; }
.cat.activa > .poste.poste-menu { display: flex; }
@media (hover: hover) and (min-width: 901px) { .categorias:not(:has(.activa)) > .cat:hover > .poste.poste-menu { display: flex; } }
.desplegable-mod .todos { grid-column: 1; margin-top: 4px; }

/* -- poste y señales (guía de pistas) ---------------------------------------------------- */
.poste { position: relative; display: flex; flex-direction: column; gap: 10px; padding-left: 28px; perspective: 800px; }
.poste::before { content: ""; position: absolute; left: 6px; top: -18px; bottom: -24px; width: 9px; border-radius: 2px;
  background: repeating-linear-gradient(180deg, var(--naranja) 0 26px, var(--pista-negra) 26px 52px); box-shadow: 0 0 0 1px var(--linea); }
.poste-menu.poste::before { top: -6px; bottom: -6px; }
.senal { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 28px 10px 16px;
  background: var(--hielo); color: var(--fondo); font: 700 17px/1.05 var(--f-rotulo); letter-spacing: .06em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); transform-origin: 0 50%;
  transition: transform var(--medio) var(--curva), background var(--rapido), color var(--rapido); }
.senal small { font: 500 10px var(--f-dato); letter-spacing: .1em; color: var(--gris-osc); }
.senal:nth-child(even) { margin-left: 10px; }
.senal:hover, .senal:focus-visible { transform: rotateY(-16deg); background: var(--naranja); color: var(--naranja-tinta); }
.senal:hover small, .senal:focus-visible small { color: var(--naranja-tinta); }
.poste-menu .senal { font-size: 15.5px; padding: 9px 26px 9px 14px; }
.postes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 40px; }
.grupo { min-width: 0; }
.grupo .placa { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 18px; padding: 10px 14px;
  background: var(--naranja); color: var(--naranja-tinta); border-radius: 3px; }
.grupo .placa h3 { font: 800 22px/1 var(--f-rotulo); text-transform: uppercase; letter-spacing: .05em; }
.grupo .placa span { font: 500 10.5px var(--f-dato); letter-spacing: .1em; text-transform: uppercase; }

/* -- cartel de remonte ------------------------------------------------------------------ */
.cartel { width: min(440px, 100%); background: var(--cartel-fondo); border: 1px solid var(--linea); border-radius: var(--radio);
  overflow: hidden; box-shadow: var(--sombra); }
.cartel-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 16px; background: var(--pista-negra);
  border-bottom: 1px solid var(--linea); }
.cartel-cab .lampara { width: 8px; height: 8px; border-radius: 50%; background: var(--naranja); box-shadow: 0 0 10px var(--naranja); flex: none; }
.cartel-cab .pasos { display: flex; gap: 4px; }
.cartel-cab .pasos b { width: 16px; height: 4px; border-radius: 1px; background: var(--linea); }
.cartel-cab .pasos b.on { background: var(--naranja); }
.cartel-cuerpo { padding: 20px 20px 18px; }
.cartel-cuerpo > .mono.clave { color: var(--naranja); }
.cartel h2, .cartel h1 { font: 800 var(--t-cartel)/.92 var(--f-rotulo); text-transform: uppercase; margin: 8px 0 12px; }
.cartel p { margin: 0 0 14px; font-size: 16px; }
.cartel p:last-child { margin-bottom: 0; }
.cartel .pista { color: var(--gris); font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.cartel .pista::before { content: ""; width: 14px; height: 14px; border: 1.5px solid var(--naranja); border-radius: 50%; flex: none; }
.cartel.ancho { width: min(620px, 100%); }

/* leyenda de dificultad (único sitio, junto al 3D, donde salen los colores de pista) */
.leyenda { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px var(--f-dato); color: var(--gris); letter-spacing: .08em; text-transform: uppercase; }
.leyenda i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }

/* cifras del cartel */
.datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin: 0 0 14px; }
.datos div { background: var(--superficie); padding: 10px 12px; min-width: 0; }
.datos b { display: block; font: 700 24px/1 var(--f-rotulo); font-variant-numeric: tabular-nums; margin-top: 4px; }
.datos b.naranja { color: var(--naranja); }
.datos b.ok { color: var(--ok); }

/* cadena de pasos (aviso → acción → resuelto) */
.cadena { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cadena li { display: flex; align-items: center; gap: 10px; font: 600 16px var(--f-rotulo); letter-spacing: .08em; text-transform: uppercase; }
.cadena li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--naranja); box-shadow: 0 0 8px var(--naranja); flex: none; }
.cadena li:last-child::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.cadena li span { font: 400 11px var(--f-dato); color: var(--gris); letter-spacing: .06em; margin-left: auto; text-transform: none; }

/* -- tablero de salidas ------------------------------------------------------------------ */
.tablero { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--superficie); }
.tablero-cab, .fila { display: grid; grid-template-columns: 22px minmax(0, 1.2fr) minmax(0, 2fr) 190px; gap: 18px; align-items: center; padding: 14px 20px; }
.tablero-cab { background: var(--pista-negra); border-bottom: 1px solid var(--linea); }
.fila { border-bottom: 1px solid var(--linea); transition: background var(--rapido); }
.fila:last-child { border-bottom: 0; }
.fila .lampara { width: 10px; height: 10px; border-radius: 50%; background: var(--linea); transition: background var(--rapido), box-shadow var(--rapido); }
.fila h3 { font: 700 24px/1.02 var(--f-rotulo); text-transform: uppercase; letter-spacing: .03em; transition: transform .25s, color var(--rapido); }
.fila p { color: var(--gris); font-size: 15.5px; min-width: 0; transition: color var(--rapido); }
.fila .destino { font: 500 11px var(--f-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); text-align: right; }
.fila:hover, .fila:focus-visible { background: rgba(255, 107, 26, .06); }
.fila:hover .lampara, .fila:focus-visible .lampara { background: var(--naranja); box-shadow: 0 0 12px var(--naranja); }
.fila:hover h3, .fila:focus-visible h3 { transform: translateX(6px); color: var(--naranja); }
.fila:hover p, .fila:focus-visible p { color: var(--hielo); }
.fila:hover .destino { color: var(--naranja); }

/* -- jalones (pasos) ------------------------------------------------------------------- */
.ladera { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-bottom: 20px; }
.ladera svg.trazo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.jalon { position: relative; z-index: 1; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 18px; min-width: 0; }
.jalon:nth-child(3) { margin-top: 80px; }
.jalon:nth-child(4) { margin-top: 160px; }
.jalon .palo { width: 12px; height: 210px; border-radius: 2px; transform-origin: 50% 100%; box-shadow: 0 0 0 1px var(--linea);
  background: repeating-linear-gradient(180deg, var(--naranja) 0 30px, var(--pista-negra) 30px 60px); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.jalon:hover .palo { transform: rotate(-5deg); }
.jalon .num { font: 800 64px/.85 var(--f-rotulo); color: var(--naranja); font-variant-numeric: tabular-nums; }
.jalon h3 { font: 800 30px/1 var(--f-rotulo); text-transform: uppercase; margin: 10px 0; }
.jalon p { color: var(--gris); font-size: 15.5px; max-width: 34ch; }

/* -- franja (dispositivo, captura, etc.) -------------------------------------------------- */
.franja { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 28px;
  border: 1px solid var(--linea); background: var(--superficie); border-radius: var(--radio); }
.franja h3 { font: 800 34px/1 var(--f-rotulo); text-transform: uppercase; margin: 8px 0 10px; }
.franja p { color: var(--gris); max-width: 56ch; }
.franja > svg, .franja > img { width: 100%; max-width: 200px; height: auto; }

/* -- gran cartel final -------------------------------------------------------------------- */
.gran-cartel { position: relative; display: block; perspective: 1200px; }
.gran-cartel .cara { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
  padding: clamp(24px, 4vw, 48px) clamp(64px, 9vw, 120px) clamp(24px, 4vw, 48px) clamp(24px, 4vw, 44px);
  background: var(--naranja); color: var(--naranja-tinta); transform-origin: 0 50%; transition: transform .5s var(--curva);
  clip-path: polygon(0 0, calc(100% - 60px) 0, 100% 50%, calc(100% - 60px) 100%, 0 100%); }
.gran-cartel:hover .cara { transform: rotateY(-8deg); }
.gran-cartel .clave { font: 500 12px var(--f-dato); letter-spacing: .14em; text-transform: uppercase; }
.gran-cartel b { display: block; font: 800 clamp(3.2rem, 10vw, 8rem)/.85 var(--f-rotulo); text-transform: uppercase; margin-top: 10px; }
.gran-cartel .flecha { font: 800 clamp(3rem, 8vw, 6rem)/1 var(--f-rotulo); transition: transform .3s; }
.gran-cartel:hover .flecha { transform: translateX(14px); }
.bajo-cartel { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: center; margin-top: 22px; padding: 14px 16px;
  background: var(--velo); border: 1px solid var(--linea); border-radius: var(--radio); }
.bajo-cartel p { max-width: 52ch; }

/* -- pie ----------------------------------------------------------------------------------- */
.pie { position: relative; z-index: var(--z-contenido); border-top: 1px solid var(--linea); background: var(--fondo);
  padding-block: 28px calc(26px + env(safe-area-inset-bottom, 0px)); }
.pie-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 32px; align-items: flex-start; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.pie a:hover { color: var(--naranja); }
.pie-legal { margin-top: 18px; color: var(--gris); font-size: 12.5px; }

/* -- ficha (al pasar el ratón o tocar) -------------------------------------------------- */
.ficha { position: fixed; z-index: var(--z-ficha); width: 230px; pointer-events: none; background: var(--superficie); border: 1px solid var(--linea);
  border-top: 3px solid var(--naranja); padding: 12px 14px; border-radius: 3px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s; }
.ficha.on { opacity: 1; transform: none; }
.ficha h4 { margin: 0 0 8px; font: 700 20px/1 var(--f-rotulo); letter-spacing: .05em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.ficha h4 i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.ficha dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 10px; font: 400 12.5px var(--f-dato); }
.ficha dt { color: var(--gris); }
.ficha dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ficha dd.ok { color: var(--ok); }
.ficha dd.aviso { color: var(--naranja); }

/* -- rótulos sobre el 3D y barra de progreso --------------------------------------------- */
.progreso { position: fixed; left: 0; top: env(safe-area-inset-top, 0px); height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: var(--naranja); z-index: var(--z-progreso); }
.rotulo { position: fixed; left: 0; top: 0; z-index: var(--z-rotulos); pointer-events: none; opacity: 0; white-space: nowrap; will-change: transform, opacity; }
.rotulo span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; background: rgba(10, 13, 17, .86); border: 1px solid var(--linea);
  border-radius: var(--radio-s); font: 700 13px/1 var(--f-rotulo); letter-spacing: .1em; text-transform: uppercase; }
.rotulo i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.rotulo.cota span { background: none; border: 0; font: 500 11px var(--f-dato); letter-spacing: .08em; text-shadow: 0 1px 6px #000; }
.rotulo.cota span::before { content: ""; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--hielo); }
.rotulo.remonte span { font: 500 10.5px var(--f-dato); letter-spacing: .08em; }
.rotulo.remonte span::before { content: ""; width: 8px; height: 8px; border: 1.5px solid var(--hielo); }
.rotulo.alerta span { background: var(--naranja); color: var(--naranja-tinta); border-color: var(--naranja); }
.rotulo.ok span { border-color: rgba(76, 199, 122, .5); }

/* -- aparición al hacer scroll ---------------------------------------------------------- */
.aparece { transition: opacity .7s ease, transform .7s var(--curva); }
.aparece.antes { opacity: 0; transform: translateY(28px); }

/* -- móvil ----------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .postes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .franja { grid-template-columns: 140px minmax(0, 1fr); }
  .franja .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 900px) {
  .menu-movil { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 9px 12px; background: none; color: var(--hielo);
    border: 1px solid var(--linea); border-radius: 3px; font: 700 14px/1 var(--f-rotulo); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
  .nav { display: none; position: fixed; inset: calc(var(--cabecera-alto) + env(safe-area-inset-top, 0px)) 0 0; flex-direction: column; align-items: stretch;
    gap: 0; padding: 12px var(--margen) 28px; background: var(--fondo); overflow-y: auto; border-top: 1px solid var(--linea); }
  .nav.abierta { display: flex; }
  .nav-lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-lista > li { border-bottom: 1px solid var(--linea); }
  .nav-enlace, .menu-mod > .menu-mod-abre { display: block; width: 100%; text-align: left; padding: 14px 0; font-size: 18px; color: var(--hielo); }
  .nav > .btn { margin-top: 18px; justify-content: center; }
  .desplegable-mod { position: static; display: none; grid-template-columns: minmax(0, 1fr); padding: 0 0 14px; background: none; border: 0; box-shadow: none; }
  .desplegable-mod::before { display: none; }
  .poste.poste-menu { grid-column: 1; grid-row: auto; margin: 6px 0 16px; }
  /* el desenfoque convertiría la cabecera en el marco del menú fijo y lo recortaría */
  .cabecera { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--fondo); }
  .desplegable-mod .todos { grid-column: 1; }
}
@media (max-width: 760px) {
  .marca { font-size: 20px; }
  .marca svg { width: 22px; height: 22px; }
  .cartel-cuerpo { padding: 14px 16px; }
  .cartel h2, .cartel h1 { font-size: 1.9rem; margin: 4px 0 8px; }
  .cartel p { font-size: 15px; margin-bottom: 10px; }
  .datos b { font-size: 20px; }
  .datos div { padding: 8px 10px; }
  .cadena li { font-size: 14.5px; }
  .tablero-cab { display: none; }
  .fila { grid-template-columns: 14px minmax(0, 1fr); gap: 6px 14px; padding: 16px; }
  .fila p, .fila .destino { grid-column: 2; text-align: left; }
  .postes { grid-template-columns: 1fr; }
  .ladera { grid-template-columns: 1fr; gap: 40px; }
  .jalon:nth-child(3), .jalon:nth-child(4) { margin-top: 0; }
  .jalon .palo { height: 140px; }
  .ladera svg.trazo { display: none; }
  .franja { grid-template-columns: 1fr; }
  .franja > svg, .franja > img { max-width: 150px; }
  .gran-cartel .cara { grid-template-columns: 1fr; padding-right: 56px;
    clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%); }
  .gran-cartel .flecha { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .aparece.antes { opacity: 1; transform: none; }
}

/* -- cursor propio (cursor.js; solo ratón y sin reducir movimiento) ------------------- */
html.cursor-propio, html.cursor-propio * { cursor: none !important; }
html.cursor-propio input, html.cursor-propio textarea, html.cursor-propio [contenteditable] { cursor: text !important; }
.cursor-aro, .cursor-punto { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; opacity: 0; will-change: transform; }
.cursor-aro { width: 0; height: 0; }
.cursor-aro::before { content: ""; position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--naranja); transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .25s, border-color .25s; }
.cursor-aro span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.6); opacity: 0; white-space: nowrap;
  font: 700 12px/1 var(--f-rotulo); letter-spacing: .14em; text-transform: uppercase; color: var(--naranja-tinta); transition: opacity .2s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.cursor-punto { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--naranja); transition: opacity .2s; }
.cursor-aro.visible, .cursor-punto.visible { opacity: 1; transition: opacity .3s; }
.cursor-aro.activo::before { transform: scale(1.6); background: rgba(255, 107, 26, .14); }
.cursor-aro.con-texto::before { transform: scale(2.2); background: var(--naranja); border-color: transparent; }
.cursor-aro.con-texto span { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cursor-aro.pulsado::before { transform: scale(.8); }
.cursor-aro.con-texto.pulsado::before { transform: scale(1.9); }
.cursor-aro.oculto, .cursor-punto.oculto { opacity: 0 !important; }

/* -- táctil (tacto.js): destello al tocar y botón para activar el movimiento en iPhone -- */
.toque { position: fixed; z-index: 9999; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none;
  background: rgba(255, 107, 26, .38); box-shadow: 0 0 0 1px rgba(255, 107, 26, .55); animation: toque .6s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes toque { to { transform: scale(7); opacity: 0; } }
.activar-mov { position: fixed; z-index: 60; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0;
  padding: 10px 16px; border: 1px solid var(--naranja); border-radius: 999px; background: rgba(10, 13, 17, .88); color: var(--hielo);
  font: 700 13px/1 var(--f-rotulo); letter-spacing: .12em; text-transform: uppercase; transition: opacity .35s, transform .35s; }
.activar-mov.visible { opacity: 1; transform: translate(-50%, 0); }

/* -- newsletter en el pie ------------------------------------------------------------ */
.newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px 32px; align-items: center;
  margin-top: 28px; padding: 22px 0 4px; border-top: 1px solid var(--linea); }
.nl-t { margin: 0 0 4px; font: 800 22px/1 var(--f-rotulo); text-transform: uppercase; letter-spacing: .03em; color: var(--hielo); }
.nl-sub { margin: 0; color: var(--gris); font-size: 14px; max-width: 46ch; }
.nl-campos { display: flex; gap: 8px; }
.nl-email { flex: 1; min-width: 0; }
.nl-email input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--linea); border-radius: 3px; background: rgba(255, 255, 255, .03);
  color: var(--hielo); font: 15px var(--f-texto); }
.nl-email input:focus { outline: none; border-color: var(--naranja); box-shadow: 0 0 0 3px rgba(255, 107, 26, .18); }
.nl-email input[aria-invalid="true"] { border-color: #e5484d; }
.newsletter .btn { height: 46px; white-space: nowrap; }
.nl-acepto { grid-column: 2; display: flex; gap: 8px; align-items: center; color: var(--gris); font-size: 13px; }
.nl-acepto input { accent-color: var(--naranja); width: 16px; height: 16px; margin: 0; }
.nl-acepto a { color: var(--hielo); text-decoration: underline; text-underline-offset: 2px; }
.nl-estado { grid-column: 2; margin: 0; min-height: 1.2em; font-size: 13.5px; color: var(--gris); }
.nl-estado.ok { color: #3fb37f; } .nl-estado.mal { color: #ff8a80; }
.newsletter.hecho .nl-campos, .newsletter.hecho .nl-acepto { display: none; }
.newsletter .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px) {
  .newsletter { grid-template-columns: minmax(0, 1fr); }
  .nl-acepto, .nl-estado { grid-column: 1; }
  .nl-campos { flex-direction: column; }
  .newsletter .btn { width: 100%; justify-content: center; }
}

/* -- detalles (detalles.js) ------------------------------------------------------------ */
/* botón de la newsletter: copo girando al enviar y check al confirmarse */
.newsletter .btn { position: relative; }
.newsletter .btn.enviando, .newsletter .btn.listo { color: transparent; }
.newsletter .btn.enviando::after, .newsletter .btn.listo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px;
  margin: -10px 0 0 -10px; background: center / contain no-repeat; }
.newsletter .btn.enviando::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a0a02' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17l17.4-10M9 4l3 2 3-2M9 20l3-2 3 2'/%3E%3C/svg%3E"); animation: copo-gira 1s linear infinite; }
.newsletter .btn.listo::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a0a02' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); width: 24px; height: 24px; margin: -12px 0 0 -12px; animation: check-entra .45s cubic-bezier(.34, 1.56, .64, 1); }
.newsletter .btn.listo { animation: boton-ok .5s ease-out; }
@keyframes copo-gira { to { transform: rotate(360deg); } }
@keyframes check-entra { from { transform: scale(0) rotate(-30deg); } }
@keyframes boton-ok { 40% { transform: scale(1.06); } }
.copo-rafaga { position: fixed; z-index: 9999; width: 12px; height: 12px; margin: -6px 0 0 -6px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f8fb' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17l17.4-10M9 4l3 2 3-2M9 20l3-2 3 2'/%3E%3C/svg%3E") center / contain no-repeat; animation: rafaga 1.1s cubic-bezier(.15, .7, .3, 1) forwards; }
.copo-rafaga.naranja { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b1a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17l17.4-10M9 4l3 2 3-2M9 20l3-2 3 2'/%3E%3C/svg%3E"); }
@keyframes rafaga { to { transform: translate(var(--dx), var(--dy)) rotate(var(--giro)) scale(.5); opacity: 0; } }
/* nieve sobre el logo */
.marca { position: relative; }
.marca svg circle { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); transform-origin: 24px 7px; }
.marca.nevando svg circle { transform: translateY(-2px) scale(1.25); }
.copo-logo { position: absolute; top: -4px; width: 3px; height: 3px; border-radius: 50%; background: #f4f8fb; pointer-events: none;
  opacity: 0; animation: copo-cae 1.1s ease-in forwards; }
@keyframes copo-cae { 15% { opacity: 1; } to { transform: translate(var(--deriva), 30px); opacity: 0; } }
/* nevada escondida */
.nevada { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9998; pointer-events: none; }
.pie-legal { user-select: none; -webkit-tap-highlight-color: transparent; }

/* transición entre páginas: una única línea naranja recorre el contorno de SNOWLYTICS
   y sigue su camino borrándolo. Una sola línea de tiempo de 1,5 s desde el clic: la
   página que se deja la empieza y la nueva la retoma donde iba (--tr-e). */
.transicion { position: fixed; inset: 0; z-index: 10000; display: none; place-items: center; background: #0a0d11; pointer-events: none; }
.transicion svg { width: min(84vw, 1100px); height: auto; overflow: visible; }
.transicion path { fill: none; stroke: var(--naranja); stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.transicion.saliendo, html.llegando .transicion { display: grid; }
.transicion.saliendo { animation: tr-fondo .14s ease-out both; }
.transicion.saliendo path, html.llegando .transicion path { animation: tr-linea 1.5s linear forwards; }
.transicion.saliendo svg, html.llegando .transicion svg { animation: tr-flota 1.5s cubic-bezier(.3, 0, .3, 1) forwards; }
html.llegando .transicion path, html.llegando .transicion svg { animation-delay: calc(-1 * var(--tr-e, 0s)); }
html.llegando .transicion { animation: tr-va .45s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(1.02s - var(--tr-e, 0s)); }
@keyframes tr-fondo { from { opacity: 0; } }
/* acelera al dibujar y frena al borrar: la velocidad es máxima justo cuando la palabra
   se completa, así que la línea nunca se detiene */
@keyframes tr-linea {
  0% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.5, 0, .85, .6); }
  52% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.15, .4, .5, 1); }
  100% { stroke-dashoffset: -1; }
}
@keyframes tr-flota { from { transform: scale(.985); } to { transform: scale(1.03); } }
@keyframes tr-va { to { opacity: 0; } }
/* el trazo escala con el rótulo: en pantallas pequeñas se engrosa para que se vea igual */
@media (max-width: 900px) { .transicion path { stroke-width: 2.6px; } }
@media (max-width: 480px) { .transicion path { stroke-width: 4.2px; } }
/* altímetro (solo pantallas anchas; en las demás sigue la barra de progreso) */
.altimetro { display: none; }
@media (min-width: 1440px) {
  html.con-altimetro .progreso { display: none; }
  html.con-altimetro .altimetro { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: fixed; left: 22px; top: 50%;
    transform: translateY(-50%); z-index: var(--z-progreso); pointer-events: none; opacity: .5; transition: opacity .4s;
    font: 500 10.5px/1 var(--f-dato); letter-spacing: .08em; color: var(--gris); }
  .altimetro.activo { opacity: 1; }
  .alt-escala { position: relative; width: 9px; height: 34vh; margin-left: 2px;
    background: linear-gradient(var(--linea), var(--linea)) 0 0 / 1px 100% no-repeat,
                repeating-linear-gradient(to bottom, var(--gris) 0 1px, transparent 1px 10%) 0 0 / 7px 100% no-repeat; opacity: .9; }
  .alt-marca { position: absolute; left: -3px; top: 0; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    border-left: 7px solid var(--naranja); transform: translateY(-50%); transition: top .12s linear; }
  .alt-marca b { position: absolute; left: 12px; top: -6px; white-space: nowrap; font-weight: 700; color: var(--hielo); }
}

/* entre la salida y la llegada el rótulo es el mismo: el navegador solo funde
   en un instante lo poco que cambia */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .transicion { display: none !important; }
}

/* Componentes de las páginas de módulo y de los formularios (estilo p6). */

.miga { color: var(--naranja); }
.miga:hover { color: var(--naranja-claro); }
.dos-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; }
.dos-col.ancha { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }

/* tablero de dos columnas (sin destino) */
.tablero.dos .tablero-cab, .tablero.dos .fila { grid-template-columns: 22px minmax(0, 1.2fr) minmax(0, 2fr); }

/* comparativa: la columna de Snowlytics, destacada */
.comparativa-marco { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--superficie); }
.comparativa { width: 100%; border-collapse: collapse; }
.comparativa th, .comparativa td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--linea); vertical-align: top; font-size: 15.5px; }
.comparativa thead th { background: var(--pista-negra); font: 500 11px var(--f-dato); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.comparativa thead th:last-child { color: var(--naranja); }
.comparativa tbody th { font: 700 18px/1.1 var(--f-rotulo); text-transform: uppercase; letter-spacing: .04em; width: 22%; }
.comparativa td { color: var(--gris); }
.comparativa td:last-child { color: var(--hielo); background: rgba(255, 107, 26, .06); }
.comparativa tr:last-child th, .comparativa tr:last-child td { border-bottom: 0; }

/* listas */
.lista-check { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lista-check li { position: relative; padding-left: 26px; }
.lista-check li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; border-radius: 2px;
  background: repeating-linear-gradient(180deg, var(--naranja) 0 4px, var(--pista-negra) 4px 8px); box-shadow: 0 0 0 1px var(--linea); }
.chips-dato { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-dato li { color: var(--hielo); border: 1px solid var(--linea); background: var(--superficie); padding: 8px 10px; border-radius: 3px; }

/* preguntas frecuentes */
.preguntas { display: flex; flex-direction: column; gap: 8px; max-width: 820px; }
.preguntas details { border: 1px solid var(--linea); background: var(--superficie); border-radius: var(--radio); }
.preguntas summary { cursor: pointer; padding: 14px 18px; font: 700 19px/1.15 var(--f-rotulo); text-transform: uppercase; letter-spacing: .04em; list-style: none;
  display: flex; justify-content: space-between; gap: 14px; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; color: var(--naranja); font-size: 22px; line-height: 1; }
.preguntas details[open] summary::after { content: "−"; }
.preguntas details p { padding: 0 18px 16px; color: var(--gris); }

/* ventana con una pantalla de la plataforma */
.ventana { margin: 0; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--superficie); box-shadow: var(--sombra); }
.ventana-barra { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--pista-negra); border-bottom: 1px solid var(--linea); }
.ventana-barra i { width: 8px; height: 8px; border-radius: 50%; background: var(--linea); }
.ventana-barra span { margin-left: 8px; font-size: 10.5px; }
.ventana img { display: block; width: 100%; height: auto; }

/* poste ancho (módulos relacionados) */
.poste.poste-ancho { max-width: 520px; }

/* jalones: cuatro pasos */
.ladera:has(> .jalon:nth-child(5)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jalon:nth-child(5) { margin-top: 240px; }

/* formulario */
.formulario { display: flex; flex-direction: column; gap: 14px; }
.formulario .campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.formulario .campo { display: flex; flex-direction: column; gap: 6px; }
.formulario .campo.ancho { grid-column: 1 / -1; }
.formulario .campo span { font: 500 11px var(--f-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.formulario input, .formulario textarea { font: inherit; font-size: 16px; color: var(--hielo); background: var(--fondo); border: 1px solid var(--linea);
  border-radius: 3px; padding: 11px 12px; width: 100%; }
.formulario input:focus, .formulario textarea:focus { outline: none; border-color: var(--naranja); box-shadow: 0 0 0 2px rgba(255, 107, 26, .25); }
.formulario .trampa { position: absolute; left: -9999px; }
.formulario .acepto { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--gris); }
.formulario .acepto input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--naranja); flex: none; }
.formulario .acepto a { color: var(--hielo); text-decoration: underline; }
.formulario .btn { align-self: flex-start; }
.estado-form { min-height: 1.5em; font-weight: 600; }
.estado-form.ok { color: var(--ok); }
.estado-form.mal { color: var(--naranja); }

@media (max-width: 900px) {
  .dos-col, .dos-col.ancha { grid-template-columns: minmax(0, 1fr); }
  .ladera:has(> .jalon:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jalon:nth-child(4), .jalon:nth-child(5) { margin-top: 0; }
}
@media (max-width: 760px) {
  .ladera:has(> .jalon:nth-child(5)) { grid-template-columns: 1fr; }
  .formulario .campos { grid-template-columns: minmax(0, 1fr); }
  .tablero.dos .tablero-cab, .tablero.dos .fila { grid-template-columns: 14px minmax(0, 1fr); }
  .comparativa thead { display: none; }
  .comparativa, .comparativa tbody, .comparativa tr, .comparativa th, .comparativa td { display: block; width: 100%; }
  .comparativa tr { border-bottom: 1px solid var(--linea); padding: 6px 0; }
  .comparativa th, .comparativa td { border: 0; padding: 6px 16px; }
  .comparativa tbody th { width: 100%; padding-top: 12px; }
  .comparativa td::before { content: attr(data-col); display: block; font: 500 10.5px var(--f-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: 2px; }
  .comparativa td:last-child::before { color: var(--naranja); }
}

/* Maquetación de cada página (home, módulo, ROI, demo, dispositivo). Se va
   llenando por fases; los componentes están en componentes.css. */
main { position: relative; z-index: var(--z-contenido); }
.seccion { padding-block: clamp(56px, 8vw, 104px); }
.seccion + .seccion { padding-top: 0; }

/* -- escenario 3D fijo (home y módulos) ---------------------------------------------- */
#escena { position: fixed; inset: 0; z-index: var(--z-escena); pointer-events: none; }
#escena canvas { display: block; width: 100%; height: 100%; }
#respaldo { position: fixed; inset: 0; z-index: var(--z-escena); pointer-events: none; transition: opacity .8s ease; }
#respaldo svg { width: 100%; height: 100%; max-width: none; }
.gl-listo #respaldo { opacity: 0; }
.sin-gl #escena, .sin-gl #rotulos { display: none; }
.sin-gl #respaldo { opacity: 1; }
body.sobre-3d { cursor: pointer; }
.plano { position: relative; z-index: var(--z-contenido); pointer-events: none; }
.plano a, .plano button, .plano .cartel, .plano .solido, .plano .heroe-texto, .plano .bajo-cartel, .plano form { pointer-events: auto; }

/* escenas: un cartel por capa mientras el 3D se construye detrás */
.escena-p { min-height: 125vh; min-height: 125svh; display: flex; align-items: center; }
.escena-p .wrap { width: 100%; }
.heroe { min-height: calc(100vh - var(--cabecera-alto)); min-height: calc(100svh - var(--cabecera-alto)); align-items: flex-end; padding-block: 32px 56px; }
.heroe-texto { max-width: 640px; }
.heroe h1 { font: 800 var(--t-h1)/.9 var(--f-rotulo); text-transform: uppercase; margin: 14px 0 20px; text-shadow: 0 2px 30px rgba(10, 13, 17, .9); }
.heroe h1 em { font-style: normal; color: var(--naranja); }
.heroe .entradilla { max-width: 50ch; margin: 0 0 26px; text-shadow: 0 1px 14px rgba(10, 13, 17, .95); }
.pista-scroll { margin-top: 26px; display: flex; align-items: center; gap: 10px; }
.pista-scroll i { width: 9px; height: 30px; border-radius: 2px; box-shadow: 0 0 0 1px var(--linea);
  background: repeating-linear-gradient(180deg, var(--naranja) 0 10px, var(--pista-negra) 10px 20px); }

/* bloque sólido (IA, módulos, puesta en marcha) sobre la vista general */
.solido { position: relative; padding-block: 220px;
  background: linear-gradient(180deg, rgba(10, 13, 17, 0) 0, rgba(10, 13, 17, .9) 260px, rgba(10, 13, 17, .9) calc(100% - 260px), rgba(10, 13, 17, 0) 100%); }
.bloque { padding-block: clamp(56px, 8vw, 104px) 0; scroll-margin-top: calc(var(--cabecera-alto) + 24px); }
.bloque:first-child { padding-top: 0; }
.bloque-sub { margin: -18px 0 32px; }
.final { min-height: 120vh; min-height: 120svh; display: flex; align-items: flex-end; padding-block: 0 72px; }
.final .wrap { width: 100%; }

@media (max-width: 760px) {
  /* carteles anclados abajo (≤ 45 % del alto) con el 3D visible arriba */
  .escena-p { min-height: 170svh; align-items: stretch; padding-block: 0 16px; }
  .escena-p .wrap { display: flex; flex-direction: column; justify-content: flex-end; }
  .escena-p .cartel { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-height: 45svh; overflow: auto; width: 100%; }
  .escena-p.heroe { min-height: calc(100svh - 56px); align-items: flex-end; padding-block: 0 20px; }
  .heroe-texto { padding: 16px; background: linear-gradient(180deg, rgba(10, 13, 17, .55), rgba(10, 13, 17, .92)); border: 1px solid var(--linea); border-radius: var(--radio); }
  .heroe h1 { font-size: clamp(2.3rem, 11vw, 3rem); margin: 8px 0 12px; }
  .heroe .entradilla { font-size: 15.5px; margin-bottom: 16px; }
  .pista-scroll { display: none; }
  .solido { padding-block: 160px 96px; }
  .final { min-height: 0; padding-block: 48px 32px; }
}

/* -- páginas generales: plano SVG de fondo, cabecera y bloque sólido ------------------ */
.general { position: relative; z-index: var(--z-contenido); }
.general ~ * { position: relative; }
.cabeza { padding-block: clamp(56px, 9vw, 128px) 24px; }
.cabeza h1 { font: 800 clamp(2.4rem, 6vw, 5rem)/.92 var(--f-rotulo); text-transform: uppercase; margin: 14px 0 18px; text-shadow: 0 2px 30px rgba(10, 13, 17, .9); }
.cabeza .entradilla { text-shadow: 0 1px 14px rgba(10, 13, 17, .95); }
.general .solido { padding-block: 120px; }
.final.corto { min-height: 0; padding-block: 40px 72px; }
.placa-t { font: 800 22px/1 var(--f-rotulo); text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.render-cabeza { display: block; width: min(720px, 100%); height: auto; margin: -40px 0 24px auto; }

/* ROI */
.roi-v2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.roi-v2 .cartel { width: 100%; }
.roi-lado { position: sticky; top: calc(var(--cabecera-alto) + 16px); }
.roi-v2 fieldset { border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 14px 16px; margin: 0 0 14px; min-width: 0; }
.roi-v2 legend { padding: 0 6px; color: var(--naranja); }
.roi-bloques { list-style: none; margin: 0 0 10px; padding: 0; }
.roi-bloques li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: 15px; }
.roi-bloques li strong { font: 700 18px var(--f-rotulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.roi-bloques li:target { background: rgba(255, 107, 26, .08); }
.roi-horas { color: var(--gris); font-size: 14px; margin: 0 0 12px; }
.roi-total { display: flex; flex-direction: column; gap: 4px; padding: 14px; background: var(--fondo); border: 1px solid var(--linea); margin-bottom: 14px; }
.roi-total strong { font: 800 clamp(2rem, 5vw, 2.8rem)/1 var(--f-rotulo); color: var(--naranja); font-variant-numeric: tabular-nums; }
.roi-retorno { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin: 14px 0 10px; }
.roi-retorno div { background: var(--superficie); padding: 10px 12px; }
.roi-retorno strong { display: block; font: 700 24px/1 var(--f-rotulo); margin-top: 4px; }
.roi-formula { margin: 10px 0 16px; }
.roi-formula summary { cursor: pointer; }
.roi-formula p { color: var(--gris); font-size: 14px; margin-top: 8px; }

/* dispositivo */
.modelos-v2 { display: flex; flex-direction: column; gap: 16px; }
.modelos-v2 .franja { grid-template-columns: 260px minmax(0, 1fr) auto; }
.modelos-v2 .franja > img { max-width: 260px; }
.colores { display: flex; gap: 8px; }
.colores i { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px var(--linea); display: inline-block; }
.visor3d { position: relative; height: min(70vh, 560px); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); overflow: hidden; }
.visor3d canvas { display: block; width: 100%; height: 100%; }
.visor3d-estado { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }
.visor3d-estado[hidden] { display: none; }
.colores-3d { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.colores-3d button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--superficie); color: var(--hielo);
  border: 1px solid var(--linea); border-radius: 3px; font: 700 14px var(--f-rotulo); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.colores-3d button[aria-pressed="true"] { border-color: var(--naranja); }
.colores-3d i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.galeria-v2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 14px; }
.galeria-v2 img { display: block; width: 100%; height: auto; border: 1px solid var(--linea); border-radius: var(--radio); }

/* producto con fondo transparente: sombra para despegarlo del fondo */
img.producto { background: none; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55)); }
.franja > img.producto { border: 0; }
.visor3d canvas { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.visor3d canvas:active { cursor: grabbing; }
.visor3d canvas:focus-visible { outline: 2px solid var(--naranja); outline-offset: -2px; }
.visor3d-respaldo { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; }
.visor3d canvas ~ .visor3d-respaldo { display: none; }
.visor3d-rotulos { position: absolute; inset: 0; pointer-events: none; }
.visor3d-rotulo { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; padding: 4px 8px; background: rgba(10, 13, 17, .86);
  border: 1px solid var(--linea); border-left: 3px solid var(--naranja); font: 700 13px/1 var(--f-rotulo); letter-spacing: .1em; text-transform: uppercase; }
.visor3d-botones { margin-top: 14px; }
.visor3d-botones .btn[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--naranja); color: var(--naranja); }
.ilustracion { display: block; width: 100%; height: auto; margin-top: 6px; }
img.ilustracion { width: auto; max-width: 100%; max-height: 260px; margin: 6px auto 0; }
.cartel .btn { margin-top: 16px; }
/* rack de carga: foto recortada con sus puntos y fotos de cerca */
.rack-cab { margin-top: 8px; }
.rack-cab img.producto { display: block; width: 100%; height: auto; }
.rack-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.rack-foto { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.rack-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--linea); border-radius: var(--radio); background: #e9ebee; }
.rack-foto.recorte img { object-fit: contain; padding: 12px; background: var(--superficie); }
.rack-foto figcaption { color: var(--gris); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.rack-alquiler { display: grid; gap: 22px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--linea); }
.rack-alquiler .titulo-sub { font: 800 clamp(1.7rem, 3.4vw, 2.6rem)/.95 var(--f-rotulo); text-transform: uppercase; margin: -8px 0 0; text-wrap: balance; }
.rack-alquiler .entradilla { margin: 0; max-width: 60ch; }
.rack-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rack-pasos .cartel h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
@media (max-width: 1000px) { .rack-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rack-pasos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .rack-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.galeria-v2 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.galeria-item { margin: 0; padding: 18px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); display: flex; flex-direction: column; gap: 10px; }
.galeria-item img { border: 0; max-height: 260px; width: auto; max-width: 100%; margin: 0 auto; }
.galeria-v2 img { border: 0; }

/* -- vitrina del dispositivo: despiece guiado al bajar -------------------------------- */
/* Sin 3D (o sin JS) se lee como una lista; con 3D (.activa) el modelo queda fijo
   y cada paso aparece a un lado con una línea hasta su pieza. */
.vitrina { position: relative; z-index: var(--z-contenido); background: #050608; border-block: 1px solid var(--linea); }
.vitrina-fija { position: relative; padding: clamp(56px, 8vw, 104px) 16px; max-width: var(--ancho); margin: 0 auto; }
.vitrina-respaldo { display: block; width: min(420px, 80%); height: auto; margin: 0 auto 24px; }
.vitrina canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vitrina-marca { display: none; }
.vitrina-lineas { display: none; }
.vitrina-intro { max-width: 560px; }
.vitrina-intro h2 { font: 800 clamp(2.2rem, 5vw, 4rem)/.92 var(--f-rotulo); text-transform: uppercase; margin: 12px 0 14px; }
.vitrina-intro p { color: var(--gris); margin: 0; max-width: 46ch; }
.vitrina-baja { display: none; }
.vitrina-pasos { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 32px; }
.vitrina-paso { position: relative; }
.vitrina-icono { width: 20px; height: 20px; fill: none; stroke: var(--hielo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; margin-bottom: 10px; }
.vitrina-num { color: var(--naranja); display: block; margin-bottom: 6px; }
.vitrina-paso h3 { font: 600 clamp(1.7rem, 2.6vw, 2.3rem)/1 var(--f-texto, inherit); letter-spacing: -.02em; margin: 0 0 10px; color: var(--hielo); }
.vitrina-paso p { color: var(--gris); font-size: 15px; line-height: 1.5; margin: 0; max-width: 34ch; }

.vitrina.activa { height: calc((var(--pasos) + 2.6) * 100svh); border: 0; }
.vitrina.activa .vitrina-fija { position: sticky; top: var(--cabecera-alto); height: calc(100svh - var(--cabecera-alto)); max-width: none; margin: 0; padding: 0; overflow: hidden; }
.vitrina.activa .vitrina-respaldo { display: none; }
.vitrina.activa .vitrina-marca { display: block; position: absolute; left: 0; top: 50%; margin: 0; white-space: nowrap; pointer-events: none;
  font: 800 clamp(7rem, 24vw, 22rem)/.8 var(--f-rotulo); text-transform: uppercase; color: var(--hielo); letter-spacing: -.01em;
  transform: translate(100vw, -50%); will-change: transform; }
.vitrina.activa canvas { z-index: 1; }
.vitrina.activa .vitrina-lineas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.vitrina-lineas line { stroke: rgba(232, 238, 243, .55); stroke-width: 1; }
.vitrina-lineas circle { fill: var(--naranja); }
.vitrina.activa .vitrina-intro { position: absolute; z-index: 3; left: max(24px, 6vw); top: 12%; will-change: opacity, transform; }
.vitrina.activa .vitrina-baja { display: inline-block; margin-top: 18px; color: var(--naranja); font-size: 16px; }
.vitrina.activa .vitrina-pasos { margin: 0; display: block; }
.vitrina.activa .vitrina-paso { position: absolute; z-index: 3; width: min(340px, 30vw); opacity: 0; will-change: opacity, transform; }
.vitrina.activa .vitrina-paso[data-lado="izq"] { left: max(24px, 6vw); top: 16%; }
.vitrina.activa .vitrina-paso[data-lado="der"] { right: max(24px, 6vw); bottom: 14%; }

@media (max-width: 760px) {
  .vitrina.activa .vitrina-intro { left: 16px; right: 16px; top: auto; bottom: 24px; }
  .vitrina.activa .vitrina-paso, .vitrina.activa .vitrina-paso[data-lado] { left: 16px; right: 16px; top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: auto;
    padding: 14px 16px; background: rgba(5, 6, 8, .82); border: 1px solid var(--linea); border-radius: var(--radio); }
  .vitrina-paso h3 { font-size: 1.6rem; }
  .vitrina.activa .vitrina-marca { top: 14%; }
}

/* -- estante de módulos: una parada por área con el cubo-estación en el centro -------- */
/* Sin 3D se lee como lista de áreas; con 3D (.activa) queda fijo al bajar y las
   paradas se relevan a los lados del cubo. */
.estante { position: relative; z-index: var(--z-contenido); background: #07090c; border-block: 1px solid var(--linea); }
.estante-fija { position: relative; max-width: var(--ancho); margin: 0 auto; padding: clamp(48px, 7vw, 96px) 16px; }
.estante canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.estante-paradas { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px; }
.parada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: start; }
.parada-num { color: var(--naranja); display: block; margin-bottom: 10px; }
.parada-izq h2 { font: 800 clamp(2rem, 4.2vw, 3.6rem)/.92 var(--f-rotulo); text-transform: uppercase; margin: 0 0 14px; }
.parada-izq p { color: var(--gris); margin: 0; max-width: 40ch; }
.parada-sig { display: none; }
.parada-der > .mono { display: block; margin-bottom: 10px; }
.parada-mods { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.parada-mods a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea);
  color: var(--hielo); text-decoration: none; }
.parada-mods a:hover .pm-nombre, .parada-mods a:focus-visible .pm-nombre { color: var(--naranja); }
.pm-nombre { font: 700 16px/1.2 var(--f-rotulo); letter-spacing: .06em; text-transform: uppercase; }
.pm-titular { grid-column: 1; color: var(--gris); font-size: 13.5px; line-height: 1.35; margin-top: 2px; }
.pm-flecha { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--naranja); }
.estante-marcas { display: none; }

.estante.activa { height: calc((var(--paradas) + .8) * 100svh); border: 0; }
.estante.activa .estante-fija { touch-action: pan-y; position: sticky; top: var(--cabecera-alto); height: calc(100svh - var(--cabecera-alto)); max-width: none; margin: 0; padding: 0; overflow: hidden; }
.estante.activa .estante-paradas { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.estante.activa .parada { position: absolute; inset: 0; display: block; visibility: hidden; }
.estante.activa .parada-izq, .estante.activa .parada-der { position: absolute; top: 50%; width: min(330px, 26vw); transform: translateY(-50%); }
.estante.activa .parada-izq { left: max(24px, 5vw); }
.estante.activa .parada-der { right: max(24px, 5vw); }
.estante.activa .parada.viva { visibility: visible; }
.estante.activa .parada.viva a { pointer-events: auto; }
.estante.activa .parada-sig { display: block; margin-top: 36px; font: 800 clamp(1.4rem, 2.4vw, 2rem)/.95 var(--f-rotulo); text-transform: uppercase; color: rgba(232, 238, 243, .16); }
.estante.activa .estante-marcas { display: flex; flex-direction: column; gap: 8px; position: absolute; z-index: 2; right: 14px; top: 50%; transform: translateY(-50%); }
.estante-marcas i { width: 3px; height: 18px; background: var(--linea); border-radius: 2px; transition: background .3s; }
.estante-marcas i.on { background: var(--naranja); }

@media (max-width: 900px) {
  .parada { grid-template-columns: minmax(0, 1fr); }
  /* bajo el cubo: título, texto y módulos juntos, centrados en el espacio que queda
     (los márgenes automáticos reparten el sobrante sin tapar el cubo si falta sitio) */
  .estante.activa .parada { top: 46%; display: flex; flex-direction: column; gap: 20px;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .estante.activa .parada-izq, .estante.activa .parada-der { position: static; width: auto; transform: none; }
  .estante.activa .parada-izq { margin-top: auto; }
  .estante.activa .parada-der { margin-bottom: auto; }
  .estante.activa .parada-izq h2 { font-size: clamp(2.1rem, 9.5vw, 2.8rem); margin-bottom: 10px; }
  .estante.activa .parada-izq p { font-size: clamp(15.5px, 4.3vw, 17.5px); line-height: 1.5; }
  .estante.activa .parada-der > .mono { display: none; }
  .estante.activa .parada-mods { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
  .estante.activa .parada-mods a { display: inline-block; padding: 10px 13px; border: 1px solid var(--linea); border-radius: 3px; background: rgba(7, 9, 12, .8); }
  .estante.activa .pm-titular, .estante.activa .pm-flecha { display: none; }
  .estante.activa .pm-nombre { font-size: 14.5px; }
  .estante.activa .parada-sig { display: none; }
  .estante.activa .estante-marcas { right: 8px; top: 22%; }
}

/* textos legales */
.legal h2 { font: 800 26px/1 var(--f-rotulo); text-transform: uppercase; margin: 28px 0 10px; }
.legal p { color: var(--gris); max-width: 75ch; }

@media (max-width: 900px) {
  .roi-v2 { grid-template-columns: minmax(0, 1fr); }
  .roi-lado { position: static; }
  .modelos-v2 .franja { grid-template-columns: minmax(0, 1fr); }
  .render-cabeza { margin: 0 0 16px; }
  .galeria-v2 { grid-template-columns: minmax(0, 1fr); }
  .visor3d { height: 56vh; }
}

/* galería de componentes (no se publica) */
.galeria h2.g { font: 700 13px var(--f-dato); letter-spacing: .14em; text-transform: uppercase; color: var(--naranja);
  border-bottom: 1px solid var(--linea); padding-bottom: 8px; margin: 56px 0 22px; }
.galeria .dos-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: start; }