/* ══════════════════════════════════════════════════════════════════════
   SAN MIGUEL S.A. — Rediseño visual 2026
   Capa de rediseño (se carga al final, sobrescribe la cascada existente)

   · Fondo fijo global: el Lago de Atitlán visible en toda la página al
     hacer scroll (§13), con velo adaptable por tema y secciones translúcidas.
   · Tipografía editorial (Fraunces display + Inter cuerpo).
   · Sistema de tarjetas / sombras premium y sobrio; menos efectos "de IA".
   · Paleta de la marca (navy + teal + gris del logo), en claro y oscuro.

   NO modifica el contenido/textos ni los IDs/clases usados por el JS.
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700&display=swap');

/* ══ 1. TOKENS ═════════════════════════════════════════════════════════ */
:root {
  --sm-navy:        #1B2E6B;
  --sm-navy-deep:   #0E1B44;
  --sm-navy-ink:    #0A1430;
  --sm-teal:        #12B39A;
  --sm-teal-bright: #1FD4BA;
  --sm-teal-deep:   #0C8F7C;
  --sm-slate:       #64748B;
  --sm-gold:        #E8A83A;

  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;

  --sm-sh-1: 0 1px 2px rgba(10,20,48,.06), 0 2px 8px rgba(10,20,48,.05);
  --sm-sh-2: 0 4px 12px rgba(10,20,48,.07), 0 12px 32px rgba(10,20,48,.08);
  --sm-sh-3: 0 8px 24px rgba(10,20,48,.10), 0 24px 56px rgba(10,20,48,.12);

  --sm-r: 16px;
  --sm-r-lg: 22px;
}

[data-theme="light"] {
  --bg-base:     #F6F7F9 !important;
  --bg-surface:  #FFFFFF !important;
  --bg-elevated: #FFFFFF !important;
  --border:      rgba(15,23,42,.09) !important;
  --border-mid:  rgba(15,23,42,.14) !important;
  --sh-card:     var(--sm-sh-2) !important;
}

[data-theme="dark"] {
  --bg-base:     #0B1430 !important;
  --bg-surface:  #101c3f !important;
  --bg-elevated: #14235088 !important;
  --border:      rgba(255,255,255,.09) !important;
}

/* ══ 2. TIPOGRAFÍA ═════════════════════════════════════════════════════ */
.hero-title,
.display-title,
.section-title,
.stories-section h2,
.gt-section h2 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  font-optical-sizing: auto;
}

.hero-title,
.display-title {
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.04 !important;
  text-wrap: balance;
}

.hero-title span,
.hero-title .accent {
  color: var(--sm-teal-bright) !important;
  -webkit-text-fill-color: var(--sm-teal-bright) !important;
  background: none !important;
  position: relative;
}

.section-title { line-height: 1.1 !important; }

.label-tag,
.hero-badge,
.hero-card-badge,
.story-card-tag {
  font-family: 'Inter', sans-serif !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
}

.counter,
.hero-stat .value,
.gt-impact-number,
.trust-item .number,
.rate-value {
  font-family: 'Inter', sans-serif !important;
  font-feature-settings: "tnum" 1, "cv01" 1 !important;
  letter-spacing: -0.02em !important;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ══ 3. HERO ═══════════════════════════════════════════════════════════
   El hero ya NO trae su propia imagen: la aporta el fondo fijo global (§13).
   Aquí solo va el degradado asimétrico que hace legible el titular (izq.)
   dejando ver el lago hacia la derecha. Se mantiene oscuro en ambos temas. */
#hero,
[data-theme="light"] #hero,
[data-theme="dark"] #hero {
  background:
    linear-gradient(100deg,
      rgba(8,15,38,.90) 0%,
      rgba(9,17,44,.76) 28%,
      rgba(10,19,48,.40) 48%,
      rgba(10,20,50,.12) 66%,
      rgba(10,20,50,0) 82%),
    linear-gradient(to top,
      rgba(9,17,42,.42) 0%,
      rgba(9,17,42,0) 30%) !important;
  background-color: transparent !important;
  position: relative;
}

/* En claro, premium.css pinta el texto del hero en navy (ilegible sobre la
   foto oscura). Se fuerza el tratamiento claro sobre fondo oscuro. */
[data-theme="light"] #hero .hero-title { color: #fff !important; }
[data-theme="light"] #hero .hero-title span,
[data-theme="light"] #hero .hero-title .accent {
  color: var(--sm-teal-bright) !important;
  -webkit-text-fill-color: var(--sm-teal-bright) !important;
}
[data-theme="light"] #hero .hero-subtitle { color: rgba(226,235,255,.82) !important; }
[data-theme="light"] #hero .hero-badge {
  background: rgba(18,179,154,.14) !important;
  border-color: rgba(31,212,186,.34) !important;
  color: #7ff0dd !important;
}
[data-theme="light"] #hero .hero-stats { border-top-color: rgba(255,255,255,.14) !important; }
[data-theme="light"] #hero .hero-stat .value { color: #fff !important; }
[data-theme="light"] #hero .hero-stat .value span { color: var(--sm-teal-bright) !important; }
[data-theme="light"] #hero .hero-stat .label { color: rgba(226,235,255,.6) !important; }
[data-theme="light"] #hero .hero-card {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
[data-theme="light"] #hero .hero-card-title,
[data-theme="light"] #hero .hero-product-name { color: #fff !important; }
[data-theme="light"] #hero .hero-card-label,
[data-theme="light"] #hero .hero-product-rate { color: rgba(226,235,255,.72) !important; }
[data-theme="light"] #hero .hero-card-header { border-bottom-color: rgba(255,255,255,.12) !important; }
[data-theme="light"] #hero .hero-product-item { border-bottom-color: rgba(255,255,255,.09) !important; }

/* Vignette cinematográfica sutil */
#hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important; height: auto !important;
  background: radial-gradient(130% 100% at 62% 42%,
              transparent 65%, rgba(6,12,32,.28) 100%) !important;
  border-radius: 0 !important;
  animation: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Línea teal fina superior = detalle de marca */
#hero::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important;
  width: 100% !important; height: 3px !important;
  background: linear-gradient(90deg, var(--sm-teal) 0%, #243d8a 100%) !important;
  border-radius: 0 !important;
  animation: none !important;
  z-index: 3 !important;
}

@media (max-width: 768px) {
  /* En móvil el texto cae sobre la foto: scrim vertical más firme.
     La imagen la sigue aportando el fondo fijo global (§13). */
  #hero,
  [data-theme="light"] #hero,
  [data-theme="dark"] #hero {
    background:
      linear-gradient(to bottom,
        rgba(9,17,42,.90) 0%,
        rgba(10,20,50,.72) 45%,
        rgba(11,23,56,.50) 100%) !important;
    background-color: transparent !important;
  }
}

.hero-grid { opacity: .5 !important; }
.hero-content, .hero-visual { position: relative; z-index: 2; }

.hero-badge {
  background: rgba(18,179,154,.14) !important;
  border: 1px solid rgba(31,212,186,.34) !important;
  color: #7ff0dd !important;
  backdrop-filter: blur(6px);
  font-weight: 600 !important;
}
.hero-badge .dot { background: var(--sm-teal-bright) !important; }

.hero-subtitle { color: rgba(226,235,255,.82) !important; max-width: 30rem; }

.hero-stats { border-top: 1px solid rgba(255,255,255,.14) !important; }
.hero-stat .value { color: #fff !important; }
.hero-stat .value span { color: var(--sm-teal-bright) !important; }
.hero-stat .label { color: rgba(226,235,255,.6) !important; }

.hero-visual .hero-card,
.hero-card {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 55px rgba(4,10,26,.28) !important;
  border-radius: var(--sm-r-lg) !important;
}
/* Sin panel: legibilidad con una sombra de texto sutil */
#hero .hero-card,
#hero .hero-card .hero-card-title,
#hero .hero-card .hero-product-name,
#hero .hero-card .hero-product-rate,
#hero .hero-card .hero-card-label {
  text-shadow: 0 1px 8px rgba(6,12,32,.7) !important;
}
.hero-product-item { border-bottom-color: rgba(255,255,255,.09) !important; }
.hero-product-icon {
  background: rgba(18,179,154,.16) !important;
  color: var(--sm-teal-bright) !important;
  border: 1px solid rgba(31,212,186,.22) !important;
}
.hero-product-tag {
  background: rgba(255,255,255,.1) !important;
  color: rgba(226,235,255,.85) !important;
}

/* ══ 4. CALMAR EFECTOS "DE IA" ════════════════════════════════════════ */
.hero-orb-1, .hero-orb-2, .hero-noise { display: none !important; }
.hero-visual .hero-card {
  animation: heroCardIn 1s var(--ease, cubic-bezier(.4,0,.2,1)) .3s both !important;
}

/* ══ 5. NAVBAR + TOPBAR ═══════════════════════════════════════════════ */
.topbar {
  background: linear-gradient(90deg, #0d1f4e 0%, #1B2E6B 50%, #0d1f4e 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 2px solid var(--sm-teal) !important;
  box-shadow: 0 2px 14px rgba(13,31,78,.35);
}
.topbar-item { color: rgba(255,255,255,.96) !important; font-weight: 600 !important; letter-spacing: .035em; }
.topbar-item::before,
.topbar-item::after { color: var(--sm-teal) !important; }

#navbar { transition: background .3s var(--ease, ease), box-shadow .3s, backdrop-filter .3s; }
#navbar.scrolled {
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
  box-shadow: 0 1px 0 var(--border), var(--sm-sh-1) !important;
}
.nav-link::after { background: var(--sm-teal) !important; }

/* ══ 6. BOTONES ═══════════════════════════════════════════════════════ */
.btn-teal {
  background: linear-gradient(135deg, var(--sm-teal) 0%, var(--sm-teal-deep) 100%) !important;
  box-shadow: 0 6px 18px rgba(18,179,154,.28) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .005em;
}
.btn-teal:hover {
  background: linear-gradient(135deg, var(--sm-teal-bright) 0%, var(--sm-teal) 100%) !important;
  box-shadow: 0 10px 28px rgba(18,179,154,.38) !important;
  transform: translateY(-2px);
}
.btn-navy {
  background: linear-gradient(135deg, var(--sm-navy) 0%, var(--sm-navy-deep) 100%) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
}
.btn-nav-cta {
  background: linear-gradient(135deg, var(--sm-teal) 0%, var(--sm-teal-deep) 100%) !important;
  border-radius: 11px !important;
}
.btn-outline-white { border-radius: 12px !important; border: 1.5px solid rgba(255,255,255,.4) !important; }
.btn-secondary { border-radius: 12px !important; font-weight: 600 !important; }

/* ══ 7. SISTEMA DE TARJETAS ═══════════════════════════════════════════ */
.product-card,
.benefit-card,
.gt-impact-card,
.faq-item,
.mv-card,
.testimonial-card,
.value-badge {
  border-radius: var(--sm-r) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--sm-sh-1) !important;
  transition: transform .3s var(--ease, ease), box-shadow .3s, border-color .3s !important;
}
.product-card:hover,
.benefit-card:hover,
.testimonial-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--sm-sh-3) !important;
  border-color: var(--sm-teal) !important;
}

/* Efecto de borde animado en TODAS las tarjetas de producto: barra superior
   (teal→navy) que se revela en hover + elevación con anillo teal. */
#productos .product-card { position: relative; overflow: hidden; }
#productos .product-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: auto !important;
  height: 3px !important; width: auto !important;
  background: linear-gradient(90deg, var(--sm-teal) 0%, var(--sm-navy) 100%) !important;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease, cubic-bezier(.4,0,.2,1)) !important;
  border-radius: 0 !important;
  z-index: 2 !important;
  animation: none !important;
}
#productos .product-card:hover::before { transform: scaleX(1) !important; }
#productos .product-card:hover {
  border-color: var(--sm-teal) !important;
  box-shadow: 0 0 0 1px rgba(18,179,154,.55), var(--sm-sh-3) !important;
  transform: translateY(-6px) !important;
}

/* Tarjeta destacada ("Mayor monto"): acento permanente coherente —
   barra superior siempre visible y anillo teal sutil (no estático suelto). */
#productos .product-card[style*="border-color:var(--teal)"],
#productos .product-card[style*="border-color: var(--teal)"] {
  border-color: rgba(18,179,154,.55) !important;
  box-shadow: 0 0 0 1px rgba(18,179,154,.4), var(--sm-sh-2) !important;
}
#productos .product-card[style*="border-color:var(--teal)"]::before,
#productos .product-card[style*="border-color: var(--teal)"]::before {
  transform: scaleX(1) !important;
}

.product-card-icon,
.benefit-icon,
.vb-icon {
  background: linear-gradient(135deg, rgba(18,179,154,.14), rgba(27,46,107,.10)) !important;
  color: var(--sm-teal-deep) !important;
  border: 1px solid rgba(18,179,154,.18) !important;
  border-radius: 14px !important;
}
[data-theme="dark"] .product-card-icon,
[data-theme="dark"] .benefit-icon,
[data-theme="dark"] .vb-icon { color: var(--sm-teal-bright) !important; }

.rate-value { color: var(--sm-teal-deep) !important; }
[data-theme="dark"] .rate-value { color: var(--sm-teal-bright) !important; }

.product-card-features li::before,
.product-card-features li::marker { color: var(--sm-teal) !important; }

/* ══ 8. RITMO DE SECCIONES ═════════════════════════════════════════════ */
.section-pad { padding-top: 6.5rem !important; padding-bottom: 6.5rem !important; }
@media (max-width: 768px) {
  .section-pad { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}

.label-tag {
  color: var(--sm-teal-deep) !important;
  background: rgba(18,179,154,.10) !important;
  border: 1px solid rgba(18,179,154,.20) !important;
  font-weight: 700 !important;
  font-size: .72rem !important;
  padding: .35rem .9rem !important;
  border-radius: 50px !important;
}
[data-theme="dark"] .label-tag {
  color: var(--sm-teal-bright) !important;
  background: rgba(18,179,154,.14) !important;
}
.section-subtitle { color: var(--text-2, var(--text-mid)) !important; }
.text-teal { color: var(--sm-teal-deep) !important; }
[data-theme="dark"] .text-teal { color: var(--sm-teal-bright) !important; }

.section-divider {
  border: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--border-mid, rgba(15,23,42,.14)), transparent) !important;
  max-width: 1140px; margin-left: auto; margin-right: auto;
}
.gt-pattern-strip { opacity: .8; }

.gt-impact-number {
  font-family: 'Inter', sans-serif !important;
  color: var(--sm-navy) !important;
  font-weight: 800 !important;
}
[data-theme="dark"] .gt-impact-number { color: #fff !important; }
.gt-impact-number span { color: var(--sm-teal) !important; }

.gt-photo-item { border-radius: var(--sm-r) !important; box-shadow: var(--sm-sh-2) !important; }
.gt-photo-item img { transition: transform .6s var(--ease, ease) !important; }
.gt-photo-item:hover img { transform: scale(1.05) !important; }
.gt-photo-label { font-family: 'Inter', sans-serif !important; letter-spacing: .1em; }

.story-card { border-radius: var(--sm-r) !important; box-shadow: var(--sm-sh-2) !important; }
.story-card-img { transition: transform .7s var(--ease, ease) !important; }
.story-card:hover .story-card-img { transform: scale(1.06) !important; }
.story-card-tag { background: rgba(18,179,154,.9) !important; }

/* ══ 9. FAQ ════════════════════════════════════════════════════════════ */
.faq-item { overflow: hidden; }
.faq-item + .faq-item { margin-top: .85rem; }
.faq-question { font-weight: 600 !important; }
.faq-icon { color: var(--sm-teal) !important; }
.faq-item:hover { border-color: var(--sm-teal) !important; }

/* ══ 10. FORMULARIO DE CONTACTO ═══════════════════════════════════════ */
.form-control, .form-select {
  border-radius: 12px !important;
  border: 1.5px solid var(--border-mid, rgba(15,23,42,.14)) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--sm-teal) !important;
  box-shadow: 0 0 0 4px rgba(18,179,154,.15) !important;
}
.form-label { font-weight: 600 !important; }

/* ══ 11. FOOTER ═══════════════════════════════════════════════════════ */
footer {
  background: rgba(9,18,44,.68) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  border-top: 3px solid var(--sm-teal) !important;
}
.footer-contact-item svg { color: var(--sm-teal-bright) !important; }

/* ══ 12. PISO DE CALIDAD ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

:where(a, button, .form-control, .form-select, .nav-link):focus-visible {
  outline: 2px solid var(--sm-teal) !important;
  outline-offset: 2px !important;
  border-radius: 6px;
}

::selection { background: rgba(18,179,154,.25); }

/* ══ 13. FONDO FIJO GLOBAL — el Lago visible en toda la página ═════════
   La foto se fija al viewport (position:fixed, más fiable que
   background-attachment:fixed, incluso en móvil) y el contenido se desliza
   encima. Un velo adaptable por tema garantiza el contraste del texto. */
html, body { background: transparent !important; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -4;
  background: url('../img/hero-lago.webp') center 42% / cover no-repeat;
  pointer-events: none;
  transform: scale(1.05);
  will-change: transform;
  animation: smKenBurns 52s ease-in-out infinite;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}
[data-theme="dark"] body::after {
  background: linear-gradient(180deg, rgba(9,16,40,.55) 0%, rgba(9,16,40,.66) 100%);
}
[data-theme="light"] body::after {
  background: linear-gradient(180deg, rgba(244,247,252,.70) 0%, rgba(238,242,249,.80) 100%);
}

/* Secciones translúcidas: dejan ver el fondo fijo del lago en toda la página. */
#productos, #por-que, #nosotros, #faq, #contacto, #testimonios,
.gt-section, .stories-section, .trust-bar, .process-section,
[data-theme="light"] #productos, [data-theme="light"] #por-que,
[data-theme="light"] #nosotros, [data-theme="light"] #faq,
[data-theme="light"] #contacto, [data-theme="light"] #testimonios,
[data-theme="light"] .gt-section, [data-theme="light"] .stories-section,
[data-theme="dark"] #productos, [data-theme="dark"] #nosotros,
[data-theme="dark"] #faq, [data-theme="dark"] #contacto,
[data-theme="dark"] .stories-section {
  background: transparent !important;
}

.country-banner,
[data-theme="light"] .country-banner,
[data-theme="dark"] .country-banner {
  background: transparent !important;
}
.country-banner::before { opacity: .5 !important; }

[data-theme="light"] .product-card,
[data-theme="light"] .benefit-card,
[data-theme="light"] .gt-impact-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .mv-card,
[data-theme="light"] .testimonial-card,
[data-theme="light"] .value-badge,
[data-theme="light"] .contact-form-wrap,
[data-theme="light"] #contactForm,
[data-theme="light"] .contact-card {
  background: rgba(255,255,255,.62) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
}
[data-theme="dark"] .product-card,
[data-theme="dark"] .benefit-card,
[data-theme="dark"] .gt-impact-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .mv-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .value-badge,
[data-theme="dark"] .contact-form-wrap,
[data-theme="dark"] #contactForm,
[data-theme="dark"] .contact-card {
  background: rgba(12,22,50,.55) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
  border-color: rgba(255,255,255,.12) !important;
}

.trust-bar {
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}
.section-divider { opacity: .35; }

@media (max-width: 768px) {
  [data-theme="dark"] body::after {
    background: linear-gradient(180deg, rgba(9,16,40,.64) 0%, rgba(9,16,40,.74) 100%);
  }
  [data-theme="light"] body::after {
    background: linear-gradient(180deg, rgba(244,247,252,.76) 0%, rgba(238,242,249,.84) 100%);
  }
}

/* ══ 14. VIDA AMBIENTAL DEL PAISAJE — nubes, olas y deriva cinemática ══
   Solo se anima transform/opacity (compositor GPU). Capas fijas sobre los
   pseudo-elementos de <html> (libres) para no tocar el HTML. Sutil, largo
   y de bajo costo. Orden z: foto(-4) · velo(-3) · nubes/olas(-2) · texto(≥0). */

/* Deriva lenta de la foto (efecto Ken Burns) */
@keyframes smKenBurns {
  0%   { transform: scale(1.05) translate3d(0, 0, 0); }
  50%  { transform: scale(1.09) translate3d(-1.1%, -0.7%, 0); }
  100% { transform: scale(1.05) translate3d(0, 0, 0); }
}

/* ── Nubes: RUIDO FRACTAL animado (feTurbulence) → nubes orgánicas que se
   DEFORMAN con el viento (se deshacen y reforman) además de desplazarse.
   Tono gris suave: las zonas densas se ven más claras y las finas más grises,
   como el cielo real. Capa única continua, sin repetición ni costuras. ── */
html::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 34%;
  z-index: -2;
  pointer-events: none;
  /* Turbulencia TILEABLE (stitchTiles) → el patrón es periódico cada 512px,
     así el desplazamiento continuo en UN solo sentido es infinito y SIN
     costuras. La turbulencia además se deforma sola. */
  /* Dos capas: nubes CERCANAS esponjosas (rápidas) + LEJANAS finas (lentas)
     → paralaje real de cielo. Ambas tileables y sin costuras. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='300' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='c' x='0%25' y='0%25' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.015' numOctaves='4' seed='11' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0.86 0 0 0 0 0.88 0 0 0 0 0.92 0 0 0 1.5 -0.62'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='512' height='300' filter='url(%23c)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='300' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='c2' x='0%25' y='0%25' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.024' numOctaves='3' seed='7' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0.72 0 0 0 0 0.75 0 0 0 0 0.80 0 0 0 1.05 -0.46'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='768' height='300' filter='url(%23c2)'/%3E%3C/svg%3E");
  background-size: 512px 100%, 768px 100%;
  background-repeat: repeat-x;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 44%, transparent 100%);
  opacity: .85;
  will-change: background-position;
  animation: smClouds 110s linear infinite;
}
@keyframes smClouds {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 1024px 0, 768px 0; } /* cercanas 2x más rápidas */
}
[data-theme="dark"] html::before { opacity: .6; }

/* ── Olas: RUIDO de turbulencia animado configurado como AGUA — ondas
   horizontales que ondulan y se deforman como reflejos reales en el lago.
   Capa única continua (sin repetición → sin costuras), mezclada como luz. ── */
html::after {
  content: '';
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 56%;
  z-index: -2;
  pointer-events: none;
  /* Olas: reflejo de agua por turbulencia (rizos horizontales largos y
     brillo graduado, más realista). Tileable (stitchTiles + región 0-100%)
     → flujo en un solo sentido, infinito y SIN costura. */
  /* Dos escalas de agua: RIZOS finos y rápidos + MAREJADA ancha y lenta
     en sentido contrario → interferencia natural, como el lago real. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='400' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='w' x='0%25' y='0%25' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.008 0.075' numOctaves='2' seed='4' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 -0.24'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='512' height='400' filter='url(%23w)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='400' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='w2' x='0%25' y='0%25' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.009 0.04' numOctaves='2' seed='9' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 -0.2'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='768' height='400' filter='url(%23w2)'/%3E%3C/svg%3E");
  background-size: 512px 100%, 768px 100%;
  background-repeat: repeat-x;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 34%, #000 100%);
  mix-blend-mode: soft-light;
  opacity: .72;
  will-change: background-position;
  animation: smWave 30s linear infinite, smWaveGlow 8s ease-in-out infinite;
}
@keyframes smWave {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 1024px 0, -768px 0; } /* sentidos opuestos */
}
/* El agua "respira": brillo que sube y baja suavemente */
@keyframes smWaveGlow {
  0%, 100% { opacity: .62; }
  50%      { opacity: .8; }
}
[data-theme="dark"] html::after { opacity: .6; }

/* Rendimiento: en móvil, capas más lentas y tenues */
@media (max-width: 768px) {
  /* El fondo del lago se desplaza horizontalmente según el scroll (ver app.js).
     Se desactiva el Ken Burns y se amplía un poco para tener margen de paneo. */
  body::before {
    animation: none;
    transform: scale(1.12);
    background-position: var(--bgx, 50%) 42%;
    will-change: background-position;
  }
  html::before { animation-duration: 90s; opacity: .5; }
  html::after  { animation-duration: 26s, 7s; } /* olas, brillo */
}

/* Accesibilidad: sin movimiento si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
  body::before, html::before, html::after { animation: none !important; }
  body::before { transform: scale(1.03) !important; }
}

/* ══ 15. REFINAMIENTO INMERSIVO — armonía con el lago ══════════════════
   Con el paisaje detrás de toda la página, se unifica un sistema de
   "cristal sobre agua": paneles semitransparentes tintados a la paleta del
   lago (azul/teal), texto claro de alto contraste y el teal como único
   acento. Cohesivo en modo claro y oscuro. */

/* A) Paneles de cristal cohesivos y semitransparentes ─────────────────── */
[data-theme="dark"] .product-card,
[data-theme="dark"] .benefit-card,
[data-theme="dark"] .gt-impact-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .mv-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .value-badge,
[data-theme="dark"] .contact-form-wrap,
[data-theme="dark"] #contactForm,
[data-theme="dark"] .contact-card {
  background: linear-gradient(160deg, rgba(22,60,72,.34) 0%, rgba(10,20,48,.48) 100%) !important;
  backdrop-filter: blur(17px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(17px) saturate(1.3) !important;
  border: 1px solid rgba(150,215,220,.16) !important;
  box-shadow: 0 14px 44px rgba(4,10,26,.4) !important;
}
[data-theme="light"] .product-card,
[data-theme="light"] .benefit-card,
[data-theme="light"] .gt-impact-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .mv-card,
[data-theme="light"] .testimonial-card,
[data-theme="light"] .value-badge,
[data-theme="light"] .contact-form-wrap,
[data-theme="light"] #contactForm,
[data-theme="light"] .contact-card {
  background: linear-gradient(160deg, rgba(255,255,255,.72) 0%, rgba(236,246,249,.64) 100%) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  border: 1px solid rgba(18,120,120,.14) !important;
  box-shadow: 0 10px 34px rgba(15,35,60,.12) !important;
}

/* B) Texto legible y armónico SOBRE el lago ───────────────────────────── */
/* Títulos y subtítulos van directos sobre la foto: sombra sutil para leerse */
[data-theme="dark"] .section-title,
[data-theme="dark"] .stories-section h2,
[data-theme="dark"] .gt-section h2 {
  color: #F2F7FB !important;
  text-shadow: 0 2px 18px rgba(4,10,26,.55) !important;
}
[data-theme="dark"] .section-subtitle {
  color: rgba(226,238,248,.86) !important;
  text-shadow: 0 1px 10px rgba(4,10,26,.45) !important;
}
[data-theme="light"] .section-title { text-shadow: 0 1px 12px rgba(255,255,255,.55) !important; }
[data-theme="light"] .section-subtitle { color: rgba(15,30,55,.72) !important; }

/* Texto dentro de los paneles (ya tienen fondo → sin sombra) */
[data-theme="dark"] .product-card h3,
[data-theme="dark"] .benefit-text h4,
[data-theme="dark"] .mv-card h3,
[data-theme="dark"] .faq-question,
[data-theme="dark"] .value-badge {
  color: #EEF4FA !important;
}
[data-theme="dark"] .product-card p,
[data-theme="dark"] .product-card-features li,
[data-theme="dark"] .benefit-text p,
[data-theme="dark"] .mv-card p,
[data-theme="dark"] .testimonial-text,
[data-theme="dark"] .faq-answer p {
  color: rgba(224,236,246,.84) !important;
}

/* C) Acento teal cohesivo en hover de todos los paneles ───────────────── */
.benefit-card:hover,
.mv-card:hover,
.testimonial-card:hover,
.value-badge:hover,
.faq-item:hover,
.gt-impact-card:hover {
  border-color: rgba(31,212,186,.5) !important;
  box-shadow: 0 0 0 1px rgba(31,212,186,.32), 0 18px 50px rgba(4,10,26,.45) !important;
  transform: translateY(-4px) !important;
}

/* D) Pulido tipográfico: más respiro para leer sobre la foto ──────────── */
.section-subtitle,
.product-card p,
.benefit-text p,
.mv-card p,
.testimonial-text,
.faq-answer p {
  line-height: 1.78 !important;
}
.section-title { letter-spacing: -0.015em !important; }
body { letter-spacing: .002em; }

/* ══ 16. PULIDO DEL HERO — mismo layout, más calmado y premium ═════════ */
#hero .hero-content { max-width: 620px; }

.hero-badge {
  margin-bottom: 1.6rem !important;
  padding: .4rem 1rem !important;
  font-size: .7rem !important;
}
.hero-title {
  font-size: clamp(2.5rem, 4.4vw, 4rem) !important;
  line-height: 1.07 !important;
  letter-spacing: -0.01em !important;
  font-weight: 600 !important;
  margin-bottom: 1.5rem !important;
}
.hero-subtitle {
  font-size: 1.04rem !important;
  line-height: 1.75 !important;
  max-width: 30rem !important;
  margin-bottom: 2.1rem !important;
}
.hero-actions { gap: .9rem !important; margin-bottom: 2.6rem !important; }
.hero-stats { gap: 1.4rem !important; padding-top: 1.8rem !important; }
.hero-stat .value { font-size: 1.85rem !important; line-height: 1.1 !important; }
.hero-stat .label { font-size: .72rem !important; letter-spacing: .05em !important; margin-top: .2rem; }

/* Tarjeta del hero: respiro interno y ritmo de la lista */
.hero-card { padding: 1.85rem !important; }
.hero-card-header { margin-bottom: 1.35rem !important; }
.hero-card-title { font-size: 1.02rem !important; letter-spacing: -0.01em; }
.hero-product-item { padding: .72rem 0 !important; gap: .9rem !important; }
.hero-product-name { font-size: .95rem !important; }
.hero-product-rate { font-size: .8rem !important; }

/* ══ 17. CHAT Y MODAL — colores cohesivos con la marca ════════════════ */

/* ── Chatbot: contenedor y cabecera de marca (teal → navy) ── */
.chatbot-window {
  border: 1px solid rgba(150,215,220,.16) !important;
  box-shadow: 0 26px 74px rgba(4,10,26,.55) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}
.chat-header {
  background: linear-gradient(135deg, #12B39A 0%, #14356A 100%) !important;
}
.chat-avatar {
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
}
.chat-send {
  background: linear-gradient(135deg, #12B39A 0%, #0C8F7C 100%) !important;
}

/* Chatbot — modo oscuro */
[data-theme="dark"] .chatbot-window { background: #0C1730 !important; }
[data-theme="dark"] .chat-messages,
[data-theme="dark"] #chatMessages { background: #0B1730 !important; }
[data-theme="dark"] .msg-bot .msg-bubble {
  background: rgba(255,255,255,.06) !important;
  color: #E8F0F8 !important;
  border: 1px solid rgba(255,255,255,.09) !important;
}
.msg-user .msg-bubble {
  background: linear-gradient(135deg, #12B39A 0%, #0C8F7C 100%) !important;
  color: #fff !important;
}
[data-theme="dark"] .chat-option-btn {
  background: rgba(18,120,120,.16) !important;
  border: 1px solid rgba(31,212,186,.28) !important;
  color: #DCEFF1 !important;
}
[data-theme="dark"] .chat-option-btn:hover {
  background: linear-gradient(135deg, #12B39A 0%, #0C8F7C 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}
[data-theme="dark"] .chat-input-row { background: #0E1A38 !important; border-top: 1px solid rgba(255,255,255,.08) !important; }
[data-theme="dark"] .chat-input {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #EAF2F8 !important;
}
[data-theme="dark"] .chat-input:focus { border-color: var(--sm-teal) !important; }

/* ── Modal de contacto emergente ── */
.contact-modal-close:hover { background: var(--sm-teal) !important; border-color: var(--sm-teal) !important; }

/* Modal — modo oscuro: cristal navy cohesivo */
[data-theme="dark"] .contact-modal {
  background: linear-gradient(180deg, rgba(17,31,62,.94) 0%, rgba(10,20,44,.97) 100%) !important;
  border: 1px solid rgba(150,215,220,.16) !important;
  box-shadow: 0 30px 90px rgba(2,8,22,.6), 0 0 0 1px rgba(18,179,154,.16) !important;
  backdrop-filter: blur(22px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.2) !important;
}
[data-theme="dark"] .contact-modal-header h3 { color: #F2F7FB !important; }
[data-theme="dark"] .contact-modal-header p { color: rgba(226,238,248,.8) !important; }
[data-theme="dark"] .contact-modal .form-label { color: rgba(226,238,248,.86) !important; }
[data-theme="dark"] .contact-modal .form-control,
[data-theme="dark"] .contact-modal .form-select,
[data-theme="dark"] .contact-modal textarea {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #EAF2F8 !important;
}
[data-theme="dark"] .contact-modal .form-control::placeholder,
[data-theme="dark"] .contact-modal textarea::placeholder { color: rgba(226,238,248,.42) !important; }
[data-theme="dark"] .contact-modal .form-control:focus,
[data-theme="dark"] .contact-modal .form-select:focus,
[data-theme="dark"] .contact-modal textarea:focus {
  border-color: var(--sm-teal) !important;
  box-shadow: 0 0 0 4px rgba(18,179,154,.18) !important;
}
/* Icono de cabecera del modal en teal de marca */
.contact-modal-header .success-check,
.contact-modal-header > svg,
.contact-modal-header [class*="icon"] { color: var(--sm-teal) !important; }

/* ── Pulido fino del formulario del modal (ritmo, campos, cabecera) ── */
.contact-modal {
  padding: 2.4rem 2.15rem 2.15rem !important;
  border-radius: 22px !important;
  max-width: 480px !important;
}
.contact-modal-header { margin-bottom: 1.7rem !important; }
.contact-modal-header h3 { font-size: 1.5rem !important; letter-spacing: -0.015em !important; }
.contact-modal-header p { font-size: .88rem !important; max-width: 24rem; margin: 0 auto !important; }

/* Badge del ícono de cabecera: teal de marca con glow suave */
.contact-modal-header > div:first-child {
  width: 56px !important; height: 56px !important;
  background: linear-gradient(135deg, rgba(18,179,154,.24) 0%, rgba(20,53,106,.30) 100%) !important;
  border: 1px solid rgba(31,212,186,.42) !important;
  box-shadow: 0 8px 26px rgba(18,179,154,.24) !important;
  margin-bottom: 1.1rem !important;
}

/* Campos más altos y cómodos, con ritmo uniforme */
.contact-modal .form-control,
.contact-modal .form-select,
.contact-modal textarea {
  padding: .82rem 1rem !important;
  border-radius: 12px !important;
  font-size: .92rem !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
}
.contact-modal .row { --bs-gutter-y: 1.05rem !important; }
.contact-modal .form-label {
  font-size: .82rem !important;
  font-weight: 600 !important;
  margin-bottom: .42rem !important;
  letter-spacing: .01em !important;
}
.contact-modal input[type="checkbox"] {
  width: 18px !important; height: 18px !important;
  accent-color: var(--sm-teal) !important;
  flex-shrink: 0;
}
.contact-modal .btn-teal.btn-lg,
.contact-modal .btn-teal {
  padding: .95rem 1.5rem !important;
  font-size: .98rem !important;
  border-radius: 12px !important;
}

/* Modo claro: campos del modal legibles y limpios */
[data-theme="light"] .contact-modal .form-control,
[data-theme="light"] .contact-modal .form-select,
[data-theme="light"] .contact-modal textarea {
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  color: #0F1E37 !important;
}

/* ══ 18. MODAL — versión limpia y premium (tarjeta sólida, foco sutil) ══
   El cristal turbio y los glows neón se veían baratos. Se usa una tarjeta
   sólida y elegante con foco discreto. Sobrescribe la §17. */
.contact-modal-overlay {
  background: rgba(6,12,28,.72) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.contact-modal {
  padding: 2.5rem 2.25rem 2.25rem !important;
  border-radius: 20px !important;
  max-width: 462px !important;
}
[data-theme="dark"] .contact-modal {
  background: #141f3e !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 40px 110px rgba(0,0,0,.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .contact-modal {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 40px 110px rgba(15,35,60,.22) !important;
  backdrop-filter: none !important;
}

/* Ícono de cabecera: círculo teal limpio, SIN halo */
.contact-modal-header > div:first-child {
  width: 52px !important; height: 52px !important;
  background: rgba(18,179,154,.13) !important;
  border: 1px solid rgba(18,179,154,.32) !important;
  box-shadow: none !important;
  margin-bottom: 1rem !important;
}
.contact-modal-header h3 { font-size: 1.45rem !important; font-weight: 700 !important; letter-spacing: -0.01em !important; }
[data-theme="dark"] .contact-modal-header p { color: rgba(206,220,238,.7) !important; text-shadow: none !important; }
[data-theme="light"] .contact-modal-header p { color: rgba(15,30,55,.6) !important; }

/* Campos limpios con foco discreto */
[data-theme="dark"] .contact-modal .form-control,
[data-theme="dark"] .contact-modal .form-select,
[data-theme="dark"] .contact-modal textarea {
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  color: #EEF3F9 !important;
  box-shadow: none !important;
}
[data-theme="dark"] .contact-modal .form-control:focus,
[data-theme="dark"] .contact-modal .form-select:focus,
[data-theme="dark"] .contact-modal textarea:focus {
  border-color: rgba(31,212,186,.7) !important;
  box-shadow: 0 0 0 3px rgba(18,179,154,.13) !important;
  background: rgba(255,255,255,.07) !important;
}
[data-theme="light"] .contact-modal .form-control:focus,
[data-theme="light"] .contact-modal .form-select:focus,
[data-theme="light"] .contact-modal textarea:focus {
  border-color: rgba(18,179,154,.7) !important;
  box-shadow: 0 0 0 3px rgba(18,179,154,.12) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   19. MODO CLARO — limpio y brillante
   La foto inmersiva del lago se reserva al modo OSCURO. En claro se usa una
   interfaz nítida (blanco/gris con navy y teal). Todo va scopeado a
   [data-theme="light"], así el modo oscuro NO se toca.
   ══════════════════════════════════════════════════════════════════════ */

/* Ocultar las capas del paisaje (foto, velo, nubes, olas) en claro */
[data-theme="light"] body::before,
[data-theme="light"] body::after,
[data-theme="light"] html::before,
[data-theme="light"] html::after { display: none !important; }

[data-theme="light"] html,
[data-theme="light"] body { background: #EEF1F6 !important; }

/* ── Hero claro, aireado, con texto navy ── */
[data-theme="light"] #hero {
  background: linear-gradient(140deg, #EAF1FB 0%, #DCEAF7 55%, #E7F5F1 100%) !important;
}
[data-theme="light"] #hero::after { display: none !important; }
[data-theme="light"] #hero .hero-title { color: #14203F !important; text-shadow: none !important; }
[data-theme="light"] #hero .hero-title span,
[data-theme="light"] #hero .hero-title .accent {
  color: var(--sm-teal-deep) !important;
  -webkit-text-fill-color: var(--sm-teal-deep) !important;
}
[data-theme="light"] #hero .hero-subtitle { color: rgba(15,30,55,.7) !important; }
[data-theme="light"] #hero .hero-badge {
  background: rgba(18,179,154,.1) !important;
  border-color: rgba(18,179,154,.28) !important;
  color: #0C8F7C !important;
}
[data-theme="light"] #hero .hero-stats { border-top-color: rgba(15,23,42,.12) !important; }
[data-theme="light"] #hero .hero-stat .value { color: #14203F !important; }
[data-theme="light"] #hero .hero-stat .value span { color: var(--sm-teal-deep) !important; }
[data-theme="light"] #hero .hero-stat .label { color: rgba(15,30,55,.55) !important; }
/* Botón outline: legible sobre hero claro */
[data-theme="light"] #hero .btn-outline-white {
  background: rgba(15,23,42,.04) !important;
  border-color: rgba(15,23,42,.22) !important;
  color: #14203F !important;
}

/* Tarjeta del hero en claro: cristal blanco limpio + texto navy */
[data-theme="light"] #hero .hero-card {
  background: rgba(255,255,255,.74) !important;
  border: 1px solid rgba(15,23,42,.1) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  box-shadow: 0 20px 55px rgba(15,35,60,.14) !important;
}
[data-theme="light"] #hero .hero-card-title,
[data-theme="light"] #hero .hero-product-name { color: #14203F !important; text-shadow: none !important; }
[data-theme="light"] #hero .hero-card-label,
[data-theme="light"] #hero .hero-product-rate { color: rgba(15,30,55,.62) !important; text-shadow: none !important; }
[data-theme="light"] #hero .hero-card-header { border-bottom-color: rgba(15,23,42,.1) !important; }
[data-theme="light"] #hero .hero-product-item { border-bottom-color: rgba(15,23,42,.07) !important; }

/* ── Secciones claras sólidas (contraste y aire) ── */
[data-theme="light"] #productos,
[data-theme="light"] #faq { background: #F3F6FB !important; }
[data-theme="light"] #por-que,
[data-theme="light"] #nosotros,
[data-theme="light"] #contacto,
[data-theme="light"] .gt-section,
[data-theme="light"] .stories-section,
[data-theme="light"] #testimonios,
[data-theme="light"] .trust-bar { background: #FFFFFF !important; }
[data-theme="light"] .country-banner {
  background: linear-gradient(135deg, #EEF3FF 0%, #DFEAFF 100%) !important;
}

/* ── Tarjetas claras limpias (sin cristal del lago) ── */
[data-theme="light"] .product-card,
[data-theme="light"] .benefit-card,
[data-theme="light"] .gt-impact-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .mv-card,
[data-theme="light"] .testimonial-card,
[data-theme="light"] .value-badge,
[data-theme="light"] #contactForm,
[data-theme="light"] .contact-card {
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 8px 30px rgba(15,35,60,.08) !important;
}

/* Títulos/subtítulos claros sin halo */
[data-theme="light"] .section-title { text-shadow: none !important; color: var(--sm-navy) !important; }
[data-theme="light"] .section-subtitle { color: rgba(15,30,55,.66) !important; }

/* Topbar y footer sólidos (marca) */
[data-theme="light"] .topbar,
[data-theme="light"] footer {
  background: var(--sm-navy-ink) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ══ 20. CHAT — un poco más de altura SOLO en móvil (escritorio intacto) ══ */
@media (max-width: 767.98px) {
  .chatbot-window { max-height: 74vh !important; max-height: 74dvh !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   21. FORMULARIO EMERGENTE — integrado al sistema y nítido (definitivo)
   Cristal navy-teal como el resto del sitio + título en la serif +
   campos SÓLIDOS (no turbios) con foco discreto. Sobrescribe §17/§18.
   ══════════════════════════════════════════════════════════════════════ */
.contact-modal-overlay {
  background: rgba(6,12,28,.74) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.contact-modal {
  max-width: 560px !important;
  width: calc(100% - 2rem) !important;
  padding: 2.75rem 2.75rem 2.4rem !important;
  border-radius: 24px !important;
}
/* Panel: CRISTAL navy-teal translúcido (como las tarjetas del sitio) */
.contact-modal,
[data-theme="dark"] .contact-modal {
  background: linear-gradient(165deg, rgba(24,46,84,.55) 0%, rgba(12,24,52,.66) 100%) !important;
  border: 1px solid rgba(160,222,228,.22) !important;
  box-shadow: 0 40px 120px rgba(2,8,22,.6), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(30px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.4) !important;
}
/* Título en la serif del sitio */
.contact-modal-header h3 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 1.6rem !important;
  letter-spacing: -0.01em !important;
  color: #F2F7FB !important;
}
.contact-modal-header p { color: rgba(214,226,242,.74) !important; font-size: .88rem !important; }
/* Ícono de cabecera: teal limpio con anillo sutil (sin neón) */
.contact-modal-header > div:first-child {
  width: 58px !important; height: 58px !important;
  background: radial-gradient(circle at 50% 42%, rgba(18,179,154,.30), rgba(18,179,154,.1)) !important;
  border: 1px solid rgba(31,212,186,.45) !important;
  box-shadow: 0 6px 20px rgba(18,179,154,.2) !important;
  margin-bottom: 1.05rem !important;
}
.contact-modal-header > div:first-child svg { stroke: #2fe0c6 !important; }
/* Campos SÓLIDOS y nítidos (el problema anterior era la transparencia) */
.contact-modal .form-control,
.contact-modal .form-select,
.contact-modal textarea,
[data-theme="dark"] .contact-modal .form-control,
[data-theme="dark"] .contact-modal .form-select,
[data-theme="dark"] .contact-modal textarea {
  background: rgba(10,19,42,.88) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #EEF3F9 !important;
  border-radius: 12px !important;
  padding: .85rem 1rem !important;
  box-shadow: none !important;
}
.contact-modal .form-control::placeholder,
.contact-modal textarea::placeholder { color: rgba(206,220,238,.42) !important; }
.contact-modal .form-control:focus,
.contact-modal .form-select:focus,
.contact-modal textarea:focus {
  border-color: var(--sm-teal) !important;
  box-shadow: 0 0 0 3px rgba(18,179,154,.16) !important;
  background: rgba(12,22,48,.96) !important;
}
.contact-modal .form-label { color: rgba(220,232,246,.86) !important; font-weight: 600 !important; }
.contact-modal input[type="checkbox"] { accent-color: var(--sm-teal) !important; width: 18px !important; height: 18px !important; flex-shrink: 0; }
/* Botón cerrar coherente */
.contact-modal-close {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(226,238,248,.8) !important;
}
.contact-modal-close:hover { background: var(--sm-teal) !important; border-color: var(--sm-teal) !important; color: #fff !important; }
/* Botón enviar */
.contact-modal .btn-teal { padding: 1rem 1.5rem !important; font-size: 1rem !important; border-radius: 12px !important; }
/* Texto de ayuda inferior */
.contact-modal p[style*="text-align:center"] { color: rgba(200,214,234,.5) !important; }

/* ══ 22. CABECERA DEL CHAT — resaltada y premium ══════════════════════ */
.chat-header {
  background: linear-gradient(120deg, #16c2a8 0%, #0e9a86 42%, #163a6a 100%) !important;
  padding: 1.05rem 1.15rem !important;
  box-shadow: 0 8px 26px rgba(6,12,32,.4) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  position: relative;
  z-index: 3;
}
.chat-avatar {
  background: rgba(255,255,255,.2) !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.28) !important;
  color: #fff !important;
}
.chat-avatar svg { color: #fff !important; }
.chat-name { color: #fff !important; font-weight: 700 !important; font-size: .98rem !important; letter-spacing: .01em !important; }
.chat-status { color: rgba(255,255,255,.88) !important; font-size: .74rem !important; }
.chat-close {
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #fff !important;
  border-radius: 50% !important;
  transition: background .2s, transform .2s !important;
}
.chat-close:hover { background: rgba(255,255,255,.3) !important; transform: rotate(90deg) !important; }

/* ══ 23. SIMULADOR DE CRÉDITO — tarjeta de cristal acorde al sitio ═════ */
.sim-card {
  max-width: 620px;
  margin: 0 auto;
  background: linear-gradient(165deg, rgba(22,44,80,.5) 0%, rgba(12,24,52,.64) 100%);
  border: 1px solid rgba(160,222,228,.2);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(2,8,22,.5), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  padding: 2rem;
}
.sim-tipo {
  display: flex; gap: .4rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: .3rem;
  margin-bottom: 1.6rem;
}
.sim-tipo-btn {
  flex: 1; padding: .62rem;
  border-radius: 9px;
  background: transparent;
  color: rgba(226,238,248,.7);
  font-weight: 600; font-size: .88rem;
  border: none; cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.sim-tipo-btn.active {
  background: linear-gradient(135deg, #12B39A, #0C8F7C);
  color: #fff;
  box-shadow: 0 4px 14px rgba(18,179,154,.3);
}
.sim-tipo-hint {
  font-size: .8rem;
  line-height: 1.55;
  color: rgba(214,228,244,.68);
  background: rgba(18,179,154,.08);
  border: 1px solid rgba(18,179,154,.18);
  border-radius: 10px;
  padding: .7rem .85rem;
  margin: 0 0 1.6rem;
}
.sim-tipo-hint strong { color: #7fe9d6; font-weight: 600; }

/* Indicador de producto que se está simulando */
.sim-producto {
  background: linear-gradient(135deg, rgba(18,179,154,.16), rgba(20,53,106,.18));
  border: 1px solid rgba(31,212,186,.32);
  border-radius: 12px;
  padding: .85rem 1rem;
  margin-bottom: 1.4rem;
  text-align: center;
}
.sim-producto-tag {
  display: block; font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(226,238,248,.6); margin-bottom: .15rem;
}
.sim-producto strong {
  color: #fff; font-size: 1.08rem;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em;
}
.sim-producto-nota { font-size: .76rem; color: rgba(214,228,244,.72); margin-top: .5rem; line-height: 1.5; }
.sim-tipo-btn.sim-tipo-off { opacity: .4; cursor: not-allowed; }

/* Botón "Simular pagos" inyectado en cada tarjeta de crédito */
.btn-sim-producto {
  width: 100%; margin-top: .6rem;
  padding: .62rem 1rem; border-radius: 12px;
  background: rgba(18,179,154,.1);
  border: 1px solid rgba(31,212,186,.4);
  color: #2fe0c6; font-weight: 600; font-size: .9rem;
  cursor: pointer; transition: background .2s, transform .2s;
}
.btn-sim-producto:hover { background: rgba(18,179,154,.2); transform: translateY(-1px); }

.sim-field { margin-bottom: 1.4rem; }
.sim-card .form-label { color: rgba(220,232,246,.85) !important; font-weight: 600 !important; }
.sim-monto-val {
  font-family: 'Inter', sans-serif;
  font-size: 2rem; font-weight: 800;
  color: #fff; letter-spacing: -.02em;
  margin: .15rem 0 .6rem;
}
.sim-monto-val span { color: #2fe0c6; }
.sim-range { width: 100%; accent-color: #12B39A; height: 6px; cursor: pointer; }
.sim-range-ends {
  display: flex; justify-content: space-between;
  font-size: .74rem; color: rgba(226,238,248,.5);
  margin-top: .4rem;
}
.sim-card .form-select {
  background: rgba(10,19,42,.85) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #EEF3F9 !important;
  border-radius: 12px !important;
  padding: .8rem 1rem !important;
}
.sim-result {
  background: rgba(9,18,40,.5);
  border: 1px solid rgba(31,212,186,.25);
  border-radius: 16px;
  padding: 1.4rem 1.2rem;
  margin: 1.5rem 0;
  text-align: center;
}
.sim-result-label {
  font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(226,238,248,.6);
}
.sim-result-cuota {
  font-family: 'Inter', sans-serif;
  font-size: 2.6rem; font-weight: 800;
  color: #2fe0c6; letter-spacing: -.02em; line-height: 1.1;
  margin-top: .25rem;
}
.sim-result-sub {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem 1.5rem;
  margin-top: .85rem;
  font-size: .85rem; color: rgba(226,238,248,.75);
}
.sim-cta { width: 100%; justify-content: center; display: flex; }
.sim-nota {
  text-align: center; font-size: .74rem;
  color: rgba(200,214,234,.5); margin-top: .9rem; line-height: 1.5;
}
@media (max-width: 575.98px) {
  .sim-card { padding: 1.5rem 1.25rem; }
  .sim-result-cuota { font-size: 2.2rem; }
}


/* ══ MICROANIMACIONES (julio 2026) ═══════════════════════════════════ */
/* Iconos de producto: rebote sutil al pasar el cursor */
.product-card-icon { transition: transform .35s cubic-bezier(.34,1.56,.64,1) !important; }
.product-card:hover .product-card-icon { transform: translateY(-4px) scale(1.06) rotate(-3deg); }

/* Botón WhatsApp: pulso de atención */
.wa-float::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,.42);
  animation: waPulse 2.6s ease-out infinite; pointer-events: none;
}
@keyframes waPulse {
  70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* Cuota del simulador: pop al recalcular */
#simCuota { display: inline-block; }
#simCuota.bump { animation: cuotaBump .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes cuotaBump { 0%{transform:scale(1)} 45%{transform:scale(1.08)} 100%{transform:scale(1)} }

/* Botón "Simular pagos" */
.btn-sim-producto { transition: transform .25s ease, box-shadow .25s ease !important; }
.btn-sim-producto:hover { transform: translateY(-2px); }

/* Tarjetas de presencia local */
#presencia [data-reveal] > div > div:hover { border-color: rgba(45,192,172,.45); }

@media (prefers-reduced-motion: reduce) {
  .wa-float::after { animation: none; }
  #simCuota.bump { animation: none; }
}