/* Temas de la página: oscuro (por defecto, el café original) y claro. */
:root {
  --muted: rgb(178, 161, 143);
  --alt-bg: #170d06;
  --card: rgba(56, 36, 22, 0.34);
  --hero-glow: #2a1608;
  --glass: rgba(16, 9, 4, 0.78);
  --track: rgba(64, 55, 46, 0.55);
  --btn-text: var(--color-warm-cream);
  --btn-hover: rgb(91, 59, 38);
  --on-accent: var(--color-warm-cream);
  --accent-rgb: 220 80 0;
  --accent-light: #ffb27a;
  --accent-dark: #8a3a10;
  --ember-soft: rgb(var(--accent-rgb) / 0.22);
}
html[data-theme="light"] {
  --color-warm-cream: #1a1410; --color-walnut-shadow: #f4f1ec; --color-bark-brown: #1a1410; --color-cork-border: #ddd5cb;
  --color-driftwood: #9a8f84; --color-ember-accent: #d24c00;
  --muted: #6b6157; --alt-bg: #ebe6df; --card: #ffffff; --hero-glow: #fffaf3; --glass: rgba(244, 241, 236, 0.85);
  --track: rgba(26, 20, 16, 0.08); --btn-text: #f4f1ec; --btn-hover: #3a2f27; --on-accent: #ffffff;
  --accent-rgb: 210 76 0; --accent-light: #ff8a3d; --accent-dark: #b84300;
}
/* Colores que styles.css tenía escritos directo y que deben seguir al tema (en todas las páginas). */
.section-heading .eyebrow, .faq summary::after, .faq details p, .contact-top, .contact-bottom, .section-end, .zone-picker label { color: var(--muted); }
.site-header.is-scrolled { background: var(--glass); }
.scan-hero { background: radial-gradient(circle at 78% 55%, var(--hero-glow) 0%, var(--color-walnut-shadow) 55%); }
.contact { background: radial-gradient(circle at 75% 60%, var(--hero-glow) 0%, var(--color-walnut-shadow) 60%); }
.contact-action { color: var(--btn-text); }
.contact-action:hover { background: var(--btn-hover); }
.service-inquiry:hover { color: var(--color-warm-cream); }
.hero-scroll-link { border-color: var(--color-driftwood); }
.t-step.is-lit .t-dot { color: var(--on-accent); }
.viewer-activate { color: var(--on-accent); }
body, .scan-section, .site-header { transition: background-color 0.4s, color 0.4s; }

/* Foto del escáner: con guante sobre fondo oscuro, sin guante sobre fondo claro. */
img.for-light, html[data-theme="light"] img.for-dark { display: none; }
html[data-theme="light"] img.for-light { display: block; }
html[data-theme="light"] .scan-beam { -webkit-mask-image: url(scanx-scanner-light.webp); mask-image: url(scanx-scanner-light.webp); }

/* Mapa en tema claro: anillos y sus etiquetas en negro para que se distingan del fondo hueso. */
html[data-theme="light"] .zone-map .rings circle { stroke: var(--color-warm-cream); stroke-opacity: 0.55; }
html[data-theme="light"] .zone-map .rings text { fill: var(--color-warm-cream); fill-opacity: 0.75; }

/* Portada en tema claro: la foto principal se queda oscura; la historia usa la corona recortada sobre fondo claro. */
html[data-theme="light"] .hero, html[data-theme="light"] .home .site-header:not(.is-scrolled) {
  --color-warm-cream: #ffedd7; --color-walnut-shadow: #100904; --color-bark-brown: #382416; --color-cork-border: #40372e;
  --color-driftwood: #6c5f51; --color-ember-accent: #dc5000; --muted: rgb(178, 161, 143);
  color: var(--color-warm-cream);
}
html[data-theme="light"] .service-line:hover { background: var(--card); }
html[data-theme="light"] .story-art img.for-light { filter: drop-shadow(0 30px 40px rgba(60, 40, 20, 0.18)); }

/* Botón de tema en el encabezado */
.theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: inherit; background: none; border: 1px solid var(--color-cork-border); border-radius: 50%; cursor: pointer; transition: border-color 0.25s; }
.theme-toggle:hover { border-color: var(--color-warm-cream); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-warm-cream); outline-offset: 3px; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.theme-toggle .sun, html[data-theme="light"] .theme-toggle .moon { display: none; }
html[data-theme="light"] .theme-toggle .sun { display: block; }
/* El botón de tema conserva 40 px también en celular: es el mínimo cómodo para el dedo. */