/* ======================== */
/* SECCIÓN: Hero (Portada)  */
/* ======================== */

.hero {
  text-align: center;             
  padding: calc(var(--spacing)*4) 0; 
  /* background: #ffffff; */ /* Color base sólido no es necesario aquí */

  /* === Fondo con imagen y capa blanca semitransparente === */
  background-image: 
    /* Capa SUPERIOR: Color blanco con opacidad (ajusta el 0.85) */
    linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)),
    /* Capa INFERIOR: Tu imagen de fondo (ajusta la ruta) */
    url('../assets/images/fondo-video.jpg'); /* ¡¡AJUSTA ESTA RUTA!! */

  /* Propiedades aplicadas a la imagen de fondo */
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
  
  /* Necesario para el contexto de apilamiento (z-index) */
  position: relative; 
  z-index: 0; 
}

/* Asegura que el contenido directo de .hero esté sobre el fondo */
.hero > * { 
    position: relative; /* Necesario para que z-index aplique */
    z-index: 1;         /* Pone el contenido por encima del fondo de .hero (z-index: 0) */
}
/* Asegurar z-index específicamente si .hero > * no fuera suficiente */
.hero__title, 
.hero__subtitle, 
.hero__description, 
.hero__whatsapp-prompt, 
.hero .btn,
.hero__video { 
    position: relative; /* Asegura que tengan contexto de apilamiento */
    z-index: 1;         /* Confirma que están sobre el fondo */
}

/* --- Resto de los estilos para los elementos dentro de .hero --- */
/* (Basado en el código que proporcionaste anteriormente) */

.hero__title {
  font-size: 2.5rem;             /* Tamaño grande para el título principal */
  color: var(--color-primary);   /* Color principal (azul oscuro) */
}

.hero__subtitle {
  font-size: 1.25rem;            /* Subtítulo de tamaño mediano */
  margin-bottom: var(--spacing); /* Espacio debajo del subtítulo */
}


/* En css/hero.css */

.hero__video { /* Estilos para el NUEVO DIV EXTERIOR */
  max-width: 800px;             /* Limita el ancho */
  margin: var(--spacing) auto;  /* Centra horizontalmente, con margen vertical */
  border-radius: 12px;          /* Redondea las esquinas */
  overflow: hidden;             /* Mantiene el redondeo en el iframe interior */
  box-shadow: 
    0 15px 30px rgba(0,0,0,0.15),
    0 5px 10px rgba(0,0,0,0.1); 
  border: 1px solid #eee;       
  position: relative; /* Mantenemos por si afecta z-index o algo más */
  z-index: 1;         /* Mantenemos para estar sobre fondo de .hero */

  /* ¡¡IMPORTANTE!! Asegúrate de que NO haya padding-top, height, o aspect-ratio aquí */
} 

/* Simplificamos la regla del iframe o la eliminamos si no es necesaria */
.hero__video iframe {
  display: block;      /* Buena práctica */
  border-radius: inherit; /* Hereda el redondeo del div interior (opcional) */
  /* Quitamos position, top, left, width, height, border - están inline */
  /* Quitamos aspect-ratio */ 
}

/* Resto de tus estilos para .hero, .hero__title, etc. ... */

.hero__description {
  max-width: 700px;             /* Limita el ancho de la descripción */
  margin: calc(var(--spacing) * 2.5) auto var(--spacing) auto; /* Margen vertical con centrado */
  line-height: 1.5;             /* Altura de línea cómoda para lectura */
}

.hero__whatsapp-prompt {
  margin-top: calc(var(--spacing) * 1.5); /* Espacio encima del texto de WhatsApp */
  margin-bottom: var(--spacing);          /* Espacio debajo */
  font-size: 0.95rem;                     /* Tamaño ligeramente reducido */
  color: #333;                            /* Gris oscuro para buena legibilidad */
}

/* Nota: Los estilos del botón .btn se definieron en base.css */