/**
 * Correcciones post-QA visual (móvil + desktop) — legibilidad, footer, menú, cards.
 */

:root {
  --cgc-text-primary: #10231a;
  --cgc-text-secondary: #4f5f58;
  --cgc-text-on-dark: #fffdf8;
  --cgc-text-on-dark-muted: rgba(255, 253, 248, 0.9);
  --cgc-green-primary: #0f3d2e;
  --cgc-green-mid: #1f6b45;
  --cgc-line-soft: #dde7e1;
}

/* —— 1. Footer visible (home tenía cgc-page-tools y ocultaba .footer-grid) —— */
body.cgc-home-page .cgc-premium-footer .footer-grid,
body.cgc-home-page footer .footer-grid {
  display: grid !important;
}

body.cgc-page-tools:not(.cgc-home-page) .cgc-premium-footer .footer-grid {
  display: none;
}

body.cgc-home-page .cgc-premium-footer,
body.cgc-home-page > footer,
footer.cgc-premium-footer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

/* Ocultar footer legacy duplicado en home (solo premium) */
body.cgc-home-page > footer:not(.cgc-premium-footer) {
  display: none !important;
}

body.cgc-home-page.cgc-page-tools .cgc-premium-footer {
  margin-top: 48px !important;
  padding: 42px 0 28px !important;
}

body.cgc-home-page.cgc-page-tools .cgc-premium-footer .footer-bottom {
  margin-top: 28px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  text-align: left !important;
}

/* Footer completo en páginas principales (no panel ni calculadoras internas) */
body:not(.cgc-page-panel):not(.cgc-page-tools) .cgc-premium-footer .footer-grid,
body.cgc-static-hub .cgc-premium-footer .footer-grid,
body.cgc-static-recursos .cgc-premium-footer .footer-grid,
body.cgc-page-recursos .cgc-premium-footer .footer-grid {
  display: grid !important;
}

/* —— 2. Menú móvil home —— */
@media (max-width: 900px) {
  body.cgc-home-page .mobile-toggle {
    display: flex !important;
    position: relative;
    z-index: 1102;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  body.cgc-home-page #nav-links {
    z-index: 1101;
  }

  body.cgc-home-page #nav-links.open {
    display: flex !important;
    z-index: 1101;
  }

  html.cgc-nav-open,
  html.cgc-nav-open body {
    overflow: hidden;
  }
}

/* —— 3. Tipografía legible global —— */
body.cgc-home-page .hero-sub,
body.cgc-home-page .quick-intro .section-sub,
body.cgc-home-page .recommended .section-sub,
body.cgc-home-page .quick-note,
body.cgc-home-page .recommended-legal,
body.cgc-home-page .promo-legal,
body.cgc-home-page .proof-item small,
body.cgc-home-page .metric span,
body.cgc-home-page .lead-nota,
.section-sub,
.hero-sub,
.quick-note,
.promo-legal,
.calculator-promo .section-sub,
.calculator-promo .promo-legal {
  color: var(--cgc-text-secondary) !important;
}

/* Títulos oscuros solo en secciones claras (bloques oscuros: cgc-contrast-system.css) */
body.cgc-home-page .quick-intro .section-title,
body.cgc-home-page .recommended .section-title,
body.cgc-home-page .testimonials .section-title {
  color: var(--cgc-text-primary) !important;
}

/* —— 4. Hero móvil (proporción + contraste, sin cambiar imagen) —— */
@media (max-width: 820px) {
  body.cgc-home-page .hero h1 {
    font-size: clamp(1.65rem, 6.8vw, 2.2rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.04em !important;
  }

  body.cgc-home-page .hero-sub {
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
    max-width: 36ch !important;
    color: #3d4f47 !important;
  }

  body.cgc-home-page .hero-pill {
    font-size: 0.78rem !important;
    color: var(--cgc-green-primary) !important;
    background: rgba(255, 253, 248, 0.92) !important;
  }

  body.cgc-home-page .hero .proof-item strong {
    color: var(--cgc-text-primary) !important;
    font-size: 0.92rem !important;
  }

  body.cgc-home-page .hero .proof-item small {
    color: var(--cgc-text-secondary) !important;
    font-size: 0.82rem !important;
  }

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

  body.cgc-home-page .hero-metrics {
    display: grid !important;
    gap: 10px !important;
    margin-top: 8px !important;
  }

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

  body.cgc-home-page .hero-metrics .metric span {
    color: var(--cgc-text-secondary) !important;
    font-size: 0.86rem !important;
  }

  body.cgc-home-page .hero-actions {
    margin-top: 16px !important;
    gap: 10px !important;
  }
}

/* —— 5. Calculadoras promo (texto sobre imagen) —— */
@media (max-width: 900px) {
  body.cgc-home-page #nav-links {
    z-index: 1101 !important;
  }

  body.cgc-home-page .calculator-promo {
    position: relative;
    isolation: isolate;
  }

  body.cgc-home-page .calculator-promo-copy {
    position: relative;
    z-index: 2;
    padding: 22px 20px 24px !important;
    background: linear-gradient(
      180deg,
      rgba(255, 253, 248, 0.97) 0%,
      rgba(255, 253, 248, 0.94) 55%,
      rgba(255, 253, 248, 0.88) 100%
    ) !important;
    border-radius: 22px 22px 0 0;
  }

  body.cgc-home-page .calculator-promo .section-sub,
  body.cgc-home-page .calculator-promo .promo-checks li {
    color: #3d4f47 !important;
  }

  body.cgc-home-page .calculator-promo .promo-legal {
    color: var(--cgc-text-secondary) !important;
    background: rgba(238, 247, 233, 0.85);
    padding: 10px 12px;
    border-radius: 12px;
  }
}

/* Más usadas: ver cgc-contrast-system.css (grid 72px | 1fr | 44px) */

/* —— 7. Recetas showcase + PRO + newsletter —— */
@media (max-width: 820px) {
  body.cgc-home-page .recipe-showcase-card .section-title,
  body.cgc-home-page .recipe-showcase-card h2 {
    color: var(--cgc-text-on-dark) !important;
    text-shadow: 0 2px 14px rgba(8, 35, 24, 0.65) !important;
  }

  body.cgc-home-page .recipe-showcase-card p,
  body.cgc-home-page .recipe-showcase-note {
    color: var(--cgc-text-on-dark-muted) !important;
  }

  body.cgc-home-page .home-pro-hero__copy .section-title {
    text-shadow: 0 2px 12px rgba(8, 35, 24, 0.5) !important;
  }

  body.cgc-home-page .home-pro-hero__copy .section-sub,
  body.cgc-home-page .home-pro-list {
    color: var(--cgc-text-on-dark-muted) !important;
    text-shadow: 0 1px 8px rgba(8, 35, 24, 0.45) !important;
  }

  body.cgc-home-page .home-pro-hero__media::after {
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(15, 61, 46, 0.35) 50%,
      rgba(15, 61, 46, 0.88) 100%
    ) !important;
  }

}

/* —— 8. Difuminados / glows más suaves (home + recursos) —— */
body.cgc-home-page .recommended-shell::before,
body.cgc-home-page .calculator-promo::before {
  opacity: 0.45 !important;
}

body.cgc-home-page .hero-copy-inner {
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.cgc-static-recursos .card::before,
body.cgc-page-recursos .card::before {
  opacity: 0.72 !important;
  pointer-events: none !important;
  background: linear-gradient(
      90deg,
      rgba(9, 39, 26, 0.48) 0%,
      rgba(9, 39, 26, 0.16) 42%,
      transparent 68%
    ),
    linear-gradient(0deg, rgba(9, 39, 26, 0.58) 0%, rgba(9, 39, 26, 0.1) 50%, transparent 100%) !important;
}

body.cgc-static-recursos .card:hover,
body.cgc-page-recursos .card:hover {
  box-shadow: 0 18px 48px rgba(18, 63, 45, 0.12) !important;
}

body.cgc-static-recursos .card > *,
body.cgc-page-recursos .card > * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
}

body.cgc-static-recursos .card h2,
body.cgc-page-recursos .card h2 {
  text-shadow: 0 1px 8px rgba(9, 39, 26, 0.28) !important;
}

body.cgc-static-recursos .card p,
body.cgc-page-recursos .card p {
  color: rgba(255, 253, 248, 0.9) !important;
}

@media (min-width: 901px) {
  body.cgc-static-recursos .card::before,
  body.cgc-page-recursos .card::before {
    opacity: 0.65 !important;
  }
}

/* —— 9. Contraste móvil transversal (blog, recetas, hubs) —— */
@media (max-width: 820px) {
  body:not(.cgc-page-panel) p,
  body:not(.cgc-page-panel) .section-sub,
  body:not(.cgc-page-panel) .entry-content,
  body:not(.cgc-page-panel) .blog-article-content {
    color: var(--cgc-text-secondary) !important;
  }

  body:not(.cgc-page-panel) h1,
  body:not(.cgc-page-panel) h2.section-title {
    color: var(--cgc-text-primary) !important;
  }

  /* .section-title en bloques claros; oscuros/imagen → cgc-contrast-system.css */
  body:not(.cgc-page-panel) .section-title {
    color: var(--cgc-text-primary) !important;
  }

  body.cgc-home-page .lead .section-title,
  body.cgc-home-page .lead-inner .section-title,
  body.cgc-home-page .home-pro-hero__copy .section-title,
  body.cgc-home-page .path-result .section-title,
  body.cgc-home-page .path-result h3,
  body.cgc-home-page .recipe-showcase-card .section-title,
  body.cgc-home-page .recipe-showcase-card h2 {
    color: var(--cgc-text-on-dark, #fff) !important;
  }
}

/* —— 10. Reducir text-shadow excesivo en hero global —— */
@media (max-width: 820px) {
  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: none !important;
  }

  body.cgc-home-page .hero-media::before {
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 50%,
      rgba(255, 253, 248, 0.22) 65%,
      rgba(255, 253, 248, 0.88) 84%,
      rgba(255, 253, 248, 0.99) 100%
    ) !important;
  }
}

/* —— 11. Footer móvil: 2–3 columnas (menos scroll) —— */
@media (max-width: 900px) {
  .cgc-premium-footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 16px !important;
  }

  .cgc-premium-footer .footer-brand-block {
    grid-column: 1 / -1 !important;
  }
}

@media (min-width: 600px) and (max-width: 900px) {
  .cgc-premium-footer .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* —— 12. Botones: tamaño y contraste unificados —— */
.btn,
.btn-primary,
.btn-secondary,
.nav-cta,
.header-cta,
.button-primary,
.onboard-btn,
.onboard-btn-primary,
.email-form button,
.lead-inner button,
.cg-tools-account .button,
.cg-register-submit {
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  min-height: 48px !important;
}

.btn-primary,
.nav-cta,
.header-cta,
.button-primary,
.onboard-btn-primary,
.email-form button[type="submit"],
.lead-inner .btn-primary,
body.cgc-page-tools .cg-calc-button,
body.cgc-page-tools .cg-catalog-cta,
body.cgc-page-tools .cg-more {
  color: #fffdf8 !important;
}

.btn-primary *,
.nav-cta *,
.header-cta *,
.button-primary *,
.onboard-btn-primary *,
body.cgc-page-tools .cg-calc-button *,
body.cgc-page-tools .cg-catalog-cta *,
body.cgc-page-tools .cg-more * {
  color: inherit !important;
}

.menu-toggle {
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  color: #123f2d !important;
}

/* —— 13. Menú móvil: submenú calculadoras visible —— */
@media (max-width: 900px) {
  .nav-item-has-dropdown.open > .nav-dropdown,
  .menu-item-has-calculators.is-open > .calculator-submenu,
  [data-cgc-calculators-menu].is-open > .calculator-submenu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .primary-nav.is-open .calculator-submenu {
    display: block !important;
  }
}