/* =========================================================
   css/slider.css — Slider de portada (slider.php)
   ========================================================= */
.hero-slider{position:relative;width:100%;height:clamp(380px,62vh,640px);background:#111;overflow:hidden}
.hero-slide{position:absolute;inset:0;background:#111 center/cover no-repeat;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
.hero-slide.activo{opacity:1;visibility:visible;z-index:1}
/* Capa semitransparente: más oscura abajo y al centro, donde va el texto */
.hero-slide::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.7) 100%)}
.hero-contenido{position:relative;z-index:2;height:100%;max-width:900px;margin:0 auto;padding:0 60px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff}
.hero-titulo{font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:clamp(32px,5vw,60px);line-height:1.05;margin:0 0 14px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.hero-desc{font-family:lato,Arial,sans-serif;font-size:clamp(16px,1.6vw,20px);line-height:1.5;max-width:680px;margin:0 0 26px;color:#f2f2f2;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hero-btn{display:inline-block;text-decoration:none;font-size:20px;padding:12px 34px;border:0;transition:background .2s,transform .2s}
.hero-btn:hover{background:#c00;transform:translateY(-1px)}
.hero-slide .hero-contenido > *{transform:translateY(14px);opacity:0;transition:transform .8s ease .25s,opacity .8s ease .25s}
.hero-slide.activo .hero-contenido > *{transform:none;opacity:1}

.hero-nav{position:absolute;top:50%;z-index:3;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:18px;cursor:pointer;transition:background .2s}
.hero-nav:hover{background:rgba(255,255,255,.32)}
.hero-prev{left:14px}
.hero-next{right:14px}
.hero-dots{position:absolute;left:0;right:0;bottom:18px;z-index:3;display:flex;justify-content:center;gap:9px}
.hero-dots button{width:11px;height:11px;padding:0;border:2px solid #fff;border-radius:50%;background:transparent;cursor:pointer;opacity:.8}
.hero-dots button.activo{background:#f00;border-color:#f00;opacity:1}

@media (max-width:600px){
  .hero-contenido{padding:0 22px}
  .hero-nav{display:none}
  .hero-btn{font-size:18px;padding:11px 26px}
}
@media (prefers-reduced-motion:reduce){
  .hero-slide,.hero-slide .hero-contenido > *{transition:none}
}