/* ====== Tema (claro/oscuro) con transición suave ====== */
:root {
  color-scheme: light dark;
  /* Paleta por defecto (claro) */
  --bg: #f7f9fc;
  --bg-grad-1: #f7f9fc;
  --bg-grad-2: #eef3fb;
  --fg: #0f1728;
  --muted: #47526a;
  --accent: #3b82f6;
  --ring: rgba(0, 0, 0, .08);
}
html.dark {
  --bg: #0f1320;
  --bg-grad-1: #0f1320;
  --bg-grad-2: #1b2236;
  --fg: #e9edf7;
  --muted: #aab3c5;
  --accent: #6aa8ff;
  --ring: rgba(255, 255, 255, .14);
}

body {
  background: radial-gradient(1200px 800px at 10% -10%, var(--bg-grad-2), var(--bg)) no-repeat fixed;
  color: var(--fg);
  transition: background .4s ease, color .2s ease;
}

/* Hereda color para títulos sin romper tu estilo base */
.header h1, .header h2,
.products-section h3, .kit-digital-section h3, .contact-section h3 {
  color: var(--fg);
}

/* ====== Toggle de tema ====== */
.header { position: relative; }
.theme-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--ring);
  background: rgba(255,255,255,.04);
  color: var(--fg);
  cursor: pointer;
  box-shadow: 0 2px 10px var(--ring);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.theme-toggle:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--ring); }
.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent),
              0 0 0 2px var(--accent);
}
.theme-toggle .sun { display: none; }
html:not(.dark) .theme-toggle .sun { display: inline; }
html:not(.dark) .theme-toggle .moon { display: none; }

/* ====== Micro-interacción glow/ripple para enlaces tipo botón ====== */
a.btn-product, a.btn-general, a.btn-contact, a.new-big-button {
  position: relative;
  overflow: hidden;                    /* necesario para el efecto */
  border-radius: 14px;                 /* suaviza sin tocar tu layout */
  box-shadow: 0 6px 18px var(--ring);  /* profundidad sutil */
  transition: transform .15s ease, box-shadow .2s ease;
  will-change: transform;
}
a.btn-product:hover, a.btn-general:hover, a.btn-contact:hover, a.new-big-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px var(--ring);
}

/* Capa de brillo que sigue el ratón */
a.btn-product::after,
a.btn-general::after,
a.btn-contact::after,
a.new-big-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(220px circle at var(--x, 50%) var(--y, 50%),
              rgba(255,255,255,.18), transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
a.btn-product:hover::after,
a.btn-general:hover::after,
a.btn-contact:hover::after,
a.new-big-button:hover::after { opacity: 1; }

/* Anillo de foco accesible y bonito */
a.btn-product:focus-visible,
a.btn-general:focus-visible,
a.btn-contact:focus-visible,
a.new-big-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent),
              0 0 0 2px var(--accent);
}

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  a.btn-product::after,
  a.btn-general::after,
  a.btn-contact::after,
  a.new-big-button::after { display: none; }
}