:root {
  /* Colors */
  --text: hsl(0, 0%, 5%);
  --subtext: hsl(0, 0%, 25%);

  --bg: hsl(240, 100%, 98%);
  --bg-hover: hsl(240, 100%, 95%);

  --primary: hsl(210, 17%, 25%);
  --primary-hover: hsl(210, 17%, 20%);

  --secondary: hsl(208, 52%, 83%);
  --secondary-hover: hsl(208, 52%, 78%);

  --accent: hsl(4, 98%, 76%);
  --accent-hover: hsl(4, 98%, 70%);
}

[data-theme="dark"] {
  /* Colors */
  --text: hsl(0, 0%, 95%);
  --subtext: hsl(0, 0%, 75%);

  --bg: hsl(240, 100%, 2%);
  --bg-hover: hsl(240, 100%, 5%);

  --primary: hsl(210, 17%, 75%);
  --primary-hover: hsl(210, 17%, 80%);

  --secondary: hsl(208, 52%, 17%);
  --secondary-hover: hsl(208, 52%, 22%);

  --accent: hsl(4, 98%, 24%);
  --accent-hover: hsl(4, 98%, 70%);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter;
  background: var(--bg);
  color: var(--text);
}

p,
small,
.muted {
  color: var(--subtext);
}

.theme-toggle:hover {
  background: var(--bg-hover);
  color: var(--primary-hover);
}

.desk-links {
  transition: 200ms;
}

.desk-links:hover {
  color: var(--primary-hover);
  border-bottom: 1px solid var(--primary-hover);
}

.menu-link {
  padding: 6px 10px;
  border-bottom: 1px solid var(--subtext);
  transition: background 0.15s ease;
}

.menu-link:hover {
  background: var(--bg-hover);
}

/* por defecto light */
.logo-dark {
  display: none;
}
.logo-light {
  display: block;
}

/* cuando dark */
[data-theme="dark"] .logo-dark {
  display: block;
}
[data-theme="dark"] .logo-light {
  display: none;
}

/* iconos del toggle */
.light-icon {
  display: none;
} /* en light muestras el sol o la luna? tú decides */
.dark-icon {
  display: inline-block;
}

[data-theme="dark"] .light-icon {
  display: inline-block;
}
[data-theme="dark"] .dark-icon {
  display: none;
}

.glass {
  background: color-mix(in hsl, var(--bg) 70%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* border: 1px solid color-mix(in hsl, var(--subtext) 20%, transparent); */
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms ease, transform 500ms ease;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}


/* Respeta accesibilidad */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* La página arranca “apagada” */
body {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 350ms ease, transform 350ms ease;
}

/* Cuando JS diga “ya cargó”, aparece */
body.is-ready {
  opacity: 1;
  transform: none;
}

.lang-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  user-select:none;
}

.lang-toggle:hover{
  background: var(--bg-hover);
}

.lang-flag{
  width:22px;
  height:16px;
  border-radius:4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset;
}

.lang-code{
  font-weight:700;
  letter-spacing:0.5px;
  font-size:12px;
  opacity:0.95;
}