/* =========================================
   SECCIONES DE CONTENIDO
   ========================================= */

main { position: relative; }

.seccion {
  padding: 6rem 2rem;
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
}

/* Etiqueta tipográfica antes del título (decorativa) */
.seccion h2 {
  font-family: var(--fuente-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--teal-oscuro);
  margin-bottom: 1.5rem;
  text-align: center;
  font-weight: 500;
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Línea decorativa bajo el h2 */
.seccion h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--lima), var(--cian));
  margin: 1rem auto 0;
  border-radius: 2px;
}

.seccion p {
  max-width: 720px;
  margin: 0 auto 1.5rem;
  text-align: center;
  color: var(--texto-suave);
  font-size: 1.05rem;
}

/* Fondo alterno para secciones pares (opcional, lo activaremos luego) */
.seccion.alt {
  background: var(--fondo-alt);
  max-width: 100%;
  width: 100%;
}
.seccion.alt > * {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}

.video-wrapper {
  width: 100%;
  max-width: 951px;    /* no crece más de su tamaño original */
  margin: 0 auto;
}

.video-wrapper iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none;        /* equivale a frameborder="0" */
  border-radius: 12px; /* opcional, queda bien */
}

@media (max-width: 640px) {
  .seccion { padding: 4rem 1.25rem; }
}