/* ==========================================================================
   SOS Data Recovery — Home
   Estilos específicos de la página de inicio (hero + CTA final).
   Requiere variables.css, base.css, components.css y layout.css cargados antes.
   ========================================================================== */

.services {
  padding: var(--space-20) 0;
  background: var(--color-bg-alt);
}

.testimonials {
  padding: var(--space-20) 0;
  background: var(--color-white);
}

/* Hero con fotos de fondo rotando. Tres capas apiladas:
   1. .hero-bg-slideshow  — las fotos (z-index 1)
   2. .hero-overlay       — gradiente de marca semitransparente (z-index 2)
   3. .hero-container     — el texto (z-index 3)
   El gradiente de fondo se mantiene como respaldo: es lo que se ve si una
   foto tarda en cargar o falla. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-accent-deep);
  color: var(--color-white);
  padding: var(--header-offset) 0 100px;
  text-align: center;
}

.hero-bg-slideshow {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.hero-bg-image.is-active {
  opacity: 1;
}

/* Primera foto: se declara en CSS y no por JS, porque es la imagen que mide
   el LCP y debe empezar a descargarse con el resto de la hoja de estilos.
   Primero el JPEG como respaldo; los navegadores que entienden image-set()
   sobrescriben con el WebP, que pesa la mitad. */
.hero-bg-image--first {
  background-image: url('/assets/img/hero/hero1.jpg');
}

@supports (background-image: image-set(url('/assets/img/hero/hero1.webp') type('image/webp'))) {
  .hero-bg-image--first {
    background-image: image-set(
      url('/assets/img/hero/hero1.webp') type('image/webp'),
      url('/assets/img/hero/hero1.jpg') type('image/jpeg')
    );
  }
}

/* La opacidad alta no es capricho: sobre una foto clara el texto blanco
   perdería contraste. Con estos valores el fondo efectivo se mantiene dentro
   de WCAG AA aunque la zona de la foto que quede detrás del texto sea clara. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(135deg, rgba(109, 40, 217, 0.92) 0%, rgba(14, 116, 144, 0.90) 100%),
    rgba(0, 0, 0, 0.25);
}

.hero-container {
  position: relative;
  z-index: 3;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* Quien pide menos movimiento ve una sola foto fija, sin rotación. */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-image {
    transition: none;
  }
}

.hero h1 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-5);
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.hero > .hero-container > p {
  font-size: var(--text-md);
  margin-bottom: var(--space-10);
  max-width: 600px;
  margin-inline: auto;
}

/* Mensaje según el país del visitante (assets/js/pais.js). Oculto hasta que
   el script reconoce la zona horaria. */
.hero-pais {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: fit-content;
  max-width: 640px;
  margin: calc(var(--space-6) * -1) auto var(--space-8);
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--color-white);
  font-size: var(--text-sm);
  line-height: var(--leading-base);
}

.hero-pais[hidden] {
  display: none;
}

.hero-pais svg {
  flex-shrink: 0;
}

.hero-pais a {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 768px) {
  .hero-pais {
    border-radius: var(--radius-lg);
    margin-top: calc(var(--space-4) * -1);
  }
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-16);
}

.hero-emergency {
  margin-top: var(--space-20);
  padding-top: var(--space-16);
  border-top: 2px solid rgba(255, 255, 255, 0.3);
}

.hero-emergency h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-5);
}

.hero-emergency-contact {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

.hero-contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  background: rgba(255, 255, 255, 0.15);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all var(--transition-base);
  min-width: 200px;
  justify-content: center;
}

.hero-contact-item:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-3px);
}

.hero-contact-item a {
  color: inherit;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

@media (max-width: 768px) {
  .hero {
    padding: var(--header-offset-mobile) 0 80px;
  }

  .hero h1 {
    font-size: var(--text-xl);
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}