/* ============================================================
   HERO DE LA HOME — bloque unico de HTML personalizado
   Ruta: /wp-content/themes/escuela/css/home/home-hero.css

   Mismo patron que .curso-pce-hero en /curso-pce/. Arregla el
   fallo de PageSpeed "fetchpriority=high" en el LCP de la Home.

   VERSION DEFINITIVA (2026-08-04), tras varias iteraciones
   visuales con Dani:
   - ESCRITORIO Y MOVIL: H1 + parrafo corto (con la keyword
     "Estudiar en España" en negrita) + checklist completo (4
     items) + boton. Mismo contenido en ambos tamaños.
   - Movil: parrafo al 60% de ancho (deja ver la cara a la
     derecha), checklist a ancho completo, boton a ancho
     completo. Escritorio: boton en su tamaño natural.
   - La imagen SE ESTIRA para cubrir exactamente el contenido
     (bottom:0/height:100%), sin altura fija — se probo una
     version con altura fija + color de respaldo, pero dejaba
     visible una franja navy solida debajo cuando el contenido
     era mas alto que la foto ("borde azul" reportado por Dani).
     Revertido porque el contenido final (parrafo corto) es lo
     bastante compacto para que object-fit:cover con "center
     center" no distorsione la cara, incluso estirandose.
   ============================================================ */

.home-hero {
  position: relative;
  min-height: 640px;
  font-family: 'Lato', sans-serif;
  overflow: hidden;
  background-color: #1B2154; /* respaldo por si el texto crece más que la foto */
}

.home-hero-picture {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  z-index: 0;
}

.home-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.home-hero-overlay {
  position: relative;
  z-index: 1;
  min-height: inherit;
  background: linear-gradient(
    90deg,
    rgba(40, 52, 116, 0.72) 0%,
    rgba(40, 52, 116, 0.52) 38%,
    rgba(40, 52, 116, 0.18) 65%,
    rgba(40, 52, 116, 0.02) 100%
  );
  display: flex;
  align-items: center;
}

.home-hero-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 24px;
  box-sizing: border-box;
}

.home-hero-content {
  max-width: 620px;
  color: #ffffff;
}

.home-hero-content h1 {
  margin: 0 0 16px;
  font-size: 42px;
  line-height: 1.15;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
}

.home-hero-lead {
  font-size: 18px;
  line-height: 1.6;
  color: #ffffff;
  margin: 0 0 24px;
}

.home-hero-checklist p {
  font-size: 17px;
  line-height: 1.6;
  color: #ffffff;
  margin: 0 0 10px;
}

.home-hero-check {
  color: #F39200;
}

/* Checklist visible en escritorio Y móvil */

/* Escritorio: boton en su tamano natural (no ancho completo) */
.home-hero-btn {
  display: inline-block;
  width: auto;
  box-sizing: border-box;
  text-align: center;
  background-color: #F39200;
  color: #ffffff !important;
  font-weight: 800;
  font-size: 17px;
  padding: 16px 34px;
  border-radius: 50px;
  text-decoration: none;
  margin-top: 8px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.home-hero-btn:hover {
  background-color: #d97e00;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .home-hero {
    min-height: 560px;
  }
  /* H1 lo mas alto posible SIN quedar tapado por la cabecera fija
     (#eee-main-header mide 60px en movil) */
  .home-hero-inner {
    padding: 76px 20px 24px;
  }
  .home-hero-content {
    max-width: 100%;
  }
  .home-hero-content h1 {
    font-size: 26px;
    margin-bottom: 10px;
  }
  /* Parrafo AL 60% DE ANCHO en movil (deja ver la cara a la derecha) */
  .home-hero-lead {
    font-size: 15px;
    max-width: 60%;
    margin-bottom: 16px;
  }
  /* Checklist visible en movil, a ANCHO COMPLETO, debajo del parrafo */
  .home-hero-checklist {
    display: block;
    max-width: 100%;
  }
  .home-hero-checklist p {
    font-size: 15px;
    margin-bottom: 8px;
  }
  /* Boton a ancho completo SOLO en movil */
  .home-hero-btn {
    display: block;
    width: 100%;
    font-size: 16px;
    padding: 15px 20px;
    margin-top: 16px;
  }
}