/* ===== Portada con fotos reales ===== */
.hero.hero-real{background:var(--night);padding:110px 0 72px;min-height:100svh}
.hero-bg{position:absolute;inset:0;overflow:hidden;background:#1b110a url(img/grupo-completo.jpg) center/cover no-repeat}
.hero-bg .slide{position:absolute;inset:-3%;background-size:cover;background-position:center 30%;opacity:0;transform:scale(1.02);transition:opacity 1.6s ease}
.hero-bg .slide.on{opacity:1;animation:kenburns 9s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.2%,-1%,0)}}
.hero-real .hero-shade{background:linear-gradient(180deg,rgba(27,17,10,.82) 0,rgba(27,17,10,.5) 32%,rgba(27,17,10,.55) 62%,rgba(27,17,10,.92) 100%),radial-gradient(ellipse 80% 60% at 50% 45%,rgba(27,17,10,.35),transparent 70%)}
.hero-real .hero-inner{z-index:3}
.hero-real .hero-badges{display:flex}
@media (max-width:560px){
  .hero.hero-real{padding:96px 0 56px}
  .hero-real .hero-badges{display:flex;gap:6px 14px;font-size:.84rem;justify-content:center}
  .hero-bg .slide{background-position:center 22%}
}
@media (min-width:1200px){
  .hero.hero-real{padding-bottom:80px}
  .hero-real .hero-inner{max-width:860px}
  .hero-real h1{font-size:min(5.4rem,6vw)}
}
@media (prefers-reduced-motion:reduce){.hero-bg .slide.on{animation:none}}

/* la etiqueta de arriba debe aparecer (antes quedaba invisible) */
.hero-inner>.kicker{animation:rise .9s .15s both,glow 2.8s 1.2s ease-in-out infinite}

/* ===== Portada: foto del grupo sobre la sabana (imagen real) ===== */
.hero-bg{background:#1c5a9a}
.hero-bg picture,.hero-bg img{display:block;width:100%;height:100%}
.hero-bg img{object-fit:cover;object-position:center bottom;transform-origin:50% 100%;animation:zoomlento 14s ease-out both}
@keyframes zoomlento{from{transform:scale(1.0)}to{transform:scale(1.05)}}
.hero-real .hero-shade{background:linear-gradient(180deg,rgba(8,22,45,.72) 0,rgba(8,22,45,.5) 30%,rgba(8,22,45,.18) 52%,rgba(0,0,0,0) 70%)}
.hero.hero-real{align-items:flex-start;min-height:100svh;padding-bottom:0}
.hero-real .hero-inner{margin-top:0}
.hero-real h1{text-shadow:0 4px 0 rgba(8,22,45,.55),0 8px 30px rgba(0,0,0,.65)}
.hero-real .hero-sub{text-shadow:0 2px 10px rgba(0,0,0,.7)}

/* celular: compacto arriba para dejar ver al grupo abajo */
@media (max-width:899px){
  .hero.hero-real{padding:88px 0 0}
  .hero-real .hero-social,.hero-real .hero-badges{display:none}
  .hero-real .hero-sub{font-size:.98rem;margin-bottom:16px;max-width:340px}
  .hero-real h1{font-size:clamp(1.9rem,8.6vw,2.6rem);margin-bottom:10px}
  .hero-real .hero-cta{margin-bottom:0}
  .kicker{margin-bottom:10px}
}
/* computador */
@media (min-width:900px){
  .hero.hero-real{padding:96px 0 0;min-height:max(100svh,640px)}
  .hero-real .hero-inner{max-width:940px}
  .hero-real h1{font-size:min(4.2rem,5.2vw);margin-bottom:12px}
  .hero-real .hero-sub{max-width:680px;font-size:1.1rem;margin-bottom:20px}
  .hero-real .hero-cta{margin-bottom:14px}
  .hero-real .hero-social{margin:0}
  .hero-real .hero-badges{display:none}
}
@media (prefers-reduced-motion:reduce){.hero-bg img{animation:none}}

/* los íconos de redes ya están más abajo; en la portada estorban a la foto */
.hero-real .hero-social{display:none}

/* imagen ancha con cielo extra: la portada mide lo que mide la foto */
@media (min-width:900px){
  .hero.hero-real{min-height:max(100svh,calc(100vw * 1322 / 1920))}
  .hero-real .hero-badges{display:none}
}