/* ================================================================
   PREMIUM.CSS — San Miguel S.A. · Financial Institution Edition
   Colores extraídos del logo oficial · Sector financiero Guatemala
   Referencia visual: Marcus GS / Banorte / Banco Industrial GT
   ================================================================ */

/* ── Design Tokens — Logo-accurate colors ───────────────────── */
:root {
  /* Dark backgrounds — navy-tinted (financiera, no pure-black) */
  --bg-base:     #080E24;
  --bg-surface:  #0C1536;
  --bg-elevated: #111D44;
  --bg-glass:    rgba(8,14,36,.65);

  /* Brand — extraídos del logo San Miguel S.A. */
  --navy:        #2A3B8E;   /* arco y texto del logo */
  --navy-mid:    #3549A8;
  --navy-light:  #4560C0;
  --navy-dark:   #1C2B6B;   /* para gradientes profundos */

  /* Accent — turquesa del logo */
  --teal:        #2DC0AC;   /* arco de acento del logo */
  --teal-light:  #3DCFC0;
  --teal-dim:    rgba(45,192,172,.15);
  --teal-glow:   rgba(45,192,172,.30);

  /* Text on dark */
  --text-1:      #EEF2FF;
  --text-2:      rgba(238,242,255,.62);
  --text-3:      rgba(238,242,255,.32);

  /* Borders */
  --border:       rgba(255,255,255,.07);
  --border-teal:  rgba(45,192,172,.22);
  --border-mid:   rgba(255,255,255,.12);

  /* Gradients */
  --g-teal:  linear-gradient(135deg, #2DC0AC, #1A9A90);
  --g-navy:  linear-gradient(160deg, #0c1840 0%, #2A3B8E 50%, #1c3490 100%);
  --g-dark:  linear-gradient(160deg, #080E24 0%, #0C1536 100%);
  --g-glass: linear-gradient(135deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 100%);

  /* Shadows */
  --sh-card:  0 4px 24px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.06) inset;
  --sh-teal:  0 8px 32px rgba(45,192,172,.35);
  --sh-navy:  0 8px 32px rgba(42,59,142,.45);
  --sh-glow:  0 0 0 1px rgba(45,192,172,.22), 0 8px 32px rgba(45,192,172,.18);

  /* Easing */
  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast:  .16s;
  --t-base:  .26s;
  --t-slow:  .5s;
}

/* ── Global dark body ───────────────────────────────────────── */
body {
  background: var(--bg-base);
  color: var(--text-1);
}

/* ── Scroll progress bar ─────────────────────────────────────── */
#scrollProgress {
  position: fixed; top: 0; left: 0; z-index: 10001;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--teal), #3DCFC0, var(--navy-mid));
  box-shadow: 0 0 10px rgba(45,192,172,.7);
  transition: width .1s linear;
}

/* ══ NAVBAR ═══════════════════════════════════════════════════ */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: .85rem 0;
  background: rgba(8,14,36,.78) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: all var(--t-slow) var(--ease);
}
#navbar.scrolled {
  background: rgba(8,14,36,.96) !important;
  box-shadow: 0 4px 40px rgba(0,0,0,.4);
  padding: .6rem 0;
}
/* Navbar layout — ambos modos */
.nav-link { font-weight: 500; font-size: .88rem; padding: .45rem .9rem !important; border-radius: 8px; transition: all var(--t-base) var(--ease); }

/* Navbar colores — modo oscuro */
[data-theme="dark"] .nav-brand-title               { color: #fff !important; }
[data-theme="dark"] .nav-brand-sub                 { color: rgba(255,255,255,.4) !important; }
[data-theme="dark"] .nav-link                      { color: rgba(255,255,255,.75) !important; }
[data-theme="dark"] .nav-link:hover                { color: var(--teal) !important; background: rgba(45,192,172,.08); }
[data-theme="dark"] .nav-link.active               { color: var(--teal) !important; }
[data-theme="dark"] #navbar.scrolled .nav-link       { color: rgba(255,255,255,.75) !important; }
[data-theme="dark"] #navbar.scrolled .nav-link:hover { color: var(--teal) !important; }
[data-theme="dark"] #navbar.scrolled .nav-brand-title{ color: #fff !important; }
[data-theme="dark"] #navbar.scrolled .nav-brand-sub  { color: rgba(255,255,255,.4) !important; }
[data-theme="dark"] #navToggler svg                { stroke: white !important; }

.btn-nav-cta {
  background: var(--teal) !important;
  color: #fff !important;
  padding: .5rem 1.3rem !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  font-size: .84rem !important;
  box-shadow: 0 4px 16px rgba(45,192,172,.4);
  transition: all var(--t-base) !important;
  border: none !important;
}
.btn-nav-cta:hover {
  background: var(--teal-light) !important;
  transform: translateY(-2px);
  box-shadow: var(--sh-teal) !important;
  color: #fff !important;
}
.logo-img {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
}

/* ══ HERO ══════════════════════════════════════════════════════ */
#hero {
  min-height: 100vh;
  background:
    linear-gradient(160deg, rgba(8,14,36,.95) 0%, rgba(12,21,54,.88) 45%, rgba(10,20,55,.82) 75%, rgba(8,14,36,.94) 100%),
    url('../img/hero-lago.jpg') center 40% / cover no-repeat;
  background-attachment: fixed;
  position: relative; display: flex; align-items: center; overflow: hidden;
}
@media (max-width:768px) { #hero { background-attachment: scroll; } }

.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
#hero::before {
  content: '';
  position: absolute; border-radius: 50%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(45,192,172,.1) 0%, transparent 70%);
  top: -180px; right: -100px;
  animation: orbFloat1 9s ease-in-out infinite;
  pointer-events: none;
}
#hero::after {
  content: '';
  position: absolute; border-radius: 50%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(42,59,142,.18) 0%, transparent 70%);
  bottom: -120px; left: -80px;
  animation: orbFloat2 11s ease-in-out infinite;
  pointer-events: none;
}
@keyframes orbFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-25px,18px) scale(1.05)} }
@keyframes orbFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(18px,-22px) scale(1.04)} }

.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(45,192,172,.12);
  border: 1px solid rgba(45,192,172,.3);
  color: var(--teal-light);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .42rem 1.1rem; border-radius: 50px;
  margin-bottom: 1.75rem;
}
.hero-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 8px #4ade80;
  animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }

.display-title, .hero-title {
  font-size: clamp(2.8rem, 6.5vw, 5rem) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
  color: #fff;
}
.hero-title span, .display-title span {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-light) 60%, #a5f3fc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  color: var(--text-2) !important;
  font-size: 1.08rem !important;
  line-height: 1.78 !important;
  max-width: 500px;
  margin-bottom: 2.2rem;
}

/* Hero card glass */
.hero-card {
  background: rgba(255,255,255,.05) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 24px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1) !important;
  animation: heroFloat 7s ease-in-out infinite;
}
@keyframes heroFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.hero-stats { border-top: 1px solid rgba(255,255,255,.1); padding-top: 2rem; }
.hero-stat .value { font-size: 1.9rem; font-weight: 900; color: #fff; }
.hero-stat .label { color: var(--text-3); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }

/* ══ TRUST BAR ════════════════════════════════════════════════ */
.trust-bar {
  background: linear-gradient(135deg, #0C1536 0%, #111D44 100%) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust-item .number {
  background: linear-gradient(135deg, #fff 30%, var(--teal-light) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: clamp(1.9rem, 3.5vw, 2.6rem); font-weight: 900;
}
.trust-item .text { color: var(--text-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }

/* ══ LABEL TAGS ═══════════════════════════════════════════════ */
.label-tag {
  background: rgba(45,192,172,.1) !important;
  border: 1px solid var(--border-teal) !important;
  color: var(--teal) !important;
}

/* ══ SECTION TITLES (dark) ═════════════════════════════════════ */
.section-title { color: var(--text-1) !important; }
.section-subtitle { color: var(--text-2) !important; }

/* ══ SECTION BACKGROUNDS ══════════════════════════════════════ */
.section-divider { display: none; }
.gt-pattern-strip { height: 1px; background: var(--border); opacity: 1; }

/* Products */
#productos {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* GT identity */
.gt-section {
  background: var(--bg-base) !important;
  border-top: 1px solid var(--border);
}
.gt-section::before { display: none; }
/* Stories */
.stories-section { background: var(--bg-surface) !important; }
/* Process */
.process-section { background: linear-gradient(160deg, #080E24 0%, #0C1536 60%, #080E24 100%) !important; }
/* Por qué */
#por-que { background: var(--bg-base) !important; }
/* Testimonios */
#testimonios { background: var(--bg-surface) !important; }
#testimonios::after { display: none; }
/* Nosotros */
#nosotros { background: var(--bg-base) !important; }
/* FAQ */
#faq { background: var(--bg-surface) !important; }
/* Country banner */
.country-banner {
  background: linear-gradient(135deg, rgba(8,14,36,.95) 0%, rgba(13,32,70,.9) 100%),
              url('../img/hero-lago.jpg') center/cover no-repeat !important;
}
/* CTA Banner */
.cta-banner {
  background: linear-gradient(160deg, #0C1536 0%, var(--navy) 50%, #080E24 100%) !important;
}
/* Contacto */
#contacto { background: var(--bg-base) !important; }
#contacto::before { display: none; }
/* Info banner */
.info-banner {
  background: rgba(45,192,172,.06) !important;
  border-color: var(--teal) !important;
}
.info-banner strong { color: var(--teal-light) !important; }
.info-banner span   { color: var(--text-2) !important; }

/* ══ PRODUCT CARDS — Dark Glass ═══════════════════════════════ */
.product-card {
  background: var(--g-glass) !important;
  backdrop-filter: blur(12px);
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: var(--sh-card) !important;
  transition: all var(--t-base) var(--ease) !important;
}
.product-card::before {
  background: linear-gradient(90deg, var(--teal), var(--navy-mid)) !important;
}
.product-card:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: var(--border-teal) !important;
  box-shadow: var(--sh-glow), 0 24px 60px rgba(0,0,0,.3) !important;
  transform: translateY(-8px);
}
.product-card h3 { color: var(--text-1) !important; }
.product-card > p { color: var(--text-2) !important; }
.product-card-icon {
  background: var(--teal-dim) !important;
  border: 1px solid var(--border-teal) !important;
}
.product-card:hover .product-card-icon {
  background: rgba(45,192,172,.25) !important;
}
.product-card-icon svg { color: var(--teal) !important; }
.product-card:hover .product-card-icon svg { color: var(--teal-light) !important; }
.product-rate .rate-value { color: var(--teal-light) !important; font-size: 1.7rem !important; }
.product-rate .rate-label { color: var(--text-3) !important; }
.product-card-features li { color: var(--text-2) !important; border-bottom-color: var(--border) !important; }
.product-card-features li::before {
  background: var(--teal) !important;
  border-radius: 50%;
  width: 5px; height: 5px;
}
/* Inv rate table inside card */
.inv-rate-table { background: rgba(0,0,0,.25) !important; }
.inv-rate-table-title { color: var(--text-2) !important; }
.inv-rate-row { border-bottom-color: var(--border) !important; }
.inv-rate-row span { color: var(--text-3) !important; }

/* Navy CTA card inside products */
#productos > div > div > div:last-child > div {
  background: linear-gradient(135deg, var(--navy) 0%, #1C2B6B 100%) !important;
  border: 1px solid var(--border-teal) !important;
}


/* ══ BENEFIT CARDS (Por qué) ══════════════════════════════════ */
.benefit-card {
  background: var(--g-glass) !important;
  backdrop-filter: blur(12px);
  border: 1px solid var(--border) !important;
  border-left: 3px solid transparent !important;
  background-image: none !important;
  background-clip: padding-box !important;
  box-shadow: var(--sh-card) !important;
  transition: all var(--t-base) var(--ease) !important;
}
.benefit-card:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: var(--border-teal) !important;
  border-left-color: var(--teal) !important;
  transform: translateX(6px);
  box-shadow: var(--sh-glow) !important;
}
.benefit-card::before { display: none; }
.benefit-icon {
  background: rgba(45,192,172,.12) !important;
  border: 1px solid var(--border-teal) !important;
  box-shadow: none !important;
}
.benefit-icon svg { color: var(--teal) !important; }
.benefit-text h4 { color: var(--text-1) !important; }
.benefit-text p  { color: var(--text-2) !important; }

/* ══ STORY CARDS ══════════════════════════════════════════════ */
.story-card { box-shadow: var(--sh-card) !important; }
.story-card-overlay {
  background: linear-gradient(
    to top,
    rgba(8,14,36,.98) 0%,
    rgba(8,14,36,.65) 50%,
    rgba(8,14,36,.15) 100%
  ) !important;
}
.story-card-tag {
  background: var(--teal) !important;
  color: #fff !important;
}

/* ══ TESTIMONIAL CARDS ════════════════════════════════════════ */
.testimonial-card {
  background: var(--g-glass) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: blur(12px);
}
.testimonial-card:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: var(--border-teal) !important;
}
.testimonial-text { color: var(--text-2) !important; }
.testimonial-name { color: var(--text-1) !important; }
.testimonial-role { color: var(--text-3) !important; }

/* ══ MV CARDS (Nosotros) ══════════════════════════════════════ */
.mv-card {
  background: var(--g-glass) !important;
  border: 1px solid var(--border) !important;
  border-top-color: var(--teal) !important;
  backdrop-filter: blur(12px);
}
.mv-card:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: var(--border-teal) !important;
}
.mv-card h3 { color: var(--text-1) !important; }
.mv-card p  { color: var(--text-2) !important; }
.mv-icon {
  background: var(--teal-dim) !important;
  border: 1px solid var(--border-teal);
}
.mv-icon svg { color: var(--teal) !important; }

/* VALUE BADGES */
.value-badge {
  background: var(--g-glass) !important;
  border: 1px solid var(--border) !important;
}
.value-badge:hover { border-color: var(--border-teal) !important; }
.value-badge h4 { color: var(--text-1) !important; }
.value-badge .vb-icon { font-size: 1.6rem; }

/* TIMELINE */
.timeline::before { background: linear-gradient(to bottom, var(--teal), var(--navy-mid)) !important; }
.timeline-dot { background: var(--teal) !important; border-color: var(--bg-base) !important; }
.timeline-year  { color: var(--teal) !important; }
.timeline-title { color: var(--text-1) !important; }
.timeline-text  { color: var(--text-2) !important; }

/* Institutional info card */
#nosotros .col-lg-6 > div[style*="linear-gradient"] {
  background: rgba(12,21,54,.8) !important;
  border: 1px solid var(--border) !important;
}

/* ══ FAQ ══════════════════════════════════════════════════════ */
.faq-tab {
  background: rgba(255,255,255,.05) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}
.faq-tab:hover  { border-color: var(--teal) !important; color: var(--teal) !important; background: rgba(45,192,172,.08) !important; }
.faq-tab.active { background: var(--navy-mid) !important; border-color: var(--navy-mid) !important; color: #fff !important; }
.faq-item {
  background: var(--g-glass) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: blur(8px);
}
.faq-item.open { border-color: var(--border-teal) !important; }
.faq-question {
  background: transparent !important;
  color: var(--text-1) !important;
}
.faq-question:hover { color: var(--teal) !important; background: rgba(45,192,172,.05) !important; }
.faq-icon { background: rgba(255,255,255,.08) !important; }
.faq-item.open .faq-icon { background: var(--teal) !important; }
.faq-icon svg { color: var(--text-1) !important; }
.faq-item.open .faq-icon svg { color: #fff !important; }
.faq-answer p { color: var(--text-2) !important; }

/* ══ CONTACT SECTION ══════════════════════════════════════════ */
.contact-form-wrap {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--sh-card) !important;
}
.contact-form-wrap::before {
  background: linear-gradient(90deg, var(--teal), var(--navy-mid), var(--teal)) !important;
  background-size: 200% 100%;
  animation: shimmerBorder 3s linear infinite;
}
@keyframes shimmerBorder { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.form-label { color: var(--text-2) !important; font-size: .8rem; }
.form-control, .form-select {
  background: rgba(0,0,0,.3) !important;
  border-color: var(--border-mid) !important;
  color: var(--text-1) !important;
  border-radius: 10px !important;
}
.form-control:focus, .form-select:focus {
  background: rgba(0,0,0,.4) !important;
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(45,192,172,.15) !important;
  color: var(--text-1) !important;
}
.form-control::placeholder { color: var(--text-3) !important; }
.form-select option { background: #0C1536; }

/* Contact info channel cards */
#contacto a[href^="tel:"],
#contacto a[href^="mailto:"] {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  transition: all var(--t-base) var(--ease);
}
#contacto a[href^="tel:"]:hover,
#contacto a[href^="mailto:"]:hover {
  border-color: var(--border-teal) !important;
  background: var(--bg-elevated) !important;
  box-shadow: var(--sh-glow);
}
#contacto div[style*="font-weight:700;color:var(--navy)"] { color: var(--text-1) !important; }
#contacto div[style*="color:var(--text-light)"] { color: var(--text-3) !important; }

.agency-card {
  background: var(--bg-surface) !important;
  border-left-color: var(--teal) !important;
  border-radius: 12px !important;
}
.agency-card:hover { background: var(--bg-elevated) !important; }
.agency-card h4 { color: var(--text-1) !important; }
.agency-info-item { color: var(--text-2) !important; }

/* Info banner inside contact */
#contacto .info-banner-note {
  background: rgba(45,192,172,.07) !important;
  border-color: rgba(45,192,172,.2) !important;
}
#contacto .info-banner-note p { color: var(--text-2) !important; }
#contacto .info-banner-note strong { color: var(--teal-light) !important; }

/* Country banner text */
.country-banner h2 { color: #fff !important; }
.country-banner p  { color: var(--text-2) !important; }
.country-banner [style*="rgba(255,255,255,.08)"] {
  background: rgba(255,255,255,.06) !important;
  border-color: var(--border) !important;
}
.country-banner [style*="color:white;font-weight:700"] { color: var(--text-1) !important; }
.country-banner [style*="color:rgba(255,255,255,.5)"] { color: var(--text-3) !important; }

/* GT section text */
.gt-section p, .gt-section [style*="color:var(--text-mid)"] { color: var(--text-2) !important; }
.gt-section h2, .gt-section [style*="text-teal"] { color: var(--text-1) !important; }
.gt-impact-card {
  background: var(--bg-surface) !important;
  border-left-color: var(--teal) !important;
  border: 1px solid var(--border) !important;
}
.gt-impact-card:hover { background: var(--bg-elevated) !important; }
.gt-impact-number { color: var(--text-1) !important; }
.gt-impact-number span { color: var(--teal) !important; }
.gt-impact-label { color: var(--text-2) !important; }

/* ══ BUTTONS ══════════════════════════════════════════════════ */
.btn-teal, .btn-primary {
  background: var(--teal) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 24px rgba(45,192,172,.35) !important;
  transition: all var(--t-base) var(--ease) !important;
}
.btn-teal:hover, .btn-primary:hover {
  background: var(--teal-light) !important;
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: var(--sh-teal) !important;
}
.btn-teal:active, .btn-primary:active { transform: translateY(0) !important; }

.btn-navy, .btn-secondary {
  background: var(--navy-mid) !important;
  color: #fff !important; border: none !important;
  border-radius: 50px !important; font-weight: 700 !important;
  box-shadow: var(--sh-navy) !important;
  transition: all var(--t-base) var(--ease) !important;
}
.btn-navy:hover, .btn-secondary:hover {
  background: var(--navy-light) !important;
  color: #fff !important; transform: translateY(-2px);
}

.btn-outline-white {
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.22) !important;
  border-radius: 50px !important; font-weight: 600 !important;
  backdrop-filter: blur(8px);
  transition: all var(--t-base) var(--ease) !important;
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.45) !important;
  color: #fff !important; transform: translateY(-2px);
}

/* ══ CHATBOT ══════════════════════════════════════════════════ */
.chatbot-window {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-teal) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.5) !important;
}
.chat-messages, #chatMessages { background: var(--bg-base) !important; }
.msg-bot .msg-bubble {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  color: var(--text-1) !important;
}
.chat-input {
  background: var(--bg-elevated) !important;
  border-color: var(--border-mid) !important;
  color: var(--text-1) !important;
}
.chat-input:focus { border-color: var(--teal) !important; }
.chat-input-row { background: var(--bg-surface) !important; border-top-color: var(--border) !important; }
.chat-options, #chatOptions { background: var(--bg-base) !important; }
.chat-option-btn {
  background: var(--bg-elevated) !important;
  border-color: var(--border-mid) !important;
  color: var(--text-2) !important;
}
.chat-option-btn:hover { background: var(--navy-mid) !important; color: #fff !important; border-color: var(--navy-mid) !important; }

/* ══ FOOTER ══════════════════════════════════════════════════ */
footer {
  background: #050b14 !important;
  border-top: 1px solid var(--border);
}
footer::before { display: none; }
.footer-logo-text { color: #fff !important; }
.footer-tagline   { color: var(--text-3) !important; }
footer p          { color: var(--text-3) !important; }
footer h5         { color: var(--text-1) !important; }
.footer-links a   { color: var(--text-3) !important; }
.footer-links a:hover { color: var(--teal) !important; }
.footer-contact-item  { color: var(--text-3) !important; }
.footer-bottom        { color: var(--text-3) !important; }
.footer-badge { background: rgba(45,192,172,.08) !important; border-color: var(--border-teal) !important; color: var(--teal) !important; }
.footer-social a { background: rgba(255,255,255,.06) !important; border-color: var(--border) !important; }
.footer-social a:hover { background: var(--teal) !important; border-color: var(--teal) !important; }
.footer-divider { border-color: var(--border) !important; }

/* ══ PAGE LOADER ══════════════════════════════════════════════ */
.page-loader { background: var(--bg-base) !important; }

/* ══ REVEAL ANIMATIONS ════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal="up"]    { transform: translateY(32px); }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(.93); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].revealed { opacity: 1; transform: none !important; }
[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .26s; }
[data-delay="4"] { transition-delay: .38s; }
[data-delay="5"] { transition-delay: .5s; }

/* ══ PROCESS SECTION (already dark — minor fixes) ═════════════ */
.process-number {
  background: rgba(45,192,172,.1) !important;
  border-color: rgba(45,192,172,.25) !important;
  color: var(--teal) !important;
}
.process-step:hover .process-number {
  background: var(--teal) !important;
  color: #fff !important;
  border-color: var(--teal) !important;
}

/* Scroll top */
.scroll-top { background: var(--bg-elevated) !important; border-color: var(--border) !important; }
.scroll-top:hover { background: var(--teal) !important; }

/* ══ INLINE-STYLE TEXT COLOR OVERRIDES (dark mode) ═══════════ */
/* These elements use inline style="color:var(--navy)" which would
   render dark-blue on dark-bg — override to readable light tones */
#nosotros h3,
#nosotros h4,
#nosotros [style*="color:var(--navy)"],
#por-que  [style*="color:var(--navy)"],
#faq      [style*="color:var(--navy)"],
#productos [style*="color:var(--navy)"],
#contacto [style*="color:var(--navy)"],
.stories-section [style*="color:var(--navy)"],
.gt-section [style*="color:var(--navy)"] { color: var(--text-1) !important; }

/* Secondary text overrides */
#nosotros [style*="color:var(--text-mid)"],
#por-que  [style*="color:var(--text-mid)"],
#faq      [style*="color:var(--text-mid)"],
#productos [style*="color:var(--text-mid)"],
#contacto [style*="color:var(--text-mid)"],
.gt-section [style*="color:var(--text-mid)"],
.stories-section [style*="color:var(--text-mid)"] { color: var(--text-2) !important; }

/* Muted text */
#nosotros [style*="color:var(--text-light)"],
#contacto [style*="color:var(--text-light)"],
#faq      [style*="color:var(--text-light)"] { color: var(--text-3) !important; }

/* Info aviso banner */
[style*="background:linear-gradient(135deg,rgba(42,59,142,.05)"] {
  background: rgba(45,192,172,.06) !important;
  border-color: var(--border-teal) !important;
}
[style*="background:var(--navy);border-radius:12px;display:flex"] {
  background: var(--navy) !important;
}

/* Nosotros institutional card */
#nosotros [style*="background:linear-gradient(135deg,var(--navy"],
#nosotros [style*="background:linear-gradient(135deg, var(--navy"] {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
}
#nosotros [style*="border-bottom:1px solid rgba(255,255,255,.1)"] { border-bottom-color: var(--border) !important; }
#nosotros [style*="opacity:.6;font-size:.9rem"] { color: var(--text-3) !important; }
#nosotros [style*="font-weight:600;font-size:.9rem"] { color: var(--text-1) !important; }

/* Products inline CTA card */
#productos [style*="background:linear-gradient(135deg,var(--navy"] {
  background: linear-gradient(135deg, var(--navy) 0%, #1C2B6B 100%) !important;
  border: 1px solid var(--border-teal) !important;
}
#productos [style*="opacity:.7"] { color: var(--text-2) !important; opacity: 1 !important; }

/* Proceso section text */
section[style*="background:linear-gradient(155deg"] [style*="color:white"] { color: var(--text-1) !important; }
section[style*="background:linear-gradient(155deg"] [style*="color:rgba(255,255,255"] { color: var(--text-2) !important; }

/* CTA banner */
.cta-banner [style*="color:white"] { color: var(--text-1) !important; }
.cta-banner [style*="color:rgba(255,255,255"] { color: var(--text-2) !important; }

/* Country banner region cards */
.country-banner [style*="color:white;font-weight:700;font-size:.9rem"] { color: var(--text-1) !important; }
.country-banner [style*="color:rgba(255,255,255,.5)"] { color: var(--text-3) !important; }

/* Contact channel texts */
#contacto [style*="font-weight:700;color:var(--navy)"] { color: var(--text-1) !important; }
#contacto [style*="color:var(--text-light)"] { color: var(--text-3) !important; }

/* FAQ section title */
#faq h2 { color: var(--text-1) !important; }
#faq p[style] { color: var(--text-2) !important; }

/* Form privacy line */
#contacto label[for="acepto"] { color: var(--text-2) !important; }
#contacto [style*="text-align:center;font-size:.78rem"] { color: var(--text-3) !important; }

/* Nosotros "Nuestros Valores" heading */
#nosotros [style*="color:var(--navy);font-weight:700;font-size:1.4rem"] { color: var(--text-1) !important; }
#nosotros [style*="color:var(--navy);font-weight:700;font-size:1.6rem"] { color: var(--text-1) !important; }

/* ══ RESPONSIVE ═══════════════════════════════════════════════ */
@media (max-width: 991px) {
  .display-title, .hero-title { font-size: clamp(2.4rem, 7vw, 3.4rem) !important; }

  .navbar-collapse { background: rgba(8,14,36,.97); border-radius: 16px; border: 1px solid var(--border); margin-top: .5rem; padding: 1rem; }
}
@media (max-width: 767px) {
  .display-title, .hero-title { font-size: 2.2rem !important; }

  .hero-actions { flex-direction: column; }
  .hero-actions .btn-teal, .hero-actions .btn-outline-white { text-align: center; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-card { animation: none !important; }
  #hero::before, #hero::after { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════════════════════════════ */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s var(--ease), border-color .25s, color .25s, transform .25s var(--ease-spring);
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
  color: #fff;
  transform: rotate(15deg) scale(1.08);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
/* Por defecto (modo oscuro): muestra luna, oculta sol */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }

/* ══════════════════════════════════════════════════════════════
   TRANSICIÓN SUAVE AL CAMBIAR TEMA
   ══════════════════════════════════════════════════════════════ */
body,
#navbar,
.product-card, .benefit-card, .testimonial-card, .mv-card,
.faq-item, .faq-question, .story-card-overlay,
.contact-form-wrap, .form-control, .form-select,
.trust-bar, #testimonios, .stories-section,
section, footer {
  transition:
    background-color .35s ease,
    background    .35s ease,
    color         .35s ease,
    border-color  .35s ease,
    box-shadow    .35s ease;
}

/* ══════════════════════════════════════════════════════════════
   MODO CLARO  [data-theme="light"]
   Hero y Footer siempre oscuros (identidad de marca)
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* Fondos */
  --bg-base:     #F2F6FF;
  --bg-surface:  #FFFFFF;
  --bg-elevated: #E8EFFF;
  --bg-glass:    linear-gradient(135deg, #fff 0%, #f5f8ff 100%);

  /* Texto */
  --text-1:  #0F172A;
  --text-2:  rgba(15,23,42,.62);
  --text-3:  rgba(15,23,42,.38);

  /* Bordes */
  --border:      rgba(15,23,42,.08);
  --border-mid:  rgba(15,23,42,.14);
  --border-teal: rgba(45,192,172,.30);

  /* Sombras */
  --sh-card: 0 4px 24px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.04);
  --sh-glow: 0 0 0 1px rgba(45,192,172,.25), 0 8px 32px rgba(45,192,172,.14);
}

/* Body */
[data-theme="light"] body { background: var(--bg-base); color: var(--text-1); }

/* ── Navbar claro ─────────────────────────────────────────── */
[data-theme="light"] #navbar {
  background: rgba(242,246,255,.92) !important;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
[data-theme="light"] #navbar.scrolled {
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 4px 24px rgba(15,23,42,.1);
}
/* Navbar colores — modo claro (misma especificidad que dark, aparece después → gana) */
[data-theme="light"] .nav-brand-title                { color: var(--navy) !important; }
[data-theme="light"] .nav-brand-sub                  { color: rgba(15,23,42,.4) !important; }
[data-theme="light"] .nav-link                       { color: rgba(15,23,42,.68) !important; }
[data-theme="light"] .nav-link:hover                 { color: var(--teal) !important; background: rgba(45,192,172,.07) !important; }
[data-theme="light"] .nav-link.active                { color: var(--navy) !important; }
[data-theme="light"] #navbar.scrolled .nav-link        { color: rgba(15,23,42,.68) !important; }
[data-theme="light"] #navbar.scrolled .nav-link:hover  { color: var(--teal) !important; }
[data-theme="light"] #navbar.scrolled .nav-brand-title { color: var(--navy) !important; }
[data-theme="light"] #navbar.scrolled .nav-brand-sub   { color: rgba(15,23,42,.4) !important; }
[data-theme="light"] #navToggler svg                 { stroke: var(--navy) !important; }
[data-theme="light"] .logo-img {
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(15,23,42,.1);
  box-shadow: 0 2px 8px rgba(15,23,42,.08);
}
[data-theme="light"] .navbar-collapse  { background: rgba(255,255,255,.98); border: 1px solid rgba(15,23,42,.08); }

/* Toggle en modo claro: muestra sol, oculta luna */
[data-theme="light"] .theme-toggle {
  background: rgba(15,23,42,.07);
  border-color: rgba(15,23,42,.15);
  color: var(--navy);
}
[data-theme="light"] .theme-toggle:hover {
  background: rgba(15,23,42,.12);
  border-color: rgba(15,23,42,.25);
  color: var(--navy);
}
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun  { display: block; }

/* ── Hero — siempre oscuro ────────────────────────────────── */
/* Hero no se toca — tiene su propio fondo fotográfico oscuro */

/* ── Trust bar — mantener oscuro como franja de contraste ─── */
/* .trust-bar no se toca intencionalmente */

/* ── Secciones de fondo ───────────────────────────────────── */
[data-theme="light"] .gt-section     { background: #fff !important; }
[data-theme="light"] #productos      { background: var(--bg-elevated) !important; }
[data-theme="light"] .stories-section{ background: var(--bg-base) !important; }
[data-theme="light"] #por-que        { background: #fff !important; }
[data-theme="light"] #nosotros       { background: var(--bg-elevated) !important; }
[data-theme="light"] #faq            { background: #fff !important; }
[data-theme="light"] #contacto       { background: var(--bg-base) !important; }
[data-theme="light"] #testimonios    { background: var(--bg-elevated) !important; }
[data-theme="light"] #testimonios::after { display: none; }

/* Aviso informativo */
[data-theme="light"] .info-banner {
  background: rgba(45,192,172,.05) !important;
}
[data-theme="light"] .info-banner strong { color: var(--navy) !important; }
[data-theme="light"] .info-banner span   { color: var(--text-2) !important; }

/* ── Product cards ────────────────────────────────────────── */
[data-theme="light"] .product-card {
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 4px 20px rgba(15,23,42,.07) !important;
}
[data-theme="light"] .product-card:hover {
  background: #fff !important;
  border-color: var(--border-teal) !important;
  box-shadow: var(--sh-glow), 0 16px 40px rgba(15,23,42,.1) !important;
}
[data-theme="light"] .product-card h3   { color: var(--navy) !important; }
[data-theme="light"] .product-card > p  { color: var(--text-2) !important; }
[data-theme="light"] .product-card-features li { color: var(--text-2) !important; border-bottom-color: rgba(15,23,42,.05) !important; }
[data-theme="light"] .inv-rate-table    { background: var(--bg-elevated) !important; }
[data-theme="light"] .inv-rate-table-title { color: var(--navy) !important; }
[data-theme="light"] .inv-rate-row      { border-bottom-color: rgba(15,23,42,.06) !important; }
[data-theme="light"] .inv-rate-row span { color: var(--text-2) !important; }

/* ── Benefit cards ────────────────────────────────────────── */
[data-theme="light"] .benefit-card {
  background: #fff !important;
  border-color: rgba(15,23,42,.08) !important;
  box-shadow: 0 4px 16px rgba(15,23,42,.07) !important;
}
[data-theme="light"] .benefit-card:hover {
  background: #f5f9ff !important;
  border-left-color: var(--teal) !important;
  border-color: var(--border-teal) !important;
  box-shadow: var(--sh-glow) !important;
}
[data-theme="light"] .benefit-text h4 { color: var(--navy) !important; }
[data-theme="light"] .benefit-text p  { color: var(--text-2) !important; }
[data-theme="light"] .benefit-icon {
  background: rgba(45,192,172,.1) !important;
  border-color: rgba(45,192,172,.2) !important;
}

/* ── Testimonial cards ────────────────────────────────────── */
[data-theme="light"] .testimonial-card {
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 4px 20px rgba(15,23,42,.07) !important;
}
[data-theme="light"] .testimonial-card:hover {
  box-shadow: 0 12px 40px rgba(15,23,42,.1) !important;
  border-color: var(--border-teal) !important;
}
[data-theme="light"] .testimonial-text { color: var(--text-2) !important; }
[data-theme="light"] .testimonial-name { color: var(--navy) !important; }
[data-theme="light"] .testimonial-role { color: var(--text-3) !important; }

/* ── MV cards (Nosotros) ──────────────────────────────────── */
[data-theme="light"] .mv-card {
  background: #fff !important;
  border-color: rgba(15,23,42,.08) !important;
  border-top-color: var(--teal) !important;
  box-shadow: 0 4px 20px rgba(15,23,42,.07) !important;
}
[data-theme="light"] .mv-card:hover { background: #f5f9ff !important; }
[data-theme="light"] .mv-card h3 { color: var(--navy) !important; }
[data-theme="light"] .mv-card p  { color: var(--text-2) !important; }
[data-theme="light"] .mv-icon {
  background: rgba(45,192,172,.08) !important;
  border-color: rgba(45,192,172,.18) !important;
}
[data-theme="light"] .mv-icon svg { color: var(--teal) !important; }

/* Value badges */
[data-theme="light"] .value-badge {
  background: #fff !important;
  border-color: rgba(15,23,42,.08) !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.06);
}
[data-theme="light"] .value-badge:hover { border-color: var(--border-teal) !important; }
[data-theme="light"] .value-badge h4 { color: var(--navy) !important; }

/* Timeline */
[data-theme="light"] .timeline::before { background: linear-gradient(to bottom, var(--teal), var(--navy)) !important; }
[data-theme="light"] .timeline-dot     { border-color: var(--bg-elevated) !important; }
[data-theme="light"] .timeline-title   { color: var(--navy) !important; }
[data-theme="light"] .timeline-text    { color: var(--text-2) !important; }

/* Nosotros institutional card */
[data-theme="light"] #nosotros [style*="linear-gradient"] {
  background: var(--navy) !important;
}

/* GT impact cards */
[data-theme="light"] .gt-impact-card {
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
}
[data-theme="light"] .gt-impact-card:hover { background: #f5f9ff !important; }
[data-theme="light"] .gt-impact-number { color: var(--navy) !important; }
[data-theme="light"] .gt-impact-label  { color: var(--text-2) !important; }

/* ── FAQ ──────────────────────────────────────────────────── */
[data-theme="light"] .faq-item {
  background: #fff !important;
  border-color: rgba(15,23,42,.08) !important;
  box-shadow: 0 2px 10px rgba(15,23,42,.04);
}
[data-theme="light"] .faq-item.open    { border-color: var(--border-teal) !important; }
[data-theme="light"] .faq-question     { color: var(--navy) !important; }
[data-theme="light"] .faq-question:hover { background: rgba(45,192,172,.04) !important; color: var(--teal) !important; }
[data-theme="light"] .faq-icon         { background: rgba(15,23,42,.06) !important; }
[data-theme="light"] .faq-item.open .faq-icon { background: var(--teal) !important; }
[data-theme="light"] .faq-icon svg     { color: var(--navy) !important; }
[data-theme="light"] .faq-answer p     { color: var(--text-2) !important; }
[data-theme="light"] .faq-tab {
  background: #fff !important;
  border-color: rgba(15,23,42,.12) !important;
  color: var(--text-2) !important;
}
[data-theme="light"] .faq-tab.active   { background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important; }
[data-theme="light"] .faq-tab:hover    { border-color: var(--navy) !important; color: var(--navy) !important; background: rgba(42,59,142,.05) !important; }

/* ── Contact ──────────────────────────────────────────────── */
[data-theme="light"] .contact-form-wrap {
  background: #fff !important;
  border-color: rgba(15,23,42,.08) !important;
  box-shadow: 0 8px 40px rgba(15,23,42,.1) !important;
}
[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
  background: #F8FAFF !important;
  border-color: rgba(15,23,42,.14) !important;
  color: var(--text-1) !important;
}
[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus {
  background: #fff !important;
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(45,192,172,.15) !important;
}
[data-theme="light"] .form-control::placeholder { color: rgba(15,23,42,.35) !important; }
[data-theme="light"] .form-label { color: var(--navy) !important; }
[data-theme="light"] .agency-card { background: var(--bg-elevated) !important; }
[data-theme="light"] .agency-card:hover { background: #fff !important; }
[data-theme="light"] .agency-card h4 { color: var(--navy) !important; }
[data-theme="light"] .agency-info-item { color: var(--text-2) !important; }
[data-theme="light"] #contacto a[href^="tel:"],
[data-theme="light"] #contacto a[href^="mailto:"] {
  background: #fff !important;
  border-color: rgba(15,23,42,.08) !important;
}
[data-theme="light"] #contacto a[href^="tel:"]:hover,
[data-theme="light"] #contacto a[href^="mailto:"]:hover {
  background: #f5f9ff !important;
  border-color: var(--border-teal) !important;
}

/* ── Texto inline con var(--navy) en secciones claras ─────── */
[data-theme="light"] #nosotros [style*="color:var(--navy)"],
[data-theme="light"] #por-que  [style*="color:var(--navy)"],
[data-theme="light"] #faq      [style*="color:var(--navy)"],
[data-theme="light"] #productos [style*="color:var(--navy)"],
[data-theme="light"] #contacto [style*="color:var(--navy)"],
[data-theme="light"] .gt-section [style*="color:var(--navy)"] { color: var(--navy) !important; }

[data-theme="light"] #nosotros [style*="color:var(--text-mid)"],
[data-theme="light"] #por-que  [style*="color:var(--text-mid)"],
[data-theme="light"] #faq      [style*="color:var(--text-mid)"],
[data-theme="light"] #contacto [style*="color:var(--text-mid)"],
[data-theme="light"] .gt-section [style*="color:var(--text-mid)"] { color: var(--text-2) !important; }

[data-theme="light"] #nosotros [style*="color:var(--text-light)"],
[data-theme="light"] #contacto [style*="color:var(--text-light)"],
[data-theme="light"] #faq      [style*="color:var(--text-light)"] { color: var(--text-3) !important; }

/* Títulos de sección en claro */
[data-theme="light"] #nosotros h2,
[data-theme="light"] #nosotros h3,
[data-theme="light"] #nosotros h4,
[data-theme="light"] #por-que h2,
[data-theme="light"] #por-que h3,
[data-theme="light"] #faq h2,
[data-theme="light"] #faq h3,
[data-theme="light"] #productos h2,
[data-theme="light"] #contacto h2,
[data-theme="light"] #contacto h3,
[data-theme="light"] .gt-section h2,
[data-theme="light"] .gt-section h3 { color: var(--navy) !important; }
[data-theme="light"] .section-title  { color: var(--navy) !important; }
[data-theme="light"] .section-subtitle { color: var(--text-2) !important; }
[data-theme="light"] .label-tag { color: var(--teal) !important; }

/* ── Chatbot en modo claro ────────────────────────────────── */
[data-theme="light"] .chatbot-window {
  background: #fff !important;
  border-color: rgba(15,23,42,.1) !important;
}
[data-theme="light"] #chatMessages,
[data-theme="light"] .chat-messages { background: var(--bg-base) !important; }
[data-theme="light"] .msg-bot .msg-bubble {
  background: #fff !important;
  border-color: rgba(15,23,42,.1) !important;
  color: var(--navy) !important;
}
[data-theme="light"] .chat-input {
  background: var(--bg-elevated) !important;
  border-color: rgba(15,23,42,.12) !important;
  color: var(--navy) !important;
}
[data-theme="light"] .chat-input-row { background: #fff !important; border-top-color: rgba(15,23,42,.08) !important; }
[data-theme="light"] .chat-options,
[data-theme="light"] #chatOptions   { background: var(--bg-base) !important; }
[data-theme="light"] .chat-option-btn {
  background: #fff !important;
  border-color: rgba(15,23,42,.1) !important;
  color: var(--navy) !important;
}
[data-theme="light"] .chat-option-btn:hover { background: var(--navy) !important; color: #fff !important; }
[data-theme="light"] .chatbot-bubble-hint {
  background: #fff !important;
  border-color: rgba(15,23,42,.1) !important;
  color: var(--navy) !important;
}

/* ── Scroll progress bar ──────────────────────────────────── */
/* igual en ambos modos */

/* ── Scroll top button ────────────────────────────────────── */
[data-theme="light"] .scroll-top { background: #fff !important; border-color: rgba(15,23,42,.12) !important; }
[data-theme="light"] .scroll-top svg { color: var(--navy) !important; }
[data-theme="light"] .scroll-top:hover { background: var(--teal) !important; }
[data-theme="light"] .scroll-top:hover svg { color: #fff !important; }

/* ── Trust bar en modo claro ──────────────────────────────── */
[data-theme="light"] .trust-bar {
  background: linear-gradient(135deg, #E8EFFF 0%, #F0F5FF 100%) !important;
  border-top-color: rgba(15,23,42,.08) !important;
  border-bottom-color: rgba(15,23,42,.08) !important;
}
[data-theme="light"] .trust-item .number {
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%) !important;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .trust-item .text { color: rgba(15,23,42,.45) !important; }
[data-theme="light"] .trust-bar .trust-divider { background: rgba(15,23,42,.1) !important; }

/* ── Sección proceso (acento navy) en modo claro ─────────── */
[data-theme="light"] section[style*="background:linear-gradient(155deg"] {
  background: linear-gradient(155deg, #2A3B8E 0%, #3549A8 60%, #1a4080 100%) !important;
}

/* ── Navbar collapse en mobile modo claro ─────────────────── */
[data-theme="light"] .navbar-collapse {
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(15,23,42,.1) !important;
}

/* ══════════════════════════════════════════════════════════════
   ESTILOS SECTOR FINANCIERO — Institución de crédito e inversión
   Referencia: Marcus GS · Banorte · Banco Industrial Guatemala
   ══════════════════════════════════════════════════════════════ */

/* ── Producto cards light mode: estilo bancario clásico ────── */
/* Borde izquierdo navy = señal visual de producto financiero */
[data-theme="light"] .product-card {
  border-left: 3px solid var(--navy) !important;
  border-radius: 16px 16px 16px 16px !important;
}
[data-theme="light"] .product-card:hover {
  border-left-color: var(--teal) !important;
}
/* Tasa del producto: color teal sobre claro — destaca el número */
[data-theme="light"] .product-rate .rate-value { color: var(--navy) !important; }
[data-theme="light"] .product-rate .rate-label  { color: var(--text-2) !important; }

/* ── Benefit cards light mode: navy left accent ─────────────── */
[data-theme="light"] .benefit-card {
  border-left: 3px solid var(--navy) !important;
}
[data-theme="light"] .benefit-card:hover { border-left-color: var(--teal) !important; }

/* ── Section label tags: look más institucional ─────────────── */
[data-theme="light"] .label-tag {
  background: rgba(42,59,142,.08) !important;
  border-color: rgba(42,59,142,.18) !important;
  color: var(--navy) !important;
}

/* ── Hero badge: reforzar credencial institucional ──────────── */
.hero-badge {
  background: rgba(45,192,172,.1) !important;
  border-color: rgba(45,192,172,.28) !important;
  color: var(--teal-light) !important;
}

/* ── Trust bar: más autoritario — números grandes fintech ────── */
.trust-item .number {
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
}

/* ── Product card icon: usa navy en light mode ───────────────── */
[data-theme="light"] .product-card-icon {
  background: rgba(42,59,142,.08) !important;
  border-color: rgba(42,59,142,.15) !important;
}
[data-theme="light"] .product-card-icon svg { color: var(--navy) !important; }
[data-theme="light"] .product-card:hover .product-card-icon {
  background: rgba(45,192,172,.12) !important;
  border-color: rgba(45,192,172,.25) !important;
}
[data-theme="light"] .product-card:hover .product-card-icon svg { color: var(--teal) !important; }

/* ── Benefit icon: navy en light ────────────────────────────── */
[data-theme="light"] .benefit-icon {
  background: rgba(42,59,142,.07) !important;
  border-color: rgba(42,59,142,.14) !important;
}
[data-theme="light"] .benefit-icon svg { color: var(--navy) !important; }
[data-theme="light"] .benefit-card:hover .benefit-icon {
  background: rgba(45,192,172,.1) !important;
  border-color: rgba(45,192,172,.2) !important;
}
[data-theme="light"] .benefit-card:hover .benefit-icon svg { color: var(--teal) !important; }

/* ── MV icon en light mode ───────────────────────────────────── */
[data-theme="light"] .mv-icon {
  background: rgba(42,59,142,.07) !important;
  border-color: rgba(42,59,142,.14) !important;
}
[data-theme="light"] .mv-icon svg { color: var(--navy) !important; }

/* ── Section title: acento teal en la palabra destacada ──────── */
.text-teal { color: var(--teal) !important; }
[data-theme="light"] .text-teal { color: var(--teal) !important; }

/* ── Rate de inversión: teal siempre ────────────────────────── */
.product-rate .rate-value { color: var(--teal-light) !important; }

/* ── Btn-nav-cta: color de acento del logo ───────────────────── */
.btn-nav-cta {
  background: var(--teal) !important;
  color: #fff !important;
}
[data-theme="light"] .btn-nav-cta {
  background: var(--navy) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(42,59,142,.3) !important;
}
[data-theme="light"] .btn-nav-cta:hover {
  background: var(--teal) !important;
  box-shadow: 0 4px 20px rgba(45,192,172,.4) !important;
}

/* ── Hero gradient: usa los colores navy del logo ────────────── */
#hero {
  background:
    linear-gradient(160deg,
      rgba(8,14,36,.96) 0%,
      rgba(12,21,54,.9) 40%,
      rgba(10,20,65,.85) 70%,
      rgba(8,14,36,.95) 100%),
    url('../img/hero-lago.jpg') center 40% / cover no-repeat !important;
}

/* ── Dark mode: bg tintado navy — NO negro puro ──────────────── */
/* Los nuevos valores #080E24 / #0C1536 / #111D44 ya aplican
   via :root. Aquí reforzamos el feel de "banco de noche" */
[data-theme="dark"] .product-card,
[data-theme="dark"] .benefit-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .mv-card,
[data-theme="dark"] .faq-item {
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* ── Footer: usar navy del logo como borde superior ──────────── */
footer { border-top: 3px solid var(--teal) !important; }
[data-theme="light"] footer { border-top: 3px solid var(--teal) !important; }

/* ── Logo en navbar: sombra suave en modo claro ─────────────── */
[data-theme="light"] .logo-img {
  background: #fff !important;
  border: 1.5px solid rgba(42,59,142,.12) !important;
  box-shadow: 0 2px 12px rgba(42,59,142,.1) !important;
}

/* ══════════════════════════════════════════════════════════════
   FIXES AVANZADOS — TODOS LOS ELEMENTOS RESTANTES
   Auditado contra Mercury / Marcus / Wise / Revolut
   ══════════════════════════════════════════════════════════════ */

/* ── Tabla de tasas (Inversión) — dark mode usa var(--gray-light)
      que en main.css es un color claro → fondo claro dentro de
      tarjeta oscura. Se corrige aquí con override de atributo.  */
#productos [style*="background:var(--gray-light)"] {
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 8px !important;
}
#productos [style*="color:var(--text-light)"] { color: var(--text-3) !important; }
#productos [style*="font-weight:700;color:var(--navy)"] { color: var(--text-2) !important; }

/* Light mode — tabla de tasas */
[data-theme="light"] #productos [style*="background:var(--gray-light)"] {
  background: rgba(42,59,142,.04) !important;
  border: 1px solid rgba(42,59,142,.08) !important;
}
[data-theme="light"] #productos [style*="color:var(--text-light)"] { color: var(--text-2) !important; }
[data-theme="light"] #productos [style*="font-weight:700;color:var(--navy)"] { color: var(--navy) !important; }

/* ── Testimonios: título blanco en oscuro, navy en claro */
#testimonios .testimonios-title        { color: #fff !important; }
[data-theme="light"] #testimonios .testimonios-title { color: var(--navy) !important; }
[data-theme="light"] #testimonios [style*="color:white"] { color: var(--navy) !important; }

/* ── Testimonial avatar: degradado de marca en ambos modos */
.testimonial-avatar {
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* ── btn-outline-white en fondos claros: convierte a outline navy */
[data-theme="light"] .btn-outline-white {
  background: transparent !important;
  color: var(--navy) !important;
  border-color: rgba(42,59,142,.35) !important;
}
[data-theme="light"] .btn-outline-white:hover {
  background: var(--navy) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
}

/* EXCEPCIÓN: btn-outline-white sobre fondos oscuros (hero, proceso, CTA)
   → esos fondos siempre son oscuros, el botón blanco no aplica [data-theme] */

/* ── Form select options (dropdown) en light mode */
[data-theme="light"] .form-select option { background: #fff; color: var(--navy); }

/* ── Contacto: textos con color:var(--text-light) en light mode */
[data-theme="light"] #contacto [style*="color:var(--text-light)"] { color: var(--text-2) !important; }
[data-theme="light"] #contacto [style*="font-size:.78rem"] { color: var(--text-3) !important; }

/* ── GT Identity section: párrafos con inline color:var(--text-mid) */
[data-theme="light"] .gt-section p[style*="color:var(--text-mid)"] { color: var(--text-2) !important; }
[data-theme="light"] .gt-section p[style] { color: var(--text-2) !important; }

/* ── GT Impact grid: ocultar — los mismos números ya aparecen en
      Hero Stats y Trust Bar. La tercera repetición aburre. */
.gt-impact-grid { display: none !important; }
/* Compensar el espacio quitado */
.gt-section .col-lg-6 > div[style*="margin-top:2rem"] { margin-top: 1.5rem !important; }

/* ── Aviso informativo — ajuste light mode */
[data-theme="light"] [style*="background:linear-gradient(135deg,rgba(42,59,142,.05)"] {
  background: linear-gradient(135deg, rgba(42,59,142,.05), rgba(45,192,172,.06)) !important;
  border-top-color: var(--teal) !important;
  border-bottom-color: rgba(15,23,42,.06) !important;
}
[data-theme="light"] [style*="color:var(--text-light);font-size:.9rem"] { color: var(--text-2) !important; }

/* ── Country banner — mantener oscuro siempre (foto de fondo GT) */
/* El banner de país tiene foto + overlay oscuro. En modo claro
   simplemente reforzamos que las tarjetas de regiones se vean bien. */
[data-theme="light"] .country-banner {
  background:
    linear-gradient(135deg, rgba(12,21,54,.95) 0%, rgba(42,59,142,.88) 100%),
    url('../img/hero-lago.jpg') center/cover no-repeat !important;
}

/* ── Country banner region cards — modernizar: menos glass, más premium */
.country-banner [style*="background:rgba(255,255,255,.08)"] {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) !important;
}
.country-banner [style*="background:rgba(255,255,255,.08)"]:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(45,192,172,.3) !important;
}
/* Los emojis geográficos en las cards de país se reemplazan por
   un punto de color teal para look más profesional / fintech */
.country-banner [style*="font-size:2rem;margin-bottom:.4rem"] {
  font-size: 0 !important;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal); display: block !important;
  margin: 0 auto .75rem !important;
  box-shadow: 0 0 10px var(--teal-glow);
}

/* ── CTA Banner: modo claro → lo mantenemos oscuro (banda de
      contraste que separa FAQ de Contacto — Mercury / Marcus hacen esto) */
[data-theme="light"] .cta-banner {
  background: linear-gradient(160deg, #0C1536 0%, #2A3B8E 50%, #0C1536 100%) !important;
}

/* ── Story cards: overlay siempre oscuro sobre fotos — correcto */
/* Story card tags: asegurar legibilidad en light mode */
[data-theme="light"] .story-card-tag {
  background: var(--teal) !important;
  color: #fff !important;
}
[data-theme="light"] .story-card-overlay {
  background: linear-gradient(
    to top,
    rgba(8,14,36,.95) 0%,
    rgba(8,14,36,.55) 50%,
    transparent 100%
  ) !important;
}

/* ── GT Photo labels: siempre sobre foto → mantener estilo oscuro */
.gt-photo-label {
  background: rgba(8,14,36,.7) !important;
  color: #fff !important;
  backdrop-filter: blur(4px);
}

/* ── Nosotros info institucional card: refuerzo en light mode */
[data-theme="light"] #nosotros .col-lg-6 > div[style*="linear-gradient"] {
  background: var(--navy) !important;
  border: none !important;
  box-shadow: 0 8px 40px rgba(42,59,142,.25) !important;
}
[data-theme="light"] #nosotros [style*="color:white"],
[data-theme="light"] #nosotros [style*="color:#fff"] { color: #fff !important; }
[data-theme="light"] #nosotros [style*="border-bottom:1px solid rgba(255,255,255,.1)"] {
  border-bottom-color: rgba(255,255,255,.15) !important;
}

/* ── Form success box light mode */
[data-theme="light"] .form-success {
  background: #fff !important;
  border-color: rgba(15,23,42,.08) !important;
}
[data-theme="light"] .form-success h4 { color: var(--navy) !important; }
[data-theme="light"] .form-success p  { color: var(--text-2) !important; }
[data-theme="light"] .success-icon {
  background: rgba(45,192,172,.1) !important;
  border-color: rgba(45,192,172,.25) !important;
}
[data-theme="light"] .success-icon svg { stroke: var(--teal) !important; }

/* ── Footer: siempre oscuro (identidad de marca) */
/* Footer: siempre fondo oscuro → texto siempre claro, ambos temas */
[data-theme="light"] footer            { background: #050b14 !important; border-top-color: rgba(255,255,255,.07) !important; }
[data-theme="light"] .footer-logo-text { color: #fff !important; }
[data-theme="light"] .footer-tagline   { color: rgba(255,255,255,.38) !important; }
[data-theme="light"] footer p          { color: rgba(255,255,255,.42) !important; }
[data-theme="light"] footer h5         { color: #fff !important; }
[data-theme="light"] .footer-links a   { color: rgba(255,255,255,.42) !important; }
[data-theme="light"] .footer-links a:hover { color: var(--teal) !important; }
[data-theme="light"] .footer-contact-item  { color: rgba(255,255,255,.42) !important; }
[data-theme="light"] .footer-bottom        { color: rgba(255,255,255,.32) !important; }
[data-theme="light"] .footer-divider       { border-color: rgba(255,255,255,.07) !important; }
[data-theme="light"] .footer-social a      { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.1) !important; }
[data-theme="light"] .footer-badge         { background: rgba(45,192,172,.1) !important; border-color: rgba(45,192,172,.25) !important; color: var(--teal) !important; }
/* Admin link en footer también mantiene sus colores blancos */
[data-theme="light"] footer a[href="/admin/"] { color: rgba(255,255,255,.2) !important; }

/* ── Mejoras de calidad general (ambos modos) ─────────────── */

/* Tarjetas: radio homogéneo estilo Mercury */
.product-card, .benefit-card, .testimonial-card,
.mv-card, .faq-item, .gt-impact-card, .agency-card {
  border-radius: 16px !important;
}

/* Buttons: sizing consistente estilo Mercury/Revolut */
.btn-teal, .btn-navy, .btn-primary, .btn-outline-white {
  padding: .65rem 1.6rem !important;
  font-size: .9rem !important;
  letter-spacing: -.01em !important;
}
.btn-teal.btn-lg, .btn-navy.btn-lg, .btn-primary.btn-lg {
  padding: .8rem 2rem !important;
  font-size: .95rem !important;
}

/* Hero actions gap consistente */
.hero-actions { gap: .75rem !important; display: flex !important; flex-wrap: wrap !important; }

/* Label-tag: más definición */
.label-tag {
  font-size: .68rem !important;
  letter-spacing: .14em !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

/* Section padding más generoso = más "aire" como Mercury */
.section-pad { padding: 6rem 0 !important; }
@media (max-width: 767px) { .section-pad { padding: 4rem 0 !important; } }

/* Section title: tipografía editorial más fuerte */
.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.6rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  line-height: 1.15 !important;
}

/* ── Hero card: en modo claro refuerza la separación visual */
[data-theme="light"] .hero-card {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}

/* ── Inline border-top sutil dentro del hero card */
[data-theme="light"] .hero-card [style*="border-top:1px solid rgba(255,255,255,.1)"] {
  border-top-color: rgba(255,255,255,.15) !important;
}

/* ── GT section: reforzar en light (sin gt-impact-grid, el espacio
      queda más limpio, el texto respira) */
[data-theme="light"] .gt-section {
  background: #ffffff !important;
}

/* ── Testimonios: quitar el ::after glow overlay en light ─── */
[data-theme="light"] #testimonios::before { display: none; }

/* ── Por qué elegirnos: benefit-card border-left visible en light */
[data-theme="light"] .benefit-card:hover {
  border-left-color: var(--teal) !important;
  transform: translateX(4px);
}

/* ── FAQ: faq-answer color heredado correctamente en light */
[data-theme="light"] .faq-answer { background: transparent !important; }
[data-theme="light"] .faq-question { border-radius: 12px !important; }

/* ── Scroll-top button: en ambos modos queda fijo */
.scroll-top {
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
}

/* ── Responsive: country banner card grid en mobile */
@media (max-width: 575px) {
  .country-banner [style*="display:grid;grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: .75rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE — REFINAMIENTO PREMIUM
   Objetivo: mismo "toque" visual que dark mode pero en claro.
   Referencias: Marcus by Goldman Sachs · Banorte · Banco Industrial GT
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Body y secciones: fondos con gradiente sutil ─────────
   Elimina la sensación "plana" — igual que dark usa capas de
   navy tintado, aquí usamos azul frío muy suave que sugiere
   profundidad sin perder legibilidad.                         */
[data-theme="light"] body {
  background: linear-gradient(170deg, #F0F5FF 0%, #EBF1FF 100%) !important;
}
[data-theme="light"] #hero {
  /* Hero siempre oscuro — identidad de marca */
  background:
    linear-gradient(160deg,
      rgba(8,14,36,.97) 0%,
      rgba(12,21,54,.92) 40%,
      rgba(10,20,65,.88) 70%,
      rgba(8,14,36,.96) 100%),
    url('../img/hero-lago.jpg') center 40% / cover no-repeat !important;
}
[data-theme="light"] #productos {
  background: #FFFFFF !important;
  border-top: 1px solid rgba(15,23,42,.05) !important;
  border-bottom: 1px solid rgba(15,23,42,.05) !important;
}
[data-theme="light"] .stories-section {
  background: linear-gradient(160deg, #F0F5FF 0%, #EBF1FF 100%) !important;
}
[data-theme="light"] #por-que {
  background: #FFFFFF !important;
  border-top: 1px solid rgba(15,23,42,.05) !important;
  border-bottom: 1px solid rgba(15,23,42,.05) !important;
}
[data-theme="light"] #nosotros {
  background: linear-gradient(160deg, #EDF2FF 0%, #E8EFFE 100%) !important;
}
[data-theme="light"] #testimonios {
  background: #FFFFFF !important;
  border-top: 1px solid rgba(15,23,42,.05) !important;
  border-bottom: 1px solid rgba(15,23,42,.05) !important;
}
[data-theme="light"] #faq {
  background: linear-gradient(160deg, #F0F5FF 0%, #EBF1FF 100%) !important;
}
[data-theme="light"] #contacto {
  background: #FFFFFF !important;
  border-top: 1px solid rgba(15,23,42,.05) !important;
}
[data-theme="light"] .gt-section {
  background: linear-gradient(160deg, #EDF2FF 0%, #E8EFFE 100%) !important;
}

/* ── 2. Label tags: pill teal vibrante ───────────────────────
   En dark mode el label-tag tiene borde teal brillante.
   En claro debe tener el mismo impacto cromático.            */
[data-theme="light"] .label-tag {
  background: rgba(45,192,172,.12) !important;
  border: 1px solid rgba(45,192,172,.32) !important;
  color: #0A7A6E !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
}

/* ── 3. Section title: acento decorativo ─────────────────────
   Línea teal→navy de 44px debajo del título = señal visual
   de institución financiera seria (Banco Industrial lo hace).*/
[data-theme="light"] .section-title {
  color: #0F172A !important;
  padding-bottom: 1.1rem !important;
  background-image: linear-gradient(90deg, var(--teal) 0%, var(--navy) 100%) !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: 48px 3px !important;
}

/* ── 4. Sombras de cards: elevación real ─────────────────────
   Dark mode usa glow teal como "sombra". Light necesita
   shadow de dos capas: corta (definición) + larga (profundidad).*/
[data-theme="light"] .product-card {
  box-shadow:
    0 1px 3px rgba(15,23,42,.05),
    0 10px 36px rgba(15,23,42,.11) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  border-left: 3px solid var(--navy) !important;
}
[data-theme="light"] .product-card:hover {
  box-shadow:
    0 4px 12px rgba(15,23,42,.06),
    0 20px 56px rgba(15,23,42,.14),
    0 0 0 1.5px rgba(45,192,172,.4) !important;
  transform: translateY(-5px) !important;
  border-left-color: var(--teal) !important;
}

[data-theme="light"] .benefit-card {
  box-shadow:
    0 1px 3px rgba(15,23,42,.04),
    0 6px 24px rgba(15,23,42,.08) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  border-left: 3px solid var(--navy) !important;
}
[data-theme="light"] .benefit-card:hover {
  box-shadow:
    0 4px 12px rgba(15,23,42,.06),
    0 16px 48px rgba(15,23,42,.12),
    0 0 0 1.5px rgba(45,192,172,.35) !important;
  transform: translateX(4px) !important;
  border-left-color: var(--teal) !important;
}

[data-theme="light"] .testimonial-card {
  box-shadow:
    0 1px 3px rgba(15,23,42,.05),
    0 10px 36px rgba(15,23,42,.1) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
}
[data-theme="light"] .testimonial-card:hover {
  box-shadow:
    0 4px 12px rgba(15,23,42,.06),
    0 20px 56px rgba(15,23,42,.14) !important;
  transform: translateY(-4px) !important;
  border-color: rgba(45,192,172,.3) !important;
}

[data-theme="light"] .mv-card {
  box-shadow:
    0 1px 3px rgba(15,23,42,.04),
    0 8px 28px rgba(15,23,42,.09) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  border-top: 3px solid var(--teal) !important;
}
[data-theme="light"] .mv-card:hover {
  box-shadow:
    0 4px 12px rgba(15,23,42,.05),
    0 16px 44px rgba(15,23,42,.12) !important;
  transform: translateY(-3px) !important;
  background: #f8fbff !important;
}

[data-theme="light"] .faq-item {
  box-shadow:
    0 1px 3px rgba(15,23,42,.04),
    0 4px 16px rgba(15,23,42,.07) !important;
  border: 1px solid rgba(15,23,42,.07) !important;
}
[data-theme="light"] .faq-item.open {
  box-shadow:
    0 2px 8px rgba(15,23,42,.05),
    0 12px 36px rgba(45,192,172,.12) !important;
  border-color: rgba(45,192,172,.35) !important;
}

[data-theme="light"] .gt-impact-card {
  box-shadow:
    0 1px 3px rgba(15,23,42,.04),
    0 8px 28px rgba(15,23,42,.09) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
}
[data-theme="light"] .gt-impact-card:hover {
  box-shadow:
    0 4px 12px rgba(15,23,42,.05),
    0 16px 44px rgba(15,23,42,.12) !important;
  transform: translateY(-3px) !important;
  background: #f8fbff !important;
}

/* ── 5. Botones: glow real como en dark mode ──────────────── */
[data-theme="light"] .btn-teal {
  box-shadow: 0 4px 20px rgba(45,192,172,.32) !important;
}
[data-theme="light"] .btn-teal:hover {
  box-shadow: 0 8px 32px rgba(45,192,172,.48) !important;
  transform: translateY(-2px) !important;
}
[data-theme="light"] .btn-navy {
  box-shadow: 0 4px 20px rgba(42,59,142,.28) !important;
}
[data-theme="light"] .btn-navy:hover {
  box-shadow: 0 8px 32px rgba(42,59,142,.4) !important;
  transform: translateY(-2px) !important;
}

/* ── 6. Contact form: elevación premium ─────────────────────── */
[data-theme="light"] .contact-form-wrap {
  box-shadow:
    0 4px 24px rgba(15,23,42,.06),
    0 24px 64px rgba(15,23,42,.1) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
}
[data-theme="light"] .agency-card {
  box-shadow:
    0 2px 8px rgba(15,23,42,.05),
    0 8px 28px rgba(15,23,42,.09) !important;
}
[data-theme="light"] .agency-card:hover {
  box-shadow:
    0 4px 16px rgba(15,23,42,.07),
    0 16px 40px rgba(15,23,42,.12) !important;
  transform: translateY(-2px) !important;
}

/* ── 7. Stories cards: elevación ────────────────────────────── */
[data-theme="light"] .story-card {
  box-shadow: 0 4px 24px rgba(15,23,42,.14) !important;
}
[data-theme="light"] .story-card:hover {
  box-shadow: 0 8px 40px rgba(15,23,42,.2) !important;
  transform: translateY(-4px) !important;
}

/* ── 8. Value badges (Nosotros) ─────────────────────────────── */
[data-theme="light"] .value-badge {
  box-shadow:
    0 1px 3px rgba(15,23,42,.04),
    0 4px 16px rgba(15,23,42,.08) !important;
  border: 1px solid rgba(15,23,42,.07) !important;
}
[data-theme="light"] .value-badge:hover {
  box-shadow:
    0 2px 8px rgba(15,23,42,.06),
    0 12px 36px rgba(45,192,172,.14) !important;
  border-color: rgba(45,192,172,.3) !important;
  transform: translateY(-2px) !important;
}

/* ── 9. Progress bar: degradado de marca ─────────────────────── */
[data-theme="light"] #scrollProgress {
  background: linear-gradient(90deg, var(--teal) 0%, var(--navy) 100%) !important;
}

/* ── 10. Chatbot btn: navy en claro ─────────────────────────── */
[data-theme="light"] .chatbot-btn {
  background: var(--navy) !important;
  box-shadow: 0 8px 32px rgba(42,59,142,.35) !important;
}
[data-theme="light"] .chatbot-btn:hover {
  background: var(--teal) !important;
  box-shadow: 0 8px 32px rgba(45,192,172,.4) !important;
}

/* ── 11. Trust bar en claro: más contraste visual ────────────
   El trust bar en light mode debe seguir siendo una franja que
   "corte" la página — más parecida a dark pero en tonos azul claro. */
[data-theme="light"] .trust-bar {
  background: linear-gradient(135deg, #E0EAFF 0%, #D6E4FF 50%, #E0EAFF 100%) !important;
  border-top: 2px solid rgba(42,59,142,.12) !important;
  border-bottom: 2px solid rgba(42,59,142,.12) !important;
}

/* ── 12. Scroll-top btn: navy con glow ───────────────────────── */
[data-theme="light"] .scroll-top {
  background: var(--navy) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 20px rgba(42,59,142,.3) !important;
}
[data-theme="light"] .scroll-top svg { color: #fff !important; }
[data-theme="light"] .scroll-top:hover {
  background: var(--teal) !important;
  box-shadow: 0 4px 24px rgba(45,192,172,.4) !important;
}
[data-theme="light"] .scroll-top:hover svg { color: #fff !important; }

/* ── 13. Theme toggle: look claro coherente ─────────────────── */
[data-theme="light"] .theme-toggle {
  background: rgba(42,59,142,.07) !important;
  border-color: rgba(42,59,142,.18) !important;
  color: var(--navy) !important;
}

/* ── 14. Simulador (si existe en la página) ─────────────────── */
[data-theme="light"] #simulador {
  background: linear-gradient(160deg, #EDF2FF 0%, #E8EFFE 100%) !important;
}
[data-theme="light"] .simulador-card,
[data-theme="light"] .sim-result-card {
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.07) !important;
  box-shadow:
    0 2px 8px rgba(15,23,42,.05),
    0 12px 40px rgba(15,23,42,.1) !important;
}

/* ── 15. Info banner accent ──────────────────────────────────── */
[data-theme="light"] .info-banner {
  background: linear-gradient(135deg,
    rgba(45,192,172,.08) 0%,
    rgba(42,59,142,.05) 100%) !important;
  border: 1px solid rgba(45,192,172,.2) !important;
}

/* ══════════════════════════════════════════════════════════════
   MODO CLARO TOTAL — PÁGINA UNIFICADA
   El usuario pidió que en modo claro TODA la página sea clara
   (hero, proceso, banner país, CTA y footer incluidos).
   Este bloque va al final → gana a las reglas previas que los
   forzaban a oscuro. Objetivo: cero texto invisible, contraste
   AA, misma identidad de marca (navy + teal) sobre fondo claro.
   ══════════════════════════════════════════════════════════════ */

/* ── HERO en modo claro ───────────────────────────────────── */
[data-theme="light"] #hero {
  background:
    linear-gradient(160deg,
      rgba(238,243,255,.93) 0%,
      rgba(228,238,255,.88) 45%,
      rgba(219,231,255,.90) 75%,
      rgba(234,241,255,.94) 100%),
    url('../img/hero-lago.jpg') center 40% / cover no-repeat !important;
}
[data-theme="light"] #hero .hero-grid {
  background-image:
    linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px) !important;
}
[data-theme="light"] #hero::before { background: radial-gradient(circle, rgba(45,192,172,.16) 0%, transparent 70%) !important; }
[data-theme="light"] #hero::after  { background: radial-gradient(circle, rgba(42,59,142,.12) 0%, transparent 70%) !important; }

[data-theme="light"] #hero .hero-title    { color: var(--navy) !important; }
[data-theme="light"] #hero .hero-subtitle { color: rgba(15,23,42,.66) !important; }
[data-theme="light"] #hero .hero-badge {
  background: rgba(45,192,172,.12) !important;
  border-color: rgba(45,192,172,.32) !important;
  color: #0A7A6E !important;
}
[data-theme="light"] #hero .hero-stats { border-top-color: rgba(15,23,42,.12) !important; }
[data-theme="light"] #hero .hero-stat .value { color: var(--navy) !important; }
[data-theme="light"] #hero .hero-stat .value span { color: var(--teal) !important; }
[data-theme="light"] #hero .hero-stat .label { color: rgba(15,23,42,.5) !important; }

/* Tarjeta de productos del hero → blanca sólida y legible */
[data-theme="light"] #hero .hero-card {
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 24px 64px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
[data-theme="light"] #hero .hero-card-title,
[data-theme="light"] #hero .hero-product-name { color: var(--navy) !important; }
[data-theme="light"] #hero .hero-card-label,
[data-theme="light"] #hero .hero-product-rate { color: rgba(15,23,42,.55) !important; }
[data-theme="light"] #hero .hero-card-header { border-bottom-color: rgba(15,23,42,.08) !important; }
[data-theme="light"] #hero .hero-product-item { border-bottom-color: rgba(15,23,42,.06) !important; }
[data-theme="light"] #hero .hero-card [style*="border-top:1px solid rgba(255,255,255,.1)"] { border-top-color: rgba(15,23,42,.08) !important; }
[data-theme="light"] #hero .hero-product-icon {
  background: rgba(45,192,172,.1) !important;
  border-color: rgba(45,192,172,.22) !important;
}

/* ── PROCESO ("¿Cómo funciona el proceso?") en modo claro ──── */
[data-theme="light"] section[style*="155deg"] {
  background: linear-gradient(160deg, #EDF2FF 0%, #E4ECFF 60%, #EDF2FF 100%) !important;
}
[data-theme="light"] section[style*="155deg"] h2 { color: var(--navy) !important; }
[data-theme="light"] section[style*="155deg"] h4 { color: var(--navy) !important; }
[data-theme="light"] section[style*="155deg"] p  { color: rgba(15,23,42,.62) !important; }
[data-theme="light"] section[style*="155deg"] .label-tag {
  background: rgba(45,192,172,.12) !important;
  border-color: rgba(45,192,172,.3) !important;
  color: #0A7A6E !important;
}
/* Los círculos teal con número blanco se conservan (contraste correcto) */

/* ── BANNER PAÍS en modo claro ─────────────────────────────── */
[data-theme="light"] .country-banner {
  background:
    linear-gradient(135deg, rgba(237,242,255,.95) 0%, rgba(222,234,255,.92) 100%),
    url('../img/hero-lago.jpg') center / cover no-repeat !important;
}
[data-theme="light"] .country-banner h2 { color: var(--navy) !important; }
[data-theme="light"] .country-banner p  { color: rgba(15,23,42,.62) !important; }
[data-theme="light"] .country-banner .label-tag {
  background: rgba(45,192,172,.12) !important;
  border: 1px solid rgba(45,192,172,.3) !important;
  color: #0A7A6E !important;
}
[data-theme="light"] .country-banner [style*="background:rgba(255,255,255,.08)"] {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 4px 20px rgba(15,23,42,.08) !important;
}
[data-theme="light"] .country-banner [style*="background:rgba(255,255,255,.08)"]:hover {
  background: #f6f9ff !important;
  border-color: rgba(45,192,172,.3) !important;
}
[data-theme="light"] .country-banner [style*="color:white"] { color: var(--navy) !important; }
[data-theme="light"] .country-banner [style*="color:rgba(255,255,255,.5)"] { color: rgba(15,23,42,.55) !important; }

/* ── CTA BANNER ("Da el primer paso hoy") en modo claro ────── */
[data-theme="light"] .cta-banner {
  background: linear-gradient(160deg, #EDF2FF 0%, #DCE7FF 50%, #EDF2FF 100%) !important;
}
[data-theme="light"] .cta-banner::before {
  background: radial-gradient(ellipse 70% 80% at 50% 110%, rgba(45,192,172,.18), transparent) !important;
}
[data-theme="light"] .cta-banner h2 { color: var(--navy) !important; }
[data-theme="light"] .cta-banner p  { color: rgba(15,23,42,.62) !important; }
[data-theme="light"] .cta-banner [style*="color:white"] { color: var(--navy) !important; }
[data-theme="light"] .cta-banner [style*="color:rgba(255,255,255"] { color: rgba(15,23,42,.62) !important; }
[data-theme="light"] .cta-banner .label-tag {
  background: rgba(45,192,172,.12) !important;
  border: 1px solid rgba(45,192,172,.3) !important;
  color: #0A7A6E !important;
}

/* ── FOOTER en modo claro ──────────────────────────────────── */
[data-theme="light"] footer {
  background: linear-gradient(160deg, #E8EFFE 0%, #DCE7FF 100%) !important;
  border-top: 3px solid var(--teal) !important;
}
[data-theme="light"] .footer-logo-text { color: var(--navy) !important; }
[data-theme="light"] .footer-tagline   { color: rgba(15,23,42,.45) !important; }
[data-theme="light"] footer p          { color: rgba(15,23,42,.6) !important; }
[data-theme="light"] footer h5         { color: var(--navy) !important; }
[data-theme="light"] .footer-links a   { color: rgba(15,23,42,.6) !important; }
[data-theme="light"] .footer-links a:hover { color: var(--teal) !important; }
[data-theme="light"] .footer-contact-item { color: rgba(15,23,42,.6) !important; }
[data-theme="light"] .footer-bottom        { color: rgba(15,23,42,.42) !important; }
[data-theme="light"] .footer-divider       { border-color: rgba(15,23,42,.1) !important; }
[data-theme="light"] .footer-social a {
  background: rgba(42,59,142,.07) !important;
  border-color: rgba(42,59,142,.16) !important;
}
[data-theme="light"] footer .footer-social svg[fill="white"]   { fill: var(--navy) !important; }
[data-theme="light"] footer .footer-social svg[stroke="white"] { stroke: var(--navy) !important; }
[data-theme="light"] footer a[href="/admin/"] { color: rgba(15,23,42,.35) !important; }
[data-theme="light"] .footer-badge {
  background: rgba(45,192,172,.1) !important;
  border-color: rgba(45,192,172,.25) !important;
  color: #0A7A6E !important;
}

/* ── PAGE LOADER: texto legible si arranca en modo claro ───── */
[data-theme="light"] .page-loader { background: #EDF2FF !important; }
[data-theme="light"] .page-loader [style*="color:white"] { color: var(--navy) !important; }
[data-theme="light"] .page-loader [style*="color:rgba(255,255,255,.35)"] { color: rgba(15,23,42,.45) !important; }

/* ── Burbuja de pista del chatbot en claro (por si el JS la pinta) ── */
[data-theme="light"] .chatbot-bubble-hint {
  background: #fff !important;
  border-color: rgba(15,23,42,.1) !important;
  color: var(--navy) !important;
}

/* ── Chatbot: ventana más compacta + X de cerrar en la esquina ───── */
.chatbot-window {
  width: 330px !important;
  max-height: 470px !important;
}
.chat-header {
  position: relative !important;
  padding: .9rem 2.6rem .9rem 1.1rem !important;  /* espacio a la derecha para la X */
}
.chat-close {
  position: absolute !important;
  top: .5rem !important;
  right: .5rem !important;
  width: 26px !important;
  height: 26px !important;
  z-index: 2;
}
.chat-close svg { width: 14px !important; height: 14px !important; }

/* Mensajes un poco más compactos para acompañar el tamaño menor */
.chat-messages { padding: 1rem !important; }
.msg-bubble { font-size: .85rem !important; }

/* En móvil mantiene ancho cómodo (no fijo de 330px) */
@media (max-width: 575.98px) {
  .chatbot-window {
    width: calc(100vw - 1.5rem) !important;
    max-height: 75vh !important;
  }
}

/* ── Hamburguesa móvil: mismo tamaño y estilo que el botón de tema ── */
#navToggler {
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
#navToggler:hover { background: rgba(255,255,255,.18) !important; }
#navToggler:focus { box-shadow: none !important; }
#navToggler svg { width: 22px !important; height: 22px !important; }

[data-theme="light"] #navToggler {
  background: rgba(42,59,142,.07) !important;
  border-color: rgba(42,59,142,.18) !important;
}
[data-theme="light"] #navToggler:hover { background: rgba(42,59,142,.12) !important; }

/* ── Opciones del chatbot dentro del hilo de mensajes ───────────── */
.chat-options-inline {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-self: flex-start;
  max-width: 100%;
}
/* El panel de opciones antiguo (separado) ya no se usa: ocúltalo si queda vacío */
#chatOptions:empty { display: none !important; }

/* ── Evitar el ZOOM automático de iOS al enfocar inputs ──────────
   iOS Safari hace zoom (y "agranda" el chat) cuando el input tiene
   letra < 16px. Forzando 16px en móvil se elimina ese comportamiento. */
@media (max-width: 767.98px) {
  .chat-input,
  .form-control,
  .form-select { font-size: 16px !important; }
}