/* Landing de presentación · identidad «Partida en claro» elegida por Marco.
   Sin JavaScript ni recursos externos. Contrastes calculados con scripts/contraste.mjs. */
@font-face {
  font-family: "Figtree";
  src: url("/fuentes/Figtree-variable.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --blanco: #ffffff;
  --hielo: #eaf6fb;
  --noche: #0b1d2a;        /* texto: 17,16:1 sobre blanco; 15,6:1 sobre hielo */
  --pizarra: #4f6070;      /* texto secundario: 6,48:1 sobre blanco; 5,88:1 sobre hielo */
  --cian-oscuro: #0a6e94;  /* enlaces y foco: 5,72:1 sobre blanco; 5,19:1 sobre hielo */
  --cian: #13bcff;         /* solo cursor del logotipo y motivo decorativo: nunca texto */
  --borde: #d5e3ea;
  --gris: #c9d6de;
  --ancho: 68rem;
  color-scheme: light;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  color: var(--noche);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
}

a { color: var(--cian-oscuro); text-underline-offset: 3px; }
a:hover { color: var(--noche); }
:focus-visible { outline: 3px solid var(--cian-oscuro); outline-offset: 2px; border-radius: 4px; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 1.5rem; }

/* Enlace «Saltar al contenido»: primer elemento enfocable. Fuera de la vista hasta recibir el foco,
   pero siempre presente para los lectores de pantalla. Texto blanco sobre noche: 17,16:1 */
.saltar {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background: var(--noche);
  color: var(--blanco);
  font-weight: 700;
}
.saltar:hover { color: var(--blanco); }
.saltar:not(:focus) {
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Destino del salto: recibe el foco (tabindex="-1") sin dibujar un marco alrededor de toda la página */
#contenido-principal:focus { outline: none; }

/* Cabecera y logotipo «elige tu ▸rol»: el texto es el nombre aprobado; la minúscula es solo estilo */
.cabecera { padding-block: 1.25rem; }
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.22em;
  min-height: 44px;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-decoration: none;
  text-transform: lowercase;
}
.logo__suave { font-weight: 600; color: var(--pizarra); }
.logo__fuerte { display: inline-flex; align-items: baseline; gap: 0.1em; font-weight: 800; color: var(--noche); }
.logo__cursor { width: 0.36em; height: 0.42em; flex: none; position: relative; top: -0.04em; }

/* Contenido principal */
.principal { flex: 1; padding-block: 1.5rem 3rem; }
.rejilla { display: grid; gap: 2.5rem; align-items: center; }
.texto { max-width: 40rem; }

.estado {
  margin: 0 0 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: var(--hielo);
  color: var(--noche);
  font-size: 0.9375rem;
  font-weight: 700;
}
.estado__punto { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--cian-oscuro); }

h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.entradilla { margin: 0 0 1rem; font-size: 1.125rem; }

.limite {
  margin: 1.5rem 0 1rem;
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: var(--hielo);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.limite__icono { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.125rem; }
.disponibilidad { margin: 0; color: var(--pizarra); font-weight: 600; }

/* Motivo decorativo: menú con cursor, del símbolo de la identidad */
.motivo {
  border-radius: 12px;
  background: var(--hielo);
  padding: 2rem 1.75rem;
  display: grid;
  gap: 0.875rem;
  max-width: 26rem;
}
.motivo__fila { display: flex; align-items: center; gap: 0.875rem; padding-left: 1.5rem; }
.motivo__fila--activa { padding-left: 0; }
.motivo__barra { height: 0.625rem; border-radius: 5px; background: var(--gris); }
.motivo__barra--media { width: 62%; }
.motivo__barra--larga { width: 80%; height: 0.75rem; background: var(--noche); }
.motivo__barra--corta { width: 48%; }
.motivo__cursor { width: 0.75rem; height: 0.875rem; flex: none; }

/* Pie */
.pie { border-top: 1px solid var(--borde); padding-block: 1rem 1.5rem; font-size: 0.9375rem; }
.pie a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Aviso legal y página 404 */
.legal h1, .error h1 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }
.error__texto { margin: 0 0 0.5rem; font-size: 1.125rem; max-width: 40rem; }
.error__accion { margin: 0; }
.error__accion a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.legal__datos { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.25rem; margin: 0 0 1.5rem; }
.legal__datos dt { font-weight: 700; }
.legal__datos dd { margin: 0; overflow-wrap: anywhere; }

/* Datos que faltan: solo pueden verse en una vista previa (bloquean la publicación) */
.pendiente { padding: 0.125rem 0.375rem; border: 2px dashed var(--pizarra); border-radius: 6px; color: var(--pizarra); }

@media (max-width: 30rem) {
  .legal__datos { grid-template-columns: 1fr; gap: 0.125rem; }
  .legal__datos dd { margin-bottom: 0.625rem; }
}

@media (min-width: 56rem) {
  .rejilla { grid-template-columns: 1.4fr 1fr; gap: 4rem; }
  .principal { padding-block: 3rem 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}