/* ═══ MANIFIESTO: bloque marino pleno ═══
   Dejó de ser coral para que el sol del cliente se lea; el porqué completo
   está en el comentario de secciones/03-manifiesto.html.
   La sección lleva .seccion--oscura, que ya pone el texto en crema y el foco
   en amarillo, así que acá no hay ninguna regla de color sobre el titular. */
.manifiesto {
  background: var(--marino);
  overflow: hidden;
  padding-block: calc(var(--esp-5) * 1.15);
}

.manifiesto__interior { position: relative; }

.manifiesto__frase {
  font-size: var(--paso-5);
  line-height: 1.08;
  max-width: 16em;
}
.manifiesto__frase span { display: block; }
.manifiesto__frase em {
  font-style: normal;
  color: inherit; /* crema: 11:1 sobre marino, el énfasis lo pone el subrayado */
  text-decoration: underline;
  text-decoration-thickness: .12em;
  text-decoration-color: var(--amarillo);
  text-underline-offset: .14em;
}

.manifiesto__sol {
  top: clamp(1rem, 4vw, 3rem); right: clamp(1rem, 6vw, 5rem);
  width: clamp(90px, 12vw, 170px); height: auto;
  transform: rotate(8deg);
}
@media (max-width: 720px) {
  .manifiesto__sol { width: 72px; top: -1.4rem; right: .9rem; }
  .manifiesto { padding-top: calc(var(--esp-5) * 1.2); }
}
/* La ola es coral y no amarilla por dos razones: el amarillo ya trabaja en el
   subrayado del titular y repetirlo abajo aplanaba el bloque, y así el coral
   que perdió el fondo vuelve a la sección y esto se sigue leyendo como marca.
   Va abajo a la izquierda, diagonal opuesta al sol, así que no le compite.
   El color se pone acá y no en el SVG: el trazo usa stroke="currentColor". */
.manifiesto__ola {
  bottom: clamp(.8rem, 3vw, 2.4rem); left: clamp(1rem, 5vw, 4rem);
  width: clamp(170px, 24vw, 320px); height: auto;
  color: var(--coral);
}