/* ═══════════════════════════════════════════════════════════════════════════
   1nSecurity — maquetación
   ───────────────────────────────────────────────────────────────────────────
   Todo lo que se maqueta está en este archivo, en una sola página: cabecera,
   escenario, bandas de contenido y pie. La navegación no desaparece en móvil:
   se recorre en horizontal para que siga valiendo sin hamburguesa.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cabecera ────────────────────────────────────────────────────────────── */
/* La cabecera no pinta fondo: lo que flota es la nav, en forma de píldora.
   Así la escena se ve por detrás y el bloque de enlaces sigue legible. El
   alto real lo mide main.js y lo deja en --cab, que es lo que cede la
   escena, el índice pegajoso y el desplazamiento a los destinos. */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: 0.85rem;
  /* Al bajar, movimiento.js escribe --cab-y: la barra se retira por arriba y
     vuelve en cuanto se sube. Un transform sobre un sticky no mueve el flujo,
     así que ni la barra de avance ni el resto de la página se enteran. */
  transform: translateY(var(--cab-y, 0px));
  transition: transform 0.35s var(--curva);
}
.cabecera__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 56px;
  padding: 0.4rem 0.4rem 0.4rem 1rem;
  max-width: min(960px, 100% - 1.5rem);
  margin-inline: auto;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(14px) saturate(1.25);
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.cabecera[data-si] .cabecera__nav {
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  border-color: var(--line);
  box-shadow: 0 22px 44px -34px rgb(0 0 0 / 0.85);
}

.marca { display: inline-flex; align-items: center; min-height: 44px; }
.marca__nombre {
  font-family: var(--marca);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
}
.marca__acento { font-weight: 800; color: var(--accent); }

/* Los enlaces van en su propia fila en móvil (recorrible en horizontal) y
   pasan a la píldora en escritorio. margin-left:auto en ambos lados reparte
   el aire sobrante: marca a la izquierda, enlaces y acciones a la derecha. */
.cabecera__enlaces {
  order: 3;
  width: 100%;
  display: flex;
  gap: 0.15rem;
  overflow-x: auto;
  padding-top: 0.1rem;
  scrollbar-width: none;
}
.cabecera__enlaces::-webkit-scrollbar { display: none; }
.cabecera__enlaces a {
  display: block;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text3);
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.cabecera__enlaces a:hover { color: var(--text); background: var(--panel2); }
.cabecera__enlaces a[aria-current] { color: var(--accent); background: var(--accent-10); }

.cabecera__acciones {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 48rem) {
  .cabecera__nav { flex-wrap: nowrap; }
  .cabecera__enlaces { order: 0; width: auto; margin-left: auto; overflow: visible; padding-top: 0; }
}

/* Toggle de tema. */
.tema__btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radio);
  background: var(--panel);
  color: var(--text2);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tema__btn:hover { color: var(--accent); border-color: var(--accent); }
.tema__btn svg { width: 16px; height: 16px; }
/* El icono propuesto según el tema actual: en oscuro se ofrece el sol, en
   claro se ofrece la luna. Como la marca del SVG está inline, CSS las muestra
   o las oculta sin tocar el DOM. */
.tema__btn .icono-sol { display: block; }
.tema__btn .icono-luna { display: none; }
:root[data-tema="claro"] .tema__btn .icono-sol { display: none; }
:root[data-tema="claro"] .tema__btn .icono-luna { display: block; }

/* Móvil: la píldora se parte en dos filas —marca y acciones arriba, enlaces
   con recorrido horizontal abajo— y su radio baja para que dos filas quepan. */
@media (max-width: 47.99rem) {
  .cabecera { padding-top: 0.6rem; }
  .cabecera__nav { border-radius: 1.5rem; padding: 0.4rem 0.5rem 0.5rem; }
  .cabecera__acciones .boton { min-height: 40px; padding: 0.5rem 0.9rem; font-size: 0.75rem; }
}

/* ── Barra de avance ───────────────────────────────────────────────────────── */
/* Dos píxeles fijos arriba del todo, por encima de la cabecera (z-index 70
   frente a 50). No hay texto, no hay semántica y no intercepta el ratón:
   su único dibujo es scaleX(--p), que mueve movimiento.js con la posición
   de la ventana. Sin JS se queda a 0 y es una línea que no se ve. */
.avance {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 2px;
  z-index: 70;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  pointer-events: none;
}

/* ── Escena ───────────────────────────────────────────────────────────────── */
/* El hero se sube bajo la cabecera (margen negativo igual a --cab) para que la
   píldora flote encima. Titular abajo-izquierda y párrafo + acciones a la
   derecha, alineados por la base; la consola va a ancho completo debajo. */
.escena {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(-1 * var(--cab));
  padding-top: calc(var(--cab) + clamp(2.25rem, 6vh, 4.5rem));
  padding-bottom: clamp(4rem, 8vh, 6.5rem);
  background: linear-gradient(180deg, #101114 0%, #0a0b0d 100%);
}
/* El lienzo mide más que la escena y sobresale por arriba: es el margen que
   movimiento.js gasta con --py mientras se baja, un 12 % de la altura del
   escenario como mucho. Al ser un <canvas>, lo que manda es su bitmap, y
   rain.js lo recalcula desde getBoundingClientRect(): al crecer la caja el
   búfer crece con ella y las gotas no se estiran. Con las medidas actuales
   la capa pasa de -15 % a 115 %, así que ese 12 % nunca deja descubierto
   un borde de la escena. */
.escena__lluvia {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  z-index: -2;
  opacity: 0.34;
  transform: translate3d(0, var(--py, 0px), 0);
}
/* La lluvia no se apaga en modo claro porque la escena es oscura en los dos
   modos: su degradado está escrito aquí, no sale de un token, y el titular va
   en blanco sobre él. Apagarla dejaba el arranque del sitio sin un solo
   movimiento en cuanto el sistema venía en claro, que es la mitad de las
   visitas. */

.escena__fila {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
}
.escena__titulo {
  font-size: clamp(2.5rem, 1rem + 5vw, 4.75rem);
  line-height: 0.99;
  font-weight: 600;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.escena__lado {
  display: grid;
  gap: clamp(1.25rem, 3vh, 1.75rem);
  align-content: end;
}
.escena__entrada {
  max-width: 54ch;
  color: var(--text3);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
}
.escena__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* La consola ocupa todo el ancho del marco, no una columna */
.term--escena { margin-top: clamp(2rem, 5vh, 3.25rem); max-height: none; }
.term--escena .term__pantalla { height: clamp(9rem, 22vh, 13rem); }

/* ── Hoja: el papel montado sobre la escena ───────────────────────────────── */
.hoja {
  position: relative;
  z-index: 1;
  margin-top: -2.25rem;
  padding-bottom: clamp(3rem, 6vh, 4.5rem);
  border-radius: 2.5rem 2.5rem 0 0;
  background-color: var(--bg);
  background-image: var(--bg-pattern);
}

/* ── Rótulo de sección: punto naranja + texto en versalitas ───────────────── */
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text3);
}
.rotulo::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.acento { color: var(--accent); }
.escena .acento { text-shadow: 0 0 28px var(--glow), 0 0 60px var(--accent-18); }

/* ── Pruebas: tres datos, cada uno con su filete ───────────────────────────── */
.pruebas {
  display: grid;
  gap: 1.25rem;
  padding-block: clamp(2rem, 4.5vh, 3rem);
}
/* El filete de arriba no es un border: es un pseudo-elemento que siempre
   está, para que sin JS la lista siga teniendo sus separaciones. Con
   data-revela effects.css lo deja a scaleX(0) y lo despliega al entrar;
   la regla de abajo es por tanto la misma en los dos mundos. */
.pruebas li {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding-top: 0.9rem;
}
.pruebas li::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--line-strong);
}
.pruebas b {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
.pruebas span { font-size: 0.875rem; color: var(--text3); }

/* ── Fila de aviso final: texto a un lado, botón al otro ──────────────────── */
.llamada {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
}
.llamada p { margin: 0; max-width: 52ch; color: var(--text3); }
.llamada b { color: var(--text); font-weight: 600; }
/* Si la llamada abre la banda, no lleva aire propio: ya lo da la banda. */
.llamada:first-child { margin-top: 0; }

/* ── Bandas ──────────────────────────────────────────────────────────────── */
.banda {
  padding-block: clamp(3rem, 7vh, 5.25rem);
  border-top: 1px solid var(--line);
}
.banda--altura { background: var(--bg2); }
.banda--contacto { background: linear-gradient(180deg, var(--bg2), var(--bg)); }

.banda + .banda { border-top-color: var(--line); }

/* La primera banda bajo la escena no lleva filete arriba: ya está el
   contenido anterior marcando el corte. */
.banda--primera { border-top: 0; padding-top: 2.5rem; }
.hoja .banda--primera { padding-top: clamp(2rem, 5vh, 3.25rem); }

/* ── Bloques de contenido ─────────────────────────────────────────────────── */
/* Presentación a dos columnas: el asunto a la izquierda, el desarrollo a la
   derecha. En móvil se apilan, con el asunto encima. */
.intro { display: grid; gap: 1rem 3rem; margin-top: 1.25rem; }
.intro p {
  max-width: 68ch;
  color: var(--text3);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
}
@media (min-width: 60rem) {
  .intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* Índice pegajoso a la izquierda, bloques a la derecha */
.pegajoso {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  margin-top: clamp(2rem, 5vh, 3rem);
}
.pegajoso__indice ul { display: grid; gap: 0.15rem; }
.pegajoso__indice a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0 0.4rem 0.75rem;
  border-left: 2px solid transparent;
  font-size: 0.9375rem;
  color: var(--text4);
  transition: color 0.15s, border-color 0.15s;
}
.pegajoso__indice a::before {
  content: attr(data-n);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--line-strong);
}
.pegajoso__indice a:hover { color: var(--text2); }
.pegajoso__indice a[aria-current="location"] { color: var(--accent); border-left-color: var(--accent); }
.pegajoso__indice a[aria-current="location"]::before { color: var(--accent); }
@media (min-width: 60rem) {
  .pegajoso { grid-template-columns: 13.5rem minmax(0, 1fr); align-items: start; }
  .pegajoso__indice { position: sticky; top: calc(var(--cab) + 1.5rem); }
}

/* ── Capas del alcance ────────────────────────────────────────────────────── */
.capas { display: grid; gap: 1.25rem; }
.alcance__item {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--panel);
  transition: border-color 0.2s, background 0.2s;
}
.alcance__item:hover { border-color: var(--line-strong); background: var(--panel2); }
/* Número de capa en contorno, de fondo. Fuera del h3: terminal.js lee el
   título como nombre de capa y no debe arrastrar el número. */
.capas .alcance__item::before {
  content: attr(data-capa);
  position: absolute;
  top: 0.35rem;
  right: 1rem;
  font-family: var(--mono);
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  pointer-events: none;
}
.alcance__item h3 {
  max-width: calc(100% - 4.5rem);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.capas .alcance__item > p { max-width: 62ch; font-size: 0.9375rem; color: var(--text2); }

/* ── Banda oscura: sectores ───────────────────────────────────────────────── */
/* En los dos modos se queda en oscuro; sólo cambian los tokens, el fondo lo
   pinta aquí con el shorthand para no pisar el degradado. */
.banda--oscura {
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Reparto a dos columnas: entrada a un lado, lista al otro */
.partida { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
.partida__lado { display: grid; gap: 1.1rem; align-content: start; }
.partida__lado .titulo { max-width: 16ch; }
.partida__lado .banda__entrada { max-width: 44ch; }
@media (min-width: 60rem) {
  .partida { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
}

.lista-sector { display: grid; align-content: start; }
/* El filete superior es un pseudo-elemento y no un border: effects.css sólo
   puede dibujarlo con transform si existe siempre. Sin JS queda como el
   border de siempre; la última fila sí conserva el suyo de abajo, que cierra
   la lista. */
.lista-sector > li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem 1rem;
  padding: 1.1rem 0;
}
.lista-sector > li::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--line);
}
.lista-sector > li:last-child { border-bottom: 1px solid var(--line); }
.lista-sector__n {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.lista-sector b {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}
/* La descripción va bajo el título, no bajo el número: sin esto la celda
   automática la metería en la columna del índice. */
.lista-sector > li > p { grid-column: 2; font-size: 0.9375rem; color: var(--text3); }
.lista-sector .etiquetas { grid-column: 2; margin-top: 0.15rem; gap: 0.4rem; }

/* ── Lista de servicios: cada fila sale con su flecha ─────────────────────── */
.features { display: grid; margin-top: clamp(1.75rem, 4vh, 2.5rem); }
.features > li {
  display: grid;
  /* La columna de la flecha es fija y no `auto`: con puerta el pseudo-elemento
     empieza vacío y con `auto` el texto entero se desplazaría un ancho de
     glifo en el instante en que la flecha aparece. */
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.4rem 1.1rem;
  padding: clamp(1.25rem, 3vh, 1.75rem) 0.75rem;
  margin-inline: -0.75rem;
  border-top: 1px solid var(--line);
  transition: background 0.2s;
}
.features > li:last-child { border-bottom: 1px solid var(--line); }
.features > li:hover { background: linear-gradient(90deg, var(--accent-10), transparent 60%); }
.features > li::before {
  content: "-->";
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--accent);
}
.features h3 { grid-column: 2; font-size: clamp(1.25rem, 2.6vw, 1.75rem); letter-spacing: -0.025em; }
.features p { grid-column: 2; max-width: 66ch; color: var(--text3); }
.features .etiquetas { grid-column: 2; margin-top: 0.25rem; }

/* ── Llamada final ────────────────────────────────────────────────────────── */
.cta {
  position: relative;
  z-index: 1;
  margin-top: -2.25rem;
  border-radius: 2.5rem 2.5rem 0 0;
  padding-block: clamp(3.5rem, 8vh, 6rem);
  background: linear-gradient(180deg, #0a0b0d, #101114);
}
.cta .titulo { max-width: 22ch; }
.cta .banda__entrada { max-width: 58ch; }
.cta__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ── Rejillas y tarjetas ─────────────────────────────────────────────────── */
/* La única rejilla que queda en la portada es .features: el bloque plano que
   la sigue ("Con qué no trabajamos") no debe estirarse hasta el ancho del
   marco, que en un texto de tres líneas se lee como una equivocación. */
.features + .bloque { margin-top: clamp(1.75rem, 4vh, 2.5rem); max-width: 68ch; }

.tarjeta, .bloque {
  position: relative;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radio);
  background: var(--panel);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.tarjeta:hover, .bloque:hover { border-color: var(--line-strong); background: var(--panel2); }
/* Filete naranja al pasar el cursor: el mismo guiño del botón */
.tarjeta::after, .bloque::after {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: -1px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.28s ease;
}
.tarjeta:hover::after, .bloque:hover::after { width: calc(100% + 2px); }
.tarjeta h3, .bloque h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}
.tarjeta p, .bloque p { font-size: 0.9375rem; color: var(--text2); }

.bloque--plano { background: transparent; }
.bloque--plano:hover { background: transparent; border-color: var(--line); }
.bloque__nota { margin-top: 0.35rem; font-size: 0.8125rem; color: var(--text3); }

/* ── Consola ──────────────────────────────────────────────────────────────── */
.term {
  display: grid;
  min-width: 0;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  max-height: 24rem;
  border: 1px solid var(--line);
  border-radius: var(--radio);
  background: var(--panel);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.75rem;
}
.term__barra {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
  background: rgb(255 255 255 / 0.015);
}
.term__punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.term__titulo {
  font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text3);
}
.term__pantalla {
  min-width: 0;
  height: 11rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.7rem 0.75rem;
  line-height: 1.55;
  color: var(--text2);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.term__pantalla::-webkit-scrollbar { width: 7px; }
.term__pantalla::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
.t-fila { white-space: pre-wrap; overflow-wrap: anywhere; }
.t-fila--eco { color: var(--text); }
.t-fila--eco::before { content: "visitante@1nsecurity:~$ "; color: var(--accent); }
.t-fila--titulo { color: var(--accent); }
.t-fila--tenue { color: var(--text3); }
.t-fila--aviso { color: var(--accent-light); }
.t-fila--dato { color: var(--text); }
.t-fila--dato::before { content: "  ▸ "; color: var(--accent); }
.term__linea {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border-top: 1px solid var(--line);
  background: rgb(0 0 0 / 0.25);
}
:root[data-tema="claro"] .term__linea { background: rgb(0 0 0 / 0.03); }
.term__prompt { font-size: 0.6875rem; color: var(--accent); white-space: nowrap; }
.term__entrada {
  flex: 1; min-width: 0; background: none; border: 0; padding: 0.15rem 0;
  font-size: 0.75rem; caret-color: var(--accent); color: var(--text);
}
.term__entrada:focus { outline: none; }
.term__enviar {
  background: none; border: 0; color: var(--text3); cursor: pointer;
  padding: 0.2rem 0.3rem; transition: color 0.15s;
}
.term__enviar:hover { color: var(--accent); }
.term__atajos {
  min-width: 0;
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--line);
  background: rgb(0 0 0 / 0.2);
}
:root[data-tema="claro"] .term__atajos { background: rgb(0 0 0 / 0.03); }
.term__atajos button {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line); border-radius: 2px;
  background: transparent; color: var(--text3);
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.04em;
  cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.term__atajos button:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-10); }
.term__atajos button:focus-visible { outline-offset: 1px; }
.term__ayuda {
  min-width: 0;
  padding: 0.45rem 0.75rem 0.55rem;
  border-top: 1px solid var(--line);
  font-size: 0.625rem; color: var(--text3);
  background: rgb(0 0 0 / 0.25);
}
:root[data-tema="claro"] .term__ayuda { background: rgb(0 0 0 / 0.03); }
@media (max-width: 30rem) { .term__ayuda { display: none; } }

/* ── Alcance ─────────────────────────────────────────────────────────────── */
.alcance { display: grid; gap: 1.5rem 2.5rem; margin-top: 2.5rem; }
.alcance__item { display: grid; gap: 0.4rem; align-content: start; }
.alcance__cabeza { display: flex; align-items: baseline; gap: 0.6rem; }
.alcance__n { font-family: var(--mono); font-size: 0.75rem; color: var(--accent); letter-spacing: 0.06em; }
.alcance h3 { font-size: 1.0625rem; font-weight: 600; }
.alcance p { font-size: 0.9375rem; color: var(--text2); max-width: 46ch; }
.alcance__controles {
  font-family: var(--mono); font-size: 0.6875rem !important;
  color: var(--text3) !important; letter-spacing: 0.04em;
}
.alcance__cruza { font-size: 0.8125rem !important; color: var(--text3) !important; }
.alcance__cruza span {
  font-family: var(--mono); font-size: 0.6875rem;
  color: var(--accent); letter-spacing: 0.08em;
  text-transform: uppercase; margin-right: 0.4rem;
}
.alcance__cruza abbr {
  font-family: var(--mono); font-size: 0.6875rem;
  border: 1px solid var(--line); border-radius: 2px;
  padding: 0.1rem 0.35rem; color: var(--text2);
  text-decoration: none; cursor: help; border-bottom: none;
}
.recorrido {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem; color: var(--text2); max-width: 74ch;
}
.recorrido b { color: var(--text); font-weight: 600; }

/* ── Fases ───────────────────────────────────────────────────────────────── */
/* El riel es un carril horizontal que se dibuja sobre las cinco fases: sin
   puerta es un filete fijo que sólo ocupa los 1,5 rem de aire que separa el
   encabezado del ol, con puerta effects.css lo despliega de izquierda a
   derecha cuando el grupo entra. Por eso el ol no lleva margen propio: el
   aire ya lo paga el padding del riel. */
.fases__riel {
  position: relative;
  margin-top: clamp(1.5rem, 3vh, 2rem);
  padding-top: 1.5rem;
}
.fases__riel::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--line));
}
.fases { display: grid; gap: 1rem; margin-top: 0; }
.fases li {
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radio);
  background: var(--panel);
  display: grid;
  gap: 0.4rem;
}
.fases b { font-family: var(--mono); font-size: 0.75rem; color: var(--accent); }
.fases h3 { font-size: 1rem; font-weight: 600; }
.fases p { font-size: 0.875rem; color: var(--text2); }
.fases__dur {
  font-family: var(--mono); font-size: 0.6875rem;
  color: var(--text3); letter-spacing: 0.1em; text-transform: uppercase;
}

/* ── Contacto / formulario ─────────────────────────────────────────────────── */
.contacto { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.ficha { display: grid; gap: 0.9rem; margin-top: 2rem; }
/* La barra lateral de cada fila es un pseudo-elemento y no un border-left:
   effects.css la levanta con scaleY y sólo puede hacerlo si existe siempre.
   Sin puerta queda clavada, igual que el border de antes. */
.ficha > div {
  position: relative;
  padding-left: 0.9rem;
}
.ficha > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line-strong);
  transition: background 0.2s;
}
.ficha > div:hover::before { background: var(--accent); }
.ficha dt {
  font-family: var(--mono); font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--text3);
}
.ficha dd { font-size: 0.9375rem; color: var(--text); margin-top: 0.25rem; }
.ficha a { border-bottom: 1px solid var(--line-strong); }
.ficha a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.contacto__urgencia { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--text3); }
.contacto__urgencia b { color: var(--accent); font-family: var(--mono); }

.formulario {
  display: grid; gap: 1rem; grid-template-columns: 1fr;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  background: var(--panel);
}
.campo { display: grid; gap: 0.35rem; }
.campo--ancho { grid-column: 1 / -1; }
.campo label {
  font-family: var(--mono); font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text3);
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radio);
  background: var(--bg);
  color: var(--text);
  font: inherit; font-size: 0.9375rem;
  padding: 0.7rem 0.85rem;
  transition: border-color 0.15s, background 0.15s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--accent);
}
.campo textarea { resize: vertical; min-height: 110px; }
.formulario .privacidad { font-size: 0.8125rem; color: var(--text3); }
.formulario .aviso { font-size: 0.8125rem; color: var(--accent-light); }
.formulario__pie { font-size: 0.8125rem; color: var(--accent-light); }

/* ── Pie ──────────────────────────────────────────────────────────────────── */
/* Siempre oscuro: en modo claro es el cierre que sostiene la página. El
   redondeo superior y el margen negativo lo montan sobre la banda clara que
   lo precede; en la portada eso ya lo hace la llamada final. */
.pie {
  position: relative;
  z-index: 1;
  margin-top: -2.25rem;
  border-radius: 2.5rem 2.5rem 0 0;
  background: var(--bg);
  padding-block: clamp(2.5rem, 5vh, 4rem) 2rem;
  color: var(--text3);
  font-size: 0.875rem;
}
body.es-inicio .pie { margin-top: 0; border-radius: 0; border-top: 1px solid var(--line); }
.pie__caja { display: grid; gap: 2rem; }
.pie__marca .marca__nombre { font-size: 1.5rem; }
.pie__desc { margin-top: 0.6rem; max-width: 34ch; font-size: 0.875rem; color: var(--text2); }
.pie__estado {
  display: flex; align-items: center; gap: 0.45rem;
  margin-top: 1rem;
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text3);
}
.pie__punto {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.pie__col h2 {
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text3);
  margin-bottom: 0.9rem;
}
.pie__col ul { list-style: none; display: grid; gap: 0.5rem; }
.pie__col li { font-size: 0.875rem; color: var(--text2); }
.pie__col a:hover { color: var(--accent); }

.pie__abajo {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1.25rem; margin-top: 2.25rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.06em;
  color: var(--text4);
}

/* ── WhatsApp flotante ───────────────────────────────────────────────────── */
.flotante {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  z-index: 60;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--panel2);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--text);
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s, background 0.2s;
}
.flotante svg { width: 30px; height: 30px; fill: currentColor; }
.flotante:hover { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 28px -8px var(--accent-35); }
.flotante__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 39.99rem) {
  body { padding-bottom: 3.25rem; }
  .flotante {
    left: 0; right: 0; bottom: 0;
    width: auto; height: 3.25rem;
    border-radius: 0; border-inline: 0; border-bottom: 0;
    grid-template-columns: auto 1fr;
    place-content: center;
    gap: 0.6rem;
    background: var(--panel2);
    color: var(--btn-text);
  }
  .flotante::before { content: ""; display: none; }
  .flotante svg { width: 22px; height: 22px; justify-self: end; }
  .flotante__texto {
    position: static; width: auto; height: auto; overflow: visible;
    clip: auto;
    font-family: var(--sans); font-weight: 600; font-size: 0.8125rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
  }
}

/* ——— Escalones de adaptación ——— */
@media (min-width: 40rem) {
  .pruebas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .formulario { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48rem) {
  .alcance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contacto { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .pie__caja { grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
}
@media (min-width: 60rem) {
  .escena__fila { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4rem); }
}
@media (min-width: 75rem) {
  .fases { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .term { max-height: 21rem; }
}