@charset "UTF-8";
/* ==========================================================================
   ATRAMIA MATERIALES - CAPA DE APLICACION
   --------------------------------------------------------------------------
   Componentes de la aplicacion autenticada. Aqui el lujo es la claridad y la
   densidad: movimiento minimo, solo estados y retroalimentacion.

   Depende de /css/tokens.css, que debe cargarse ANTES.
   Regla: en este fichero no se escribe ningun color, tamano, radio, sombra ni
   duracion a mano. Solo tokens.
   ========================================================================== */

/* ==========================================================================
   1. ESTRUCTURA
   ========================================================================== */

body.capa-aplicacion {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-estructura);
  font-size: var(--texto-base);
  min-height: 100vh;
}

/* Enlace de salto: invisible hasta recibir foco por teclado. */
.salto-contenido {
  position: absolute;
  left: var(--espaciado-sm);
  top: calc(var(--espaciado-sm) * -6);
  z-index: 1080;
  padding: var(--espaciado-xs) var(--espaciado-md);
  background-color: var(--color-acento);
  color: var(--color-acento-contraste);
  border-radius: var(--radio-sm);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: top var(--dur-rapida) var(--curva-salida);
}

.salto-contenido:focus-visible {
  top: var(--espaciado-sm);
  outline: var(--anillo-foco);
  outline-offset: 2px;
}

/* ==========================================================================
   2. PORTADA PROVISIONAL
   La vitrina definitiva se construye en la fase final, con capturas reales.
   ========================================================================== */

.portada {
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding: var(--espaciado-4xl) var(--espaciado-lg);
}

.portada__titulo {
  font-family: var(--fuente-estructura);
  font-size: var(--texto-heroe);
  font-weight: var(--peso-titular);
  line-height: 1.05;
  margin: 0 0 var(--espaciado-md);
  color: var(--color-texto);
}

/* El filete rojo es la marca: la rubrica que estructura. */
.portada__titulo::after {
  content: "";
  display: block;
  width: var(--espaciado-3xl);
  height: 3px;
  margin-top: var(--espaciado-md);
  background-color: var(--color-acento);
  border-radius: var(--radio-completo);
}

.portada__entradilla {
  font-family: var(--fuente-lectura);
  font-size: var(--texto-xl);
  line-height: 1.5;
  max-width: var(--ancho-prosa);
  color: var(--color-texto-secundario);
  margin: 0 0 var(--espaciado-xl);
}

.portada__estado {
  font-size: var(--texto-sm);
  color: var(--color-texto-auxiliar);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

/* ==========================================================================
   3. PAGINAS DE ERROR
   ========================================================================== */

.bloque-error {
  max-width: var(--ancho-prosa);
  margin-inline: auto;
  padding: var(--espaciado-5xl) var(--espaciado-lg);
  text-align: left;
}

.bloque-error__codigo {
  font-family: var(--fuente-mono);
  font-size: var(--texto-sm);
  color: var(--color-acento);
  letter-spacing: 0.12em;
  margin: 0 0 var(--espaciado-sm);
}

.bloque-error__titulo {
  font-size: var(--texto-seccion);
  font-weight: var(--peso-titular);
  line-height: 1.15;
  margin: 0 0 var(--espaciado-sm);
}

.bloque-error__texto {
  font-family: var(--fuente-lectura);
  font-size: var(--texto-lg);
  color: var(--color-texto-secundario);
  line-height: 1.6;
  margin: 0 0 var(--espaciado-xl);
}

/* ==========================================================================
   4. UTILIDADES
   ========================================================================== */

/* Visible solo para lectores de pantalla. */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   5. MOVIMIENTO REDUCIDO
   ========================================================================== */

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