/* ═══ UTILIDADES ═══
   Clases que antes vivían como atributos `style` en el HTML. Sacarlas de ahí
   no es solo orden: un atributo `style` obliga a permitir `'unsafe-inline'`
   en la política de seguridad de contenido, que es justo lo que esa política
   sirve para impedir. Sin ellos, la CSP puede ser estricta. */

/* Eyebrow (el rótulo pequeño sobre los titulares) centrado en su bloque. */
.eyebrow--centrado{display:inline-flex;justify-content:center}

/* Sección sobre fondo blanco, entre bandas de color. */
.seccion--blanca{background:var(--blanco)}

/* Bloque de texto centrado y con ancho de lectura acotado. */
.bloque-centrado{text-align:center;margin-inline:auto}
.bloque-centrado--ancho{max-width:44rem;margin-top:clamp(48px, 7vw, 70px)}
.bloque-centrado--estrecho{max-width:42rem}
.bloque-centrado .section-lead{margin-inline:auto}

/* Llamada a la acción centrada al cierre de una sección. */
.cta-centrada{text-align:center;margin-top:clamp(34px, 5vw, 50px)}

/* Variantes de titular de sección. */
.section-h2--compacto{font-size:clamp(1.75rem, 3.6vw, 2.375rem);margin-bottom:24px}
.section-h2--espaciado{margin-bottom:30px}

/* La sección de contacto, cuando es la página entera y no un cierre. */
.contacto-section--pagina{
  padding-block:clamp(120px, 18vh, 150px) clamp(80px, 12vw, 120px);
}

/* Palabra resaltada en el verde de la marca. */
.texto-acento{color:var(--verde-agricola)}

/* ═══ APARICIÓN AL DESPLAZAR ═══
   El contenido nace visible. La clase `con-revelado` la pone `Revelador` al
   arrancar, y solo entonces las piezas empiezan ocultas: sin JavaScript, o con
   «movimiento reducido», la página se lee completa desde el primer momento.

   El número del atributo marca el turno: así los párrafos de un bloque, o las
   tarjetas de una rejilla, entran escalonados y no todos de golpe. */
.con-revelado [data-revelar]{opacity:0;transform:translateY(18px)}
.con-revelado [data-revelar].revelado{
  opacity:1;transform:none;
  transition:opacity .55s ease-out, transform .55s ease-out;
}
.con-revelado [data-revelar="2"].revelado{transition-delay:.08s}
.con-revelado [data-revelar="3"].revelado{transition-delay:.16s}
.con-revelado [data-revelar="4"].revelado{transition-delay:.24s}
.con-revelado [data-revelar="5"].revelado{transition-delay:.32s}
.con-revelado [data-revelar="6"].revelado{transition-delay:.4s}

/* Al imprimir no hay desplazamiento que valga: todo visible. */
@media print{
  .con-revelado [data-revelar]{opacity:1 !important;transform:none !important}
}