/* ==========================================================================
   Matías Gonzalo — styles
   Estructura: 1. Tokens  2. Base  3. Utilidades  4. Componentes
   Para cambiar el look global, tocá solo los tokens (:root).
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* Colores */
  --color-bg: #000;
  --color-surface: #171717;
  --color-text: #fff;
  --color-text-inverse: #000;
  --color-border: #575757;
  /* Resplandor azul del fondo: tres tonos base (claro → medio → oscuro). Un proyecto los reemplaza con su propio color (ver data/projects.js) */
  --glow-light: #62b0fa;
  --glow-mid: #06338f;
  --glow-dark: #02145e;
  --color-band: #02145e;                         /* banda de marcas en About */

  /* Tipografía */
  --font-display: "Stack Sans Headline", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-display: 1.3;
  --fs-display: clamp(3rem, 8.89vw, 8rem);       /* 128px: Visual / Designer / Menú */
  --fs-title: clamp(1.75rem, 4.44vw, 4rem);      /* 64px: títulos de sección y contacto */
  --fs-body-lg: clamp(1.125rem, 2.22vw, 2rem);   /* 32px: footer */
  --fs-meta: 1.25rem;                            /* 20px: datos del proyecto (año, categoría, cliente) */
  --fs-label: 1rem;                              /* 16px: texto del cursor */
  --fs-caption: 0.75rem;                         /* 12px: ES / EN y descripciones */
  --fs-xl: clamp(1.5rem, 5vw, 2.25rem);          /* 36px: título de la banda de marcas */
  --fs-lg: 1.5rem;                               /* 24px: títulos de tarjeta, nombres */
  --fs-paragraph: 1rem;                          /* 16px: párrafos (descripciones, créditos, about) */
  --lh-paragraph: 1.5;                           /* interlineado de párrafos */
  --fs-text: clamp(1.125rem, 1.67vw, 1.5rem);    /* 24px: texto corrido */

  /* Espaciado (escala única) */
  --space-xs: 0.625rem;                           /* 10px: separación ícono–texto */
  --space-sm: 1rem;                              /* 16px */
  --space-ms: 1.25rem;                           /* 20px */
  --space-md: 2rem;                              /* 32px: gutters, padding, gaps */
  --space-lg: 5rem;                              /* 80px: separación entre bloques */
  --section-gap: 4rem;                           /* 64px: entre secciones y título → contenido */
  --space-xl: clamp(6rem, 12.8vw, 11.5rem);      /* ~184px: aire de la sección de contacto */
  --space-xxl: 7.5rem;                           /* 120px: aire de "Ver siguiente" */
  --space-section: 6.25rem;                      /* 100px: entre secciones de About */
  --space-heading: 3.125rem;                     /* 50px: título → contenido en About */

  /* Bordes */
  --radius-lg: 2rem;                             /* 32px: tarjetas y superficies */
  --radius-md: 1rem;                             /* 16px: tarjetas de About */
  --radius-pill: 999px;

  /* Layout */
  --gap-actions: 3rem;                           /* switch de idioma ↔ botón de menú */
  --content-width: 81rem;                        /* 1296px: ancho de Knowledge y Work Experience */
  --card-ratio: 909 / 724.5;                     /* proporción de las tarjetas de proyecto */

  /* Hover de proyectos */
  --overlay-opacity: 0.2;                        /* 20% de negro */
  --card-blur: 16px;
  /* Fade del borde superior (blur progresivo + oscurecimiento al scrollear) */
  --top-fade-height: clamp(7rem, 12.2vw, 11rem); /* 176px */
  --hero-pt: clamp(5.5rem, 6.9vw, 6.5rem);       /* ~100px: espacio superior de todas las heros */
  --top-fade-tint: 0.6;

  /* Switch de idioma */
  --switch-w: 79px;
  --switch-h: 36px;
  --switch-pad: 4px;
  --switch-thumb-w: 39px;

  /* Logo (proporciones del SVG: M + guion ocupan 15.86% del ancho y 59.91% del alto) */
  --logo-width: 114px;
  --logo-ratio: 0.3377;
  --logo-crop-w: 0.1586;
  --logo-crop-h: 0.5991;
  --logo-scale-compact: 2;                       /* tamaño de la M al hacer scroll */

  /* Ruido de fondo */
  --noise-opacity: 0.1;
  --noise-size: 200px;
  --noise-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Movimiento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.25s;
  --duration-base: 0.6s;
  --float-distance: 14px;

  /* Cursor */
  --cursor-size: 32px;
  --cursor-size-active: 110px;
  --cursor-border: 2px;

  /* Capas */
  --z-menu: 90;
  --z-header: 100;
  --z-cursor: 1000;
}

/* 2. BASE ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html.is-menu-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, p, figure { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: var(--cursor-border) solid var(--color-text);
  outline-offset: 4px;
}

/* Con cursor personalizado se oculta el nativo (solo si el JS lo activó) */
html.has-custom-cursor,
html.has-custom-cursor * { cursor: none !important; }

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

.section-title {
  font-size: var(--fs-title);
  text-align: center;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

.pre-line { white-space: pre-line; } /* respeta los \n de los textos traducidos */

/* Capa con parallax: el JS solo setea --tx, --ty, --rx, --ry */
[data-depth] {
  transform:
    translate3d(var(--tx, 0px), calc(var(--offset-y, 0px) + var(--ty, 0px)), 0)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
  will-change: transform;
}

/* Resplandor azul (Hero arriba, Menú abajo) */
.glow {
  /* La rampa vive acá (y no en :root) para que un contenedor pueda cambiar --glow-light/mid/dark.
     Los tonos intermedios se interpolan, como en el degradado original de la Home. */
  --glow-ramp:
    var(--glow-light) 0%,
    color-mix(in srgb, var(--glow-mid) 25%, var(--glow-light)) 8%,
    color-mix(in srgb, var(--glow-mid) 50%, var(--glow-light)) 16%,
    color-mix(in srgb, var(--glow-mid) 75%, var(--glow-light)) 26%,
    color-mix(in srgb, var(--glow-mid) 87.5%, var(--glow-light)) 32%,
    var(--glow-mid) 40%,
    color-mix(in srgb, var(--glow-dark) 50%, var(--glow-mid)) 58%,
    var(--glow-dark) 76%,
    transparent 100%;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 79% 88% at 50% var(--glow-origin), var(--glow-ramp));
}
.glow--top { --glow-origin: -12%; }
.glow--bottom { --glow-origin: 112%; }

/* Ruido (grano) de fondo: agregar class="noise" al contenedor.
   --noise-z controla la capa; el contenido del contenedor debe quedar por encima. */
.noise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--noise-z, 1);
  background-image: var(--noise-image);
  background-size: var(--noise-size);
  opacity: var(--noise-opacity);
  border-radius: inherit;
  pointer-events: none;
}

/* 4. COMPONENTES ----------------------------------------------------------- */

/* --- Header --- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
}

/* Logo: completo arriba de todo; al hacer scroll (.is-compact) queda solo la M + guion al 200% */
.logo {
  display: block;
  width: var(--logo-width);
  height: calc(var(--logo-width) * var(--logo-ratio));
  overflow: hidden;
  transition:
    width var(--duration-base) var(--ease-out),
    height var(--duration-base) var(--ease-out);
}
.logo__svg {
  display: block;
  width: var(--logo-width);
  height: auto;
  fill: currentColor;
  transform-origin: 0 0;
  transition: transform var(--duration-base) var(--ease-out);
}
.logo__rest {
  transform-box: fill-box;
  transition:
    opacity var(--duration-fast),
    transform var(--duration-base) var(--ease-out);
}
.site-header.is-compact .logo {
  width: calc(var(--logo-width) * var(--logo-crop-w) * var(--logo-scale-compact));
  height: calc(var(--logo-width) * var(--logo-ratio) * var(--logo-crop-h) * var(--logo-scale-compact));
}
.site-header.is-compact .logo__svg { transform: scale(var(--logo-scale-compact)); }
.site-header.is-compact .logo__rest {
  opacity: 0;
  transform: translateX(-24px);
}

.menu-toggle {
  display: grid;
  gap: var(--space-xs);
  width: 40px;
  padding: 0;
  border: 0;
  background: none;
}
.menu-toggle__bar {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--color-text);
  transition: transform var(--duration-base) var(--ease-out);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-child  { transform: translateY(-7px) rotate(-45deg); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--gap-actions);
}

/* Título al centro del header: aparece al scrollear (lo completa project.js) */
.site-header__title {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 40%;
  overflow: hidden;
  transform: translate(-50%, calc(-50% + 0.75rem));
  font-size: var(--fs-body-lg);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}
.site-header.is-title-visible .site-header__title {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* --- Fade superior: el contenido se difumina y oscurece de más a menos al pasar bajo el header ---
   Son capas con blur creciente, cada una enmascarada hasta una altura distinta (blur progresivo). */
.top-fade {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;                                   /* detrás del logo y los botones, encima del contenido */
  height: var(--top-fade-height);
  pointer-events: none;
}
.top-fade__layer {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--solid), transparent var(--end));
  mask-image: linear-gradient(to bottom, #000 var(--solid), transparent var(--end));
}
.top-fade__layer { opacity: 0; transition: opacity var(--duration-base) var(--ease-out); }   /* en scroll 0 el contenido se ve nítido */
.site-header.is-compact .top-fade__layer { opacity: 1; }
.top-fade__layer:nth-child(1) { --blur: 1px;  --solid: 55%; --end: 100%; }
.top-fade__layer:nth-child(2) { --blur: 3px;  --solid: 35%; --end: 80%; }
.top-fade__layer:nth-child(3) { --blur: 6px;  --solid: 20%; --end: 60%; }
.top-fade__layer:nth-child(4) { --blur: 12px; --solid: 0%;  --end: 40%; }

/* El oscurecimiento aparece al scrollear, para no apagar el resplandor del hero en el top */
.top-fade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / var(--top-fade-tint)), transparent);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}
.site-header.is-compact .top-fade::after { opacity: 1; }

/* --- Switch de idioma (EN / ES) --- */
.lang-switch {
  position: relative;
  flex: none;
  width: var(--switch-w);
  height: var(--switch-h);
  padding: 0;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-pill);
  background: none;
  font-size: var(--fs-caption);
  line-height: 1;
}
.lang-switch__thumb {
  position: absolute;
  top: calc(var(--switch-pad) - 1px);
  left: calc(var(--switch-pad) - 1px);
  width: var(--switch-thumb-w);
  height: calc(var(--switch-h) - var(--switch-pad) * 2);
  border-radius: inherit;
  background: var(--color-text);
  transition: transform var(--duration-base) var(--ease-out);
}
.lang-switch[data-lang="es"] .lang-switch__thumb {
  transform: translateX(calc(var(--switch-w) - var(--switch-pad) * 2 - var(--switch-thumb-w)));
}
.lang-switch__option {
  position: absolute;
  top: 0;
  bottom: 0;
  display: grid;
  width: var(--switch-thumb-w);
  place-items: center;
  color: var(--color-text);
  pointer-events: none;
  transition: color var(--duration-fast);
}
.lang-switch__option--en { left: calc(var(--switch-pad) - 1px); }
.lang-switch__option--es { right: calc(var(--switch-pad) - 1px); }
.lang-switch[data-lang="en"] .lang-switch__option--en,
.lang-switch[data-lang="es"] .lang-switch__option--es { color: var(--color-text-inverse); }

/* --- Cursor personalizado --- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast);
}
.cursor.is-visible { opacity: 1; }

.cursor__ring {
  display: grid;
  place-items: center;
  width: var(--cursor-size);
  height: var(--cursor-size);
  border: var(--cursor-border) solid var(--color-text);
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  transition:
    width var(--duration-base) var(--ease-out),
    height var(--duration-base) var(--ease-out),
    background-color var(--duration-fast),
    transform var(--duration-fast);
}
.cursor.is-active .cursor__ring {
  width: var(--cursor-size-active);
  height: var(--cursor-size-active);
  background: var(--color-text);
}
.cursor.is-compact.is-active .cursor__ring { width: 2.75rem; height: 2.75rem; background: transparent; }   /* controles pequeños (idioma): no tapa el botón */
.cursor.is-compact .cursor__label { display: none; }
.cursor.is-pressed .cursor__ring { transform: translate(-50%, -50%) scale(0.9); }

.cursor__badge {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cursor-badge-size, 9rem);
  height: var(--cursor-badge-size, 9rem);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transition: opacity var(--duration-fast), transform var(--duration-base) var(--ease-out);
}
.cursor__badge img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 0.5rem rgb(0 0 0 / 0.55));
  animation: badge-spin 14s linear infinite;   /* sentido antihorario */
}
@keyframes badge-spin { to { transform: rotate(-360deg); } }
.cursor.is-badge .cursor__badge { opacity: 1; transform: translate(-50%, -50%); }
.cursor.is-badge .cursor__ring { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
.cursor.is-badge.is-pressed .cursor__badge { transform: translate(-50%, -50%) scale(0.92); }
@media (prefers-reduced-motion: reduce) { .cursor__badge img { animation: none; } }

.cursor__label {
  font-size: var(--fs-label);
  color: var(--color-text-inverse);
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--duration-fast), transform var(--duration-base) var(--ease-out);
}
.cursor.is-active .cursor__label {
  opacity: 1;
  transform: none;
  transition-delay: 0.08s;
}

/* --- Hero --- */
/* Cover fijo: queda pegado arriba mientras la sección .surface lo tapa al scrollear */
.hero {
  display: grid;
  place-items: center;
  height: 100svh;
  min-height: 34rem;
}

/* ── Cover: el hero de CADA página queda fijo y el contenido se desliza por encima ──
   Se activa con el atributo data-cover. js/scroll.js setea --cover-progress (0 → 1)
   a medida que el contenido lo tapa, y ajusta "top" si el hero es más alto que la pantalla. */
[data-cover] {
  position: sticky;
  top: 0;
  overflow: hidden;
}
[data-cover]::after {                            /* oscurecimiento progresivo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--color-bg);
  opacity: var(--cover-progress, 0);
  pointer-events: none;
}
[data-cover] ~ * {                               /* todo lo que viene después se apila por encima */
  position: relative;
  z-index: 1;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(calc(var(--float-distance) * -1)) rotate(1deg); }
}

/* --- Meta: año · categorías (subrayadas) · cliente --- */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs) var(--space-md);
  font-size: var(--fs-meta);
}
.meta li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.meta__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.meta__tag {
  text-decoration: underline;
  text-underline-position: from-font;
}

/* --- Surface (Projects + Contact) --- */
.surface {
  --noise-z: 0;
  position: relative;
  z-index: 1; /* se superpone al cover */
  background: var(--color-surface);
  border-radius: var(--radius-lg);
}
.surface > * { position: relative; }
.surface--padded { padding: var(--space-section) var(--space-md); }
.surface--overlap { margin-top: calc(var(--radius-lg) * -1); } /* se superpone al bloque anterior */

.projects { padding: var(--space-lg) var(--space-md) 0; }

.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.project-card {
  position: relative;
  container-type: inline-size; /* permite escalar el título según el ancho de la tarjeta */
  overflow: hidden;
  aspect-ratio: var(--card-ratio);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.project-card__link {
  position: absolute;
  inset: 0;
  display: block;
}
.project-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-out);
}
.project-card__link:hover .project-card__img { transform: scale(1.04); }

/* Hover: capa con blur + 20% de negro y los datos del proyecto centrados */
.project-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: rgb(0 0 0 / var(--overlay-opacity));
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
  text-align: center;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}
.project-card__link:hover .project-card__overlay,
.project-card__link:focus-visible .project-card__overlay { opacity: 1; }

.project-card__title {
  margin: 0;
  font-size: clamp(1.5rem, 9cqi, var(--fs-title));
  transform: translateY(0.75rem);
  transition: transform var(--duration-base) var(--ease-out);
}
/* La meta de las tarjetas hereda el layout de .meta y solo suma la animación de entrada */
.project-card__meta {
  transform: translateY(0.75rem);
  transition: transform var(--duration-base) var(--ease-out);
}
.project-card__link:hover .project-card__title,
.project-card__link:hover .project-card__meta,
.project-card__link:focus-visible .project-card__title,
.project-card__link:focus-visible .project-card__meta { transform: none; }

/* Táctil (sin hover): el nombre queda visible abajo, sin blur */
@media (hover: none) {
  .project-card__overlay {
    align-items: flex-start;
    justify-content: flex-end;
    background: linear-gradient(to top, rgb(0 0 0 / 0.6), transparent 55%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-align: left;
    opacity: 1;
  }
  .project-card__title {
    font-size: var(--fs-body-lg);
    transform: none;
  }
  .project-card__meta { display: none; }
}

/* --- Contact --- */
.contact {
  display: grid;
  justify-items: center;
  padding: var(--space-xl) var(--space-md);
  overflow-wrap: anywhere;
}
.contact__mail {
  text-decoration: underline;
  text-underline-position: from-font;
}

/* --- Footer --- */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  font-size: var(--fs-body-lg);
}
.site-footer__social {
  display: flex;
  gap: var(--space-md);
}

/* --- Menu overlay --- */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-base) var(--ease-out),
    visibility 0s linear var(--duration-base);
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.menu__nav { position: relative; z-index: 2; }
.menu__list { text-align: center; }
.menu__link {
  display: inline-block;
  font-size: var(--fs-display);
  white-space: nowrap;
  transition: opacity var(--duration-fast);
}
.menu.is-open .menu__link {
  animation: menu-link-in var(--duration-base) var(--ease-out) calc(var(--i, 0) * 70ms) backwards;
}
.menu.is-open .menu__list:hover .menu__link:not(:hover) { opacity: 0.35; }

@keyframes menu-link-in {
  from { opacity: 0; transform: translateY(2.5rem); }
}

/* --- Proyecto --- */
.project-hero {
  display: grid;
  justify-items: center;
  padding: var(--hero-pt) var(--space-md) var(--section-gap);
  text-align: center;
}
.project-hero > :not(.glow) { position: relative; z-index: 2; }
.project-hero__title {
  max-width: 100%;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.project-hero__description {
  max-width: 40.125rem;                          /* 642px */
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-paragraph);
  font-weight: var(--fw-regular);
  line-height: var(--lh-paragraph);
  white-space: pre-line;
}
.project-hero .meta { margin-top: var(--section-gap); }

/* Parallax al ocultarse: cada capa sube a distinta velocidad (menos que el contenido que la tapa).
   --cover-progress (0 → 1) llega desde [data-cover]. */
.project-hero__title,
.project-hero__description,
.project-hero .meta,
.about-intro,
.project-hero__title         { transform: translateY(calc(var(--cover-progress, 0) * -9rem)); }
.project-hero__description   { transform: translateY(calc(var(--cover-progress, 0) * -6rem)); }
.project-hero .meta          { transform: translateY(calc(var(--cover-progress, 0) * -3.5rem)); }
.about-intro                 { transform: translateY(calc(var(--cover-progress, 0) * -4rem)); }

/* Seguidilla de bloques a ancho completo (imágenes, videos y textos).
   Fondo #000 sólido: el hero queda fijo detrás y no debe verse entre los bloques. */
.project-blocks {
  display: grid;
  gap: var(--space-md);
  padding-inline: var(--space-md);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-bg);
}
.project-block {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface);              /* se ve mientras carga el archivo */
}
.project-block :is(img, video) {
  display: block;
  width: 100%;
  height: auto;
}
.project-block--ratio { aspect-ratio: var(--ratio); }
.project-block--ratio :is(img, video) {
  height: 100%;
  object-fit: cover;
}
.project-block--portrait :is(video) { object-fit: contain; }   /* video vertical centrado sobre fondo */
.project-text {
  max-width: 40.125rem;
  margin-inline: auto;
  padding-block: var(--section-gap);
  font-family: var(--font-body);
  font-size: var(--fs-paragraph);
  font-weight: var(--fw-regular);
  line-height: var(--lh-paragraph);
  text-align: center;
  white-space: pre-line;
}
.project-text__title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.25;
}

/* Créditos: bloque a ancho completo (#171717), como los demás bloques del proyecto */
.project-credits {
  padding: var(--space-md) var(--space-md) 0;
  background: var(--color-bg);
}
.project-credits[hidden] { display: none; }
.project-credits__block {
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
}
.project-credits__title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  line-height: 1.25;
}
.project-credits__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--fs-paragraph);
  font-weight: var(--fw-regular);
  line-height: var(--lh-paragraph);
}

/* Proyecto anterior / siguiente: dos tarjetas con la portada */
.project-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md);      /* mismo ancho que bloques y créditos */
  background: var(--color-bg);
}
.project-nav[hidden] { display: none; }
.project-nav__card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 1.5rem;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
}
.project-nav__card--next:only-child { grid-column: 2; }  /* con dos proyectos solos, "siguiente" queda a la derecha */
.project-nav__img {
  flex: none;
  width: clamp(9rem, 16.7vw, 15rem);             /* 240px */
  aspect-ratio: 240 / 232;
  object-fit: cover;
  border-radius: 0.625rem;
  transition: transform var(--duration-base) var(--ease-out);
}
.project-nav__card:hover .project-nav__img,
.project-nav__card:focus-visible .project-nav__img { transform: scale(1.04); }
.project-nav__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.project-nav__label {
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cfd8ea;
  transition: color var(--duration-fast) var(--ease-out);
}
.project-nav__card--prev .project-nav__label::before { content: "←\00a0"; }   /* espacio que no corta: la flecha no queda sola en otra línea */
.project-nav__card--next .project-nav__label::after { content: "\00a0→"; }
.project-nav__card:hover .project-nav__label,
.project-nav__card:focus-visible .project-nav__label { color: var(--glow-light); }
.project-nav__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.33vw, 3rem);       /* 48px */
  font-weight: var(--fw-medium);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.project-nav__meta {
  font-size: var(--fs-paragraph);
  color: #bdbdbd;
}
@media (max-width: 900px) {
  .project-nav { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .project-nav__card--next { order: -1; }         /* en el celular, primero el siguiente */
  .project-nav__card--next:only-child { grid-column: auto; }
}
@media (max-width: 480px) {
  .project-nav__card { gap: var(--space-sm); padding: var(--space-sm); }
  .project-nav__img { width: 6.5rem; }
}

/* --- About: hero --- */
.about-hero {
  padding: var(--hero-pt) var(--space-md) var(--space-lg); /* debajo del fade superior: nada queda borroso en scroll 0. El hero llega hasta la banda: sin corte en el grano */
}
.about-intro {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-lg);
  align-items: center;
  width: min(100%, var(--content-width));
  margin-inline: auto;
}
.about-intro__photo {
  position: relative;
  width: min(100%, 28rem);
  margin: 0;
  justify-self: center;
  perspective: 1000px;
}
.about-intro__depth { transform-style: preserve-3d; }
.about-intro__frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 2rem 5rem rgb(0 0 0 / 0.45);
  animation: float 6s ease-in-out infinite;
}
.about-intro__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}
/* Etiqueta flotante: se mueve en sentido contrario a la foto (data-depth negativo) */
.about-intro__badge {
  position: absolute;
  left: calc(var(--space-md) * -1);
  bottom: var(--space-lg);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.75rem var(--space-sm);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--radius-pill);
  background: rgb(23 23 23 / 0.65);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
  font-size: var(--fs-label);
  line-height: 1;
  white-space: nowrap;
}
.about-intro__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-text);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.25; } }

.about-intro__kicker {
  display: flex;
  font-weight: var(--fw-medium);
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
  font-size: var(--fs-label);
  color: rgb(255 255 255 / 0.7);
}
.about-intro__kicker::before {
  content: "";
  width: 3rem;
  height: 1px;
  background: currentColor;
}
.about-intro__headline {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  text-wrap: balance;
}
.about-intro__text {
  max-width: 40rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-paragraph);
  font-weight: var(--fw-regular);
  line-height: var(--lh-paragraph);
  color: rgb(255 255 255 / 0.8);
  white-space: pre-line;                         /* respeta el salto entre párrafos */
}
.about-intro__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid rgb(255 255 255 / 0.25);
}
.about-intro__facts > div { display: flex; flex-direction: column-reverse; }   /* primero la etiqueta, después el dato */
.about-intro__facts dt {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.25;
}
.about-intro__facts dd {
  margin: 0 0 0.25rem;
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  color: rgb(255 255 255 / 0.6);
}

@media (max-width: 900px) {
  .about-intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .about-intro__photo { width: min(100%, 22rem); }
  .about-intro__badge { left: var(--space-xs); bottom: var(--space-sm); max-width: calc(100% - var(--space-md)); white-space: normal; line-height: 1.25; }
}

/* Banda azul de marcas: queda detrás de la superficie gris, que la tapa con sus esquinas redondeadas */
.brands-band {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-ms);
  padding: calc(var(--space-section) / 2) var(--space-xs) calc(var(--space-section) / 2 + var(--radius-lg));
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-band);
}
.brands__title {
  font-size: var(--fs-xl);
  line-height: var(--lh-display);
  text-align: center;
}
.brands__logo {
  display: block;
  width: var(--logo-w);
  max-width: none;
  height: auto;
}

/* --- Marquesina (js/marquee.js) --- */
.marquee {
  width: 100%;
  overflow: hidden;
}
.marquee__track { display: flex; }
.marquee__list {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 71rem;                              /* 1136px */
  margin-inline: auto;
  padding-inline: var(--space-md);
}
.marquee__list > * { flex: none; }
.marquee__list--clone { display: none; }

.marquee.is-running {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee.is-running .marquee__track {
  width: max-content;
  animation: marquee var(--marquee-duration, 30s) linear infinite;
}
.marquee.is-running .marquee__list {
  width: auto;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0 var(--space-lg);
  gap: var(--space-lg);
  justify-content: flex-start;
}
.marquee.is-running .marquee__list--clone { display: flex; }
.marquee.is-running:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Sin movimiento y sin espacio: los items pasan a varias filas */
.marquee.is-overflowing .marquee__list {
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

/* Chip (etiqueta con borde) */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding: 0.5rem var(--space-sm);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-text);          /* borde blanco en todos los chips */
  background: var(--color-bg);
  font-size: var(--fs-label);
  line-height: 1;
  white-space: nowrap;
}

.software__name {
  font-size: var(--fs-label);
  line-height: 1.875;                            /* 30px */
}
.software__name--multi { line-height: 1.25; }    /* 20px: nombre en dos líneas */

/* --- Mobile / tablet --- */
@media (max-width: 768px) {
  /* Todos los radios grandes pasan de 32px a 16px */
  :root { --radius-lg: 1rem; }

  /* Video vertical: a ancho completo, sin recuadro */
  .project-block--portrait { aspect-ratio: auto; }
  .project-block--portrait video { height: auto; }

  /* Un proyecto por fila */
  .projects__grid { grid-template-columns: 1fr; }

  .site-footer { justify-content: center; }
}

@media (max-width: 480px) {
  .site-header__actions { gap: var(--space-md); }
}

/* --- Proyecto: responsive --- */
@media (max-width: 768px) {
  .site-header__title { display: none; } /* en pantallas chicas no hay lugar entre el logo y los botones */
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .menu.is-open .menu__link { animation: none; }
  .project-hero__title,
  .project-hero__description,
  .project-hero .meta,
  .about-intro,
  .page-hero__inner { transform: none; }
  .marquee__track { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   AOS — aparición al scrollear (js/aos.js). Solo se oculta cuando el JS está listo (html.aos-ready).
   ========================================================================== */
.aos-ready [data-aos] {
  transition:
    opacity var(--aos-duration, 0.8s) var(--ease-out) var(--aos-delay, 0s),
    transform var(--aos-duration, 0.8s) var(--ease-out) var(--aos-delay, 0s);
}
.aos-ready [data-aos]:not(.aos-in) { opacity: 0; }
.aos-ready [data-aos="fade-up"]:not(.aos-in)    { transform: translateY(2rem); }
.aos-ready [data-aos="fade-down"]:not(.aos-in)  { transform: translateY(-2rem); }
.aos-ready [data-aos="fade-left"]:not(.aos-in)  { transform: translateX(2rem); }
.aos-ready [data-aos="fade-right"]:not(.aos-in) { transform: translateX(-2rem); }
.aos-ready [data-aos="zoom-in"]:not(.aos-in)    { transform: scale(0.92); }

/* ==========================================================================
   About — versión 2 (about-us-2.html): listas editoriales, tipografía con jerarquía y foco de luz
   ========================================================================== */
/* Foco de luz único que sigue al mouse por toda la superficie (js/spotlight.js) */
.a2 .spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(
    38rem circle at var(--sx, 50%) var(--sy, 20%),
    rgb(255 255 255 / 0.07),
    rgb(255 255 255 / 0.03) 40%,
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}
.a2 .spotlight.is-on { opacity: 1; }

.a2-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-md) var(--space-lg);
  width: min(100%, var(--content-width));
  margin-inline: auto;
}
.a2-section + .a2-section { margin-top: var(--space-xl); }
.a2-section__title {
  align-self: start;
  position: sticky;
  top: 8rem;                                     /* queda a la vista mientras se recorre la lista */
  margin: 0;
  font-size: var(--fs-title);
  line-height: 1;
}

.a2-list,
.a2-software { margin: 0; padding: 0; list-style: none; }

/* Fila: [dato] [contenido] [chip]. La línea superior se "dibuja" al aparecer */
.a2-row {
  position: relative;
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-md) 0;
}
.a2-row::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--color-border);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out);
}
.aos-ready .a2-row:not(.aos-in)::before { transform: scaleX(0); }
.a2-row:last-child { border-bottom: 1px solid var(--color-border); }

/* Año / número: grande y en gris; se enciende al pasar el mouse por la fila */
.a2-row__meta {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  color: rgb(255 255 255 / 0.3);
  white-space: nowrap;
  transition: color var(--duration-base) var(--ease-out);
}
.a2-row:hover .a2-row__meta { color: var(--color-text); }

.a2-row__title {
  margin: 0;
  font-size: var(--fs-xl);
  line-height: 1.15;
  white-space: pre-line;
  text-wrap: balance;
}
.a2-row__sub {
  margin: var(--space-xs) 0 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-meta);
  line-height: 1.25;
  color: rgb(255 255 255 / 0.6);
}
.a2-row__text {
  font-weight: var(--fw-regular);
  max-width: 40rem;
  margin: var(--space-sm) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-paragraph);
  line-height: var(--lh-paragraph);
  color: rgb(255 255 255 / 0.75);
  white-space: pre-line;
}
.a2-row > .chip { align-self: start; }

/* Softwares: íconos grandes que se levantan al pasar el mouse */
.a2-software {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.a2-software__item {
  display: grid;
  justify-items: start;
  gap: var(--space-sm);
}
.a2-software__icon {
  display: block;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base);
}
.a2-software__icon img { width: 100%; height: 100%; object-fit: cover; }
.a2-software__item:hover .a2-software__icon { transform: translateY(-0.5rem); border-color: var(--color-text); }
.a2-software__item .software__name { line-height: 1.25; }

@media (max-width: 1024px) {
  .a2-section { grid-template-columns: minmax(0, 1fr); }
  .a2-section__title { position: static; }
  .a2-software { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .a2-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-xs); }
  .a2-row__meta { grid-column: 1 / -1; }
  .a2-software { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Transición entre páginas (js/transition.js) — cortina negra
   ========================================================================== */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-cursor) - 1);            /* sobre todo, pero debajo del cursor */
  background: var(--color-bg);
  pointer-events: none;
  visibility: hidden;
  transform: translateY(100%);
}
html.pt-leave::after { visibility: visible; animation: pt-in 0.55s cubic-bezier(0.76, 0, 0.24, 1) forwards; }
html.pt-enter::after { visibility: visible; transform: none; }
html.pt-exit::after  { visibility: visible; animation: pt-out 0.7s cubic-bezier(0.76, 0, 0.24, 1) forwards; }
@keyframes pt-in  { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pt-out { from { transform: none; } to { transform: translateY(-100%); } }

/* ==========================================================================
   Home: sección "Ver todos los proyectos" + enlace grande reutilizable
   ========================================================================== */
.cta-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  text-align: center;
}
.cta-link__label {
  font-size: var(--fs-title);
  line-height: var(--lh-display);
}
.cta-link__arrow {
  flex: none;
  width: clamp(4.5rem, 10.1vw, 9.125rem);        /* 146px */
  height: auto;
  transition: transform var(--duration-base) var(--ease-out);
}
.cta-link:hover .cta-link__arrow,
.cta-link:focus-visible .cta-link__arrow { transform: translateX(1rem); }
.all-projects { padding: var(--space-xxl) var(--space-md) 0; }

/* ==========================================================================
   Página Projects: hero + filtro
   ========================================================================== */
.page-hero {
  display: grid;
  place-items: center;
  min-height: clamp(24rem, 62svh, 40rem);
  padding: var(--hero-pt) var(--space-md) var(--space-lg);
  text-align: center;
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  transform: translateY(calc(var(--cover-progress, 0) * -4rem));
  will-change: transform;
}
.page-hero__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
}
.filter {
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.filter:hover { background: rgb(255 255 255 / 0.15); }
.filter[aria-pressed="true"] { background: var(--color-text); color: var(--color-text-inverse); }
.projects--page { padding-top: var(--space-md); }
.projects--page .projects__grid { margin-top: 0; }

/* Copiar mail */
.contact__copy {
  gap: var(--space-xs);
  margin-top: var(--space-md);   /* en About (dentro de una fila) se anula abajo */
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.contact__copy .icon { width: 1.125rem; height: 1.125rem; }
.contact__copy:hover { background: rgb(255 255 255 / 0.15); }
.contact__copy.is-copied { background: var(--color-text); color: var(--color-text-inverse); }

/* Volver a Projects (arriba del título de cada proyecto) */
.project-hero__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  font-size: var(--fs-label);
  color: rgb(255 255 255 / 0.8);
  transition: color var(--duration-fast);
}
.project-hero__back .icon { width: 1.25rem; height: 1.25rem; transition: transform var(--duration-base) var(--ease-out); }
.project-hero__back:hover { color: var(--color-text); }
.project-hero__back:hover .icon { transform: translateX(-0.25rem); }

/* ==========================================================================
   Proyectos: reproductor propio, bloque "process" y bloque "pair"
   ========================================================================== */
.project-block--player { position: relative; }
.video-ui {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  background: linear-gradient(transparent, rgb(0 0 0 / 0.55));
}
.video-ui__bar {
  position: relative;
  flex: 1;
  height: 0.25rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.3);
  cursor: pointer;
}
.video-ui__bar::before { content: ""; position: absolute; inset: -0.75rem 0; }  /* área de click más grande */
.video-ui__fill {
  position: absolute;
  inset: 0;
  background: var(--color-text);
  transform-origin: left;
  transform: scaleX(0);
}
.video-ui__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--radius-pill);
  background: rgb(23 23 23 / 0.6);
  -webkit-backdrop-filter: blur(var(--card-blur));
  backdrop-filter: blur(var(--card-blur));
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.video-ui__btn .icon { width: 1.125rem; height: 1.125rem; }
.video-ui__btn:hover { background: var(--color-text); color: var(--color-text-inverse); }

.project-process {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding-block: var(--section-gap);
}
.project-process__title {
  margin-bottom: var(--space-md);
  font-size: var(--fs-title);
  line-height: 1;
  text-align: center;
}
.project-process__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.project-process__item {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.project-process__num {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: rgb(255 255 255 / 0.3);
}
.project-process__label { margin: 0; font-size: var(--fs-xl); line-height: 1.15; }
.project-process__text {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-paragraph);
  font-weight: var(--fw-regular);
  line-height: var(--lh-paragraph);
  color: rgb(255 255 255 / 0.75);
}
.project-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
@media (max-width: 768px) {
  .project-pair { grid-template-columns: minmax(0, 1fr); }
  .video-ui { padding: var(--space-sm) var(--space-xs) var(--space-xs); gap: var(--space-xs); }
}

/* About: sección "Encontrame" (redes + mail) — filas de la versión editorial */
.a2-row__link::after { content: ""; position: absolute; inset: 0; }   /* toda la fila es clickeable */
.a2-row__arrow {
  align-self: start;
  width: 1.5rem;
  height: 1.5rem;
  transition: transform var(--duration-base) var(--ease-out);
}
.a2-row--link:hover .a2-row__arrow { transform: translate(0.25rem, -0.25rem); }
.a2-row--link .a2-row__title { transition: opacity var(--duration-fast); }

@media (prefers-reduced-motion: reduce) {
  html::after { display: none; }
}

.a2-row .contact__copy { margin-top: 0; }

/* ==========================================================================
   Página Contacto: formulario
   ========================================================================== */
.page-hero__lead {
  width: min(100%, 360px);
  max-width: 360px;
  font-size: var(--fs-paragraph);
  line-height: var(--lh-paragraph);
}
.cform { display: grid; gap: var(--space-md); align-content: start; }
.cform__field { display: grid; gap: var(--space-xs); }
.cform__field label { font-size: var(--fs-label); font-weight: var(--fw-medium); }
.cform input,
.cform textarea {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-paragraph);
  line-height: var(--lh-paragraph);
  transition: border-color var(--duration-fast);
}
.cform textarea { resize: vertical; min-height: 9rem; }
.cform input:hover,
.cform textarea:hover { border-color: rgb(255 255 255 / 0.5); }
.cform input:focus-visible,
.cform textarea:focus-visible { outline: none; border-color: var(--color-text); }
.cform [aria-invalid="true"] { border-color: #ff6b6b; }
/* Campo trampa: fuera de pantalla (no usar display:none, algunos bots lo detectan) */
.cform__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cform__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.cform__submit {
  height: 3rem;
  padding-inline: var(--space-md);
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.cform__submit:hover { background: var(--color-text); color: var(--color-text-inverse); }
.cform__submit:disabled { opacity: 0.5; pointer-events: none; }
.cform__status { margin: 0; font-size: var(--fs-paragraph); line-height: var(--lh-paragraph); }
.cform__status[data-state="ok"] { color: #7ee2a8; }
.cform__status[data-state="error"] { color: #ff8a8a; }
.contact-page-connect { margin-top: var(--space-xl); }

/* Select del formulario */
.cform select {
  width: 100%;
  padding: var(--space-sm) 3rem var(--space-sm) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--space-sm) center / 1.25rem;
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-paragraph);
  line-height: var(--lh-paragraph);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--duration-fast);
}
.cform select:hover { border-color: rgb(255 255 255 / 0.5); }
.cform select:focus-visible { outline: none; border-color: var(--color-text); }
.cform select:invalid { color: rgb(255 255 255 / 0.6); }
.cform select option { color: #fff; background: #171717; }

/* Volumen del reproductor */
.video-ui__vol { display: inline-flex; align-items: center; gap: var(--space-xs); }
.video-ui__range {
  --vol: 0%;
  width: 5.5rem;
  height: 1.25rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.video-ui__range::-webkit-slider-runnable-track {
  height: 0.25rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, #fff var(--vol), rgb(255 255 255 / 0.3) var(--vol));
}
.video-ui__range::-moz-range-track { height: 0.25rem; border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.3); }
.video-ui__range::-moz-range-progress { height: 0.25rem; border-radius: var(--radius-pill); background: #fff; }
.video-ui__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: -0.3125rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
}
.video-ui__range::-moz-range-thumb { width: 0.875rem; height: 0.875rem; border: 0; border-radius: 50%; background: #fff; }
@media (max-width: 768px) { .video-ui__range { display: none; } }   /* en el celular se usa el volumen del dispositivo */

/* ==========================================================================
   Página CV (cv/index.html)
   ========================================================================== */
.cv-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-md) 0 0; }
.cv-actions .chip { height: 3rem; padding-inline: var(--space-md); gap: var(--space-xs); transition: background-color var(--duration-fast), color var(--duration-fast); }
.cv-actions .chip:hover { background: var(--color-text); color: var(--color-text-inverse); }
.chip--solid { background: var(--color-text); color: var(--color-text-inverse); }
.chip--solid:hover { background: rgb(255 255 255 / 0.85) !important; }
.chip .icon { width: 1.125rem; height: 1.125rem; }
.a2-section--stack { grid-template-columns: minmax(0, 1fr); }
.a2-section--stack .a2-section__title { position: static; }
.cv-work { display: grid; gap: var(--space-lg); justify-items: start; }
.cv-work__grid { margin-top: 0; width: 100%; }
.cv-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; align-content: start; }
.cv-chips .chip { height: 2.5rem; padding-inline: var(--space-sm); transition: background-color var(--duration-fast), color var(--duration-fast); }
.cv-chips .chip:hover { background: var(--color-text); color: var(--color-text-inverse); }

/* Mis conocimientos: títulos en una sola línea en desktop (el salto de línea queda solo en mobile) */
@media (min-width: 769px) { #knowledge .a2-row__title { white-space: normal; text-wrap: nowrap; } }

/* ==========================================================================
   Hero de la Home (versión editorial): texto + collage de proyectos
   ========================================================================== */
.hero--editorial {
  height: auto;
  min-height: 100svh;
  padding: var(--hero-pt) var(--space-md) var(--space-lg);
}
.hero2 {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 42rem) minmax(0, 32rem);
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
  width: min(100%, 90rem);
  margin-inline: auto;
}
.hero2__text { display: grid; gap: var(--space-md); justify-items: start; align-content: center; }
.hero2__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  color: rgb(255 255 255 / 0.7);
}
.hero2__kicker::before { content: ""; width: 3rem; height: 1px; background: currentColor; }
.hero2__title {
  max-width: 42rem;
  margin: 0;
  font-size: clamp(3rem, 5.1vw, 4.5rem);        /* 150% del tamaño anterior */
  line-height: 1.1;
  text-wrap: balance;
}
.hero2__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero2__actions .chip { height: 3rem; padding-inline: var(--space-md); transition: background-color var(--duration-fast), color var(--duration-fast); }
.hero2__actions .chip:hover { background: var(--color-text); color: var(--color-text-inverse); }
.hero2__actions .chip--solid:hover { background: rgb(255 255 255 / 0.85); }
.hero2__text .about-intro__facts { margin-top: var(--space-sm); width: 100%; }

/* Collage: cada tarjeta tiene parallax (contenedor) + inclinación y sombra (enlace) */
.hero2__collage { position: relative; aspect-ratio: 512 / 764; width: 100%; max-width: min(32rem, calc((100svh - 13rem) * 0.67)); justify-self: center; }
.hero2__card { position: absolute; width: 72%; }
.hero2__card:nth-child(1) { top: 0;   right: 0;  --tilt: 3deg; }
.hero2__card:nth-child(2) { top: 30.8%; left: 0;   --tilt: -3deg; }
.hero2__card:nth-child(3) { top: 61.6%; right: 2%; --tilt: 2deg; }
.hero2__link {
  display: block;
  aspect-ratio: var(--card-ratio);
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 2rem 4.5rem rgb(0 0 0 / 0.5);
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--duration-base) var(--ease-out);
}
.hero2__link:hover { transform: rotate(0deg) scale(1.03); }
.hero2__link img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .hero2 { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .hero2__title { font-size: clamp(2.5rem, 9vw, 3.5rem); }
  .hero2__collage { max-width: 26rem; }
}

/* Separador entre "Ver todos los proyectos" y "Creemos algo juntos" */
.all-projects + .contact {
  width: min(100% - (var(--space-md) * 2), 90rem);
  margin: var(--space-xxl) auto 0;
  border-top: 1px solid rgb(255 255 255 / 0.2);
}

/* Íconos de la sección Hobbies (usan el color del texto de la fila) */
.a2-row__icon { display: block; width: 2rem; height: 2rem; }

/* Pie de foto opcional de los bloques "image" (campo caption) */
.project-captioned { display: grid; gap: var(--space-xs); }
.project-caption {
  margin: 0;
  padding-inline: var(--space-xs);
  font-size: var(--fs-label);
  line-height: 1.4;
  color: rgb(255 255 255 / 0.7);
}

/* Datos clave (versión B): lista con filetes, etiqueta a la izquierda y valor a la derecha */
.about-intro__facts { display: grid; gap: 0; margin: var(--space-md) 0 0; padding: 0; border-top: 1px solid rgb(255 255 255 / 0.25); }
.about-intro__facts > div { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; align-items: baseline; gap: var(--space-sm); padding: 0.8rem 0; border-bottom: 1px solid rgb(255 255 255 / 0.18); }
.about-intro__facts dd { order: -1; margin: 0; font-size: 0.875rem; }
.about-intro__facts dt { font-size: clamp(1rem, 1.35vw, 1.25rem); }
.about-intro__facts > div:last-child dt::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.6rem; border-radius: 50%; background: #7dffb0; box-shadow: 0 0 0 0.25rem rgb(125 255 176 / 0.18); vertical-align: 0.1em; }
@media (max-width: 560px) { .about-intro__facts > div { grid-template-columns: 1fr; gap: 0.15rem; } }

/* ===== Página CV: identidad propia (violeta + «CV» gigante + barra de documento + navegación) ===== */
body[data-page="cv"] { --glow-light: #b08cff; --glow-mid: #4a22b5; --glow-dark: #1a0a4a; }
body[data-page="cv"] .about-hero { position: relative; overflow: hidden; }
.cv-watermark {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 800; font-size: min(60vw, 56rem); line-height: 0.8; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / 0.14);
  pointer-events: none; user-select: none; z-index: 1;
}
.cv-nav {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 0.25rem; padding: 0.4rem; max-width: calc(100vw - 2rem); overflow-x: auto; scrollbar-width: none;
  border: 1px solid rgb(255 255 255 / 0.28); border-radius: 999px;
  background: rgb(20 10 55 / 0.65); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: opacity var(--duration-base), transform var(--duration-base) var(--ease-out);
}
.cv-nav::-webkit-scrollbar { display: none; }
.cv-nav.is-hidden { opacity: 0; pointer-events: none; transform: translate(-50%, 1rem); }
html.is-menu-open .cv-nav { opacity: 0; pointer-events: none; }
.cv-nav a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.05rem; border-radius: 999px; font-size: 0.95rem; font-weight: 500; white-space: nowrap; transition: background-color var(--duration-fast), color var(--duration-fast); }
.cv-nav a:hover, .cv-nav a.is-active { background: #fff; color: #000; }
.cv-nav .icon { width: 1rem; height: 1rem; }
.cv-nav__sep { flex: none; width: 1px; height: 1.4rem; margin: 0 0.4rem; background: rgb(255 255 255 / 0.3); }
.cv-nav__dl { background: #fff; color: #000; font-weight: 600; }
.cv-nav__dl:hover { background: rgb(255 255 255 / 0.85); }
body[data-page="cv"] .a2-section { scroll-margin-top: 6rem; }
@media (max-width: 560px) { .cv-nav { bottom: 0.75rem; } .cv-nav a { padding: 0.5rem 0.8rem; font-size: 0.875rem; } }

/* Enlaces después de los datos clave en las heros (Home y Sobre mí) */
.hero-more { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.hero-more .chip { height: 3rem; padding-inline: var(--space-md); transition: background-color var(--duration-fast), color var(--duration-fast); }
.hero-more .chip:hover { background: var(--color-text); color: var(--color-text-inverse); }
.hero-more .chip--solid:hover { background: rgb(255 255 255 / 0.85); }
@media (min-width: 901px) and (max-height: 800px) {
  .hero2__title { font-size: clamp(2.25rem, 4vw, 3.5rem); }
  .hero2__text .about-intro__facts > div { padding-block: 0.55rem; }
  .hero-more { margin-top: var(--space-sm); }
}