/* ---------- Fuentes ----------

   Alojadas aquí y no en Google. Antes eran siete archivos de peso fijo pedidos
   a dos servidores externos —dos resoluciones de nombre y dos apretones de
   manos antes de poder pintar nada—, 290 KB de latín. Ahora son dos fuentes
   variables que cubren todos los pesos de una vez: 81 KB, del mismo dominio.

   El unicode-range hace que el latin-ext solo se descargue si aparece un
   carácter que lo necesite. En español no aparece nunca. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url(/fuentes/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fuentes/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

/**
 * White Island — base del sitio.
 *
 * Todo lo que se repite vive aquí arriba como variable: colores, escala de
 * texto, espacios, radios, sombras y tiempos. Si un número aparece dos veces en
 * el resto del archivo, es que le falta su variable.
 */

:root {
  /* ---- Color ---- */
  --fondo: #000000;
  --fondo-2: #0a0a0a;
  --superficie: #101010;
  --superficie-2: #171717;
  --borde: #262626;
  --borde-vivo: #3a3a3a;

  --texto: #f2f2f2;
  --tenue: #a6a6a6;
  --apagado: #767676;

  --arena: #f0b968;
  --arena-viva: #ffd08a;
  --arena-honda: #2a1a05;
  /* Azul: ya NO es el acento --el acento es la arena--. Queda para lo que
     necesita un segundo color de verdad: una serie de la gráfica contra
     otra, y la chapa de administración contra la de fundador. */
  --agua: #4fc3d9;
  /* Verde de "esto va bien". Lo usan la franja de conexión recuperada y la
     chapa de "estás al día" del perfil. */
  --bien: #62c48c;
  --bien-hondo: #0e2418;
  --alarma: #e2725c;

  /* ---- Texto: una sola escala, fluida ---- */
  --t-xs: .75rem;
  --t-sm: .8125rem;
  --t-md: .9375rem;
  --t-base: 1rem;
  --t-lg: 1.0625rem;
  --t-xl: clamp(1.15rem, .4vw + 1.05rem, 1.3rem);
  --t-2xl: clamp(1.35rem, 1vw + 1.1rem, 1.7rem);
  --t-3xl: clamp(1.8rem, 2.2vw + 1.2rem, 2.6rem);
  --t-4xl: clamp(2.2rem, 3.6vw + 1.2rem, 3.4rem);
  --t-heroe: clamp(3rem, 9vw + .5rem, 6.5rem);

  /* ---- Espacio: múltiplos de 4 ---- */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 22px;
  --e6: 30px;
  --e7: 40px;
  --e8: 56px;
  --e9: 76px;
  --seccion-y: clamp(64px, 9vw, 120px);

  /* ---- Forma ---- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-redondo: 999px;
  --maxima: 1180px;
  --cabecera: 61px;

  /* ---- Profundidad ---- */
  --brillo: inset 0 1px 0 rgba(255, 255, 255, .055);
  --s1: 0 1px 2px rgba(0, 0, 0, .3);
  --s2: 0 10px 26px -14px rgba(0, 0, 0, .75);
  --s3: 0 26px 60px -26px rgba(0, 0, 0, .9);
  --s-arena: 0 12px 30px -12px rgba(240, 185, 104, .5);
  /* Anillos: el mismo grosor para todo lo que se señala, cambiando solo el
     color. Antes había tres grosores distintos para la misma idea. */
  --anillo: 0 0 0 3px;
  --anillo-agua: var(--anillo) rgba(79, 195, 217, .28);
  --anillo-arena: var(--anillo) rgba(240, 185, 104, .28);
  --anillo-alarma: var(--anillo) rgba(226, 114, 92, .28);

  /* ---- Letra ---- */
  /* La de los titulares. Dos reglas la pedian por `var(--titular)` sin que
     existiera, y `var()` de algo sin definir no avisa: deja la propiedad sin
     valor y la letra se hereda. Salian en Inter. */
  --titular: Archivo, Inter, system-ui, sans-serif;

  /* ---- Movimiento ---- */
  --rapido: 130ms;
  --medio: 260ms;
  --lento: 520ms;
  --curva: cubic-bezier(.22, .61, .36, 1);
  --curva-suave: cubic-bezier(.4, 0, .2, 1);
  /* Exponencial de salida: arranca rápido y se posa muy despacio. Es la
     que hace que algo parezca que llega en vez de que termina. */
  --curva-entrada: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Sin esto, un display: grid o flex propio le gana al atributo hidden. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-lg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--titular);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  text-wrap: balance;
}

p { text-wrap: pretty; }
a { color: inherit; }

::selection { background: rgba(240, 185, 104, .3); color: var(--texto); }

/* Un solo anillo de foco para todo el sitio: sin él no se sabe por dónde se va
   navegando con el teclado. */
:focus-visible {
  outline: 2px solid var(--arena);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Barras de desplazamiento discretas en los paneles que se mueven por dentro. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--borde-vivo) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--r-redondo);
  background: var(--borde-vivo);
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover { background: #4a4a4a; background-clip: content-box; }

.contenedor {
  width: 100%;
  max-width: var(--maxima);
  margin: 0 auto;
  padding: 0 var(--e5);
}

.oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Primer tabulador de cada página. Solo aparece cuando recibe el foco. */
.salto {
  position: fixed;
  top: var(--e2);
  left: var(--e2);
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  background: var(--arena);
  color: var(--arena-honda);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-250%);
  transition: transform var(--medio) var(--curva);
}

.salto:focus { transform: none; }

body.sin-scroll { overflow: hidden; }

/* ---------- Botones ---------- */

.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 44px;
  padding: 13px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-redondo);
  font: 600 var(--t-base)/1 Inter, system-ui, sans-serif;
  letter-spacing: -.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--rapido) var(--curva),
    box-shadow var(--medio) var(--curva),
    background var(--medio) var(--curva),
    border-color var(--medio) var(--curva),
    opacity var(--rapido) linear;
}

/* El botón baja al pulsarlo. Es el detalle que más hace que algo se sienta
   pulsable de verdad y no dibujado. */
.boton:active { transform: translateY(1px) scale(.985); transition-duration: 60ms; }

.boton--principal {
  background: linear-gradient(165deg, var(--arena-viva), var(--arena) 65%, #e5a94f);
  color: var(--arena-honda);
  font-weight: 700;
  box-shadow: var(--s-arena), inset 0 1px 0 rgba(255, 255, 255, .45);
}

.boton--principal:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -12px rgba(240, 185, 104, .68), inset 0 1px 0 rgba(255, 255, 255, .55);
}

.boton--principal:active { box-shadow: 0 6px 16px -8px rgba(240, 185, 104, .6); }

.boton--fantasma {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .16);
  color: var(--texto);
  backdrop-filter: blur(10px);
}

.boton--fantasma:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .28);
}

.boton--peligro {
  background: rgba(226, 114, 92, .1);
  border-color: rgba(226, 114, 92, .45);
  color: #f6b7a6;
}

.boton--peligro:hover {
  transform: translateY(-2px);
  background: rgba(226, 114, 92, .18);
  border-color: var(--alarma);
  color: #ffd9cf;
}

.boton--ancho { width: 100%; }

.boton[disabled] {
  opacity: .5;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

/* ---------- Cabecera ---------- */

.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: var(--e4) 0;
  border-bottom: 1px solid transparent;
  transition:
    background var(--medio) var(--curva-suave),
    padding var(--medio) var(--curva-suave),
    border-color var(--medio) var(--curva-suave);
}

/* Al bajar se opaca: sobre el cielo del amanecer el menú no se leía. */
.cabecera.pegada {
  padding: var(--e3) 0;
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, .07);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: var(--e5);
  /* Fuera del notch y de las esquinas redondeadas: con `viewport-fit=cover` la
     pagina llega al borde de verdad, y en horizontal el logotipo se metia
     debajo de la muesca. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: var(--e3);
}

/* El menú empuja las acciones al extremo derecho. */
.menu { margin-left: auto; }

.menu__boton {
  display: none;
  place-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: rgba(16, 16, 16, .85);
  cursor: pointer;
  transition: border-color var(--medio) var(--curva), background var(--medio) var(--curva);
}

.menu__boton:hover { border-color: var(--borde-vivo); background: var(--superficie-2); }

.menu__boton span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--texto);
  transition: transform var(--medio) var(--curva), opacity var(--rapido) linear;
}

.menu__boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu__boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu__boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.marca {
  display: flex;
  align-items: center;
  /* El texto mide veintidós píxeles de alto y en un móvil eso se falla al
     pulsar. El área de toque llega al mínimo sin mover nada de sitio. */
  min-height: 44px;
  gap: var(--e3);
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -.025em;
  white-space: nowrap;
  text-decoration: none;
}

.marca__icono { flex: none; transition: transform var(--lento) var(--curva); }
.marca:hover .marca__icono { transform: rotate(-8deg) scale(1.1); }

.menu {
  display: flex;
  align-items: center;
  gap: var(--e6);
}

.menu a:not(.boton):not(.usuario) {
  position: relative;
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--tenue);
  text-decoration: none;
  transition: color var(--medio) var(--curva);
}

/* Subrayado que crece desde el centro, en vez del subrayado de siempre. */
.menu a:not(.boton):not(.usuario)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--arena);
  transform: translateX(-50%);
  transition: width var(--medio) var(--curva);
}

.menu a:hover:not(.boton):not(.usuario),
.menu a[aria-current="page"]:not(.boton):not(.usuario) { color: var(--texto); }

.menu a:hover:not(.boton):not(.usuario)::after,
.menu a[aria-current="page"]:not(.boton):not(.usuario)::after { width: 100%; }

.menu .boton { padding: 12px 24px; font-size: var(--t-md); }

/* En móvil el menú pasa a ser un desplegable. Antes se escondían los enlaces
   sin más, y desde el teléfono no había forma de llegar a las secciones. */
@media (max-width: 720px) {
  .menu__boton { display: grid; }

  /* Aquí empuja esto y no `.menu`: el menú se sale de la fila para ser el
     desplegable, y con él se iba el `margin-left: auto` que pegaba el botón al
     borde. Sin esto se quedaba a mitad de la cabecera. */
  .cabecera__acciones { margin-left: auto; }

  .menu {
    position: fixed;
    inset: var(--cabecera) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--e2) var(--e5) var(--e5);
    background: rgba(0, 0, 0, .97);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--s3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
      opacity var(--medio) var(--curva),
      transform var(--medio) var(--curva),
      visibility var(--medio) step-end;
  }

  .menu.abierto {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-timing-function: var(--curva), var(--curva), step-start;
  }

  .menu a:not(.boton):not(.usuario) {
    display: flex;
    align-items: center;
    min-height: 52px;
    border-bottom: 1px solid var(--borde);
    font-size: var(--t-lg);
    color: var(--texto);
  }

  .menu a:not(.boton):not(.usuario)::after { display: none; }
  .menu a:not(.boton):not(.usuario):last-child { border-bottom: 0; }
}

@media (max-width: 520px) {
  .marca { font-size: 1rem; gap: var(--e2); }
  .marca__icono { width: 22px; height: 22px; }
  .cabecera__acciones { gap: var(--e2); }
  .cabecera__acciones .boton { padding: 11px 16px; font-size: var(--t-sm); }
}

@media (max-width: 420px) {
  .cabecera__acciones .boton { padding: 11px 13px; font-size: var(--t-xs); }
}

@media (max-width: 380px) {
  .marca__texto { display: none; }
}

/* ---------- Quién eres, en la cabecera ---------- */

.usuario {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: 5px var(--e3) 5px 5px;
  border: 1px solid var(--borde);
  border-radius: var(--r-redondo);
  background: rgba(16, 16, 16, .8);
  text-decoration: none;
  transition:
    border-color var(--medio) var(--curva),
    background var(--medio) var(--curva),
    transform var(--rapido) var(--curva);
}

.usuario:hover { transform: translateY(-1px); border-color: var(--arena); background: var(--superficie-2); }

.usuario__foto {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--superficie-2);
  color: var(--arena);
  font-size: var(--t-xs);
  font-weight: 700;
}

.usuario__foto img { width: 100%; height: 100%; object-fit: cover; }

.usuario__nombre {
  max-width: 12ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--t-md);
  font-weight: 600;
}

.usuario--fundador { border-color: rgba(240, 185, 104, .42); }
.usuario--fundador .usuario__foto { box-shadow: 0 0 0 2px var(--arena); }

@media (max-width: 520px) {
  /* 44 px de lado: es el mínimo para que un dedo acierte sin pelearse. */
  .usuario { padding: 5px; }
  .usuario__foto { width: 34px; height: 34px; }
  .usuario__nombre { display: none; }
}

/* ---------- Héroe ---------- */

.heroe {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  overflow: hidden;
}

.heroe__fondo {
  position: absolute;
  inset: -6% 0 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}

.etiqueta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 7px 15px 7px 12px;
  border: 1px solid rgba(79, 195, 217, .3);
  border-radius: var(--r-redondo);
  background: rgba(79, 195, 217, .09);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #bfeaf3;
}

.etiqueta::before {
  content: "";
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--arena);
}

/* El anillo es un pseudoelemento aparte que crece y se desvanece.
   Antes era un box-shadow animado, y animar una sombra obliga al navegador a
   repintar en cada fotograma, para siempre y en tres sitios distintos a la vez.
   Escala y opacidad las resuelve el compositor sin repintar nada. */
.etiqueta::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--arena);
  opacity: .7;
  animation: latido 2.6s infinite;
  pointer-events: none;
}

@keyframes latido {
  from { transform: scale(1); opacity: .7; }
  70%, to { transform: scale(3.6); opacity: 0; }
}

/* ---------- Secciones ---------- */

/* Páginas que empiezan directamente con una sección: sin esto el primer título
   queda pegado a la cabecera fija. */
.pagina { padding-top: var(--cabecera); }

.seccion { position: relative; padding: var(--seccion-y) 0; }

.seccion--oscura {
  background: var(--fondo-2);
  border-block: 1px solid rgba(255, 255, 255, .04);
}

.rotulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0 0 var(--e3);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--arena);
}

.rotulo::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.seccion h1,
.seccion h2 { max-width: 17ch; font-size: var(--t-3xl); }

.seccion__entrada {
  margin: var(--e4) 0 0;
  max-width: 58ch;
  font-size: var(--t-base);
  color: var(--tenue);
}

.cabeza-seccion { margin-bottom: var(--e8); }

/* ---------- Rejilla de características ---------- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: var(--e4);
}

/* Tres columnas fijas en escritorio: con cuatro, la tarjeta ancha dejaba media
   fila vacía. Con tres, las cinco tarjetas cuadran exactas. */
@media (min-width: 940px) {
  .rejilla { grid-template-columns: repeat(3, 1fr); }
}

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 22rem;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--s1);
  transition:
    transform var(--medio) var(--curva),
    border-color var(--medio) var(--curva),
    box-shadow var(--medio) var(--curva);
}

.tarjeta:hover {
  transform: translateY(-6px);
  border-color: rgba(240, 185, 104, .42);
  box-shadow: var(--s3);
}

.tarjeta img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--lento) var(--curva), filter var(--lento) var(--curva);
}

.tarjeta:hover img { transform: scale(1.06); filter: saturate(1.08); }

.tarjeta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .12) 28%, rgba(0, 0, 0, .94) 100%);
}

.tarjeta__cuerpo { padding: var(--e6); }
.tarjeta h3 { margin-bottom: var(--e2); font-size: var(--t-xl); }
.tarjeta p { margin: 0; font-size: var(--t-md); color: #d4d4d4; }

.tarjeta--ancha { grid-column: span 2; }
@media (max-width: 700px) { .tarjeta--ancha { grid-column: auto; } }

/* ---------- Galería ---------- */

.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e3);
}

.galeria figure {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color var(--medio) var(--curva), transform var(--medio) var(--curva);
}

.galeria figure:hover { border-color: var(--borde-vivo); transform: translateY(-3px); }

.galeria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--lento) var(--curva);
}

.galeria figure:hover img { transform: scale(1.07); }

.galeria figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: var(--e7) var(--e4) var(--e3);
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .93));
  font-size: var(--t-md);
  font-weight: 600;
}

.galeria .grande { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

@media (max-width: 900px) {
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .galeria .grande { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
}

/* ---------- Clips verticales ---------- */

.clips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--e5);
}

.clip {
  position: relative;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--s2);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}

.clip:hover { transform: translateY(-5px); box-shadow: var(--s3); }
.clip video { width: 100%; height: 100%; object-fit: cover; }

.clip__pie {
  position: absolute;
  inset: auto 0 0;
  padding: var(--e8) var(--e4) var(--e4);
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .9));
  pointer-events: none;
}

.clip__pie strong { display: block; font-size: var(--t-base); }
.clip__pie span { font-size: var(--t-sm); color: #c9c9c9; }

/* ---------- Franja de llamada ---------- */

.franja {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(72px, 11vw, 130px) 0;
}

.franja > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.franja::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 50% 50%, rgba(0, 0, 0, .74), rgba(0, 0, 0, .94));
}

.franja .contenedor { position: relative; z-index: 2; }
.franja h2 { margin: 0 auto; max-width: 18ch; font-size: var(--t-4xl); }
.franja p { max-width: 48ch; margin: var(--e4) auto var(--e7); color: #dedede; }

/* ---------- Pie ---------- */

.pie {
  padding: var(--e8) 0;
  border-top: 1px solid var(--borde);
  font-size: var(--t-md);
  color: var(--tenue);
}

.pie__fila {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4) var(--e5);
  align-items: center;
  justify-content: space-between;
}

.pie nav { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); }

/* Los enlaces del pie medían veinticinco píxeles de alto. Son enlaces sueltos
   en una navegación, no palabras dentro de una frase: en un móvil hay que poder
   acertarlos. */
.pie a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  text-decoration: none;
  transition: color var(--medio) var(--curva);
}
.pie a:hover { color: var(--texto); }

/* ---------- Entrada al hacer scroll ---------- */

/* ---------- Lo que aparece al llegar ---------- */

/*
 * Se esconde SOLO si hay JavaScript para volver a enseñarlo. `con-revelado` lo
 * pone una línea en la cabecera de cada página, antes de que se pinte nada.
 * Antes se escondía desde aquí sin más y una página con el script caído se
 * quedaba en blanco; había hasta una red de dos segundos para taparlo.
 *
 * Cada pieza entra con su retraso, que sale de `--paso`: lo pone el JavaScript
 * contando en orden dentro de la sección. Y la curva es una exponencial de
 * salida --arranca rápido y se posa-- porque con una lineal o una cúbica lo
 * que se ve es que algo "termina"; con esta, que llega.
 */

.con-revelado .revelar {
  opacity: 0;
  transform: translate3d(0, var(--sube, 22px), 0) scale(var(--escala, 1));
  filter: blur(var(--velo, 0px));
  transition:
    opacity var(--entra, 820ms) var(--curva-entrada) var(--espera),
    transform var(--entra, 820ms) var(--curva-entrada) var(--espera),
    filter var(--entra, 820ms) var(--curva-entrada) var(--espera);
  will-change: opacity, transform;
}

.con-revelado .revelar.visible {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* El retraso, de una sola pieza. Se tapa a los ocho para que una galería de
   diez fotos no tarde un segundo y medio en acabar de entrar. */
.con-revelado .revelar { --espera: calc(min(var(--paso, 0), 8) * 95ms); }

/* Y según lo que sea, entra distinto. Un titular sube poco y sale de un velo;
   una tarjeta sube más y crece un pelo, que es lo que la hace parecer que se
   acerca; una foto casi solo aparece, porque moverla se nota como un tirón. */
.con-revelado .cabeza-seccion .revelar { --sube: 14px; --velo: 5px; --entra: 760ms; }
.con-revelado .cartel.revelar,
.con-revelado .tarjeta.revelar,
.con-revelado .contra__lado.revelar { --sube: 30px; --escala: .975; --entra: 900ms; }
.con-revelado .galeria figure.revelar { --sube: 12px; --escala: .985; --entra: 820ms; }
.con-revelado .pregunta.revelar { --sube: 10px; --entra: 620ms; }

@media (prefers-reduced-motion: reduce) {
  .con-revelado .revelar {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ---------- Quien no quiera movimiento, que no lo tenga ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* El lema se apaga con el viaje del logotipo, y aqui el logotipo no viaja:
     sale ya en la cabecera, y el titulo de la portada no se veia nunca. */
  /* Con la seccion delante: la regla normal va mas abajo en el archivo y, con
     el mismo peso, ganaba ella. */
  .heroe--grande .heroe__lema { opacity: 1; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .aparece { opacity: 1; transform: none; }
  /* Los tres fondos del paralaje, quietos. */
  .heroe__fondo,
  .jrs__fondo,
  .cierre__fondo { transform: none !important; }
}

/* ---------- Página que no existe ---------- */

/* Sin cabecera ni pie, por decisión del dueño: el aviso es la pantalla entera. */
.perdido {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
}

.perdido__caja {
  max-width: 34rem;
  text-align: center;
}

/* El titular de sección tiene tope de ancho: sin esto se queda a la izquierda. */
.perdido__caja h1 { margin-inline: auto; }

/* El número grande es decorativo: hace de ilustración para no meter una imagen
   que habría que cargar solo para un error. */
.perdido__numero {
  font-size: clamp(4.5rem, 22vw, 9rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  background: linear-gradient(180deg, var(--borde-vivo), transparent 85%);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: var(--e3);
}

.perdido__texto {
  color: var(--tenue);
  margin-top: var(--e3);
}

.perdido__salidas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  justify-content: center;
  margin-top: var(--e6);
}


/* Para quien escucha la página en vez de verla. No es display:none: eso lo
   quitaría también del lector de pantalla, que es justo a quien va dirigido. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Mientras algo está en marcha, el botón lo dice sin cambiar de tamaño. */
.boton--ocupado { opacity: .65; cursor: progress; }


/* ---------- Franja de estado de la conexión ---------- */

.franja-conexion {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  padding: var(--e2) var(--e4);
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: center;
  transform: translateY(-100%);
  transition: transform var(--medio) var(--curva);
}

.franja-conexion--visible { transform: none; }
.franja-conexion--mala { background: var(--alarma); color: #2a0f0a; }
.franja-conexion--buena { background: var(--bien); color: var(--bien-hondo); }
.franja-conexion--aviso { background: var(--arena); color: var(--arena-honda); }

/* ==========================================================================
   LA PORTADA
   Rehecha el 25 de septiembre de 2026 con el orden que pidió el dueño:
   portada, actualizaciones, capturas, comunidad, preguntas y el cierre con el
   registro. Y con sus imágenes, que son ilustraciones y no capturas del juego:
   por eso todo lo de aquí es más oscuro y más contrastado que el resto.
   ========================================================================== */

/* ---------- Cuánto llevas leído ---------- */

.progreso {
  position: fixed; inset: 0 auto auto 0; z-index: 60;
  width: 100%; height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--arena-viva), var(--arena));
}

/* ---------- La cabecera: solo la marca y entrar ---------- */

.cabecera--limpia { background: transparent; border-bottom-color: transparent; }

/* Al bajar se pone opaca. Sobre una foto a pantalla completa, una cabecera con
   fondo desde el primer píxel parte la imagen en dos. */
.cabecera--limpia.posada {
  background: rgba(0, 0, 0, .85);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--borde);
}

.marca__logo {
  display: block; width: auto; height: 58px;
  transition: height var(--lento) var(--curva);
}
.cabecera--limpia.posada .marca__logo { height: 42px; }

/* Una cabecera que se pega a los dos bordes. En una portada a pantalla
   completa, una cabecera centrada con el ancho del texto deja dos huecos
   enormes a los lados y parece que se ha encogido. */
.contenedor--ancho {
  max-width: none;
  padding-left: clamp(var(--e4), 3vw, var(--e8));
  padding-right: clamp(var(--e4), 3vw, var(--e8));
}

/* ---------- El héroe ---------- */

.heroe--grande {
  position: relative;
  min-height: 88svh;
  /* Abajo y no en el centro: el texto tiene que caer sobre la zona que el velo
     oscurece, y el centro es justo donde la ilustración manda. */
  display: grid; align-items: end; justify-items: center;
  text-align: center;
  overflow: hidden;
}

/* La imagen de la portada viene YA SIN LOGOTIPO, así que se usa entera y el
   logotipo lo pone la página encima, donde toca. */
.heroe--grande .heroe__fondo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

/* LA IMAGEN NO SE OSCURECE. Lo de arriba y el medio van limpios --es lo primero
   que ve alguien y era justo lo que estaba apagado-- y el velo solo aparece en
   la franja de abajo, que es donde van el titular y la flecha y donde hay que
   empalmar con la sección siguiente, que es negra. */
.heroe__velo {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.16) 0%,
      transparent 12%,
      transparent 56%,
      rgba(0,0,0,.30) 72%,
      rgba(0,0,0,.74) 88%,
      #000 100%);
}

/*
 * LA PORTADA: el logotipo en el centro, y abajo el lema con la flecha.
 *
 * `--logo-grande` es lo que mide el logotipo centrado, y lo lee
 * js/marca-viajera.js para la escala. Vive aquí y no allí porque depende del
 * ancho de la ventana, y eso es cosa de la hoja de estilos.
 */
.heroe--grande {
  --logo-grande: min(31vw, 430px);
  /* Lo que ocupan la flecha y su hueco, que es sobre lo que se apoya el lema. */
  --flecha-hueco: calc(clamp(22px, 4vh, 44px) + 34px);
}

/* El lema, apoyado en el borde de abajo y justo encima de la flecha: las dos
   dicen lo mismo --esto es, y aquí se sigue-- y juntas son el pie de la
   portada. Pequeño y con la letra suelta: es una firma, no un titular. El
   titular es el logotipo. */
.heroe__lema {
  position: absolute;
  left: 50%;
  bottom: calc(var(--flecha-hueco) + clamp(16px, 2.4vh, 30px));
  z-index: 3;
  width: min(92vw, 40rem);
  margin: 0;
  transform: translateX(-50%);
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(.72rem, .55vw + .45rem, .95rem);
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  text-indent: .3em;              /* compensa el hueco que deja el último tracking */
  color: rgb(255 255 255 / .92);
  /* Dos sombras: una pegada que separa la letra del fondo y otra ancha que
     apaga lo que hay detras. Con una sola, sobre el agua clara no se lee. */
  text-shadow: 0 1px 3px rgb(0 0 0 / .85), 0 2px 26px rgb(0 0 0 / .95);
  /* Se va con el logotipo: son la misma pieza. */
  opacity: var(--marca-viaja, 1);
}

.heroe__lema b { font-weight: 800; color: #fff; }

.boton--grande { padding: 15px 26px; font-size: var(--t-base); }

.heroe__flecha {
  position: absolute; left: 50%; bottom: clamp(22px, 4vh, 44px);
  width: 34px; height: 34px;
  /* El area de toque, a 44: el dibujo se queda en 34. Un dedo no acierta en
     menos, y esta es la unica salida de la portada. */
  box-sizing: content-box;
  padding: 5px;
  margin: -5px;
  margin-left: -17px;
  display: grid; place-items: center;
  opacity: .55;
  animation: respira 2.4s ease-in-out infinite;
}
.heroe__flecha span {
  width: 11px; height: 11px;
  border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
  transform: rotate(45deg);
}
@keyframes respira {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* ---------- Actualizaciones ---------- */

.seccion__pie { margin-top: var(--e7); text-align: center; }




/* ---------- Tarjetas de sección, en fila ---------- */

.fila-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: var(--e4);
  margin-top: var(--e7);
}

.tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 330px;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
}
.tarjeta img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--curva);
}
/* El velo va en su propia capa y no encima de la imagen: así la imagen puede
   acercarse al pasar por encima sin que el degradado se estire con ella. */
.tarjeta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.92) 100%);
}
.tarjeta:hover img { transform: scale(1.06); }
.tarjeta:hover { border-color: var(--borde-vivo); }

.tarjeta__texto { margin-top: auto; padding: var(--e5); }
.tarjeta__texto h3 { margin: 0 0 var(--e2); font-size: var(--t-2xl); }
.tarjeta__texto p { margin: 0; font-size: var(--t-md); line-height: 1.6; color: #cfcfcf; }

/* ---------- Preguntas ---------- */

.preguntas { max-width: 800px; margin: var(--e7) auto 0; }

.pregunta { border-bottom: 1px solid var(--borde); }
.pregunta:first-child { border-top: 1px solid var(--borde); }

.pregunta__titulo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  padding: var(--e5) var(--e3);
  font-weight: 700; font-size: var(--t-lg);
  cursor: pointer; list-style: none;
  transition: color .18s ease, background .18s ease;
}
.pregunta__titulo::-webkit-details-marker { display: none; }

/* Abierta cambia de color y se le enciende una barra a la izquierda. Cerrada
   no se distingue de las demás, y con ocho seguidas hay que poder saber cuál
   está abierta sin ponerse a leerlas. */
.pregunta[open] { background: rgba(255, 255, 255, .025); }
.pregunta[open] .pregunta__titulo { color: var(--arena-viva); }
.pregunta__titulo:hover { color: var(--arena); background: rgba(255, 255, 255, .02); }

.pregunta__titulo::after {
  content: ""; flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.pregunta[open] .pregunta__titulo::after { transform: rotate(-135deg) translate(-2px, -2px); }

.pregunta__cuerpo {
  margin: 0 0 0 var(--e3);
  padding: 0 var(--e3) var(--e5) var(--e4);
  font-size: var(--t-md); line-height: 1.75; color: var(--tenue);
  max-width: 70ch;
  white-space: pre-line;   /* los requisitos van en líneas, y son líneas */
  border-left: 2px solid var(--arena);
}

/* ---------- El cierre ---------- */

.cierre {
  position: relative;
  display: grid; place-items: center;
  min-height: 78svh;
  padding: var(--seccion-y) 0;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.cierre__fondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Muy oscurecida a propósito: aquí lo que tiene que leerse es el botón, no la
   foto. La foto solo pone el sitio. */
.cierre::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.82) 30%, rgba(0,0,0,.82) 70%, #000 100%);
}
.cierre__interior { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--e5); }
.cierre__interior h2 { margin: 0; font-size: var(--t-3xl); max-width: 18ch; }
.cierre__interior p { margin: 0; max-width: 46ch; font-size: var(--t-lg); line-height: 1.65; color: var(--tenue); }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); justify-content: center; }

@media (max-width: 640px) {
  .pregunta__titulo { font-size: var(--t-base); padding: var(--e4) var(--e2); }
  .tarjeta { min-height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  .heroe__flecha { animation: none; }
  .tarjeta img { transition: none; }
}