/* --- Portada: todo en una pantalla --- */

body.portada-publica { overflow: hidden; }
body.portada-publica footer { display: none; }
body.portada-publica main { display: flex; align-items: center; padding-bottom: 20px; }

.portada {
  display: grid; gap: 34px; align-items: center; width: 100%;
  min-height: calc(100dvh - 108px);
}
@media (min-width: 1000px) {
  .portada { grid-template-columns: minmax(320px, 42%) minmax(0, 1fr); gap: 44px; }
}

.portada-texto { min-width: 0; }
.portada h1 {
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08;
  letter-spacing: -.02em; margin: 0 0 14px;
}
.portada .bajada { font-size: 16px; line-height: 1.6; margin: 0 0 20px; max-width: 46ch; }

.puntos { list-style: none; margin: 0 0 26px; padding: 0; }
.puntos li {
  position: relative; padding: 5px 0 5px 24px;
  font-size: 14.5px; line-height: 1.45; color: var(--texto);
}
.puntos li::before {
  content: "✓"; position: absolute; left: 0; top: 5px;
  color: var(--acento); font-size: 13px;
}

.acciones-portada { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.boton.grande { font-size: 15px; padding: 11px 22px; }
.acciones-portada .meta { font-size: 12.5px; line-height: 1.5; max-width: 42ch; }

/* La captura manda: grande, con un borde suave que la despega del fondo. */
.portada-imagen { margin: 0; min-width: 0; }
.portada-imagen img {
  width: 100%; height: auto; display: block;
  border-radius: 12px; border: 1px solid var(--borde);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.portada-imagen figcaption {
  margin-top: 10px; font-size: 12.5px; color: var(--tenue); text-align: center;
}
.portada-imagen.sin-imagen { display: none; }

/* Pantallas bajas o angostas: se apila y se permite desplazar. */
@media (max-width: 999px), (max-height: 620px) {
  body.portada-publica { overflow: auto; }
  body.portada-publica main { display: block; padding-top: 10px; }
  .portada { min-height: 0; gap: 26px; }
  .portada-imagen { order: -1; }
}