/* ========================================
   AISRENO — PHOTO DE FOND DES HEROS (COMMUN)
   Classe .hero-photo, utilisée par les heros de l'accueil, de « Cómo funciona »
   et de « Requisitos » : même photo, même voile, même zoom, même cadrage.
   À charger APRÈS les feuilles de style de la page (même priorité que
   .intro-hero de guias-aisreno.css : la dernière règle chargée l'emporte).
   Le zoom « cover » dépend de la largeur ET de la hauteur de chaque hero.
   ======================================== */

.hero-photo {
    min-height: 650px;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .93) 42%, rgba(255, 255, 255, .28) 78%),
        url('AISRENO_hero.webp');
    background-size: auto, cover;
    background-position: 0% 0%, center;
    background-repeat: no-repeat;
}

/* Mobile : voile vertical, photo calée en haut.
   AISRENO_hero-movil.webp = bande centrale (640 × 1024) de AISRENO_hero.webp :
   en mobile, le zoom « cover » se fait sur la hauteur et seule cette bande est
   visible, donc même cadrage et même zoom pour 75 Ko au lieu de 289 Ko.
   Préchargée dans le <head> de chaque page avec media="(max-width: 700px)". */
@media (max-width: 700px) {
    .hero-photo {
        min-height: auto;
        background-image:
            linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .97) 38%, #fff 76%),
            url('AISRENO_hero-movil.webp');
        background-position: center top;
    }
}