/* Centinela · portada pública. Colores: marca/tokens-v1.css (los escribe el build del Manual de Marca v1.0).
   🔴 Esta página no lleva ningún dato ni pide nada privado. Sin terceros y sin estilos en línea. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/marca/fuentes/inter-var.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/marca/fuentes/jetbrainsmono-700.woff2") format("woff2"); }

:root { color-scheme: dark; --ancho: 1180px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ce-noche); color: var(--ce-papel); font: 17px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--ce-alba); }
:focus-visible { outline: 3px solid var(--ce-destello); outline-offset: 3px; border-radius: 8px; }
.saltar { position: absolute; left: 12px; top: -60px; background: var(--ce-papel); color: var(--ce-tinta); padding: 8px 14px; border-radius: 8px; z-index: 50; }
.saltar:focus { top: 12px; }

.barra { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 20px; background: linear-gradient(var(--ce-noche), rgba(7, 11, 20, 0)); }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--ce-papel); text-decoration: none; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: 18px; }
.marca svg { width: 34px; height: 34px; }

.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 20px; border-radius: 12px; font-weight: 650;
  text-decoration: none; font-size: 16px; border: 2px solid transparent; }
.boton-marca { background: var(--ce-faro-hondo); color: #FFFFFF; }
.boton-marca:hover { background: var(--ce-faro-oscuro); }
.boton-borde { border-color: var(--ce-ronda); color: var(--ce-papel); }
.boton-borde:hover { border-color: var(--ce-destello); }
.boton-claro { min-height: 40px; padding: 7px 16px; background: rgba(247, 249, 252, .08); color: var(--ce-papel); border-color: var(--ce-ronda); }
.boton-claro:hover { border-color: var(--ce-destello); }

/* ── Héroe en capas ─────────────────────────────────────── */
.heroe { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; }
.capas { position: absolute; inset: 0; }
.capa { position: absolute; inset: -6% 0 0; width: 100%; height: 106%; object-fit: cover; object-position: 70% 100%; will-change: transform; }
.heroe::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 11, 20, .88) 0%, rgba(7, 11, 20, .55) 42%, rgba(7, 11, 20, 0) 70%); }
.heroe-texto { position: relative; z-index: 2; width: min(var(--ancho), 100%); margin: 0 auto; padding: 120px 20px 80px; }
.antetitulo { margin: 0 0 10px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ce-destello); }
h1 { margin: 0; font-size: clamp(42px, 7vw, 84px); line-height: 1.02; letter-spacing: -.03em; font-weight: 800; max-width: 11ch; }
.entrada { margin: 20px 0 0; max-width: 34em; font-size: clamp(17px, 2vw, 20px); color: var(--ce-luna); }
.acciones { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 0; }

/* ── Recorrido (ScrollWorld): escenario fijo y paradas que pasan ─────────── */
.recorrido { position: relative; padding: 100px 20px 40px; background: var(--ce-noche); }
.recorrido-cab { width: min(var(--ancho), 100%); margin: 0 auto 30px; }
h2 { margin: 0; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; letter-spacing: -.02em; }
.recorrido-cuerpo { width: min(var(--ancho), 100%); margin: 0 auto; }
.paradas { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.parada { background: var(--ce-garita); border: 1px solid var(--ce-ronda); border-radius: 18px; padding: 0 0 22px; overflow: hidden; }
.parada-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.parada > :not(img) { margin-left: 22px; margin-right: 22px; }
.parada-n { margin-top: 18px; margin-bottom: 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; color: var(--ce-destello); letter-spacing: .12em; }
.parada h3 { margin-top: 4px; margin-bottom: 6px; font-size: 26px; letter-spacing: -.01em; }
.parada p:last-child { margin-bottom: 0; color: var(--ce-luna); }
.escenario { display: none; }

@media (min-width: 900px) {
  .js .recorrido-cuerpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; }
  .js .escenario { display: block; position: sticky; top: 12vh; height: 76vh; order: 2; border-radius: 22px; overflow: hidden; border: 1px solid var(--ce-ronda); }
  .js .escena { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; opacity: 0; transition: opacity .6s ease, transform 1.2s ease; transform: scale(1.04); }
  .js .escena.activa { opacity: 1; transform: none; }
  .js .paradas { gap: 0; }
  .js .parada { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; background: none; border: 0; border-left: 3px solid var(--ce-ronda);
    padding: 0 0 0 26px; border-radius: 0; transition: border-color .4s ease; }
  .js .parada h3 { color: var(--ce-luna); transition: color .4s ease; }
  .js .parada.activa { border-left-color: var(--ce-faro); }
  .js .parada.activa h3 { color: var(--ce-papel); }
  .js .parada-img { display: none; }
  .js .parada > :not(img) { margin-left: 0; margin-right: 0; }
  .js .parada h3 { font-size: clamp(32px, 3.4vw, 46px); }
  .js .parada p:last-child { font-size: 19px; max-width: 26em; }
}
@media (prefers-reduced-motion: reduce) { .js .escena, .js .parada, .js .parada h3 { transition: none; } }

.cierre { padding: 90px 20px 110px; text-align: center; background: radial-gradient(ellipse at 50% 0%, rgba(56, 189, 248, .14), transparent 60%), var(--ce-noche); }
.cierre p { max-width: 34em; margin: 14px auto 0; color: var(--ce-luna); }
.cierre .acciones { justify-content: center; }

.pie { border-top: 1px solid var(--ce-ronda); padding: 26px 20px 34px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center;
  width: min(var(--ancho), 100%); margin: 0 auto; color: var(--ce-luna); font-size: 14px; }
.pie p { margin: 0; }
.pie-marca { display: inline-flex; align-items: center; gap: 8px; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; color: var(--ce-papel); }
.pie-marca svg { width: 24px; height: 24px; }

@media (max-width: 640px) {
  .barra { padding: 10px 14px; }
  .heroe-texto { padding: 100px 16px 64px; }
  .heroe::after { background: linear-gradient(180deg, rgba(7, 11, 20, .35) 0%, rgba(7, 11, 20, .78) 55%, rgba(7, 11, 20, .92) 100%); }
  .capa { object-position: 78% 100%; }
  .recorrido { padding: 72px 16px 32px; }
  .cierre { padding: 72px 16px 90px; }
  .pie { padding: 22px 16px 30px; }
}