/* ============================================================
   hero-carousel.css
   Carrusel del banner principal.
   Reutiliza las variables de tema definidas en styles.css.
   ============================================================ */

/* El hero ya no lleva padding propio: cada slide define el suyo */
.hero { padding: 0 0 96px; }

/* ============================================================
   Contenedor
   Los slides se apilan en la misma celda de grid, así la altura
   la marca el slide más alto y no hace falta posición absoluta.
   ============================================================ */
.hero__carousel {
  position: relative;
  display: grid;
  min-height: clamp(560px, 78vh, 720px);
  overflow: hidden;
}

/* ============================================================
   Slides
   ============================================================ */
.hero-slide {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  padding: 140px 0 96px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .7s ease, visibility 0s;
}

/* Un slide invisible no debe capturar clics ni tabulación */
.hero-slide:not(.is-active) { pointer-events: none; }

.hero-slide__inner { width: 100%; }

/* ---------- Slide 1: taller a domicilio ---------- */
.hero-slide--intro { text-align: center; }
.hero-slide--intro .hero-slide__inner { position: relative; }

/* El resplandor rojo que antes vivía en .hero */
.hero-slide--intro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 760px;
  height: 760px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(230, 57, 70, .16), transparent 62%);
  pointer-events: none;
}

/* ---------- Slide 2: asistencia en carretera ---------- */
.hero-slide--road {
  text-align: left;
  background-color: var(--bg);
  background-image:
    linear-gradient(100deg,
      rgba(7, 7, 8, .94) 0%,
      rgba(7, 7, 8, .82) 34%,
      rgba(7, 7, 8, .45) 58%,
      rgba(7, 7, 8, .30) 100%),
    url('assets/road-assistance.jpg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

/* El texto ocupa la mitad izquierda, que es la zona despejada de la foto */
.hero-slide--road .hero-slide__inner { max-width: 620px; }
.hero-slide--road .hero__sub { margin-inline: 0; }
.hero-slide--road .hero__actions { justify-content: flex-start; }

/* Botón de emergencia: mismo rojo de marca, con un latido sutil */
.btn--sos {
  position: relative;
  box-shadow: 0 0 0 0 rgba(230, 57, 70, .55);
  animation: sos-pulse 2.4s ease-out infinite;
}
@keyframes sos-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(230, 57, 70, .55); }
  70%  { box-shadow: 0 0 0 16px rgba(230, 57, 70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); }
}

/* ============================================================
   Puntos de navegación
   ============================================================ */
.hero__dots {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 10px;
}

.hero__dot {
  width: 34px;
  height: 5px;
  padding: 0;
  background: rgba(255, 255, 255, .26);
  border: 0;
  border-radius: 99px;
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.hero__dot:hover { background: rgba(255, 255, 255, .5); }
.hero__dot[aria-selected="true"] {
  width: 52px;
  background: var(--accent);
}
.hero__dot:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

/* ============================================================
   Insignias bajo el carrusel
   ============================================================ */
.hero__badges { margin-top: 40px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 880px) {
  .hero-slide { padding: 120px 0 84px; }
  .hero__carousel { min-height: clamp(520px, 72vh, 620px); }
}

@media (max-width: 600px) {
  .hero { padding-bottom: 72px; }
  .hero-slide { padding: 108px 0 76px; }

  /* En móvil el texto va centrado también en el slide de carretera,
     y la foto usa un recorte vertical donde se ve la grúa. */
  .hero-slide--road { text-align: center; }
  .hero-slide--road .hero-slide__inner { max-width: none; }
  .hero-slide--road .hero__actions { justify-content: center; }
  .hero-slide--road {
    background-image:
      linear-gradient(180deg,
        rgba(7, 7, 8, .90) 0%,
        rgba(7, 7, 8, .80) 45%,
        rgba(7, 7, 8, .55) 100%),
      url('assets/road-assistance-mobile.jpg');
    background-position: center bottom;
  }

  .hero__dots { bottom: 18px; }
  .hero__dot { width: 26px; }
  .hero__dot[aria-selected="true"] { width: 40px; }
}

/* ============================================================
   Accesibilidad: sin animación si el usuario la desactivó
   (el auto-avance también se apaga desde hero-carousel.js)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity .01s; }
  .btn--sos { animation: none; }
}