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

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

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--mar-hondo);
  color: var(--sobre-hondo);
  font-family: var(--font-texto);
}

/* Cabecera: logotipo inverso arriba a la izquierda, con el área de respeto
   (la altura de la silueta) por los cuatro lados. */
.cabecera {
  padding: var(--espacio-12) var(--espacio-8) 0;
}

.cabecera img {
  display: block;
  width: clamp(200px, 20vw, 340px);
  max-width: 62vw;
  height: auto;
}

/* Portada: un solo mensaje, como manda el sistema para valla y cartel. */
.portada {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--espacio-16) var(--espacio-8);
}

.antetitulo {
  margin: 0 0 var(--espacio-6);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sol);
}

.cartel {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(32px, 8.5vw, 104px);
  line-height: 0.96;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* La franja de la portada del sistema: cuatro bandas desiguales, de la noche
   al sol y del barro al mar, con La Concha recortada en negativo encima.
   La silueta va una vez por pantalla y no se deforma nunca: cuando el hueco
   es más bajo de lo que da su proporción se recorta por los lados. */
.franja {
  display: block;
  width: 100%;
  height: auto;
}

.banda-hondo { fill: var(--mar); }
.banda-sol { fill: var(--sol); }
.banda-sierra { fill: var(--sierra); }
.banda-mar { fill: var(--mar-claro); }
.concha { fill: var(--mar-hondo); }

@media (min-width: 720px) {
  .cabecera,
  .portada {
    padding-left: var(--espacio-12);
    padding-right: var(--espacio-12);
  }
}