/* =========================================================
   BASE — reset, tokens, tipografía, layout
   Valores tomados del Figma (frames 129:255 y 142:420),
   normalizados sobre un frame de 1512px.
   ========================================================= */

/* ---------- Alte Haas Grotesk: sólo Regular y Bold ---------- */
@font-face {
  font-family: "Alte Haas Grotesk";
  src: url("../fonts/AlteHaasGroteskRegular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alte Haas Grotesk";
  src: url("../fonts/AlteHaasGroteskBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

* { margin: 0; padding: 0; }

html {
  /* Body = 20px. 125% de 16 respeta el tamaño que el usuario
     tenga configurado en su navegador. */
  font-size: 125%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* =========================================================
   TOKENS
   ========================================================= */
:root {
  --font-sans: "Alte Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Sólo hay dos pesos: la jerarquía la hace el tamaño */
  --w-book: 400;
  --w-bold: 700;

  /* --- Color (Figma 685:30757) --- */
  --bg:        #f6f6f3;
  --fg:        #222221;   /* nav, labels, cuerpo */
  --fg-strong: #000000;   /* titulares y textos grandes */
  --fg-mute:   #7e7e7e;   /* la línea de servicio de la nav y del footer */
  --green:     #3d711e;   /* "Actualmente en · Dots.Memories" */
  --orange:    #ed7734;   /* "culo inquieto" */
  --yellow:    #f9faa3;   /* tarjeta del About */
  --dot:       rgba(249, 250, 163, 0.8);  /* #F9FAA3 al 80% — selección de texto */
  --ink-bg:    #222221;   /* footer y tarjeta oscura */
  --ink-fg:    #ffffff;
  --slab:      #d9d9d9;   /* tarjeta de proyectos en reposo */

  /* --- Tipografía ---
     Escala del Figma a 1512px, con clamp para que baje bien.
     El máximo de cada clamp es el valor exacto del Figma. */
  --t-label:   clamp(0.85rem, 1.44vw, 1.09rem);    /* 21.8px */
  --t-meta:    clamp(0.7rem, 1.06vw, 0.8rem);       /* 16px  — nav lateral y footer */
  --t-nav:     clamp(0.8rem, 1.19vw, 0.9rem);       /* 18px  — menú y pie */
  --t-body:    1rem;                                /* 20px  */
  --t-project: clamp(1.15rem, 2.05vw, 1.552rem);    /* 31.03px — lista de proyectos */
  --t-now:     clamp(1.05rem, 1.81vw, 1.369rem);    /* 27.37px */
  --t-hero:    clamp(1.5rem, 2.98vw, 2.25rem);      /* 45px  */
  --t-about:   var(--t-hero);                       /* el titular del About mide igual */
  --t-work:    clamp(2rem, 4.22vw, 3.193rem);       /* 63.85px — "siguiente proyecto" */
  --t-thanks:  clamp(2.1rem, 6.03vw, 4.56rem);      /* 91.2px — cierre del footer */
  --t-loader:  clamp(3rem, 13.8vw, 10.444rem);      /* 208.9px */

  /* --- Layout --- */
  --radius: 24px;
  --inset: 10px;            /* margen a sangre de los case studies */
  --footer-h: 290px;        /* alto del footer en los case studies */
  --pad: 45px;              /* margen de la página: nav y pie */
  --gutter: 24px;

  /* Margen de la columna de contenido de la home: 160,5px sobre el
     frame de 1512. Es bastante más que --pad a propósito: el aire de
     los lados es lo que hace que las tarjetas se lean como tarjetas. */
  --col-x: clamp(20px, 10.62vw, 160px);
  /* Margen arriba y abajo de la tarjeta de proyectos, que mide un
     viewport menos este margen por lado */
  --work-y: clamp(16px, 9.6svh, 94px);

  /* --- Ritmo vertical --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 144px;
  --space-8: 200px;

  /* --- Motion ---
     Curvas propias: las de CSS son demasiado flojas. Nunca ease-in en
     UI: arranca lento justo en el instante que se está mirando.
     Las interacciones viven entre 140 y 220ms. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);      /* entra / sale */
  --ease-io:     cubic-bezier(0.77, 0, 0.175, 1);     /* se mueve en pantalla */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);      /* cortinilla */

  /* El muelle de Fler, el del rastro de cards del About: stiffness 500,
     damping 60, mass 1. Sale sobreamortiguado (zeta 1,34), o sea sin
     rebote, con polos en -10 y -50: llega al 99,5% a los 553ms y esta
     bézier calca su recorrido (error rms 0,007).
     Que no tenga rebote no lo convierte en un ease-out cualquiera: la
     diferencia está en el arranque. Con --ease-out, a un 5% del tiempo
     la card ya va por el 21% del camino; el muelle va por el 11,5%. Eso
     es lo que hace que una se vea aparecer y la otra parezca ya puesta,
     aunque las dos duren lo mismo. */
  --ease-spring: cubic-bezier(0.23, 0.56, 0.14, 1);
  --dur-trail:   550ms;

  --dur-press: 140ms;  /* respuesta al clic */
  --dur-fast:  160ms;  /* hover, cursor, subrayados */
  --dur-med:   200ms;  /* cambios de estado */
  --dur-slow:  220ms;  /* el techo de la UI */
  --dur-enter: 420ms;  /* entrada de contenido al hacer scroll: no es UI */
}

@media (max-width: 1024px) { :root { --pad: 32px; --gutter: 20px; } }
@media (max-width: 640px)  { :root { --pad: 20px; --gutter: 16px; --footer-h: 340px; } }

/* La home lleva su propio footer, mucho más alto: ahí dentro va el
   cierre. El alto tiene que estar en el token porque .page reserva
   ese mismo hueco abajo para dejarlo salir. */
body.home { --footer-h: clamp(320px, 37vw, 560px); }
@media (max-width: 640px) { body.home { --footer-h: 300px; } }

/* ---------- Documento ---------- */
body {
  background: var(--bg);
  color: var(--fg-strong);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-book);
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--dot); color: var(--fg-strong); }

/* El cursor nativo sólo se oculta cuando el propio está activo */
body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button { cursor: none; }

/* =========================================================
   TIPOGRAFÍA
   Una familia, dos pesos, line-height 1.4 y tracking -0.01em
   en los tamaños grandes, tal como está en el Figma.
   ========================================================= */
.label {
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg);
}
.label--plain { text-transform: none; }

.strong { font-weight: var(--w-bold); }
.mute { color: var(--fg-mute); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  padding-inline: var(--pad);
}

.section { padding-block: var(--space-8); }
@media (max-width: 640px) { .section { padding-block: var(--space-6); } }

/* ---------- Esquinas ----------
   Squircle en todos los redondeos de la web. Sólo afecta a lo que ya
   tiene border-radius, así que aplicarlo a todo es inofensivo. Se deja
   fuera lo que debe seguir siendo un círculo perfecto: si no, un
   border-radius del 50% con esquina de superelipse deja de ser redondo.
   Y la pastilla del cursor, que es un estadio: sus lados cortos son
   semicírculos, y la superelipse se los comería.
   Donde no está soportado, el redondeo normal sigue funcionando. */
@supports (corner-shape: squircle) {
  *:not(.status):not(.cursor-dot__ball):not(.cursor__pill) {
    corner-shape: squircle;
  }
}

/* ---------- Accesibilidad ---------- */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: var(--pad);
  top: 0;
  transform: translateY(-140%);
  z-index: 400;
  background: var(--fg-strong);
  color: var(--bg);
  padding: 10px 16px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(12px); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-enter) var(--ease-out),
              transform var(--dur-enter) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
/* Escalonado corto: por encima de ~80ms la página se siente lenta */
.reveal[data-delay="1"] { transition-delay: 60ms; }
.reveal[data-delay="2"] { transition-delay: 120ms; }