/* ==========================================================================
   Portfolio RIVUZ — styles.css
   Design system: Portrait (ver DESIGN.md). Mobile-first.
   Índice:
   1. Design tokens        5. Botones / links / chips
   2. Reset + base         6. Nav
   3. Tipografía           7. Hero + collage
   4. Utilidades           8. Proyectos (carrusel / acordeón)
   4b. Fondo vivo
                           9. Contacto + footer
                           10. Motion: progreso, cursor, entradas, parallax, revelado
   ========================================================================== */

/* 1. DESIGN TOKENS ======================================================== */
:root {
  /* Colores */
  --color-portrait-ink: #08304c;
  --color-nautical-teal: #084e72;
  /* Gradiente de marca (override del proyecto sobre el arcoíris de DESIGN.md):
     azules y celestes, tono tecnológico. Mismo uso restringido: 1 CTA por vista,
     1 palabra en cursiva por titular, la marca y los detalles del fondo. */
  --color-brand-1: #1e3a8a; /* azul profundo */
  --color-brand-2: #2563eb; /* azul eléctrico */
  --color-brand-3: #3b82f6; /* cobalt pop */
  --color-brand-4: #0ea5e9; /* celeste */
  --color-brand-5: #06b6d4; /* cian */
  /* Luces del fondo: triada armónica (tonos a 120°) a partir del azul de marca */
  --glow-hue-1: 221;  /* azul */
  --glow-hue-2: 341;  /* rosa */
  --glow-hue-3: 101;  /* verde lima */
  --gradient-brand: linear-gradient(90deg, var(--color-brand-1), var(--color-brand-2) 30%, var(--color-brand-4) 70%, var(--color-brand-5));
  --color-charcoal-outline: #353535;
  --color-graphite-body: #2c2c2c;
  --color-slate-helper: #797979;
  --color-iron-quiet: #585858;
  --color-ash-divider: #dedede;
  --color-fog-edge: #c7c7c7;
  --color-mist-hairline: #eeeeee;
  --color-white-canvas: #ffffff;
  --color-mint-wash: #d7ffe2;
  --color-sky-wash: #e8f1ff;
  --color-peach-wash: #ffebd6;

  /* Superficies */
  --surface-canvas: var(--color-white-canvas);
  --surface-card: var(--color-white-canvas);
  --surface-sticky-nav: var(--color-white-canvas);
  --surface-tinted-wash: var(--color-sky-wash);

  /* Familias: Plus Jakarta Sans sustituye a Basier Circle (display ≥ 31px);
     Switzer para UI y cuerpo. Fallbacks geométricos reales. */
  --font-display: "Plus Jakarta Sans", "Basier Circle", "General Sans", "Satoshi", "Avenir Next", "Avenir", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Switzer", "Inter", "Manrope", "General Sans", "Helvetica Neue", "Segoe UI", Roboto, Arial, system-ui, sans-serif;

  /* Escala tipográfica (DESIGN.md) */
  --text-caption: 10px;   --leading-caption: 1.5;     --tracking-caption: 1.4px;
  --text-body: 16px;      --leading-body: 1.5;        --tracking-body: 0px;
  --text-body-lg: 18px;   --leading-body-lg: 1.45;    --tracking-body-lg: 0px;
  --text-subheading: 20px; --leading-subheading: 1.43; --tracking-subheading: -0.26px;
  --text-heading-sm: 31px; --leading-heading-sm: 1.1;  --tracking-heading-sm: -0.4px;
  --text-heading: 44px;   --leading-heading: 1.08;    --tracking-heading: -1.15px;
  --text-heading-lg: 49px; --leading-heading-lg: 1.04; --tracking-heading-lg: -1.96px;
  --text-display: 76px;   --leading-display: 1;       --tracking-display: -4.25px;
  /* Tracking relativo (em) para tamaños fluidos: -0.056em @76px … -0.013em @16px */
  --tracking-display-em: -0.056em;
  --tracking-heading-lg-em: -0.04em;
  --tracking-heading-em: -0.026em;
  --tracking-heading-sm-em: -0.013em;
  --tracking-eyebrow: 0.14em;
  /* Plus Jakarta tiene espacios más cortos que Basier: compensamos con word-spacing */
  --display-word-spacing: 0.08em;

  /* Pesos */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-w540: 540;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Espaciado (base 4px) */
  --spacing-4: 4px;   --spacing-8: 8px;   --spacing-12: 12px; --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px; --spacing-28: 28px; --spacing-32: 32px;
  --spacing-40: 40px; --spacing-48: 48px; --spacing-56: 56px; --spacing-64: 64px;
  --spacing-80: 80px; --spacing-128: 128px; --spacing-144: 144px; --spacing-160: 160px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 16px;
  --element-gap: 16px;
  --gutter: 16px;
  --nav-height: 56px;
  --nav-offset: 12px;

  /* Radios */
  --radius-nav: 28px;
  --radius-tags: 9999px;
  --radius-cards: 24px;
  --radius-images: 24px;
  --radius-inputs: 16px;
  --radius-buttons: 28px;

  /* Sombras (máx. 8% de opacidad por capa) */
  --hairline: 0 0 0 1px oklab(0 0 0 / 0.08);
  --shadow-md: rgba(0, 0, 0, 0.03) 0px 16px 16px -8px, rgba(0, 0, 0, 0.03) 0px 10px 10px -5px, rgba(0, 0, 0, 0.03) 0px 5px 5px -2.5px, rgba(0, 0, 0, 0.03) 0px 3px 3px -1.5px, rgba(0, 0, 0, 0.03) 0px 2px 2px -1px, rgba(0, 0, 0, 0.03) 0px 1px 1px -0.5px;
  --shadow-subtle: oklab(0 0 0 / 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.03) 0px 16px 16px -8px, rgba(0, 0, 0, 0.03) 0px 10px 10px -5px, rgba(0, 0, 0, 0.03) 0px 5px 5px -2.5px, rgba(0, 0, 0, 0.03) 0px 3px 3px -1.5px, rgba(0, 0, 0, 0.03) 0px 2px 2px -1px, rgba(0, 0, 0, 0.03) 0px 1px 1px -0.5px;
  --shadow-subtle-2: oklab(0 0 0 / 0.04) 0px 0px 0px 1px, rgba(0, 0, 0, 0.03) 0px 16px 16px -8px, rgba(0, 0, 0, 0.03) 0px 10px 10px -5px, rgba(0, 0, 0, 0.03) 0px 5px 5px -2.5px, rgba(0, 0, 0, 0.03) 0px 3px 3px -1.5px, rgba(0, 0, 0, 0.03) 0px 2px 2px -1px, rgba(0, 0, 0, 0.03) 0px 1px 1px -0.5px;
  --shadow-subtle-3: oklab(0 0 0 / 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.07) 0px 20px 20px -10px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px, rgba(0, 0, 0, 0.03) 0px 5px 5px -2.5px, rgba(0, 0, 0, 0.03) 0px 3px 3px -1.5px, rgba(0, 0, 0, 0.03) 0px 2px 2px -1px, rgba(0, 0, 0, 0.03) 0px 1px 1px -0.5px;
  --shadow-subtle-4: oklab(0 0 0 / 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 10px 16px 14px 0px;
  --shadow-subtle-5: oklab(0 0 0 / 0.1) 0px 0px 0px 1px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 300ms;
  --dur-base: 500ms;
  --dur-slow: 700ms;

  /* Z-index */
  --z-collage: 0;
  --z-content: 1;
  --z-header: 50;
  --z-progress: 60;
  --z-cursor: 100;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --nav-offset: 16px; }
}

/* 2. RESET + BASE ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-height) + var(--nav-offset) * 2);
}

body {
  min-height: 100vh;
  background: var(--surface-canvas);
  color: var(--color-portrait-ink);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-feature-settings: "liga" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* el collage se corta en los bordes sin generar scroll horizontal */
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
:where(ul[role="list"]) { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--color-portrait-ink);
  outline-offset: 3px;
}

.icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* 3. TIPOGRAFÍA =========================================================== */
.display,
.hero__title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(2.5rem, 0.9rem + 7.2vw, var(--text-display));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display-em);
  word-spacing: var(--display-word-spacing);
  text-wrap: balance;
}

.heading-lg {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(var(--text-heading-sm), 1.2rem + 4vw, var(--text-heading-lg));
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg-em);
  word-spacing: var(--display-word-spacing);
}

/* Única palabra cursiva con relleno de gradiente por titular */
.gradient-text {
  font-style: italic;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.08em; /* evita que la cursiva se recorte */
}
@media (forced-colors: active) {
  .gradient-text, .hero .gradient-text { background: none; color: CanvasText; animation: none; }
}

/* 4. UTILIDADES =========================================================== */
.container {
  width: 100%;
  max-width: calc(var(--page-max-width) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: var(--spacing-8);
  left: var(--spacing-8);
  z-index: calc(var(--z-cursor) + 1);
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-buttons);
  background: var(--surface-card);
  box-shadow: var(--shadow-subtle);
  font-weight: var(--font-weight-medium);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* 4b. FONDO VIVO ==========================================================
   El canvas sigue siendo blanco: encima hay una grilla de puntos muy tenue
   (se desvanece hacia los bordes) y tres resplandores azules/celestes que
   derivan lento. Solo se anima transform; con reduced-motion queda quieto. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(8 48 76 / 0.1) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000 20%, transparent 80%);
}
.bg__light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.bg__glow {
  position: absolute;
  width: 70vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  will-change: transform;
}
.bg__glow--1 {
  top: -32vmax;
  left: -24vmax;
  background: radial-gradient(closest-side, hsl(var(--glow-hue-1) 90% 58% / 0.14), transparent);
}
.bg__glow--2 {
  top: 18vh;
  right: -34vmax;
  background: radial-gradient(closest-side, hsl(var(--glow-hue-2) 85% 65% / 0.11), transparent);
}
.bg__glow--3 {
  bottom: -40vmax;
  left: 10vw;
  background: radial-gradient(closest-side, hsl(var(--glow-hue-3) 75% 52% / 0.1), transparent);
}

/* 5. BOTONES / LINKS / CHIPS ============================================= */

/* Eyebrow / tag: pill pastel, Switzer 600 en mayúsculas con tracking 0.14em */
.eyebrow,
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  border-radius: var(--radius-tags);
  font-family: var(--font-ui);
  font-weight: var(--font-weight-semibold);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-portrait-ink);
  padding: 3px 8px;
  background: var(--color-sky-wash);
}
.eyebrow { font-size: 12px; padding: 6px 14px; }
.eyebrow--sky, .tag--sky { background: var(--color-sky-wash); }
.eyebrow--mint, .tag--mint { background: var(--color-mint-wash); }
.eyebrow--peach, .tag--peach { background: var(--color-peach-wash); }

/* Ghost text button: sin fondo ni borde (secundario) */
.ghost-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-height: 44px;
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-buttons);
  font-weight: var(--font-weight-medium);
  font-size: 14px;
  color: var(--color-portrait-ink);
  transition: background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .ghost-link:hover { background: var(--surface-tinted-wash); }
}

/* CTA primario: pill transparente con contorno de gradiente de 1.5px.
   El aro es una máscara; adentro una tira de gradiente se desplaza con transform. */
.btn-gradient {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--radius-buttons);
  background: transparent;
  color: var(--color-portrait-ink);
  font-family: var(--font-ui);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-body);
  line-height: 1;
  white-space: nowrap;
}
.btn-gradient__ring {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1.5px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.btn-gradient__ring::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 400%;
  /* gradiente de ida y vuelta: en reposo se ve exactamente el gradiente de marca */
  background: repeating-linear-gradient(90deg,
    var(--color-brand-1) 0%, var(--color-brand-2) 7.5%, var(--color-brand-4) 17.5%, var(--color-brand-5) 25%,
    var(--color-brand-4) 32.5%, var(--color-brand-2) 42.5%, var(--color-brand-1) 50%);
}
.btn-gradient__icon { transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) {
  .btn-gradient:hover .btn-gradient__icon { transform: translateY(3px); }
}
.btn-gradient:active { transform: scale(0.97); }
@media (forced-colors: active) {
  .btn-gradient { border: 1.5px solid ButtonText; }
}

/* 6. NAV ================================================================= */
.site-header {
  position: fixed;
  inset: var(--nav-offset) 0 auto;
  z-index: var(--z-header);
  display: flex;
  justify-content: center;
  padding-inline: var(--gutter);
  pointer-events: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.site-header.is-hidden { transform: translateY(calc(-100% - var(--nav-offset) - 8px)); }

.nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  height: var(--nav-height);
  padding: 0 var(--spacing-8);
  border-radius: var(--radius-nav);
  background: var(--surface-sticky-nav);
  box-shadow: var(--hairline), var(--shadow-md);
}

.nav__links { display: flex; align-items: center; gap: 0; }
@media (min-width: 768px) {
  .nav__links { gap: var(--spacing-4); }
  .nav .ghost-link { font-size: 15px; padding-inline: var(--spacing-16); }
}

/* 7. HERO + COLLAGE ====================================================== */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--nav-height) + var(--nav-offset) + var(--spacing-40)) var(--gutter) var(--spacing-64);
  overflow-x: clip; /* corta las cards en los bordes laterales, nunca abajo */
  text-align: center;
}

.hero__content {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  max-width: 900px;
}

.hero__title { margin-block: var(--spacing-4) var(--spacing-8); }
.hero__line { display: block; }

/* Cada palabra es una máscara: el contenido interno se anima desde abajo (etapa motion) */
.word {
  display: inline-block;
  overflow: clip;
  overflow-clip-margin: 0.1em;
  padding: 0.04em 0 0.1em;
  margin: -0.04em 0 -0.1em;
  vertical-align: top;
}
.word__in { display: inline-block; }
.word--italic { padding-right: 0.06em; }

/* Collage: cards Polaroid en 3D, cortadas por los bordes laterales.
   item = posición + vuelo 3D con el scroll · drift = inclinación con el mouse
   float = flotación 3D continua · polaroid = ángulo, entrada y hover */
.hero__collage {
  position: absolute;
  inset: 0;
  z-index: var(--z-collage);
  pointer-events: none;
}
/* el texto queda encima, pero deja pasar el mouse hacia las cards (salvo el CTA) */
.hero__content { pointer-events: none; }
.hero__content a { pointer-events: auto; }

.collage__item {
  --dir: -1; /* hacia dónde vuela al scrollear: impares a la izquierda, pares a la derecha */
  position: absolute;
  width: var(--w);
  left: var(--x, auto);
  right: var(--xr, auto);
  top: var(--y, auto);
  bottom: var(--yb, auto);
  perspective: 900px;
}
.collage__item:nth-child(even) { --dir: 1; }
.collage__item:hover { z-index: 2; }
.collage__drift,
.collage__float {
  transform-style: preserve-3d;
  will-change: transform;
}

.polaroid {
  position: relative;
  display: block;
  padding: 6px;
  border-radius: var(--radius-cards);
  background: var(--surface-card);
  box-shadow: var(--hairline);
  transform: rotate(var(--r));
  pointer-events: auto;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
/* Hover (desktop): la card se endereza, se acerca y muestra el nombre del proyecto */
.polaroid__label {
  position: absolute;
  left: 50%;
  bottom: 14px;
  padding: 6px 12px;
  border-radius: var(--radius-tags);
  background: var(--surface-card);
  box-shadow: var(--hairline);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .polaroid:hover {
    transform: rotate(0deg) translateZ(60px) scale(1.06);
    box-shadow: var(--shadow-subtle-3);
  }
  .polaroid:hover .polaroid__label { opacity: 1; transform: translate(-50%, 0); }
}
.polaroid img {
  width: 100%;
  aspect-ratio: var(--ar, 4 / 5);
  object-fit: cover;
  border-radius: calc(var(--radius-images) - 6px);
  background: var(--color-mist-hairline);
}

/* Mobile: 4 cards en las esquinas */
.collage__item:nth-child(n + 5) { display: none; }
.collage__item:nth-child(1) { --w: 128px; --x: -34px; --y: 13%;  --r: -6deg; --ar: 4 / 5; }
.collage__item:nth-child(2) { --w: 150px; --xr: -46px; --y: 15%; --r: 5deg;  --ar: 5 / 4; }
.collage__item:nth-child(3) { --w: 150px; --x: -40px; --yb: 7%;  --r: 4deg;  --ar: 5 / 4; }
.collage__item:nth-child(4) { --w: 124px; --xr: -30px; --yb: 4%; --r: -5deg; --ar: 4 / 5; }

@media (min-width: 768px) {
  .collage__item:nth-child(n + 5) { display: block; }
  .collage__item:nth-child(1) { --w: 190px; --x: -40px; --y: 15%;   --r: -6deg; }
  .collage__item:nth-child(2) { --w: 230px; --xr: -50px; --y: 13%;  --r: 5deg; }
  .collage__item:nth-child(3) { --w: 220px; --x: 2%;    --yb: 10%;  --r: 4deg; }
  .collage__item:nth-child(4) { --w: 180px; --xr: 3%;   --yb: 8%;   --r: -4deg; }
  .collage__item:nth-child(5) { --w: 170px; --x: 26%;   --yb: 3%;   --r: -3deg; --ar: 5 / 4; }
  .collage__item:nth-child(6) { --w: 150px; --xr: 30%;  --yb: 2%;   --r: 6deg;  --ar: 5 / 4; }
}

@media (min-width: 1024px) {
  .collage__item:nth-child(1) { --w: 220px; --x: -3%;  --y: 14%; }
  .collage__item:nth-child(2) { --w: 260px; --xr: -3%; --y: 12%; }
  .collage__item:nth-child(3) { --w: 250px; --x: 7%;   --yb: 9%; }
  .collage__item:nth-child(4) { --w: 210px; --xr: 8%;  --yb: 7%; }
  .collage__item:nth-child(5) { --w: 200px; --x: 27%;  --yb: 3%; }
  .collage__item:nth-child(6) { --w: 180px; --xr: 25%; --yb: 4%; }
}

/* 8. PROYECTOS ============================================================
   Mobile/tablet: carrusel nativo con scroll-snap, la card centrada se destaca.
   Desktop (puntero fino ≥ 1024px): fila tipo acordeón, card activa ancha.
   Con GSAP (etapa motion) la sección se fija (pin) y el scroll mueve el track. */
.projects {
  --card-w: min(78vw, 320px);
  --card-ar: 3 / 4;
  position: relative;
  padding-top: var(--section-gap);
}

.projects__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-24);
}

.projects__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.projects__count {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.025em;
  color: var(--color-iron-quiet);
  white-space: nowrap;
}
.projects__count span:first-child { color: var(--color-portrait-ink); }

.projects__arrows { display: none; gap: var(--spacing-4); }
@media (hover: hover) and (pointer: fine) {
  .js .projects__arrows { display: flex; }
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-tags);
  color: var(--color-portrait-ink);
  transition: background-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--surface-tinted-wash); }
.icon-btn:disabled { opacity: 0.35; cursor: default; background: none; }

.projects__noscript { padding-block: var(--spacing-24); }

/* Filtro: grupo de pills; el fondo del activo aparece con opacity + scale */
.projects__filters { margin-bottom: var(--spacing-8); }
.filters {
  display: flex;
  gap: var(--spacing-4);
  width: max-content;
  max-width: 100%;
  padding: var(--spacing-4);
  border-radius: var(--radius-tags);
  background: var(--surface-card);
  box-shadow: var(--hairline);
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.filters::-webkit-scrollbar { display: none; }

.filter {
  position: relative;
  isolation: isolate;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: var(--radius-tags);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-iron-quiet);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.filter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--surface-tinted-wash);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.filter[aria-pressed="true"] { color: var(--color-portrait-ink); }
.filter[aria-pressed="true"]::before { opacity: 1; transform: none; }
@media (hover: hover) {
  .filter:hover { color: var(--color-portrait-ink); }
  .filter:hover:not([aria-pressed="true"])::before { opacity: 0.5; transform: scale(0.94); }
}
.filter:active::before { transform: scale(0.94); }
.filter:focus-visible { outline-offset: -2px; }
/* Pantallas chicas: más compacto y sin contadores para que entren las 4 opciones */
@media (max-width: 419px) {
  .filters { gap: 0; }
  .filter { padding: 8px 10px; font-size: 13px; }
  .filter__count { display: none; }
}
.filter__count {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* Viewport = scroller horizontal nativo */
.projects__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: var(--spacing-16) var(--spacing-48);
}
.projects__viewport::-webkit-scrollbar { display: none; }

.projects__track {
  display: flex;
  gap: var(--element-gap);
  width: max-content;
  /* padding lateral para que la primera y la última card puedan centrarse */
  padding-inline: max(var(--gutter), calc(50vw - var(--card-w) / 2));
}

/* Card ------------------------------------------------------------------ */
.card {
  position: relative;
  flex: none;
  width: var(--card-w);
  scroll-snap-align: center;
  transition: transform var(--dur-slow) var(--ease-out);
}

.card__link {
  position: relative;
  display: block;
  height: 100%;
  border-radius: var(--radius-cards);
  transition: transform var(--dur-base) var(--ease-out);
}
/* sombra elevada en una capa aparte: se anima solo su opacidad */
.card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-subtle-3);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.card__frame {
  position: relative;
  height: 100%;
  aspect-ratio: var(--card-ar);
  overflow: hidden;
  border-radius: inherit;
  background: var(--color-mist-hairline);
  box-shadow: var(--shadow-subtle-2);
  isolation: isolate;
}
/* velo para atenuar las cards no activas (solo la imagen, no el texto) */
.card__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgb(255 255 255 / 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.card__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.card__index {
  position: absolute;
  z-index: 1;
  top: var(--spacing-12);
  left: var(--spacing-12);
  padding: 4px 10px;
  border-radius: var(--radius-tags);
  background: var(--surface-card);
  box-shadow: var(--hairline);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.025em;
}

.card__body {
  position: absolute;
  z-index: 1;
  left: var(--spacing-12);
  right: var(--spacing-12);
  bottom: var(--spacing-12);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-8) var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-12) var(--spacing-12) var(--card-padding);
  border-radius: var(--radius-inputs);
  background: var(--surface-card);
  box-shadow: var(--hairline);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.card__body .tag { justify-self: start; grid-column: 1; }

.card__title {
  grid-column: 1;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-wrap: balance;
}

.card__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-tags);
  background: var(--surface-tinted-wash);
  overflow: hidden;
}
.card__arrow .icon { transition: transform var(--dur-base) var(--ease-out); }

/* Interacción: hover (desktop) y :active (touch) */
@media (hover: hover) {
  .card__link:hover { transform: translateY(-6px); }
  .card__link:hover::before { opacity: 1; }
  .card__link:hover .card__img { transform: scale(1.05); }
  .card__link:hover .card__arrow .icon { transform: translate(3px, -3px); }
}
.card__link:active { transform: scale(0.98); }
.card__link:active .card__arrow .icon { transform: translate(3px, -3px); }
.card__link:focus-visible { outline-offset: 4px; }
.card__link:focus-visible .card__arrow .icon { transform: translate(3px, -3px); }

/* Carrusel (JS activo): la card centrada se destaca, el resto se reduce un poco */
.js .projects:not(.is-accordion) .card:not(.is-active) { transform: scale(0.92); }
.js .projects:not(.is-accordion) .card:not(.is-active) .card__frame::after { opacity: 1; }

@media (min-width: 768px) {
  .projects { --card-w: 340px; }
}

/* Desktop: acordeón. La card activa es ancha y las demás angostas.
   Se expande con hover/foco; sin hover manda la activa (scroll o flechas).
   Nota: el ancho (flex-basis) es la única propiedad no-transform animada, a propósito:
   la imagen tiene ancho fijo y solo se recorta, así que no hay re-decode ni reflow pesado. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .projects {
    --card-h: min(56vh, 520px);
    --card-wide: min(50vw, 640px);
    --card-narrow: 128px;
  }
  .projects__head { margin-bottom: var(--spacing-20); }
  .projects__viewport { scroll-snap-type: none; padding-block: var(--spacing-16) var(--spacing-56); }
  .projects__track {
    height: calc(var(--card-h) + 0px);
    padding-inline: max(var(--gutter), calc((100vw - var(--page-max-width)) / 2));
    gap: var(--element-gap);
  }

  .card {
    width: auto;
    height: 100%;
    flex: 0 0 var(--card-narrow);
    transition: flex-basis var(--dur-slow) var(--ease-out);
  }
  .card__frame { aspect-ratio: auto; }

  /* imagen con ancho fijo (el de la card abierta), centrada: al cerrarse solo se recorta */
  .card__img {
    width: var(--card-wide);
    left: 50%;
    transform: translateX(-50%);
  }
  .card__link:hover .card__img { transform: translateX(-50%) scale(1.05); }

  .card__body { opacity: 0; transform: translateY(12px); pointer-events: none; }

  .card.is-open { flex-basis: var(--card-wide); }
  .card.is-open .card__body { opacity: 1; transform: none; transition-delay: 150ms; }
  .card:not(.is-open) .card__frame::after { opacity: 1; }
}

/* Pin (desktop + GSAP): el viewport deja de scrollear y el track se mueve con transform */
.projects.is-pinned .projects__pin {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--nav-height) + var(--nav-offset));
}
.projects.is-pinned .projects__viewport { overflow-x: clip; overflow-y: visible; }
.projects.is-pinned .projects__track { will-change: transform; }

/* 9. CONTACTO + FOOTER =================================================== */
.contact {
  padding-block: var(--section-gap);
}
@media (min-width: 768px) {
  .contact { padding-top: var(--spacing-128); }
}
.contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  text-align: center;
}
.contact__title { text-wrap: balance; }
.contact__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-12) var(--spacing-4);
  margin-top: var(--spacing-24); /* espacio para el globito "Copiado" */
}
.contact__links li:first-child { margin-right: var(--spacing-8); }
/* Email: se muestra completo y se copia al tocarlo */
.contact__email { position: relative; }
.email-copy { gap: 10px; padding-inline: 18px 14px; cursor: copy; }
.email-copy__text { font-weight: var(--font-weight-medium); letter-spacing: 0.005em; }
.email-copy__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-tags);
  background: var(--surface-tinted-wash);
}
.email-copy__icon .icon { position: absolute; width: 16px; height: 16px; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.email-copy__icon .icon--check { opacity: 0; transform: scale(0.5); }
.email-copy.is-copied .icon--copy { opacity: 0; transform: scale(0.5); }
.email-copy.is-copied .icon--check { opacity: 1; transform: none; }
/* Globito: "Copiar" en hover/foco, "¡Copiado!" al copiar */
.email-copy__tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  padding: 6px 12px;
  border-radius: var(--radius-tags);
  background: var(--color-portrait-ink);
  color: var(--color-white-canvas);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .email-copy:hover .email-copy__tip { opacity: 1; transform: translate(-50%, 0); }
}
.email-copy:focus-visible .email-copy__tip,
.email-copy.is-copied .email-copy__tip,
.email-copy.is-tip .email-copy__tip { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 380px) {
  .email-copy { gap: 8px; padding-inline: 14px 10px; font-size: 15px; }
}

.ghost-link--arrow { gap: var(--spacing-4); padding-inline: 10px; font-size: 15px; }
@media (min-width: 768px) {
  .ghost-link--arrow { padding-inline: var(--spacing-16); font-size: var(--text-body); }
}
.ghost-link--arrow .icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) {
  .ghost-link--arrow:hover .icon { transform: translate(2px, -2px); }
}

.site-footer {
  padding-block: var(--spacing-24) var(--spacing-32);
  font-size: 14px;
  color: var(--color-iron-quiet);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8) var(--spacing-16);
}

/* Galería modal ---------------------------------------------------------- */
.gallery {
  width: min(100% - var(--gutter) * 2, 1100px);
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-cards);
  background: var(--surface-card);
  color: var(--color-portrait-ink);
  box-shadow: var(--shadow-subtle-3);
  overflow: hidden;
}
.gallery::backdrop { background: rgb(255 255 255 / 0.86); }
html:has(.gallery[open]) { overflow: hidden; }

.gallery__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-12) var(--spacing-12) var(--spacing-20);
}
.gallery__title { font-size: var(--text-subheading); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-subheading); }
.gallery__count {
  margin-right: auto;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--color-iron-quiet);
}

.gallery__track {
  display: flex;
  /* alto fijo: cada imagen se ve a todo el ancho y, si es alta, se scrollea hacia abajo */
  height: calc(100dvh - 32px - 132px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline-offset: -3px; }
.gallery__slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-inline: var(--spacing-12);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-align: center;
  scrollbar-width: thin;
}
.gallery__slide img {
  width: 100%;
  height: auto;
  margin-block: auto; /* centra las imágenes bajas sin cortar el inicio de las altas */
  border-radius: calc(var(--radius-cards) - 8px);
  background: var(--color-mist-hairline);
}

.gallery__nav {
  display: flex;
  justify-content: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) 0 var(--spacing-12);
}


/* Intro de marca (solo con html.has-intro: primera visita y sin reduced-motion) */
.intro { display: none; }
.has-intro { --intro-delay: 1250ms; }
.has-intro .intro {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-cursor) + 10);
  display: grid;
  place-items: center;
  background: var(--color-portrait-ink);
  /* borde inferior curvo: se nota la "cortina" al subir */
  border-radius: 0 0 50% 50% / 0 0 14vh 14vh;
  animation: intro-curtain 900ms cubic-bezier(0.76, 0, 0.24, 1) 1000ms forwards;
}
.intro__logo {
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(88px, 22vw, 160px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-white-canvas);
  animation: intro-logo-out 500ms var(--ease-out) 900ms forwards;
}
.intro__mask { display: inline-block; overflow: clip; padding-block: 0.06em; }
.intro__r { display: inline-block; animation: intro-r 700ms var(--ease-out) 100ms both; }
.intro__dot {
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.04em;
  border-radius: 50%;
  background: var(--color-brand-4);
  animation: intro-dot 550ms cubic-bezier(0.34, 1.56, 0.64, 1) 450ms both;
}
@keyframes intro-r { from { transform: translateY(105%); } }
@keyframes intro-dot { from { transform: scale(0); } }
@keyframes intro-logo-out { to { transform: translateY(-40px); opacity: 0; } }
@keyframes intro-curtain { to { transform: translateY(-110%); visibility: hidden; } }

/* 10. MOTION =============================================================
   Todo anima solo transform/opacity. Con prefers-reduced-motion: reduce,
   no corre nada y todo queda visible en su estado final. */

/* Barra de progreso de scroll */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-progress);
  height: 2px;
  pointer-events: none;
}
.scroll-progress__bar {
  display: block;
  height: 100%;
  background: var(--color-portrait-ink);
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
}
@supports (animation-timeline: scroll()) {
  .scroll-progress__bar {
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Burbuja "Ver" sobre las cards (solo puntero fino; la crea main.js).
   El cursor nativo no se oculta nunca. */
.cursor-bubble {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 14px 0 0 14px; /* al costado del puntero, sin taparlo */
  border-radius: 50%;
  background: var(--color-portrait-ink);
  color: var(--color-white-canvas);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.025em;
  pointer-events: none;
  will-change: transform;
  opacity: 0;
  scale: 0.4;
  transition: opacity var(--dur-fast) var(--ease-out), scale var(--dur-base) var(--ease-out);
}
.cursor-bubble.is-visible { opacity: 1; scale: 1; }

/* Botones magnéticos: usan la propiedad `translate` (se suma al transform propio) */
[data-magnetic] { transition: translate var(--dur-base) var(--ease-out); }
[data-magnetic].is-magnet { transition-duration: 120ms; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Borde con gradiente animado del CTA */
  .btn-gradient__ring::before { animation: ring-flow 7s linear infinite; }

  /* Entrada del hero: palabras con máscara, luego eyebrow, CTA y collage escalonado */
  .word__in { animation: word-in var(--dur-slow) var(--ease-out) calc(var(--intro-delay, 0ms) + 160ms + var(--wi, 0) * 80ms) both; }
  .hero__cta { animation: fade-up var(--dur-slow) var(--ease-out) calc(var(--intro-delay, 0ms) + 560ms) both; }
  /* fill "backwards": al terminar vuelve al estilo base, así el hover puede enderezar la card */
  .polaroid { animation: polaroid-in 900ms var(--ease-out) calc(var(--intro-delay, 0ms) + 300ms + var(--i, 0) * 90ms) backwards; }

  /* Flotación 3D continua (celular y desktop): cada card con su propio ritmo */
  .collage__float { animation: card-float calc(6s + var(--i, 0) * 0.7s) ease-in-out calc(var(--i, 0) * -1.3s) infinite alternate; }

  /* Brillo que recorre RIVUZ cada pocos segundos (después de la entrada) */
  .hero .gradient-text {
    background-image: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.85) 50%, transparent 62%), var(--gradient-brand);
    background-size: 250% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 160% 0, 0 0;
    animation:
      word-in var(--dur-slow) var(--ease-out) calc(var(--intro-delay, 0ms) + 400ms) both,
      shine 5.5s ease-in-out calc(var(--intro-delay, 0ms) + 1.6s) infinite;
  }

}

@media (prefers-reduced-motion: no-preference) {
  .bg__glow--1 { animation: glow-drift-1 28s ease-in-out infinite alternate; }
  .bg__glow--2 { animation: glow-drift-2 34s ease-in-out infinite alternate; }
  .bg__glow--3 { animation: glow-drift-3 40s ease-in-out infinite alternate; }
}
@keyframes glow-drift-1 { to { transform: translate3d(18vw, 14vh, 0) scale(1.15); } }
@keyframes glow-drift-2 { to { transform: translate3d(-16vw, 20vh, 0) scale(0.9); } }
@keyframes glow-drift-3 { to { transform: translate3d(14vw, -22vh, 0) scale(1.1); } }

@keyframes ring-flow { to { transform: translateX(-50%); } }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes word-in {
  from { transform: translateY(110%) rotate(4deg); }
  to { transform: none; }
}
@keyframes card-float {
  from { transform: translate3d(0, 6px, 0) rotateX(0deg) rotateY(0deg); }
  to { transform: translate3d(0, -10px, 30px) rotateX(7deg) rotateY(calc(var(--dir, 1) * -9deg)); }
}
/* El reflejo cruza en el primer tramo y después espera */
@keyframes shine {
  0% { background-position: 160% 0, 0 0; }
  28%, 100% { background-position: -60% 0, 0 0; }
}
/* Las cards llegan más inclinadas y se enderezan hasta su ángulo final */
@keyframes polaroid-in {
  from { opacity: 0; transform: translateY(48px) rotate(calc(var(--r) * 2.6)) scale(0.88); }
  to { opacity: 1; transform: rotate(var(--r)); }
}

/* Parallax de scroll del collage (CSS scroll-driven; fallback JS en main.js) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .collage__item {
      animation: collage-flyout linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 85vh;
    }
    .hero__content {
      animation: hero-recede linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 85vh;
    }
  }
}
/* Al bajar, las cards "salen volando" hacia su costado y hacia la cámara */
@keyframes collage-flyout {
  to {
    transform:
      translate3d(calc(var(--dir) * (12vw + var(--depth, 0.5) * 18vw)), calc(var(--depth, 0.5) * -200px), 0)
      rotate(calc(var(--dir) * 10deg))
      scale(calc(1.15 + var(--depth, 0.5) * 0.35));
    opacity: 0;
  }
}
@keyframes hero-recede {
  to { transform: translate3d(0, 60px, 0) scale(0.94); opacity: 0; }
}

/* Revelado al scroll: fade + translate + leve scale, con stagger (--i).
   CSS view-timeline donde hay soporte; si no, IntersectionObserver (.reveal-io). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry calc(var(--i, 0) * 8%) entry calc(70% + var(--i, 0) * 8%);
    }
  }
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(32px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .reveal-io [data-reveal] {
    opacity: 0;
    transform: translateY(32px) scale(0.97);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .reveal-io [data-reveal].is-in { opacity: 1; transform: none; }
}

/* Reduced motion: sin animaciones ni transiciones de movimiento, todo visible */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}