/* ==========================================================================
   base.css - Kitsotaro
   Reinicio, fuente, tipografia, contenedor, foco y capa de fondo.
   Todos los valores salen de tokens.css.
   ========================================================================== */

/* ---------- Fuente ---------- */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reinicio ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--sp-21));
}

body {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 8% -4%, var(--bg-wash-1), transparent 62%),
    radial-gradient(820px 520px at 100% 18%, var(--bg-wash-2), transparent 62%),
    var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

img, video {
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--link);
}

/* ---------- Tipografia ---------- */
h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-h1);
  line-height: var(--lh-tight);
  color: var(--ink);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-h2);
  line-height: var(--lh-snug);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--tracking-h3);
  line-height: var(--lh-snug);
}

/* En celular el subtitulo usa el tamano de cuerpo; crece desde 860px */
.sub {
  max-width: 46ch;
  font-size: var(--fs-base);
  color: var(--ink-2);
}

.muted {
  font-size: var(--fs-md);
  color: var(--ink-3);
}

/* ---------- Contenedor ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section {
  margin-block: var(--sp-16);
}

/* ---------- Accesibilidad ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---------- Logo oficial: dos <img>, una por tema (Fase 6) ---------- */
.logo-oscuro {
  display: none;
}

:root[data-theme="dark"] .logo-claro {
  display: none;
}

:root[data-theme="dark"] .logo-oscuro {
  display: block;
}

/* ---------- Iconos (tecnica de mascara) ---------- */
.icon {
  display: inline-block;
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  background-color: currentColor;
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
}

/* ---------- Capa de fondo: luces y listones ---------- */
.bgfx {
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  overflow: hidden;
  pointer-events: none;
  opacity: var(--bgfx-o);
}

.bgfx i,
.bgfx span {
  position: absolute;
  display: block;
}

.bgfx i {
  border-radius: 50%;
}

.bgfx .b1 {
  width: var(--bg-b1-size);
  height: var(--bg-b1-size);
  left: var(--bg-b1-x);
  top: var(--bg-b1-y);
  background: radial-gradient(closest-side, var(--light-1), transparent);
}

.bgfx .b2 {
  width: var(--bg-b2-size);
  height: var(--bg-b2-size);
  right: var(--bg-b2-x);
  top: var(--bg-b2-y);
  background: radial-gradient(closest-side, var(--light-2), transparent);
}

.bgfx .b3 {
  width: var(--bg-b3-size);
  height: var(--bg-b3-size);
  left: var(--bg-b3-x);
  top: var(--bg-b3-y);
  background: radial-gradient(closest-side, var(--light-3), transparent);
}

.bgfx .rb {
  width: var(--bg-rb-w);
  height: var(--bg-rb-h);
  border-radius: var(--r-pill);
  border: 1px solid var(--ribbon);
  background: linear-gradient(90deg, var(--ribbon), transparent);
}

.bgfx .rb1 {
  top: var(--bg-rb1-y);
  right: var(--bg-rb1-x);
  transform: rotate(-24deg);
}

.bgfx .rb2 {
  top: var(--bg-rb2-y);
  left: var(--bg-rb2-x);
  transform: rotate(16deg);
}

/* ---------- Ampliacion: tablet en adelante ---------- */
/* Movimiento lento de las luces (opt-in: quitar .fx-drift las deja quietas) */
@media (prefers-reduced-motion: no-preference) {
  .fx-drift .b1 {
    animation: bg-drift-a var(--dur-drift) var(--ease-inout) infinite alternate;
  }

  .fx-drift .b2 {
    animation: bg-drift-b var(--dur-drift) var(--ease-inout) infinite alternate;
  }

  .fx-drift .b3 {
    animation: bg-drift-a var(--dur-drift) var(--ease-inout) infinite alternate-reverse;
  }

  /* Las luces se mueven en la GPU: sin esto el navegador repinta toda la pagina */
  .fx-drift .b1,
  .fx-drift .b2,
  .fx-drift .b3 {
    will-change: transform;
  }
}

@keyframes bg-drift-a {
  to {
    transform: translate(18vw, 10vh) scale(1.12);
  }
}

@keyframes bg-drift-b {
  to {
    transform: translate(-20vw, 14vh) scale(0.9);
  }
}

@media (min-width: 860px) {
  .sub {
    font-size: var(--fs-lg);
  }

  section {
    margin-block: var(--section-gap);
  }
}

/* ---------- Transicion entre paginas (Chromium; los demas navegan sin animar) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-base);
}

/* ---------- Cambio de tema: el tema nuevo crece en circulo desde el interruptor (theme.js) ---------- */
:root.theme-vt::view-transition-old(root),
:root.theme-vt::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* Todo el header entra con el circulo, sin capas aparte */
.theme-vt .nav-links,
.theme-vt .nav-pill {
  view-transition-name: none;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Tema: controles nativos y barras de scroll siguen al tema ---------- */
:root {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* ---------- Interruptor de tema (theme.js) ----------
   Capsula de vidrio: dia (sol) a la izquierda, noche (luna) a la derecha.
   La posicion sale de data-theme en <html>, que ya viene puesto antes de
   pintar: al cargar no hay animacion; solo al tocar. El sol gira y se apaga
   mientras la luna entra girando. */
.theme-btn {
  position: relative;
  flex: none;
  width: var(--theme-w);
  height: var(--tap);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: linear-gradient(var(--theme-tint), var(--theme-tint)), var(--glass);
  -webkit-backdrop-filter: blur(var(--blur-btn));
  backdrop-filter: blur(var(--blur-btn));
  box-shadow: var(--well), inset 0 1px 0 var(--bevel);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.theme-knob {
  position: absolute;
  top: 50%;
  left: var(--theme-pad);
  display: grid;
  place-items: center;
  width: var(--theme-knob);
  height: var(--theme-knob);
  border-radius: 50%;
  background: var(--theme-disc);
  color: var(--theme-icon);
  box-shadow: var(--sh-1), inset 0 1px 0 var(--bevel);
  transform: translateY(-50%);
  transition:
    transform var(--dur-slow) var(--ease-spring),
    background-color var(--dur-slow) var(--ease-out),
    color var(--dur-slow) var(--ease-out);
}

:root[data-theme="dark"] .theme-knob {
  transform: translate(calc(var(--theme-w) - 2px - var(--theme-knob) - var(--theme-pad) * 2), -50%);
}

.theme-knob .icon {
  grid-area: 1 / 1;
  transition:
    transform var(--dur-slow) var(--ease-spring),
    opacity var(--dur-base) var(--ease-out);
}

.theme-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.4);
}

:root[data-theme="dark"] .theme-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.4);
}

:root[data-theme="dark"] .theme-moon {
  opacity: 1;
  transform: none;
}

@media (hover: hover) {
  .theme-btn:hover .theme-knob {
    box-shadow: var(--sh-2), inset 0 1px 0 var(--bevel);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-knob,
  .theme-knob .icon {
    transition: none;
  }
}