/* Tema claro/oscuro — modoavion */
html[data-theme="light"] {
  --bg: #f7f5f0;
  --bg-2: #efebe3;
  --surface: #ffffff;
  --surface-2: #f1ede6;
  --line: rgba(15, 17, 20, 0.12);
  --line-soft: rgba(15, 17, 20, 0.08);
  --ink: #14161a;
  --muted: rgba(20, 22, 26, 0.64);
  --faint: rgba(20, 22, 26, 0.44);
  --orange: #e8620a;
  --orange-soft: #c85509;
}

html[data-theme="light"] .site-nav { background: rgba(247, 245, 240, 0.82); }
html[data-theme="light"] .bin-rain { opacity: 0.14; }
html[data-theme="light"] .hero::before { opacity: 0.5; }
html[data-theme="light"] .btn-solid { color: #fff; }
html[data-theme="light"] .hero-phone { filter: drop-shadow(0 26px 50px rgba(20, 22, 26, 0.18)); }

/* La tarjeta del CTA sigue oscura en modo claro: forzamos texto claro dentro. */
html[data-theme="light"] .cta-card h2 { color: #f4f2ed; }
html[data-theme="light"] .cta-card p { color: rgba(244, 242, 237, 0.64); }
html[data-theme="light"] .cta-card .btn-line { color: #f4f2ed; border-color: rgba(255, 255, 255, 0.22); }

.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover { border-color: var(--orange); color: var(--orange); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .ico-sun { display: none; }
html[data-theme="light"] .theme-toggle .ico-moon { display: none; }
html[data-theme="light"] .theme-toggle .ico-sun { display: block; }