/* ============================================================
   Base — sistema tipografico y de espacio.

   Direccion: editorial. La jerarquia se construye con tamano, opacidad y
   espacio: un solo tono de tinta en cuatro pesos hace casi todo el trabajo.
   El color aparece solo como senal —tres tonos, cada uno con un significado
   fijo— en los puntos que tienen que llamar la atencion.
   Sin gradientes, sin sombras de caja, sin desenfoques.
   ============================================================ */

:root {
  color-scheme: dark;

  /* Superficie */
  --bg: #0d0d0f;
  --bg-lift: #131315;

  /* Tinta: un unico tono en cuatro pesos */
  --ink: #f6f5f3;
  --ink-2: rgba(246, 245, 243, 0.66);
  /* 0.50 y 0.34: el minimo que deja las etiquetas monoespaciadas (11-12px)
     por encima de 4.5:1 sobre el fondo. Medido, no estimado. */
  --ink-3: rgba(246, 245, 243, 0.5);
  --ink-4: rgba(246, 245, 243, 0.34);

  /* Filetes */
  --rule: rgba(246, 245, 243, 0.13);
  --rule-soft: rgba(246, 245, 243, 0.07);

  /* ---- Colores de senal ----
     Tres, y cada uno significa algo. No se usan para decorar: marcan el tema
     al que pertenece un elemento, de modo que lo que comparte color comparte
     sentido.

       verde   : verificable ahora  (en produccion, abrir la app)
       azul    : capacidad tecnica  (infraestructura, stack, perfil)
       violeta : en curso           (la carrera, lo que estoy cursando)

     Solo colorean texto: no hay puntos ni numeros de color fuera de la
     navegacion.  */
  --sig-live: #7fd0a0;
  --sig-live-soft: rgba(127, 208, 160, 0.34);
  --sig-tech: #7fa9e6;
  --sig-tech-soft: rgba(127, 169, 230, 0.32);
  --sig-next: #b79ce8;
  --sig-next-soft: rgba(183, 156, 232, 0.32);

  --live: var(--sig-live);

  /* Tipografia */
  /* Cada familia va seguida de su respaldo con metricas ajustadas (fonts.css) */
  --font-display: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif;
  --font-body: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, Consolas, monospace;

  --fs-display: clamp(3.4rem, 11.5vw, 9.5rem);
  --fs-h2: clamp(2.1rem, 5.4vw, 4rem);
  --fs-h3: clamp(1.7rem, 3.8vw, 2.7rem);
  --fs-h4: clamp(1.05rem, 1.6vw, 1.2rem);
  --fs-lead: clamp(1.05rem, 1.45vw, 1.28rem);
  --fs-body: 1rem;
  --fs-small: 0.9rem;
  --fs-mono: 0.735rem;

  /* Ritmo */
  --wrap: 1180px;
  --gutter: clamp(22px, 6vw, 76px);
  --section-y: clamp(88px, 13vw, 190px);
  --header-h: 72px;

  --ease: cubic-bezier(0.16, 0.84, 0.44, 1);
}

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

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked {
  overflow: hidden;
}

/* Mientras se aplica el ingles (ver js/lang-boot.js). La animacion es la red
   de seguridad: si la traduccion nunca llega, el contenido aparece igual. */
.lang-pending body {
  visibility: hidden;
  animation: lang-reveal 0s linear 1.5s forwards;
}

@keyframes lang-reveal {
  to {
    visibility: visible;
  }
}

/* ---------- Tipografia ---------- */

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-display);
  letter-spacing: -0.035em;
}

h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--fs-h3);
}

h4,
h5 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

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

img {
  height: auto;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button {
  cursor: pointer;
}

::selection {
  background: var(--ink);
  color: var(--bg);
}

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

/* ---------- Piezas de texto recurrentes ---------- */

/* Etiqueta monoespaciada: unico recurso "tecnico" del sistema */
.kicker {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.num {
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.lead {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  max-width: 58ch;
}

.prose {
  max-width: 64ch;
}

.prose p + p {
  margin-top: 1.15em;
}

.prose em {
  font-style: normal;
  color: var(--ink);
}

/* Texto que lleva el color de su tema */
.sig-live {
  color: var(--sig-live);
}

.sig-tech {
  color: var(--sig-tech);
}

.sig-next {
  color: var(--sig-next);
}

/* Enlace de texto: subrayado que se barre, sin cambio de color */
.link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: var(--ink);
  padding-bottom: 2px;
}

/* Area de clic de al menos 24px de alto sin alterar el dibujo: el
   pseudo-elemento se extiende por fuera de la caja del texto. */
.link::before {
  content: "";
  position: absolute;
  inset: -7px -5px;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  scale: 1 1;
  transform-origin: left;
}

.link:hover::after,
.link:focus-visible::after {
  animation: link-sweep 0.5s var(--ease);
}

@keyframes link-sweep {
  0% {
    scale: 1 1;
    transform-origin: right;
  }
  49% {
    scale: 0 1;
    transform-origin: right;
  }
  50% {
    scale: 0 1;
    transform-origin: left;
  }
  100% {
    scale: 1 1;
    transform-origin: left;
  }
}

/* Variante apagada: el subrayado aparece al pasar */
.link--quiet {
  color: var(--ink-2);
  transition: color 0.3s var(--ease);
}

.link--quiet::after {
  scale: 0 1;
  background: var(--ink);
  transition: scale 0.4s var(--ease);
}

.link--quiet:hover,
.link--quiet:focus-visible {
  color: var(--ink);
}

.link--quiet:hover::after,
.link--quiet:focus-visible::after {
  animation: none;
  scale: 1 1;
}

.link .arrow {
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: var(--ink-3);
  transition: translate 0.3s var(--ease), color 0.3s var(--ease);
}

.link:hover .arrow,
.link:focus-visible .arrow {
  color: var(--ink);
  translate: 2px -2px;
}

/* Enlace de accion verificable: abre algo que se puede comprobar ahora mismo.
   Se enciende al pasar, no antes. */
.link--live {
  color: var(--sig-live);
}

.link--live::after {
  background: var(--sig-live);
}

.link--live:hover,
.link--live:focus-visible {
  text-shadow: 0 0 14px var(--sig-live-soft);
}

.link--live:hover::after,
.link--live:focus-visible::after {
  box-shadow: 0 0 8px var(--sig-live-soft);
}

.link--live .arrow {
  color: var(--sig-live);
  opacity: 0.7;
}

.link--live:hover .arrow {
  color: var(--sig-live);
  opacity: 1;
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 28px;
}

/* ---------- Layout ---------- */

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

main {
  position: relative;
}

/* Asimetrico a proposito: el titulo arranca cerca del filete que abre la
   seccion, y el aire grande queda abajo, que es donde separa de la siguiente. */
.section {
  padding-block: clamp(38px, 4.4vw, 62px) var(--section-y);
  border-top: 1px solid var(--rule-soft);
}

.section-head {
  margin-bottom: clamp(44px, 6vw, 84px);
}

.section-head h2 {
  margin-top: 16px;
}

.section-head .lead {
  margin-top: 22px;
}

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 12px;
  translate: -50% -200%;
  z-index: 999;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--bg);
  font-size: var(--fs-small);
  font-weight: 500;
  transition: translate 0.2s var(--ease);
}

.skip-link:focus-visible {
  translate: -50% 0;
}

/* ---------- Aparicion al entrar en pantalla ---------- */

.reveal > * {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.7s var(--ease), translate 0.7s var(--ease);
}

.reveal.is-visible > * {
  opacity: 1;
  translate: none;
}

.reveal.is-visible > *:nth-child(2) {
  transition-delay: 0.07s;
}

.reveal.is-visible > *:nth-child(3) {
  transition-delay: 0.14s;
}

.reveal.is-visible > *:nth-child(4) {
  transition-delay: 0.21s;
}

.reveal.is-visible > *:nth-child(n + 5) {
  transition-delay: 0.28s;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal > * {
    opacity: 1;
    translate: none;
  }
}