/* ==========================================================================
   Mercedes Seyn — hoja de estilos única
   Papel blanco difuminado, tinta negra y un visor de reloj digital.
   ========================================================================== */

/* Visor del contador. Digital-7 (mono) · Style-7 · Sizenko Alexander.
   OJO: su licencia es "freeware for home using only"; el uso comercial
   se compra en styleseven.com. Ver assets/fonts/DIGITAL-7-LICENCIA.txt.
   Alternativa libre ya incluida en el proyecto: DSEG7Classic-Bold.woff2 */
@font-face {
  font-family: "Digital-7 Mono";
  src: url("../fonts/digital-7-mono.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Muestreados de assets/img/papel.jpeg: la textura es un blanco frío de
     media #f6f8f9. La paleta anterior era cálida y desentonaba encima. */
  --papel: #f6f8f9;
  --tinta: #181a1b;
  --tinta-suave: #63666a;
  --linea: #c9cdd1;

  --visor-fondo: #33352f;
  --visor-borde: #292b25;
  --digito: #bac5af;
  --digito-apagado: rgba(186, 197, 175, 0.14);

  --btn-fondo: #202325;
  --btn-texto: #f3f2ee;
  --btn-fondo-hover: #3a3e41;

  --error: #1a1a18;

  /* Un solo margen lateral para la navegación y el pie: así las cuatro
     esquinas de la página quedan a la misma distancia del borde. */
  --margen-lateral: clamp(0.875rem, 2.8vw, 2.25rem);

  /* Ancho máximo de la página. 60rem son 960 px, prácticamente el lienzo de
     la maqueta: por debajo no cambia nada, y por encima la navegación deja
     de irse a las esquinas de un monitor de 1440 mientras el contenido se
     queda solo en el centro. */
  --medida-maxima: 60rem;

  --fuente: "Courier Prime", "Courier New", ui-monospace, Consolas, monospace;
  --fuente-visor: "Digital-7 Mono", "DSEG7 Classic", ui-monospace, monospace;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--papel);
  /* Papel real (900x1600). Se escala a cubrir en lugar de embaldosarse:
     no es una textura sin costuras y las juntas se notarían. */
  background-image: url("../img/papel.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- Navegación
   Dos columnas arriba, la izquierda alineada a la izquierda y la derecha a
   la derecha, con el mismo margen lateral que el pie para que todo cuadre
   en los cuatro vértices de la página. */

.nav {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  max-width: var(--medida-maxima);
  margin-inline: auto;
  padding: clamp(2rem, 8vh, 4.5rem) var(--margen-lateral) 0;
  font-size: clamp(0.875rem, 2.2vw, 1.25rem);
  font-weight: 400;
  line-height: 1.4;
  /* El mismo gris que "TRINIDAD.": en negro el trazo se veía mucho más
     grueso aunque la fuente y el peso ya eran los mismos. */
  color: var(--tinta-suave);
}

.nav__col {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__col--der { text-align: right; }

.nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--tinta);
  border-bottom-color: currentColor;
}

/* --------------------------------------------------------------- Estructura */

.stage {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--medida-maxima);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  width: 100%;
  padding: clamp(2rem, 6vh, 4rem) clamp(1rem, 5vw, 2.5rem) clamp(2rem, 6vh, 4rem);
  padding-left: max(clamp(1rem, 5vw, 2.5rem), env(safe-area-inset-left));
  padding-right: max(clamp(1rem, 5vw, 2.5rem), env(safe-area-inset-right));
}

/* ---------------------------------------------------------------- Contador */

/* La frase es la que manda: al ir en una sola línea, su ancho fija el del
   bloque entero. El visor lo hereda, así que caja y texto miden igual.
   Funciona porque el visor tiene `container-type: inline-size`, que impide
   que sus cifras influyan en el ancho: si no, sería una pescadilla. */
/* ==========================================================================
   PROPORCIONES DE LA MAQUETA
   El bloque es el contenedor de referencia y todo lo de dentro se mide en
   cqw (porcentaje de su ancho). Así la página conserva exactamente las
   proporciones del diseño a cualquier tamaño, en vez de ir cuadrando
   tamaños sueltos a mano.

   Medido sobre la maqueta, con la caja del visor = 100 unidades:
     alto de la caja .......  21,7    hueco caja → RESERVA ..  17,5
     ancho formulario ......  82,5    alto del input .......   7,6
     cuerpo de la frase ....   3,70   alto del botón .......   7,2
     cuerpo de RESERVA .....   2,74   cuerpo del marcador ..   3,16

   Los max() son suelos de legibilidad: por debajo de cierto tamaño de
   pantalla, la proporción pura dejaría textos de 8 px y controles
   imposibles de pulsar.
   ========================================================================== */

.bloque {
  container-type: inline-size;
  /* 53vw es la relación del diseño (caja 475 sobre lienzo de 900). */
  width: clamp(17rem, 44vw, 25rem);
  max-width: 100%;
}

.countdown {
  width: 100%;
}

/* Con este cuerpo la frase ocupa justo el ancho del bloque, así que caja y
   texto miden igual sin tener que forzarlo. Courier Prime avanza 0,5996 em
   y la frase tiene 45 caracteres: 100 / (45 × 0,5996) = 3,70. */
.release {
  margin: 0 0 max(0.3rem, 2.1cqw);
  font-size: max(0.625rem, 3.7cqw);
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  color: var(--tinta-suave);
}

.release strong {
  font-weight: 700;
  color: var(--tinta);
}

/* El visor es a su vez contenedor: sus cifras se miden contra él. */
.visor {
  container-type: inline-size;
  position: relative;
  display: block;
  /* El relleno compensa el cuerpo menor para que la caja conserve su
     proporción (21,7 de alto sobre 100 de ancho). */
  padding: 3cqw 0;
  background: var(--visor-fondo);
  border: 1px solid var(--visor-borde);
  text-align: center;
  overflow: hidden;
}

/* Segmentos apagados: un display real los deja visibles en gris. */
.visor::before {
  content: "88.88.88.88";
  position: absolute;
  top: 3cqw;
  left: 0;
  right: 0;
  color: var(--digito-apagado);
}

.visor::before,
.clock {
  display: block;
  font-family: var(--fuente-visor);
  /* Reserva para navegadores sin unidades de contenedor. */
  font-size: clamp(2.25rem, 17.5vw, 5.25rem);
  /* Con segundos son 11 caracteres en vez de 8. El punto avanza menos que
     las cifras, así que el valor sale de medir "00.00.00.00" en sitio. */
  font-size: 19.9cqw;
  /* 21,7 de alto sobre 27,5 de cuerpo = 0,789. Recorta el aire que la fuente
     deja arriba y abajo sin tocar las cifras, que ocupan 0,72 em. */
  line-height: 0.789;
  letter-spacing: 0;
}

.clock {
  position: relative;
  color: var(--digito);
}

.out {
  margin-top: max(1rem, 6cqw);
}

.out__title {
  margin: 0 0 0.35rem;
  font-size: max(1rem, 4.5cqw);
  font-weight: 700;
}

.out__text {
  margin: 0 0 1rem;
  font-size: max(0.8125rem, 3.16cqw);
  color: var(--tinta-suave);
}

/* ------------------------------------------------------------------ Registro */

.signup {
  width: 82.5cqw;
  max-width: 100%;
  margin: max(1.5rem, 17.5cqw) auto 0;
}

.form__cab {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0 0 max(0.5rem, 4.2cqw);
}

.form__label,
.ayuda {
  font-size: max(0.625rem, 2.74cqw);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ayuda {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ayuda[aria-disabled="true"] { cursor: default; }

.campo {
  display: block;
  width: 100%;
  height: max(1.875rem, 6.8cqw);
  padding: 0 max(0.5rem, 2cqw);
  border: 1px solid var(--linea);
  border-radius: 0;
  background: #fbfcfd;
  color: var(--tinta);
  font-family: inherit;
  font-size: max(0.75rem, 3.16cqw);
  transition: border-color 160ms ease;
}

.campo::placeholder {
  color: #7d8185;
  font-style: italic;
}

.campo:focus {
  outline: none;
  border-color: var(--tinta);
}

.campo[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--tinta);
}

/* Trampa antibots: fuera de pantalla, no con display:none. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn {
  display: block;
  width: 100%;
  min-height: max(1.875rem, 6.5cqw);
  margin-top: max(0.35rem, 3.37cqw);
  padding: 0 1rem;
  border: 1px solid var(--btn-fondo);
  border-radius: 0;
  background: var(--btn-fondo);
  color: var(--btn-texto);
  font-family: inherit;
  font-size: max(0.6875rem, 2.95cqw);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-align: center;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.btn:hover {
  background: var(--btn-fondo-hover);
  border-color: var(--btn-fondo-hover);
}

.btn[disabled] {
  opacity: 0.55;
  cursor: progress;
}

/* Este botón vive fuera de .bloque (páginas de sección y 404), donde no hay
   contenedor al que referir las cqw de .btn: sin medidas propias se resolvían
   contra el ancho de la ventana y en escritorio salía enorme. */
.btn--ghost {
  display: inline-block;
  width: auto;
  min-height: 0;
  height: 2.125rem;
  line-height: 2.125rem;
  /* .btn lo tenía en cqw: aquí crecería con el ancho de la ventana. */
  margin-top: 0;
  padding: 0 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  background: transparent;
  color: var(--tinta);
  border-color: var(--linea);
}

.btn--ghost:hover {
  background: transparent;
  border-color: var(--tinta);
}

.linkish {
  margin-top: 0.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta-suave);
  font-family: inherit;
  font-size: 0.75rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.linkish:hover { color: var(--tinta); }

.msg {
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
}

/* Sin color, el error se distingue por el peso y por el borde del campo. */
.msg--error {
  color: var(--error);
  font-weight: 700;
}

/* ---------------------------------------------- Indicador de envío (~2 s) */

.enviando {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.6rem 0 0;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.enviando__barra {
  position: relative;
  flex: 1;
  height: 2px;
  overflow: hidden;
  background: var(--linea);
}

.enviando__barra::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 35%;
  background: var(--tinta);
  animation: recorrer 1.15s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes recorrer {
  0%   { left: -35%; }
  100% { left: 100%; }
}

/* ---------------------------------------------------------- Estado final */

.done {
  animation: aparecer 450ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Todo en un renglón: el estado en versalitas y el detalle en gris a
   continuación, separados por una raya. Si no cabe, salta de línea por el
   hueco natural en vez de partir una frase. */
.done__linea {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45em;
  margin: 0;
  /* Algo menor que la etiqueta del formulario: así "REGISTRO CORRECTO —
     Revisa tu bandeja de entrada" entra de una sola línea. */
  font-size: max(0.6875rem, 2.6cqw);
  line-height: 1.5;
}

.done__estado {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta);
}

.done__detalle,
.done__cuenta {
  color: var(--tinta-suave);
}

.done__cuenta::before {
  content: "· ";
  color: var(--linea);
}

/* En Instagram no hay detalle entre el estado y la cuenta: sin él, el punto
   quedaba suelto al principio de la línea. */
.done__detalle[hidden] + .done__cuenta::before {
  content: none;
}

/* La raya va pegada al detalle, no suelta entre los dos: si la línea salta,
   baja con él en vez de quedarse colgando al final del renglón. */
.done__detalle::before {
  content: "— ";
  color: var(--linea);
}

/* ------------------------------------------------ Páginas de sección y 404 */

.pronto {
  text-align: center;
  max-width: 26rem;
}

/* Solo lo usa el 404; las secciones llevan el nombre como título. */
.pronto__seccion {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.pronto__texto {
  margin: 0 0 clamp(1.5rem, 5vh, 2.5rem);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--tinta-suave);
  text-wrap: pretty;
}

.pronto__texto a {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pronto__titulo {
  margin: 0 0 clamp(0.75rem, 2.5vh, 1.25rem);
  font-size: clamp(1.375rem, 4.5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* ------------------------------------------------ Verificación de Instagram */

.verifica {
  margin-top: max(0.9rem, 4cqw);
}

.verifica__texto {
  margin: 0;
  font-size: max(0.6875rem, 2.74cqw);
  line-height: 1.55;
  color: var(--tinta-suave);
  text-wrap: pretty;
}

.verifica__texto a {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* El código se lee en el mismo visor que el contador: parece parte del
   aparato y no un dato suelto. */
.verifica__codigo {
  position: relative;
  display: inline-block;
  margin: max(0.6rem, 3cqw) 0 max(0.5rem, 2.5cqw);
  padding: 0.12em 0.35em;
  background: var(--visor-fondo);
  border: 1px solid var(--visor-borde);
  color: var(--digito);
  font-family: var(--fuente-visor);
  font-size: max(1.75rem, 8cqw);
  line-height: 1;
  letter-spacing: 0.08em;
}

.btn--enlace {
  display: flex;
  align-items: center;
  justify-content: center;
}

.verifica__aviso {
  margin: 0.5rem 0 0;
  font-size: max(0.6875rem, 2.6cqw);
  color: var(--tinta);
}

/* ------------------------------------------------ Gracias (tras Instagram) */

.gracias {
  animation: aparecer 450ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gracias p {
  margin: 0;
  line-height: 1.5;
}

.gracias__principal {
  font-size: max(0.6875rem, 2.74cqw);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta);
}

.gracias__secundaria {
  font-size: max(0.6875rem, 2.6cqw);
  color: var(--tinta-suave);
}

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

.foot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  /* Por la base, no por abajo: así el 01, más grande, se apoya en la misma
     línea que el copyright en vez de bailar. */
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: var(--medida-maxima);
  margin-inline: auto;
  padding: 1.25rem var(--margen-lateral) calc(1.5rem + env(safe-area-inset-bottom));
  font-size: 0.6875rem;
  font-weight: 700;
  /* Iba a 0,1em y el copyright ocupaba media línea de más. */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tinta);
}

.foot p { margin: 0; }

.foot__num {
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------ Paginación del pie
   En las páginas de sección los números hacen de navegación: ocupan el mismo
   sitio que el número suelto de la portada, en la misma línea de base. */

.foot__nums {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1em;
  margin: 0;
  padding: 0;
  font-size: 1.0625rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

/* Con los números en columna ya no puede haber una línea de base común: se
   alinean por abajo, de modo que el último número queda a la altura del
   copyright. En la portada, que solo lleva el 01, sigue mandando la línea
   de base que se ajustó antes. */
.foot--paginado {
  align-items: flex-end;
}

.foot__nums a {
  color: var(--tinta-suave);
  text-decoration: none;
}

.foot__nums a:hover {
  color: var(--tinta);
}

.foot__nums a[aria-current="page"] {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------- Estados */

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(0.4rem); }
  to   { opacity: 1; transform: none; }
}

.countdown,
.signup {
  animation: aparecer 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.signup { animation-delay: 110ms; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Sin animación, la barra se queda a medias: sigue diciendo "en marcha". */
  .enviando__barra::after {
    left: 0;
    width: 45%;
  }
}

/* --------------------------------------------------- Transición de página
   Fundido al navegar entre la portada, Próximamente y el 404. Lo resuelve
   el navegador con View Transitions; donde no esté soportado (Firefox, de
   momento) el salto es el de siempre, sin nada roto. */

@view-transition {
  navigation: auto;
}

@keyframes vt-sale {
  to { opacity: 0; transform: translateY(-4px); }
}

@keyframes vt-entra {
  from { opacity: 0; transform: translateY(8px); }
}

::view-transition-old(root) {
  animation: vt-sale 260ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: vt-entra 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Entre dos secciones el fundido no se veía: las páginas son casi iguales y
   lo único que cambia es una palabra. Dándole nombre propio, el navegador
   empareja el título de una página con el de la otra y lo transforma, en
   lugar de fundir dos pantallas idénticas. */
.pronto__titulo {
  view-transition-name: titulo-seccion;
}

::view-transition-old(titulo-seccion),
::view-transition-new(titulo-seccion) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(titulo-seccion),
  ::view-transition-new(titulo-seccion) {
    animation-duration: 0.01ms;
  }
}