/* Hoja unica de fzdeveloper.com.
   Todas las clases llevan prefijo fz-: en SquArt una clase de una palabra
   choco con otra y dejo texto invisible en siete paginas en vivo. */

@font-face {
  font-family: "Manrope";
  src: url("../fuentes/manrope-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F;
}
@font-face {
  font-family: "Manrope";
  src: url("../fuentes/manrope-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB;
}

:root {
  --fz-fondo: #0E1116;
  --fz-texto: #E6E8EB;
  --fz-acento: #4C8DFF;
  --fz-secundario: #8B939E;
  --fz-tenue: #5A626C;
  /* --fz-superficie es el fondo de una tarjeta/bloque elevado sobre
     --fz-fondo: mas claro (0,0079 vs 0,0055 de luminancia), pero muy
     poco -- 1,04:1 entre los dos, casi el mismo gris. Esto FUE cierto
     hasta que .fz-tarjeta__nota empezo a pintar --fz-acento directo
     sobre --fz-superficie: ese par SI tiene su propia entrada en
     PAREJAS ("acento sobre superficie", bin/comprobar.py), para que
     no vuelva a quedar un color pintado sobre un fondo que nadie mide. */
  --fz-superficie: #12161D;
  /* --fz-borde es el UNICO separador visual del sitio (tarjetas y pie).
     Ver bin/comprobar.py, PAREJAS: se mide contra --fz-superficie
     porque ese es el fondo mas exigente de los dos que toca (el pie
     se apoya en --fz-fondo, mas oscuro, que da MAS contraste con el
     mismo borde). Si pasa contra el mas dificil, pasa contra los dos. */
  --fz-borde: #5A6670;
  --fz-ancho: 68rem;
  --fz-aire: clamp(3rem, 8vw, 6rem);
}

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

body {
  margin: 0;
  background: var(--fz-fondo);
  color: var(--fz-texto);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.fz-principal { display: block; }

.fz-seccion {
  max-width: var(--fz-ancho);
  margin: 0 auto;
  padding: var(--fz-aire) 1.5rem;
}

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 1rem; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; }

a { color: var(--fz-acento); }

.fz-boton {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 1.7rem; border-radius: 999px;
  background: var(--fz-acento); color: #071021;
  font-weight: 700; text-decoration: none;
  transition: filter .18s;
}
.fz-boton:hover, .fz-boton:focus-visible { filter: brightness(1.12); }
.fz-boton:focus-visible { outline: 2px solid var(--fz-texto); outline-offset: 3px; }

/* El tenue solo aqui: 3,06:1 no vale para un parrafo.
   font-weight: 700 es lo que habilita el 3:1 (negrita baja el umbral a
   14px; a 1.15rem/18.4px normal se quedaba 0.26px corta de los 18.66px
   que pide el texto grande sin negrita). Ver bin/comprobar.py, regla
   de fz-tenue: sin esto el comprobador no lo detecta. */
.fz-rotulo {
  color: var(--fz-tenue);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.fz-cabecera {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  max-width: var(--fz-ancho); margin: 0 auto; padding: 1.25rem 1.5rem;
}
.fz-cabecera__marca {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em;
  color: var(--fz-texto); text-decoration: none;
}
.fz-cabecera__acento { color: var(--fz-acento); }
.fz-menu { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.fz-menu__enlace { color: var(--fz-secundario); text-decoration: none; }
.fz-menu__enlace:hover, .fz-menu__enlace:focus-visible { color: var(--fz-texto); }
.fz-menu__enlace--activa { color: var(--fz-texto); font-weight: 700; }

.fz-pie {
  max-width: var(--fz-ancho); margin: 0 auto;
  padding: var(--fz-aire) 1.5rem 3rem;
  border-top: 1px solid var(--fz-borde);
  color: var(--fz-secundario);
}
.fz-pie__linea { margin: 0.35rem 0; }
.fz-pie__enlace { color: var(--fz-acento); }
/* Esta linea (el aviso de "sin cookies") tiene que ser la mas discreta
   del pie, y --fz-tenue no sirve para eso: solo pasa el contraste en
   negrita o a tamano grande, y las dos opciones la harian MAS
   llamativa que el resto del pie, justo lo contrario de lo que pide.
   La jerarquia aqui la da el tamano (mas chico que .fz-pie__linea),
   no el color: por eso usa --fz-secundario (6,09:1, pasa a cualquier
   tamano y sin negrita). No volver a --fz-tenue aqui. */
.fz-pie__nota { color: var(--fz-secundario); font-size: 0.95rem; }

.fz-portada { padding-top: 2rem; }
.fz-portada__entrada {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  color: var(--fz-secundario); max-width: 42rem; margin: 0 0 2rem;
}
.fz-rejilla {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
/* El borde de la tarjeta NO es --fz-tenue: --fz-superficie y --fz-fondo
   casi no se distinguen entre si (1,04:1), asi que el borde es lo UNICO
   que hace que las cuatro tarjetas se lean como tarjetas y no como un
   parrafo corrido. Por que --fz-borde vale lo que vale y contra que
   fondo se mide: ver el comentario en :root y la regla "borde sobre
   superficie" en bin/comprobar.py (PAREJAS). */
.fz-tarjeta {
  border: 1px solid var(--fz-borde); border-radius: 1rem; padding: 1.5rem;
  background: var(--fz-superficie);
}
.fz-tarjeta__titulo { font-size: 1.2rem; margin-bottom: 0.5rem; }
.fz-tarjeta__texto { color: var(--fz-secundario); margin: 0 0 1rem; }
.fz-tarjeta__enlace { font-weight: 700; }
/* Pinta un [[FALTA: ...]] que no se pudo convertir en enlace: tiene que
   distinguirse del texto normal de la tarjeta (--fz-secundario), asi que
   usa --fz-acento en cursiva. Da 5,66:1 contra --fz-superficie, pasa de
   sobra el 4,5:1 de texto, y esta vigilado por la PAREJA "acento sobre
   superficie" en bin/comprobar.py: es un color pintado sobre un fondo,
   y eso siempre necesita su propia entrada. */
.fz-tarjeta__nota { color: var(--fz-acento); font-style: italic; margin: 0; }
.fz-cierre { text-align: center; }

.fz-fichas { display: grid; gap: 2rem; }
/* El borde va contra --fz-fondo (la pagina), no contra --fz-superficie:
   por eso vale var(--fz-borde) tal cual, sin volver a medirlo -- la
   pareja "borde sobre superficie" de PAREJAS en bin/comprobar.py ya
   cubre el caso mas dificil (ver el comentario de :root). Aqui NO va
   un hexadecimal suelto: #1C2230 fue el mismo valor que dio 1,14:1
   invisible contra la tarjeta en la Tarea 6, precisamente porque era un
   hex suelto que ningun comprobador media. */
.fz-ficha { border-top: 1px solid var(--fz-borde); padding-top: 1.5rem; }
.fz-ficha__titulo { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.fz-ficha__texto { color: var(--fz-secundario); max-width: 46rem; }
.fz-ficha__nota { color: var(--fz-secundario); font-style: italic; }

.fz-pasos, .fz-lista { list-style: none; padding: 0; display: grid; gap: 1rem; }
.fz-pasos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.fz-paso { border-left: 3px solid var(--fz-acento); padding-left: 1rem; }
.fz-paso__titulo { font-size: 1.05rem; margin-bottom: 0.35rem; }
.fz-paso__texto { color: var(--fz-secundario); margin: 0; }
/* El borde de .fz-lista va contra --fz-fondo (la pagina), no contra
   --fz-superficie: por eso vale --fz-borde tal cual, la misma pareja
   "borde sobre superficie" de PAREJAS en bin/comprobar.py ya cubre el
   caso mas dificil. Aqui NO va el hexadecimal suelto: #1C2230 fue el
   mismo valor que dio 1,14:1 invisible contra la tarjeta en la Tarea 6,
   justo porque era un hex suelto que ningun comprobador media. */
.fz-lista li {
  color: var(--fz-secundario); border-bottom: 1px solid var(--fz-borde); padding-bottom: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .fz-boton { transition: none; }
}