/* =====================
   HERO HOME
===================== */

.hero-home {
  position: relative;

  overflow: hidden;

  min-height: 92vh;

  display: flex;
  align-items: center;

  background:
      linear-gradient(
    135deg,
    rgba(20, 61, 42, 0.15),
    rgba(20, 61, 42, 0.15)
  ),
    url("../img/jose-comu.jpg");

  background-size: cover;
  background-position:center;
  background-repeat: no-repeat;
}

/* overlays ambientales */

.hero-home::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at top right,
      rgba(224, 161, 38, 0.18),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(201, 106, 27, 0.12),
      transparent 30%
    );

  pointer-events: none;
}

/* textura ligera */

.hero-home::after {
  content: "";

  position: absolute;
  inset: 0;

  opacity: 0.05;

  background-image:
    url("");

  mix-blend-mode: overlay;

  pointer-events: none;
}

/* contenido */

.hero-home .container {
  position: relative;
  z-index: 2;


  max-width: 760px;
}

/* =====================
   TÍTULO
===================== */

.hero-home h2 {
  font-size: clamp(3rem, 8vw, 5.5rem);

  line-height: 1.02;

  letter-spacing: -2px;

  font-weight: 800;
  
  color: var(--color-white);

  margin-bottom: 24px;

  text-shadow:
    0 8px 30px rgba(0,0,0,0.35);

  animation: fadeUp 0.8s ease forwards;
}

/* =====================
   TEXTO
===================== */

.hero-home p {
  font-size: 1.15rem;

  line-height: 1.8;

  color:
    rgba(255,255,255,0.9);

  margin-bottom: 34px;

  max-width: 640px;

  animation: fadeUp 1s ease forwards;

  animation-delay: 0.2s;

  opacity: 0;
}

/* =====================
   BOTÓN
===================== */

.hero-home .btn {

  background: var(--color-accent);

  color: var(--color-white);

  padding: 16px 30px;

  border-radius: 999px;

  font-weight: 700;

  font-size: 0.95rem;

  letter-spacing: 0.3px;

  border:
    1px solid transparent;

  box-shadow:
    0 12px 25px rgba(201, 106, 27, 0.28);

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;

  animation: fadeUp 1.2s ease forwards;

  animation-delay: 0.4s;

  opacity: 0;
}

.hero-home .btn:hover {

  background:
    var(--color-accent-light);

  transform:
    translateY(-4px);

  box-shadow:
    0 18px 35px rgba(201, 106, 27, 0.35);
}

/* =====================
   ANIMACIÓN
===================== */

@keyframes fadeUp {

  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

/* =====================
   TÍTULO SECCIONES
===================== */

.titulo-cards-index {
  margin-bottom: 18px;

  font-size: 2.2rem;

  color: var(--color-brand-dark);

  letter-spacing: -1px;
}

/* =====================
   RESPONSIVE
===================== */

@media (max-width: 768px) {

  .hero-home {
    min-height: 80vh;
    text-align: center;
  }

  .hero-home .container {
    max-width: 100%;
  }

  .hero-home h2 {
    font-size: 3rem;
  }

  .hero-home p {
    font-size: 1rem;
  }

}