/* ===== Tema claro / oscuro =====
   Oscuro es el tema por defecto (definido en cada página). Aquí solo van las
   sobrescrituras del modo claro y el botón de cambio. Se carga el último, así
   sus variables (:root[data-theme="light"]) ganan a las de cada página. */

:root[data-theme="light"]{
  --bg:#f7f8fb; --bg-soft:#eceff4;
  --surface:rgba(12,20,38,0.035);
  --surface-2:rgba(12,20,38,0.06);
  --surface-hover:rgba(12,20,38,0.06);
  --border:rgba(12,20,38,0.10);
  --border-strong:rgba(12,20,38,0.20);
  --ink:#0f1626;
  --ink-secondary:#4b5568;
  --ink-tertiary:#7a8296;
  /* Degradados: mismos que en oscuro (solo un pelín más profundos para contraste sobre claro) */
  --grad-text:linear-gradient(135deg,#0891b2 0%,#2563eb 50%,#059669 100%);
  --glow-violet:0 8px 30px rgba(37,99,235,.16);
}

/* Fondo y superficies base */
:root[data-theme="light"] body{ background:var(--bg); color:var(--ink); }

/* Barra de navegación (algunas páginas la fijan en oscuro con valor literal) */
:root[data-theme="light"] .nav{ background:rgba(247,248,251,.82)!important; }
:root[data-theme="light"] header.site{ background:rgba(247,248,251,.82); }

/* Grano y velo oscuros no encajan en claro. */
:root[data-theme="light"] .grain,
:root[data-theme="light"] .grain-light,
:root[data-theme="light"] .veil{ display:none; }
/* El shader de cintas (#bgfx) ahora es transparente y con color → se ve igual en claro */
/* Las esferas WebGL usan mezcla aditiva: sobre blanco son invisibles → ocultas en claro */
:root[data-theme="light"] canvas.hero-blob,
:root[data-theme="light"] canvas.wheel-sphere,
:root[data-theme="light"] canvas.hero-sphere{ display:none; }
/* En claro no hay malla detrás: sin viñeta oscura y texto limpio */
:root[data-theme="light"] .orbit-center::after{ background:none; }
:root[data-theme="light"] .orbit-center .core-label .proyecto{ text-shadow:none; }
:root[data-theme="light"] .bg-decor .blob{ opacity:.6; }

/* Tarjetas con fondo oscuro literal */
:root[data-theme="light"] .kit-in,
:root[data-theme="light"] .pack-in{ background:rgba(255,255,255,.92); }

/* Halo del centro de la rueda: en claro, un anillo limpio visible */
:root[data-theme="light"] .orbit-center::after{ background:var(--bg-soft); }

/* ===== Botón de cambio de tema (flotante, abajo a la izquierda) ===== */
.theme-toggle{
  position:fixed; left:18px; bottom:18px; z-index:80;
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border-strong);
  background:var(--surface);
  color:var(--ink-secondary); cursor:pointer;
  transition:color .2s, background .2s, transform .2s, border-color .2s;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.theme-toggle:hover{ color:var(--ink); transform:translateY(-2px); border-color:var(--ink-tertiary); }
.theme-toggle svg{ width:20px; height:20px; }
.theme-toggle .i-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .i-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .i-moon{ display:inline-block; }
/* 44x44 también en móvil: es el mínimo de zona táctil accesible. Estaba en 40. */
@media (max-width:640px){ .theme-toggle{ width:44px; height:44px; left:14px; bottom:14px; } }
@media print{ .theme-toggle{ display:none; } }

/* ===== Transiciones entre páginas (View Transitions API) =====
   Va aquí porque theme.css es la única hoja que cargan las 42 páginas, y la API
   exige que estén apuntadas LAS DOS: la que sale y la que entra.
   · Solo navegación del mismo origen → los enlaces externos (Gumroad, SEPE,
     AEPD, Instagram) salen como siempre, sin tocarlos.
   · Navegador sin soporte (hoy Firefox): navega normal. Cero regresión.
   · Coste: 0 peticiones, 0 JS. */

@view-transition{ navigation:auto }

/* El cuerpo se funde y se eleva un poco: la salida rápida, la entrada con calma */
@keyframes vla-vt-out{ from{opacity:1;transform:none}      to{opacity:0;transform:translateY(-10px)} }
@keyframes vla-vt-in { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
::view-transition-old(root){ animation:vla-vt-out .30s cubic-bezier(.22,1,.36,1) both }
::view-transition-new(root){ animation:vla-vt-in  .42s cubic-bezier(.22,1,.36,1) both }

/* La cabecera no parpadea: se transforma de una página a la siguiente.
   .nav (home y herramientas) y header.site (interiores) comparten nombre a
   propósito — ninguna página tiene las dos, así que sigue siendo único en cada
   documento, que es lo que exige la API. */
/* SIN view-transition-name en la nav ni en el botón de tema.
   Lo tenían para que la cabecera se transformase entre páginas, pero .nav es
   position:sticky y .theme-toggle es position:fixed: al capturarlos fuera de
   flujo durante la transición, Safari en iPhone desplazaba la página entera
   hacia la izquierda y el contenido se salía de pantalla.
   El fundido de la raíz (::view-transition-old/new) sigue funcionando y es
   el efecto que de verdad se nota. */

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none }
}


/* ===== Correcciones Web Interface Guidelines (aplican a las 42 páginas) ===== */

/* El navegador pinta scrollbars y controles nativos según esto. Sin declararlo,
   en oscuro salían con el aspecto claro del sistema. */
:root{ color-scheme: dark; }
:root[data-theme="light"]{ color-scheme: light; }

/* La barra es pegajosa (71px): sin esto, pulsar un enlace de ancla dejaba el
   destino oculto debajo de ella. Se perdían 71px de contenido. */
[id]{ scroll-margin-top: 84px; }

/* Sin esto, cada toque en móvil espera ~300ms por si viene un segundo toque */
a, button, input, select, textarea, summary, [role="button"]{ touch-action: manipulation; }
/* Quitamos el destello azul de iOS a propósito: ya hay estados :hover y :active */
a, button{ -webkit-tap-highlight-color: transparent; }

/* Evita viudas: una palabra suelta en la última línea de un titular */
h1, h2, h3{ text-wrap: balance; }
p, li{ text-wrap: pretty; }

/* Las cifras no cambian de ancho mientras se teclea */
.stat .n, .hc-cifra, .big, .kv strong, .hc-pie strong{ font-variant-numeric: tabular-nums; }

/* El viewport declara viewport-fit=cover; sin esto el contenido se mete bajo el
   notch del iPhone en horizontal. En pantallas sin notch env() vale 0. */
body{ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.nav, header.site{ padding-top: env(safe-area-inset-top); }

/* Salto al contenido: invisible hasta que alguien llega con el teclado */
.skip-link{
  position:fixed; top:10px; left:10px; z-index:10000;
  padding:12px 20px; border-radius:12px;
  background:var(--bg); color:var(--ink);
  border:1px solid var(--border-strong);
  font-weight:600; text-decoration:none; font-size:.95rem;
  transform:translateY(-200%);
  transition:transform .2s cubic-bezier(.22,1,.36,1);
}
.skip-link:focus{ transform:none; outline:2px solid var(--cyan); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .skip-link{ transition:none; } }

/* ===== El hover no debe existir en pantallas táctiles =====
   Al tocar, el móvil dispara un :hover falso y la tarjeta se queda ELEVADA y
   clavada hasta que tocas otra cosa. Se veía en tarjetas, botones, stats y
   fichas de comunidad. Aquí se neutraliza el desplazamiento en cualquier
   dispositivo sin puntero fino; el color y el borde del hover se conservan,
   que no molestan. Va en theme.css para alcanzar también los estilos inline
   de las páginas interiores. */
@media (hover: none), (pointer: coarse){
  a:hover, a.btn:hover, a.card:hover, a.tool:hover,
  .btn:hover, .btn-primary:hover, .card:hover, .tool:hover, .post-card:hover,
  .step:hover, .persona:hover, .stat:hover, .gcard:hover, .trust:hover,
  .ccaa-tile:hover, .timeline-item:hover, .theme-toggle:hover{
    transform: none;
  }
}

/* ===== El cambio de tema deja de ser un salto seco =====
   Era el momento más brusco del sitio: toda la página cambiaba de color de
   golpe. 220ms de cruce en las superficies lo hace legible sin entretener.
   Solo color/fondo/borde: nada de layout, nada de transform.
   La clase la pone y la quita el propio conmutador, así que la transición NO
   está activa durante la carga (evita un fundido al abrir la página). */
html.tema-cambiando,
html.tema-cambiando body,
html.tema-cambiando .nav,
html.tema-cambiando header.site,
html.tema-cambiando .card,
html.tema-cambiando .tool,
html.tema-cambiando .stat,
html.tema-cambiando .post-card,
html.tema-cambiando .hero-calc,
html.tema-cambiando .hc-campo,
html.tema-cambiando .hc-res,
html.tema-cambiando .theme-toggle{
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
@media (prefers-reduced-motion: reduce){
  html.tema-cambiando, html.tema-cambiando *{ transition: none !important; }
}

/* ===== Las cifras de las calculadoras dejan de teletransportarse ===== */
.hc-cifra, .big{ transition: opacity .18s ease; }
.hc-cifra.cambiando, .big.cambiando{ opacity: .35; }

/* ===== Sin arrastre lateral =============================================
   Los resplandores de seccion (.sec-glow, .nuevas-glow, .orbit-glow) se salen
   del ancho a proposito: recortarlos en seco se ve peor y por eso se les quito
   el overflow en su dia. El efecto colateral era que la pagina se podia
   arrastrar de lado en movil -medido: 83 px- y se siente como si la web se
   despegara.

   Se recorta en las SECCIONES, no en la raiz. Se probaron las dos alternativas
   obvias y las dos rompen la barra de navegacion pegajosa:
     · html{overflow-x:clip}  -> la raiz pasa a contenedor de recorte: top:-225
     · body{overflow-x:hidden}-> crea contenedor de scroll: top:-459
   Recortando por seccion, el resplandor sigue sangrando hasta el borde de la
   pantalla (que es el efecto buscado) pero no empuja el ancho del documento.

   `clip` y no `hidden`: hidden crearia un contenedor de scroll en cada seccion.
   Solo en el eje X: los resplandores que sangran hacia arriba y hacia abajo,
   que son los que dan continuidad entre secciones, siguen intactos. */
main > section,
header.hero{ overflow-x:clip; }

/* ===== Puente de la calculadora a la app ================================
   Va justo debajo del resultado, que es el instante de maxima intencion:
   la persona acaba de ver su numero. Mas abajo ya no lo lee nadie.
   Deliberadamente sobrio: si parece un anuncio, se salta. */
.puente-app{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin:22px 0 0; padding:20px 22px;
  border:1px solid var(--border); border-left:3px solid #34d399;
  border-radius:14px; background:var(--surface);
}
:root[data-theme="light"] .puente-app{ border-left-color:#047857; }
.puente-app .texto{ flex:1; min-width:230px; }
.puente-app strong{ display:block; font-size:1rem; color:var(--ink); margin-bottom:5px; }
.puente-app p{ margin:0; font-size:.9rem; line-height:1.55; color:var(--ink-secondary); }
.puente-app .btn{ white-space:nowrap; }
.puente-app .gratis{
  display:inline-block; margin-top:9px; font-size:.78rem; color:var(--ink-tertiary);
}
@media (max-width:560px){
  .puente-app{ padding:18px; }
  .puente-app .btn{ width:100%; text-align:center; }
}