/*
 * PUNTO — etapa 1: portada.
 * FUENTE PROVISIONAL: Arial Black (Arial / sans-serif como respaldo).
 * No es Futura: cambiarán las formas, el ancho y el peso visual.
 * No usamos escalados horizontales, contornos ni negritas artificiales.
 *
 * INCORPORACIÓN DE FUTURA:
 * 1. Guardar las fuentes web originales en assets/fonts/.
 * 2. Activar los @font-face de abajo y ajustar sus nombres de archivo.
 * 3. Cambiar las dos variables --fuente-* por las familias indicadas.
 * 4. Revisar tamaño, espaciado e interlineado contra los PDF.
 * La estructura HTML y las posiciones no necesitan reconstruirse.
 * Los alias son propios: no dependen del nombre interno de cada fuente.
 */

/*
@font-face {
  font-family: "Punto Futura Extranegrita";
  src: url("../fonts/futura-extranegrita.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Punto Futura Ultragruesa";
  src: url("../fonts/futura-ultragruesa.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
*/

:root {
  --color-fondo: #ffffff;
  --color-texto: #202020;
  --color-marca: #e00814;
  /* PROVISIONALES. Luego: "Punto Futura Extranegrita" y/o
     "Punto Futura Ultragruesa", según la comparación con el original. */
  --fuente-titular: "Arial Black", Arial, sans-serif;
  --fuente-marca: "Arial Black", Arial, sans-serif;
  --peso-titular: 900; /* Máximo de la provisional; sin negrita sintética. */
  --peso-marca: 900;
  /* Ajustes tipográficos centralizados; unidades relativas al ancho. */
  --tamano-titular: 11.3cqw;
  --interlineado-titular: 0.76;
  --espaciado-titular: -0.10em;
  --tamano-marca: 5.05cqw;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--color-fondo);
  color: var(--color-texto);
  font-synthesis: none;
}

.portada {
  min-height: 100vh;
  min-height: 100svh;
}

/* Lienzo de referencia de escritorio: 1080 × 675.
   La altura sigue el ancho, conservando la composición original. */
.portada__composicion {
  position: relative;
  width: 100%;
  aspect-ratio: 1080 / 675;
  container-type: inline-size;
}

.portada__punto {
  position: absolute;
  top: 13.35%;
  left: 5.6%;
  width: 2.25%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-marca);
}

.portada__mensaje {
  position: absolute;
  top: 15.2%;
  left: 5%;
  width: 90%;
  margin: 0;
  font-family: var(--fuente-titular);
  font-weight: var(--peso-titular);
  font-size: var(--tamano-titular);
  line-height: var(--interlineado-titular);
  letter-spacing: var(--espaciado-titular);
  text-align: center;
}

.portada__mensaje span { display: block; white-space: nowrap; }

.portada__marca {
  position: absolute;
  top: 80.6%;
  right: 6.1%;
  margin: 0;
  color: var(--color-marca);
  font-family: var(--fuente-marca);
  font-weight: var(--peso-marca);
  font-size: var(--tamano-marca);
  line-height: 1;
  /* Más densidad con el trazo original de Arial Black, sin efectos. */
  letter-spacing: -0.075em;
}

/* Referencia móvil: 292.5 × 633. La composición conserva su escala
   relativa al ancho y baja ligeramente; el resto permanece blanco. */
@media (max-width: 600px) {
  .portada { min-height: max(100svh, 216.41vw); }
  .portada__composicion { top: 1.7vw; }
}