/**
 * sr-hero-overlay.css — Overlay de texto/botón sobre cada banner del hero
 * SpeedyRectCore v7.9 · Ferretería Falero
 *
 * AGREGAR al final de speedyrect-ui-v73.css
 *
 * Estructura del overlay (por banner, desde hero-banner-links.js):
 *   .sr-hero-foto
 *     └── .sr-hero-overlay
 *           ├── .sr-hero-titulo      (grande + sombra, como antes)
 *           ├── .sr-hero-subtitulo   (más chico, debajo del título)
 *           └── .sr-hero-cta         (botón, debajo del subtítulo)
 *
 * El .sr-hero-contenido (h1 del slogan del comercio) sigue siendo
 * pintado por el inyector y NO forma parte de este overlay.
 */

/* Posicionar el overlay en la mitad inferior de la foto */
.sr-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* La mitad inferior de la foto — deja espacio para ver la imagen */
  padding: 2.5rem 1.5rem 5rem;   /* bottom: espacio para la consola de botones */
  background: linear-gradient(to top,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.55) 55%,
    transparent 100%);
  display: flex;
  flex-direction: column;    /* apilados verticalmente, NO en línea */
  align-items: flex-start;
  gap: 0.5rem;
  z-index: 4;                /* encima del velo pero debajo del sr-hero-puntos */
  pointer-events: none;      /* el contenedor no bloquea clics en la foto */
}

/* Título del banner — grande y sombreado (como estaba antes) */
.sr-hero-titulo {
  display: block;
  font-size: clamp(1.6rem, 5vw, 3rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.15;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.9),
    0 0 20px rgba(0,0,0,0.7);
  max-width: 80%;
  pointer-events: none;
}

/* Subtítulo — más chico, debajo del título */
.sr-hero-subtitulo {
  display: block;
  font-size: clamp(0.9rem, 2.5vw, 1.25rem);
  font-weight: 500;
  color: #e2e8f0;
  line-height: 1.4;
  text-shadow: 0 1px 6px rgba(0,0,0,0.85);
  max-width: 80%;
  pointer-events: none;
}

/* Botón CTA — debajo del subtítulo, recibe clics */
.sr-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.6rem 1.4rem;
  background: #fbbf24;          /* amarillo acento del sistema */
  color: #1f2937;
  font-size: 0.95rem;
  font-weight: 800;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: background 0.2s, transform 0.15s;
  pointer-events: auto;         /* ← este SÍ recibe clics */
  z-index: 5;
}
.sr-hero-cta:hover {
  background: #f59e0b;
  transform: translateY(-2px);
}
.sr-hero-cta:active {
  transform: translateY(0);
}

/* Puntos del slider — por encima de todo */
.sr-hero-puntos {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 6;
  pointer-events: auto;
}
.sr-hero-puntos button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.15s;
  pointer-events: auto;
}
.sr-hero-puntos button.activo {
  background: #ffffff;
  transform: scale(1.3);
}

/* El contenedor del hero necesita position:relative para que el overlay funcione */
#hero-section { position: relative; overflow: hidden; }

/* Las fotos de fondo */
.sr-hero-foto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 0;
}
.sr-hero-foto.activa { opacity: 1; z-index: 1; }

/* El slider ocupa todo el hero */
.sr-hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* El h1 del slogan del comercio (del inyector) — no interferir */
.sr-hero-contenido {
  position: relative;
  z-index: 3;
  pointer-events: none;   /* el overlay de texto del inyector no bloquea clics en banners */
}

/* Móvil */
@media (max-width: 640px) {
  .sr-hero-overlay {
    padding: 1.5rem 1rem 4.5rem;
  }
  .sr-hero-titulo   { font-size: clamp(1.3rem, 7vw, 2rem); max-width: 95%; }
  .sr-hero-subtitulo{ font-size: clamp(0.8rem, 3.5vw, 1rem); max-width: 95%; }
  .sr-hero-cta      { font-size: 0.85rem; padding: 0.5rem 1.1rem; }
}