:root {
  --background: oklch(100% 0 0);
  --foreground: oklch(14.5% 0 0);

  --card: oklch(100% 0 0);
  --card-foreground: oklch(14.5% 0 0);

  --popover: oklch(100% 0 0);
  --popover-foreground: oklch(14.5% 0 0);

  --primary: oklch(20.5% 0 0);
  --primary-foreground: oklch(98.5% 0 0);

  --secondary: oklch(97% 0 0);
  --secondary-foreground: oklch(20.5% 0 0);

  --muted: oklch(97% 0 0);
  --muted-foreground: oklch(55.6% 0 0);

  --accent: oklch(97% 0 0);
  --accent-foreground: oklch(20.5% 0 0);

  --destructive: oklch(57.7% .245 27.325);
  --destructive-foreground: oklch(98.5% 0 0);

  --border: oklch(92.2% 0 0);
  --input: oklch(92.2% 0 0);
  --ring: oklch(70.8% 0 0);

  --chart-1: oklch(64.6% .222 41.116);
  --chart-2: oklch(60% .118 184.704);
  --chart-3: oklch(39.8% .07 227.392);
  --chart-4: oklch(82.8% .189 84.429);
  --chart-5: oklch(76.9% .188 70.08);

  --radius: .625rem;
  --brand: oklch(57% .19 27);

  --spacing: .25rem;
  --container-xl: 36rem;

  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25 / .875);
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --tracking-tight: -.025em;
  --leading-snug: 1.375;
  --leading-relaxed: 1.625;

  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);

  --color-gray-50: oklch(98.5% .002 247.839);
  --color-gray-300: oklch(87.2% .01 258.338);
  --color-gray-600: oklch(44.6% .03 256.802);
  --color-gray-900: oklch(21% .034 264.665);
  --color-white: #fff;

  --default-font-family: var(--font-geist-sans);
  --default-mono-font-family: var(--font-geist-mono);
}

.dark {
  --background: oklch(16% 0 0);
  --foreground: oklch(95% 0 0);

  --card: oklch(14.5% 0 0);
  --card-foreground: oklch(98.5% 0 0);

  --popover: oklch(14.5% 0 0);
  --popover-foreground: oklch(98.5% 0 0);

  --primary: oklch(98.5% 0 0);
  --primary-foreground: oklch(20.5% 0 0);

  --secondary: oklch(26.9% 0 0);
  --secondary-foreground: oklch(98.5% 0 0);

  --muted: oklch(26.9% 0 0);
  --muted-foreground: oklch(70% 0 0);

  --accent: oklch(26.9% 0 0);
  --accent-foreground: oklch(98.5% 0 0);

  --destructive: oklch(39.6% .141 25.723);
  --destructive-foreground: oklch(63.7% .237 25.331);

  --border: oklch(26.9% 0 0);
  --input: oklch(26.9% 0 0);
  --ring: oklch(43.9% 0 0);

  --chart-1: oklch(48.8% .243 264.376);
  --chart-2: oklch(69.6% .17 162.48);
  --chart-3: oklch(76.9% .188 70.08);
  --chart-4: oklch(62.7% .265 303.9);
  --chart-5: oklch(64.5% .246 16.439);

  --brand: oklch(62% .22 27);
}

.toggle-fab{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border-radius:8px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--background) 92%, transparent);
  box-shadow: 0 0 0 1px var(--border), 0 8px 24px color-mix(in oklab, var(--foreground) 10%, transparent);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.toggle-fab:hover{
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--brand) 22%, transparent);
}
.theme-toggle{
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius:8px;            /* coerente con lang-toggle */
  cursor: pointer;
}

.theme-toggle .icon{
  width: 20px; height: 20px; display: block;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
html.dark .theme-toggle .dark-icon  { opacity: 1;  filter: none; }
html.dark .theme-toggle .light-icon { opacity: .45; filter: grayscale(1) brightness(.85); }
html:not(.dark) .theme-toggle .dark-icon  { opacity: .45; filter: grayscale(1) brightness(.85); }
html:not(.dark) .theme-toggle .light-icon { opacity: 1;  filter: none; }

.theme-toggle.is-auto .icon {
  border: 2px solid var(--brand);
  border-radius: 9999px;
  padding: 2px;
}

/* ========================= BASE RESETS & UTILITIES ========================= */
@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
@property --tw-border-style    { syntax: "*"; inherits: false; initial-value: solid; }
@property --tw-font-weight     { syntax: "*"; inherits: false; }
@property --tw-tracking        { syntax: "*"; inherits: false; }
@property --tw-shadow          { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-shadow-color    { syntax: "*"; inherits: false; }
@property --tw-shadow-alpha    { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-inset-shadow    { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-ring-color      { syntax: "*"; inherits: false; }
@property --tw-ring-shadow     { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-inset-ring-color { syntax: "*"; inherits: false; }
@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-ring-inset      { syntax: "*"; inherits: false; }
@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
@property --tw-blur            { syntax: "*"; inherits: false; }
@property --tw-brightness      { syntax: "*"; inherits: false; }
@property --tw-contrast        { syntax: "*"; inherits: false; }
@property --tw-grayscale       { syntax: "*"; inherits: false; }
@property --tw-hue-rotate      { syntax: "*"; inherits: false; }
@property --tw-invert          { syntax: "*"; inherits: false; }
@property --tw-opacity         { syntax: "*"; inherits: false; }
@property --tw-saturate        { syntax: "*"; inherits: false; }
@property --tw-sepia           { syntax: "*"; inherits: false; }
@property --tw-drop-shadow     { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }
@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --tw-drop-shadow-size  { syntax: "*"; inherits: false; }
@property --tw-duration        { syntax: "*"; inherits: false; }
@property --tw-scale-x         { syntax: "*"; inherits: false; initial-value: 1; }
@property --tw-scale-y         { syntax: "*"; inherits: false; initial-value: 1; }
@property --tw-scale-z         { syntax: "*"; inherits: false; initial-value: 1; }

*,*::before,*::after,::backdrop{ box-sizing:border-box; border:0 solid; margin:0; padding:0; }
::file-selector-button{ box-sizing:border-box; border:0 solid; margin:0; padding:0; }
html,:host{
  -webkit-text-size-adjust:100%; tab-size:4; line-height:1.5;
  font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");
  -webkit-tap-highlight-color: transparent;
}
body{ background-color:var(--background); color:var(--foreground); }
hr{ height:0; color:inherit; border-top-width:1px; }
abbr:where([title]){ text-decoration: underline dotted; }
h1,h2,h3,h4,h5,h6{ font-size:inherit; font-weight:inherit; }
a{ color:inherit; text-decoration:inherit; }
b,strong{ font-weight:bolder; }
code,kbd,samp,pre{
  font-family:var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono","Courier New",monospace);
  font-size:1em;
}
small{ font-size:80%; }
sub,sup{ vertical-align:baseline; font-size:75%; line-height:0; position:relative; }
sub{ bottom:-.25em; } sup{ top:-.5em; }
table{ text-indent:0; border-color:inherit; border-collapse:collapse; }
ol,ul,menu{ list-style:none; }
img,svg,video,canvas,audio,iframe,embed,object{ display:block; }
img,video{ max-width:100%; height:auto; }
button,input,select,optgroup,textarea{
  font:inherit; color:inherit; background:transparent; border-radius:0; letter-spacing:inherit;
}
::-webkit-search-decoration{ -webkit-appearance:none; }
[hidden]:where(:not([hidden="until-found"])) { display:none !important; }
*{ border-color:var(--border); outline-color:var(--ring); }

.hidden{ display:none !important; }

.flex{ display:flex; }
.grid{ display:grid; }
.inline-block{ display:inline-block; }
.flex-wrap{ flex-wrap:wrap; }
.items-center{ align-items:center; }
.justify-between{
  justify-content:space-between;
}
.self-end{ align-self:flex-end; }

.mx-auto{ margin-inline:auto; }
.mt-2{ margin-top: calc(var(--spacing)*2); }
.mb-2{ margin-bottom: calc(var(--spacing)*2); }
.mb-4{ margin-bottom: calc(var(--spacing)*4); }
.mb-6{ margin-bottom: calc(var(--spacing)*6); }
.mb-8{ margin-bottom: calc(var(--spacing)*8); }
.mb-16{ margin-bottom: calc(var(--spacing)*16); }

.gap-2{ gap: calc(var(--spacing)*2); }
.gap-3{ gap: calc(var(--spacing)*3); }
.gap-6{ gap: calc(var(--spacing)*6); }
.gap-8{ gap: calc(var(--spacing)*8); }

.size-4{ width: calc(var(--spacing)*4); height: calc(var(--spacing)*4); }
.size-10{ width: calc(var(--spacing)*10); height: calc(var(--spacing)*10); }
.size-50{ width: calc(var(--spacing)*50); height: calc(var(--spacing)*50); }

.h-3{ height: calc(var(--spacing)*3); }
.w-3{ width: calc(var(--spacing)*3); }
.w-fit{ width: fit-content; }
.min-h-svh{ min-height: 100svh; }
.max-w-xl{ max-width: var(--container-xl); }

.p-4{ padding: calc(var(--spacing)*4); }
.px-6{ padding-inline: calc(var(--spacing)*6); }
.py-16{ padding-block: calc(var(--spacing)*16); }

.text-sm{ font-size:var(--text-sm); line-height:var(--text-sm--line-height); }
.text-base\/relaxed{ font-size:var(--text-base); line-height:var(--leading-relaxed); }
.text-lg{ font-size:var(--text-lg); line-height:var(--text-lg--line-height); }
.text-2xl{ font-size:var(--text-2xl); line-height:var(--text-2xl--line-height); }
.text-3xl\/snug{ font-size:var(--text-3xl); line-height:var(--leading-snug); }
.text-4xl\/snug{ font-size:var(--text-4xl); line-height:var(--leading-snug); }

.font-mono{ font-family: var(--default-mono-font-family); }
.font-semibold{ font-weight: var(--font-weight-semibold); }
.font-bold{ font-weight: var(--font-weight-bold); }

.tracking-tight{ letter-spacing: var(--tracking-tight); }

.text-gray-600{ color: var(--color-gray-600); }
.text-gray-900{ color: var(--color-gray-900); }
.text-muted-foreground{ color: var(--muted-foreground); }

.rounded-full{ border-radius: 3.40282e38px; }
.rounded-lg{ border-radius: var(--radius); }

.bg-background{ background-color: var(--background); }
.bg-gray-50{ background-color: var(--color-gray-50); }
.bg-white{ background-color: var(--color-white); }

.antialiased{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

.transition-all{
  transition-property: all;
  transition-duration: var(--default-transition-duration);
  transition-timing-function: var(--default-transition-timing-function);
}
.transition-colors{
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
  transition-duration: var(--default-transition-duration);
  transition-timing-function: var(--default-transition-timing-function);
}
.duration-200{ transition-duration: .2s; }

.shadow-lg{
  --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  box-shadow: var(--tw-shadow);
}

@media (hover:hover){
  .hover\:scale-110:hover{ scale: 110% 110%; }
}

.nav-link{ transition: color .2s ease, opacity .2s ease, text-shadow .2s ease; }
.nav-link[data-state="active"]{
  color: var(--brand);
  text-shadow: 0 0 .35rem color-mix(in oklab, var(--brand) 30%, transparent);
  opacity: 1;
}
.nav-link[data-state="inactive"]{ color: var(--muted-foreground); opacity:.65; }
.nav-link[data-state="inactive"]:hover{ color: var(--foreground); opacity:1; }

.footer-link{
  color: var(--foreground);
  text-decoration: none;
  transition: color .2s ease, text-shadow .2s ease, opacity .2s ease;
}
.footer-link:hover{
  color: var(--brand);
  text-shadow: 0 0 .35rem color-mix(in oklab, var(--brand) 30%, transparent);
}
.loc{ display:inline-flex; align-items:center; gap:6px; }
.pin{ width:16px; height:16px; object-fit:contain; image-rendering:crisp-edges; }

/* ========================= SCROLLBAR ========================= */
:root{ --scrollbar-size: 14px; }

::-webkit-scrollbar{
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
::-webkit-scrollbar-track{
  background: transparent;
  margin: 2px;
}
::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--brand) 60%, var(--muted-foreground));
  border-radius: 9999px;
  border: 3px solid var(--background);
  transition: background-color .2s ease, border-color .2s ease;
}
::-webkit-scrollbar-thumb:hover{
  background: var(--brand);
}
::-webkit-scrollbar-corner{ background: transparent; }

html, body{
  scrollbar-width: thin;
  scrollbar-color: var(--brand) transparent;
}

/* ========================= CURSOR ========================= */
html.custom-cursor, html.custom-cursor * { cursor: none !important; }

.cursor{
  position: fixed;
  left: 0; top: 0;
  z-index: 80;
  width: 22px; height: 22px;
  border: 2px solid var(--brand);
  border-radius: 9999px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .15s ease, height .15s ease,
              border-color .2s ease, background-color .2s ease, opacity .2s ease;
  backdrop-filter: none;
  opacity: .85;
}

.cursor.is-hover{
  width: 34px; height: 34px;
  border-color: var(--brand);
  background: color-mix(in oklab, var(--brand) 12%, transparent);
}

.cursor.is-down{
  width: 20px; height: 20px;
  background: var(--brand);
}

.cursor.is-hidden{ opacity: 0; }

@media (pointer: coarse){
  html.custom-cursor .cursor{ display: none; }
  html.custom-cursor, html.custom-cursor * { cursor: auto !important; }
}

/* ========================= BACKGROUND WORDS ========================= */
.dev-words{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.dev-words__item{
  line-height: 1;
  letter-spacing: .04em;
  position: absolute;
  left: 50vw; top: 50vh;
  font-weight: 700;
  user-select: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.96);
  color: oklch(63.229% 0.25349 29.757);
  text-shadow: 0 0 10px color-mix(in oklab, var(--brand) 35%, transparent);
  will-change: transform, opacity;
}

@keyframes fadeOut{
  0%   { opacity: 0;  transform: translate(-50%,-50%) scale(.96); }
  12%  { opacity: .38; }
  70%  { opacity: .38; }
  100% { opacity: 0;  transform: translate(calc(-50% + 0.6px), calc(-50% - 6%)) scale(1.06); }
}

@media (prefers-reduced-motion: reduce){
  .dev-words__item{ animation-duration: 7s !important; }
}

/* ========================= PRELOADER ========================= */
.preloader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 24px);
  transition: opacity .35s ease;
  background:
    radial-gradient(120% 100% at 50% 40%,
      color-mix(in oklab, var(--background) 86%, transparent) 0%,
      color-mix(in oklab, var(--background) 96%, transparent) 55%),
    color-mix(in oklab, var(--background) 92%, transparent);
}

.preloader.hidden {
  opacity: 0;
  pointer-events: none;
}

.term{
  width: min(720px, 92vw);
  background: color-mix(in oklab, var(--background) 98%, transparent);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow:
    0 0 0 1px var(--border),
    0 24px 48px color-mix(in oklab, var(--foreground) 12%, transparent);
}

.term__header{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: color-mix(in oklab, var(--background) 96%, transparent);
  border-bottom: 1px solid var(--border);
}

.term__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 15%, transparent) inset;
}
.term__dot.red    { background: var(--brand); }
.term__dot.yellow { background: oklch(85% .17 95); }
.term__dot.green  { background: oklch(75% .18 150); }

.term__title{
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
  font-size: 12.5px;
}

.term__body{
  position: relative;
  padding: 14px 16px 16px;
  background: color-mix(in oklab, var(--background) 98.5%, transparent);
  overflow: hidden;
}

.term__bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      color-mix(in oklab, var(--brand) 9%, transparent) 0 1px,
      transparent 1px 3px
    );
  opacity: .18;
  mix-blend-mode: screen;
}

.term__scan{
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklab, var(--brand) 35%, transparent),
    transparent
  );
  animation: term-scan 1.2s linear infinite;
}

@keyframes term-scan {
  from { transform: translateX(0); }
  to   { transform: translateX(280%); }
}

@media (prefers-reduced-motion: reduce){
  .term__scan { display: none; }
}

.term__text{
  white-space: pre-wrap;
  min-height: 120px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Fira Mono", "Ubuntu Mono", Consolas, "Liberation Mono", monospace);
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: .02em;
  color: color-mix(in oklab, var(--brand) 82%, var(--foreground));
  text-shadow: 0 0 .45rem color-mix(in oklab, var(--brand) 28%, transparent);
}

.term__cursor{
  display: inline-block;
  width: 8px;
  height: 1.2em;
  background: currentColor;
  vertical-align: -2px;
  margin-left: 2px;
  animation: term-cursor 1s steps(1, end) infinite;
}

@keyframes term-cursor { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce){
  .term__cursor { animation: none; }
}

.term__progress{
  height: 6px;
  margin-top: 12px;
  background: color-mix(in oklab, var(--brand) 18%, var(--border));
  border-radius: 9999px;
  overflow: hidden;
}

.term__progress > span{
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--brand) 75%, transparent),
    var(--brand)
  );
  transition: transform .12s linear;
}

/* ========================= LANG TOGGLE ========================= */
.lang-toggle {
  display: inline-flex; gap: 0;
  flex-direction: column;
  align-items: center;
  padding: 4px;
  border-radius:8px;
  overflow: hidden;
  position: fixed;
  left: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  top: auto;
  right: auto;
  z-index: 50;
}

.lang-toggle .lang{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:28px; padding:0;
  border-right:1px solid var(--border);
}
.lang-toggle .lang:last-child{ border-right: 0; }
.lang-toggle .flag{
  width:20px; height:14px;
  object-fit:contain;
  aspect-ratio: 10 / 7;
  image-rendering:auto;
}
.lang-toggle:not(.is-open) .lang[aria-pressed="false"] {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  pointer-events: none;
}

.flag{
  width: 22px;
  height: 16px;
  border-radius: 2px;
  aspect-ratio: 10 / 7;
  object-fit: contain;
  image-rendering: auto;
}

.lang{
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 4px;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out,
    max-height 0.4s ease-out,
    filter .2s ease,
    background-color .2s ease;
}

.lang::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--foreground);
  opacity: 0;
  transform: scaleX(0);
  transition: transform .2s var(--default-transition-timing-function), opacity .2s var(--default-transition-timing-function), background-color .2s ease;
}

.lang[aria-pressed="false"]{
  opacity: .6;
  filter: grayscale(80%);
}
.lang[aria-pressed="false"]:hover{
  opacity: 1;
  filter: grayscale(0);
  background: var(--muted);
}

.lang[aria-pressed="true"] {
  background: var(--accent);
  cursor: default;
}
.lang[aria-pressed="true"]::after{
  background: var(--brand);
  opacity: 1;
  transform: scaleX(1);
}

.lang-toggle.is-open {
  gap: 4px;
  background: color-mix(in oklab, var(--background) 88%, transparent);
  box-shadow: 0 4px 12px color-mix(in oklab, var(--brand) 10%, transparent);
}
.lang-toggle.is-open .lang {
  display: inline-grid;
}
.lang-toggle.is-open .lang:nth-child(2) { transition-delay: 0.05s; }
.lang-toggle.is-open .lang:nth-child(3) { transition-delay: 0.1s; }
.lang-toggle.is-open .lang:nth-child(4) { transition-delay: 0.15s; }

.lang-toggle .flag {
  width: 20px;
  height: 14px;
  display: block;
}

@media (max-width: 480px){
  .lang-toggle{
    top: 12px;
    right: 12px;
    gap: 1px;
    padding: 3px;
    left: auto;
    bottom: auto;
  }
  .lang-toggle .flag {
    width: 18px;
    height: 12px;
  }
  .lang {
    padding: 3px;
  }
}