/**
 * Portada home — texto directamente sobre la imagen (sin cajas/paneles).
 * Difuminado solo en la mitad inferior para legibilidad y transición al contenido.
 */

.hero-card-note {
  display: none !important;
}

.hero {
  background: #d9decf;
}

.hero-media {
  z-index: 0;
}

.hero-media img {
  z-index: 0;
}

/* Sin panel izquierdo opaco: la foto se ve bajo el copy */
.hero-media::before {
  z-index: 1;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 50%,
    rgba(255, 253, 248, 0.12) 62%,
    rgba(255, 253, 248, 0.55) 76%,
    rgba(255, 253, 248, 0.96) 92%,
    rgba(255, 253, 248, 0.99) 100%
  ) !important;
}

.hero-copy {
  z-index: 2;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hero-copy-inner {
  max-width: 620px;
  padding: 90px 0 70px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hero h1,
.hero .hero-sub,
.hero .hero-pill,
.hero .proof-item strong,
.hero .proof-item span,
.hero .hero-actions .btn {
  text-shadow: 0 1px 2px rgba(255, 253, 248, 0.85), 0 0 24px rgba(255, 253, 248, 0.45);
}

.hero .hero-pill {
  background: rgba(255, 253, 248, 0.72);
}

.hero-metrics .metric {
  background: rgba(255, 253, 248, 0.88);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 1100px) {
  .hero-copy {
    align-items: flex-end;
    background: transparent !important;
    padding: 32px 32px 44px !important;
  }

  .hero-copy-inner {
    max-width: 760px;
    padding-top: clamp(120px, 24vh, 220px) !important;
    padding-bottom: 46px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-media::before {
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 40%,
      rgba(255, 253, 248, 0.2) 58%,
      rgba(255, 253, 248, 0.88) 78%,
      rgba(255, 253, 248, 0.99) 100%
    ) !important;
  }
}

/* Móvil: misma fórmula que escritorio — imagen entera, texto encima, difuminado inferior */
@media (max-width: 820px) {
  body.cgc-home-page .hero {
    min-height: clamp(560px, 92vh, 780px) !important;
    padding-top: 66px !important;
    overflow: hidden !important;
    background: #d9decf !important;
  }

  body.cgc-home-page .hero-shell {
    position: relative !important;
    display: block !important;
    min-height: calc(clamp(560px, 92vh, 780px) - 66px) !important;
  }

  body.cgc-home-page .hero-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: #d9decf !important;
  }

  body.cgc-home-page .hero-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 22% !important;
    filter: none !important;
    image-rendering: auto !important;
  }

  body.cgc-home-page .hero-media::before {
    background: linear-gradient(
      180deg,
      rgba(255, 253, 248, 0.06) 0%,
      transparent 28%,
      transparent 44%,
      rgba(255, 253, 248, 0.14) 56%,
      rgba(255, 253, 248, 0.62) 74%,
      rgba(255, 253, 248, 0.96) 90%,
      rgba(255, 253, 248, 0.99) 100%
    ) !important;
  }

  body.cgc-home-page .hero-copy {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: flex-end !important;
    min-height: 100% !important;
    padding: 20px 16px 34px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.cgc-home-page .hero-copy-inner {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.cgc-home-page .hero h1,
  body.cgc-home-page .hero .hero-sub,
  body.cgc-home-page .hero .hero-pill,
  body.cgc-home-page .hero .proof-item strong,
  body.cgc-home-page .hero .proof-item span,
  body.cgc-home-page .hero .hero-actions .btn {
    text-shadow: 0 1px 2px rgba(255, 253, 248, 0.9), 0 0 20px rgba(255, 253, 248, 0.5) !important;
  }

  body.cgc-home-page .hero h1 {
    font-size: clamp(1.65rem, 6.8vw, 2.2rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.035em !important;
    color: #10231a !important;
    margin-bottom: 12px !important;
    max-width: 18ch !important;
  }

  body.cgc-home-page .hero .hero-sub {
    font-size: 1rem !important;
    line-height: 1.58 !important;
    color: #3f4a40 !important;
    max-width: none !important;
    margin-bottom: 18px !important;
  }

  body.cgc-home-page .hero .hero-pill {
    margin-bottom: 14px !important;
    background: rgba(255, 253, 248, 0.78) !important;
    color: #123f2d !important;
    font-size: 0.82rem !important;
  }

  body.cgc-home-page .hero .hero-proof {
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  body.cgc-home-page .hero .proof-item {
    color: #123f2d !important;
  }

  body.cgc-home-page .hero .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  body.cgc-home-page .hero .hero-actions .btn {
    width: 100% !important;
    min-height: 48px !important;
  }

  body.cgc-home-page .hero-metrics {
    gap: 8px !important;
  }

  body.cgc-home-page .hero-metrics .metric {
    background: rgba(255, 253, 248, 0.88) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(18, 24, 20, 0.08) !important;
  }

  body.cgc-home-page .hero .metric strong,
  body.cgc-home-page .hero .metric span {
    text-shadow: none !important;
  }
}

@media (max-width: 520px) {
  body.cgc-home-page .hero {
    min-height: clamp(520px, 94vh, 720px) !important;
  }

  body.cgc-home-page .hero-shell {
    min-height: calc(clamp(520px, 94vh, 720px) - 66px) !important;
  }

  body.cgc-home-page .hero-media img {
    object-position: center 2% !important;
  }

  body.cgc-home-page .hero-copy {
    padding: 16px 14px 28px !important;
  }

  body.cgc-home-page .hero h1 {
    font-size: clamp(1.85rem, 10.5vw, 2.35rem) !important;
  }

  body.cgc-home-page .hero .hero-sub {
    font-size: 0.96rem !important;
  }
}