/* ============================================================================
   LAYOUT › SECCIONES DE CONTENIDO
   ----------------------------------------------------------------------------
   El "molde" que comparten todas las secciones de abajo del hero: ancho máximo,
   centrado, aire interno y título con barrita amarilla.

   Al escalar: si mañana agregás una sección "Galería" o "Fechas", le ponés
   class="seccion" y ya hereda todo esto. No hay que escribir CSS nuevo para la
   estructura, solo para lo que esa sección tenga de particular.
   ============================================================================ */

/* Envoltorio que aplica el panel oscuro por encima del video fijo.
   position:relative + z-index lo mantienen por delante del video (z-index:-2). */
.contenido {
  position: relative;
  z-index: 1;
  background: var(--color-panel);
}

.seccion {
  max-width: var(--ancho-max);
  margin: 0 auto;                                 /* centra el bloque */
  padding: 64px 20px;                             /* mobile-first */
  text-align: center;
}

/* Línea divisoria sutil ENTRE secciones (no arriba de la primera).
   El selector "+" aplica solo cuando una .seccion sigue a otra .seccion. */
.seccion + .seccion {
  border-top: 1px solid var(--color-borde);
}

.seccion__titulo {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Barrita amarilla decorativa debajo de cada título de sección. */
.seccion__titulo::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  background: var(--color-acento);
  margin: 14px auto 0;
}

.seccion__texto {
  color: var(--color-texto-suave);
  font-size: 16px;
  max-width: 680px;                               /* ~70 caracteres = lectura cómoda */
  margin: 22px auto 0;
}

/* --- Tablet: 600px en adelante ------------------------------------------- */
@media (min-width: 600px) {
  .seccion         { padding: 84px 28px; }
  .seccion__titulo { font-size: 32px; }
}

/* --- Desktop: 992px en adelante ------------------------------------------ */
@media (min-width: 992px) {
  .seccion        { padding: 100px 32px; }
  .seccion__texto { font-size: 17px; }
}