/* css/theme.css — estilos y paleta compartidos por todo el sitio.
   Cambiar la paleta de colores = editar los valores aquí, una sola vez. */

:root {
  --bg: #f7f6f2;
  --surface: #ffffff;
  --ink: #14161a;
  --muted: #61646c;
  --accent: #3454d1;
  --accent-2: #c9a24b;
  --accent-ink: #ffffff;
  --border: rgba(20,22,26,0.1);
}

.dark {
  --bg: #0c0e14;
  --surface: #141721;
  --ink: #eef0f5;
  --muted: #9195a3;
  --accent: #5b7cff;
  --accent-2: #e0b563;
  --accent-ink: #0c0e14;
  --border: rgba(238,240,245,0.12);
}

body {
  background: var(--bg);
  color: var(--ink);
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Animación al hacer scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Patrón de puntos decorativo (hero) */
.dot-grid {
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* Transición del botón de tema (linterna) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) { animation: none !important; }
}

/* Logo: imagen en modo claro, nombre en modo oscuro */
.brand-logo-img { display: block; height: 34px; width: auto; }
.dark .brand-logo-img { display: none; }
.brand-logo-text { display: none; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.dark .brand-logo-text { display: block; }

/* Menú superior: vidrio esmerilado. Deja ver lo que hay detrás pero el texto siempre se lee. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 52%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  box-shadow: 0 10px 30px -20px rgba(10, 14, 30, .45);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .site-header.is-scrolled { background: var(--bg); }
}
/* El menú móvil desplegado sí es sólido, para leerlo bien */
.site-header #mobileNav { background: var(--surface); }

/* Botón "volver arriba" con anillo de progreso de lectura */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 55; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px -10px rgba(10, 14, 30, .45), 0 0 0 1px var(--border);
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), bottom .3s ease, color .2s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--accent); transform: translateY(-3px); }
.to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.to-top svg.ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.to-top svg.ring circle { fill: none; stroke-width: 2.5; }
.to-top svg.ring .track { stroke: var(--border); }
.to-top svg.ring .bar { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: 138.2; transition: stroke-dashoffset .12s linear; }
body.sv-bar-on .to-top { bottom: 104px; }
@media (max-width: 640px) { .to-top { right: 14px; bottom: 14px; width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .to-top, .site-header { transition: none; } }
@media print { .to-top, .site-header { display: none !important; } }