/*
 * La puerta. Solo la usa la página que sirve `middleware.js`.
 *
 * Vive en `/css/` porque esa carpeta pasa SIN candado: la puerta tiene que poder
 * verse como FL Brands antes de que nadie escriba la clave, y ni la hoja de
 * estilo ni el logotipo son el contenido que se está protegiendo.
 *
 * Es un archivo aparte y no una regla dentro de `brands.css` por dos razones: el
 * sitio no debe cargar estilos de una puerta que ya pasó, y la puerta no debe
 * arrastrar el sistema visual entero para pintar una caja.
 *
 * Nada de estilos en línea: la CSP es `style-src 'self'` sin `'unsafe-inline'`.
 *
 * Se declaran solo los dos pesos que la puerta usa —Poppins 500 e Inter 300— y
 * solo el subconjunto latin, que cubre el español completo (las vocales
 * acentuadas, la eñe y las comillas angulares viven todas bajo U+00FF).
 */

@font-face {
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fuentes/poppins-500-latin.woff2) format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fuentes/inter-300-latin.woff2) format("woff2");
}

:root {
  --navy-900: #13182c;
  --navy-700: #1c2545;
  --pale: #edf2f8;
  --rojo: #e8344b;
  /* Medido: 7.19:1 sobre navy-900. El rojo NO sirve de letra en ningún lado. */
  --tenue: #9aa6c0;
  --filete: #2a3f67;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--navy-900);
  color: var(--pale);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.caja {
  width: 100%;
  max-width: 23rem;
  text-align: center;
}

.tile {
  border-radius: 13px;
  display: block;
  margin: 0 auto 1.5rem;
}

h1 {
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.75rem;
  letter-spacing: -0.025em;
  margin: 0;
}

/* El punto rojo de la marca, como forma y no como letra. */
h1::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: var(--rojo);
  margin: 1.1rem auto 0;
}

.pie {
  margin: 1.1rem 0 2rem;
  color: var(--tenue);
  font-size: 0.9375rem;
}

form {
  display: grid;
  gap: 0.7rem;
  text-align: left;
}

label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tenue);
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
}

input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--filete);
  border-radius: 10px;
  background: var(--navy-700);
  color: var(--pale);
  font: inherit;
  font-size: 1rem; /* 16px: por debajo, Safari en iOS hace zoom al enfocar. */
}

input::placeholder {
  color: #5f6e8c;
}

input:focus-visible,
button:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 2px;
}

button {
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--rojo);
  color: #fff;
  font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: filter 0.18s;
}

button:hover {
  filter: brightness(1.08);
}

/*
 * El aviso de error NO va en rojo: el rojo de marca mide 4.21:1 sobre navy-900 y
 * no llega al piso de 4.5:1 para texto. Lo señala el filete de la izquierda, que
 * es forma, y la letra queda legible.
 */
.err {
  margin: 0.4rem 0 0;
  padding-left: 0.7rem;
  border-left: 2px solid var(--rojo);
  color: var(--pale);
  font-size: 0.875rem;
}