/* ============================================================================
   FERNANDO PATERSON — Portfolio
   Sistema visual: oscuro editorial, la tipografía como protagonista.

   ÍNDICE
   01. Fuentes
   02. Tokens
   03. Base
   04. Utilidades tipográficas
   05. Cursor personalizado
   06. Barra de progreso
   07. Cabecera
   08. Menú fullscreen
   09. Transición de página
   10. Botones y etiquetas
   11. Hero
   12. Marquee
   13. Secciones
   14. Proyectos destacados
   15. Archivo de clientes
   16. Servicios
   17. Proceso
   18. Sobre mí
   19. Clientes (marquee doble)
   20. Contacto
   21. Pie
   22. Case study
   23. Reduced motion
   ========================================================================== */


/* ----------------------------------------------------------------- 01. Fuentes
   Locales: el sitio funciona sin conexión y sin CDN. */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-800-normal.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-900-normal.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/space-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/space-mono-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}


/* ------------------------------------------------------------------ 02. Tokens */

:root {
  /* Color */
  --bg: #0B0B0C;
  --bg-2: #111113;
  --ink: #F4F1EA;
  --muted: #98948C;
  --line: rgba(244, 241, 234, .14);
  --line-soft: rgba(244, 241, 234, .08);
  --alerta: #E4674A;

  /* Tipografía */
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Ritmo espacial */
  --pad: clamp(20px, 4vw, 64px);
  --gutter: clamp(14px, 2vw, 32px);

  /* Alto de la barra fija. Todo lo que va debajo se aparta con esta medida:
     así la cabecera nunca pisa el hero ni tapa un ancla. */
  --head-h: clamp(58px, 5vw, 78px);

  /* Movimiento */
  --ease: cubic-bezier(.65, .05, 0, 1);
  --dur: .9s;
}


/* -------------------------------------------------------------------- 03. Base */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--head-h);
}

/* Lenis toma el control del scroll cuando está activo */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

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

/* Con JS activo el cursor nativo se sustituye por el propio (solo en desktop) */
@media (hover: hover) and (pointer: fine) {
  html.js.has-cursor,
  html.js.has-cursor a,
  html.js.has-cursor button {
    cursor: none;
  }
}


/* --------------------------------------------- 04. Utilidades tipográficas */

.label {
  font-family: var(--mono);
  font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.num {
  font-family: var(--mono);
  font-size: clamp(10px, .72vw, 12px);
  letter-spacing: .1em;
  color: var(--muted);
}

.display {
  font-weight: 900;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.025em;
}

.o-hidden {
  overflow: hidden;
}

/* Línea que se revela desde abajo (split text) */
.line-mask {
  display: block;
  overflow: hidden;
}
.line-mask > span {
  display: block;
  will-change: transform;
}


/* --------------------------------------------------- 05. Cursor personalizado */

.cursor,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cursor {
  width: 6px;
  height: 6px;
  background: var(--ink);
}

.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(244, 241, 234, .4);
  place-items: center;
  transition:
    width .35s var(--ease),
    height .35s var(--ease),
    background-color .35s,
    border-color .35s;
}

@media (hover: hover) and (pointer: fine) {
  html.js .cursor {
    display: block;
  }
  html.js .cursor-ring {
    display: grid;
  }
}

.cursor-ring .cursor-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bg);
  opacity: 0;
  transition: opacity .25s;
}

/* Sobre un proyecto: círculo grande con la palabra dentro */
.cursor-ring.is-view {
  width: 84px;
  height: 84px;
  background: var(--ink);
  border-color: var(--ink);
}
.cursor-ring.is-view .cursor-label {
  opacity: 1;
}

/* Sobre cualquier otro enlace: círculo intermedio translúcido */
.cursor-ring.is-mini {
  width: 56px;
  height: 56px;
  background: rgba(244, 241, 234, .12);
  border-color: transparent;
  backdrop-filter: blur(2px);
}


/* ---------------------------------------------------- 06. Barra de progreso */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  width: 100%;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}


/* ---------------------------------------------------------------- 07. Cabecera */

/* Barra propia, opaca y siempre por encima del hero. Antes iba en
   'mix-blend-mode: difference' y el texto se fundía con las imágenes del
   banner: según por dónde pasaba, se leía invertido o desaparecía. */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  min-height: var(--head-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 var(--pad);
  background: rgba(11, 11, 12, .88);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: transform .5s var(--ease);
}
/* Sin backdrop-filter (Firefox antiguo, algún WebView) la barra va maciza. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head {
    background: var(--bg);
  }
}
.site-head.is-hidden {
  transform: translateY(-110%);
}
/* Con el menú fullscreen abierto la barra sobra: solo hace falta el botón. */
.site-head:has(.menu-btn[aria-expanded="true"]) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.brand sup {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .1em;
}

.main-nav {
  display: flex;
  gap: clamp(18px, 2.4vw, 40px);
}
.main-nav a {
  position: relative;
  padding: 4px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .45s var(--ease);
}
.main-nav a:hover::after,
.main-nav a.is-active::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.menu-btn {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.menu-btn .bars {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 10px;
}
.menu-btn .bars::before,
.menu-btn .bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform .4s var(--ease), top .4s var(--ease);
}
.menu-btn .bars::before { top: 0; }
.menu-btn .bars::after  { top: 8px; }

@media (max-width: 820px) {
  .main-nav {
    display: none;
  }
  .menu-btn {
    display: inline-flex;
  }
}


/* ---------------------------------------------------------- 08. Menú fullscreen */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 990;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad);
  background: var(--bg-2);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
}

.menu-overlay .menu-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.menu-overlay .menu-links a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(40px, 9vw, 84px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
  transition: color .3s, transform .45s var(--ease);
}
.menu-overlay .menu-links a:hover {
  transform: translateX(12px);
}
.menu-overlay .menu-links .num {
  font-size: 12px;
}

.menu-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  margin-top: 40px;
}
.menu-meta a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}


/* ------------------------------------------------------ 09. Transición de página */

.transition {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg-2);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  pointer-events: none;
}
.transition .t-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
}


/* --------------------------------------------------- 10. Botones y etiquetas */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 16px 28px;
  border: 1px solid var(--line);
  border-radius: 3em;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .45s var(--ease), border-color .45s;
  will-change: transform;
}
/* Relleno que sube al hacer hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.btn:hover {
  color: var(--bg);
  border-color: var(--ink);
}
.btn:hover::before {
  transform: translateY(0);
}

/* Variante invertida: fondo claro que se oscurece */
.btn.solid {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn.solid::before {
  background: var(--bg-2);
}
.btn.solid:hover {
  color: var(--ink);
}

.tag {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 2em;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: border-color .3s, color .3s;
}


/* -------------------------------------------------------------------- 11. Hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--head-h) + var(--pad)) var(--pad) clamp(28px, 4vh, 56px);
  overflow: hidden;
}

.hero-top {
  position: absolute;
  top: calc(var(--head-h) + clamp(20px, 5vh, 54px));
  left: var(--pad);
  right: var(--pad);
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.hero-status {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7CFF6B;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.hero-title {
  position: relative;
  z-index: 4;
  user-select: none;
}
.hero-title .display {
  display: block;
  font-size: clamp(3.4rem, 14.5vw, 15.5rem);
}
.hero-title .row2 {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 2vw, 40px);
}
/* Cada letra es su propio elemento: el JS las anima una a una */
.hero-title .char {
  display: inline-block;
  will-change: transform;
}

.hero-sub {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(20px, 3vh, 36px);
  border-top: 1px solid var(--line);
  padding-top: clamp(16px, 2.4vh, 26px);
}
.hero-claim {
  max-width: 52ch;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.5;
  color: var(--muted);
}
.hero-claim strong {
  color: var(--ink);
  font-weight: 500;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Rotador de palabras */
.rotator {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
.rotator .word-box {
  position: relative;
  display: inline-block;
  height: 1em;
  min-width: 9ch;
  overflow: hidden;
  vertical-align: baseline;
}
.rotator .word {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
/* Sin JS solo se ve la primera palabra, en flujo normal */
html:not(.js) .rotator .word {
  display: none;
}
html:not(.js) .rotator .word:first-child {
  display: inline;
  position: relative;
}

.scroll-hint {
  position: absolute;
  right: var(--pad);
  bottom: clamp(24px, 4vh, 48px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.scroll-hint .lin {
  position: relative;
  width: 1px;
  height: 44px;
  background: var(--line);
  overflow: hidden;
}
.scroll-hint .lin::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--ink);
  animation: drop 1.8s var(--ease) infinite;
}
@keyframes drop {
  to { top: 120%; }
}


/* ----------------------------------------------------------------- 12. Marquee */

.marquee {
  display: flex;
  overflow: hidden;
  padding: clamp(12px, 1.6vh, 20px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.marquee .track {
  display: flex;
  gap: 0;
  animation: marq 28s linear infinite;
  will-change: transform;
}
.marquee:hover .track {
  animation-play-state: paused;
}
.marquee span {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding: 0 22px;
  font-size: clamp(15px, 1.6vw, 22px);
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.marquee span::after {
  content: "✦";
  font-size: .7em;
  color: var(--muted);
}
/* La pista lleva el contenido duplicado: -50% reinicia sin salto */
@keyframes marq {
  to { transform: translateX(-50%); }
}


/* --------------------------------------------------------------- 13. Secciones */

.section {
  padding: clamp(80px, 12vh, 160px) var(--pad);
}

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(36px, 6vh, 72px);
}
.sec-head h2 {
  font-size: clamp(2.4rem, 7vw, 6.5rem);
}
.sec-head .label {
  padding-bottom: 10px;
}


/* ------------------------------------------------- 14. Proyectos destacados */

.featured {
  padding-bottom: clamp(40px, 6vh, 80px);
}

.proj-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  align-items: end;
  padding: clamp(36px, 7vh, 90px) 0;
  border-top: 1px solid var(--line-soft);
}
.proj-row:last-child {
  border-bottom: 1px solid var(--line-soft);
}
/* El enlace envuelve todo pero no debe romper la rejilla */
.proj-row > a {
  display: contents;
}

.proj-media {
  grid-column: 1 / 8;
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--bg-2);
}
.proj-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.proj-info {
  grid-column: 8 / 13;
  padding-bottom: 8px;
}

/* Filas alternas: la imagen cambia de lado.
   Ojo: el primer hijo de .featured es .sec-head, así que el proyecto 01
   es nth-child(2) y arranca ya con la imagen a la derecha. */
.proj-row:nth-child(even) .proj-media {
  grid-column: 6 / 13;
  order: 2;
}
.proj-row:nth-child(even) .proj-info {
  grid-column: 1 / 6;
  order: 1;
  text-align: left;
}

.proj-idx {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}
/* Logo del cliente sobre el titular. El lienzo va recortado al logo (ver
   -Ajustado en generar.ps1), así que todos se pueden poner a la misma altura.
   El max-width evita que los logotipos muy apaisados —Valbaby es 6:1— se
   coman la fila. */
.proj-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: clamp(42px, 4.2vw, 58px);
  max-width: clamp(150px, 15vw, 225px);
  margin-top: 6px;
  opacity: .75;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.proj-logo .logo-svg,
.proj-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.proj-row a:hover .proj-logo {
  opacity: 1;
  transform: translateX(10px);
}
.proj-title {
  margin: 10px 0 18px;
  font-size: clamp(2rem, 4.6vw, 4.4rem);
  transition: transform .5s var(--ease);
}
.proj-row a:hover .proj-title {
  transform: translateX(10px);
}
.proj-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.proj-row a:hover .tag {
  border-color: var(--ink);
  color: var(--ink);
}
.proj-client {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
}

@media (max-width: 820px) {
  .proj-media,
  .proj-row:nth-child(even) .proj-media {
    grid-column: 1 / 13;
    order: 1;
    aspect-ratio: 4 / 3;
  }
  .proj-info,
  .proj-row:nth-child(even) .proj-info {
    grid-column: 1 / 13;
    order: 2;
  }
}


/* ------------------------------------------------------ 15. Archivo de clientes */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(28px, 4vh, 48px);
}
.filter-btn {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 2em;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: all .35s var(--ease);
}
.filter-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.filter-btn.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
@media (max-width: 1020px) {
  .archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .archive-grid { grid-template-columns: 1fr; }
}

.arch-item {
  position: relative;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
/* Filtrado: sale del flujo para que la rejilla se recomponga */
.arch-item.is-out {
  position: absolute;
  opacity: 0;
  transform: scale(.96);
  visibility: hidden;
  pointer-events: none;
}

.arch-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-2);
}
.arch-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
  will-change: transform;
}
.arch-item a:hover .arch-media img {
  transform: scale(1.07);
}

/* Cara de logo: silueta clara de la marca sobre el fondo oscuro */
.logo-face {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 16%;
  background: transparent;
}
/* Los logos van incrustados como <svg> en el HTML (se pintan con la página,
   sin peticiones ni parpadeo). Gubosa, que solo existe en mapa de bits, cae a
   <img>: mismas reglas para los dos. */
.logo-face img,
.logo-face .logo-svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .85;
  transition: transform .6s var(--ease), opacity .4s;
}
.arch-item a:hover .logo-face img,
.arch-item a:hover .logo-face .logo-svg {
  transform: scale(1.07);
  opacity: 1;
}
.arch-item.no-link:hover .logo-face img,
.arch-item.no-link:hover .logo-face .logo-svg {
  transform: scale(1.04);
  opacity: 1;
}
.arch-item.no-link .arch-media {
  cursor: default;
}

.arch-media .arch-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  background: rgba(11, 11, 12, .72);
  backdrop-filter: blur(4px);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transform: translateY(-6px);
  transition: all .4s var(--ease);
}
.arch-item a:hover .arch-cat {
  opacity: 1;
  transform: none;
}

.arch-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 2px 0;
}
.arch-info h3 {
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.arch-info .num {
  white-space: nowrap;
}


/* --------------------------------------------------------------- 16. Servicios */

.services-list {
  border-top: 1px solid var(--line);
}
.srv-row {
  position: relative;
  border-bottom: 1px solid var(--line);
}

.srv-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 3vw, 48px);
  width: 100%;
  padding: clamp(22px, 3.6vh, 44px) 0;
  text-align: left;
}
.srv-head h3 {
  font-size: clamp(1.6rem, 4.6vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--muted);
  transition: transform .5s var(--ease), color .3s;
}
.srv-row:hover .srv-head h3,
.srv-row.is-open .srv-head h3 {
  color: var(--ink);
  transform: translateX(14px);
}

.srv-plus {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: transform .5s var(--ease), background .3s;
}
.srv-plus::before,
.srv-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform .4s var(--ease);
}
.srv-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.srv-row.is-open .srv-plus {
  background: var(--ink);
  transform: rotate(45deg);
}
.srv-row.is-open .srv-plus::before,
.srv-row.is-open .srv-plus::after {
  background: var(--bg);
}

/* El acordeón anima su altura desde JS */
.srv-body {
  height: 0;
  overflow: hidden;
}
.srv-body-inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--gutter);
  max-width: 1100px;
  padding: 0 0 clamp(28px, 4vh, 44px);
}
.srv-body p {
  max-width: 60ch;
  color: var(--muted);
}
.srv-body ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}
.srv-body li {
  position: relative;
  padding-left: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.srv-body li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--ink);
}
@media (max-width: 700px) {
  .srv-body-inner { grid-template-columns: 1fr; }
}


/* ----------------------------------------------------------------- 17. Proceso */

.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gutter);
  margin-top: clamp(48px, 8vh, 90px);
}
@media (max-width: 1020px) {
  .process { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .process { grid-template-columns: 1fr; }
}

.step {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.step .num {
  display: block;
  margin-bottom: 14px;
}
.step h4 {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.step p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}


/* --------------------------------------------------------------- 18. Sobre mí */

.about-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(28px, 5vw, 90px);
  align-items: start;
}
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
}

.about-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-2);
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter .8s var(--ease);
  will-change: transform;
}
.about-photo:hover img {
  filter: grayscale(0);
}
.about-photo .label {
  position: absolute;
  bottom: 14px;
  left: 14px;
  padding: 6px 10px;
  background: rgba(11, 11, 12, .7);
  backdrop-filter: blur(4px);
  color: var(--ink);
}

.about-body h2 {
  margin-bottom: 26px;
  font-size: clamp(1.9rem, 3.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.02em;
}
.about-body h2 em {
  font-style: normal;
  color: var(--muted);
}
.about-body > p {
  max-width: 62ch;
  margin-bottom: 18px;
  color: var(--muted);
}
.about-body > p strong {
  color: var(--ink);
  font-weight: 500;
}

.about-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  margin-top: 36px;
}
@media (max-width: 600px) {
  .about-cols { grid-template-columns: 1fr; }
}
.about-col h5 {
  margin-bottom: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.about-col ul {
  list-style: none;
}
.about-col li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-size: 14.5px;
}
.about-col li span:last-child {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  margin: clamp(48px, 8vh, 90px) 0 0;
}
@media (max-width: 700px) {
  .stats { grid-template-columns: 1fr; }
}
.stat {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.stat .big {
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
}
.stat .label {
  display: block;
  margin-top: 6px;
}


/* ------------------------------------------------- 19. Clientes (marquee doble) */

.clients {
  padding: clamp(60px, 10vh, 120px) 0;
  border-top: 1px solid var(--line-soft);
}
.clients .label {
  display: block;
  margin-bottom: 28px;
  padding: 0 var(--pad);
}

.client-row {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}
.client-row .track {
  display: flex;
  animation: marq 40s linear infinite;
}
.client-row.rev .track {
  animation-direction: reverse;
  animation-duration: 46s;
}
.client-row span {
  padding: 0 .35em;
  font-size: clamp(2.4rem, 6.5vw, 6rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 241, 234, .34);
  transition: color .4s;
}
.client-row span:hover {
  color: var(--ink);
  -webkit-text-stroke-color: transparent;
}


/* ---------------------------------------------------------------- 20. Contacto */

.contact {
  position: relative;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(80px, 10vh, 140px) var(--pad) 40px;
  overflow: hidden;
}
.contact h2 {
  margin: 16px 0 clamp(30px, 5vh, 60px);
  font-size: clamp(3rem, 11vw, 11rem);
}
.contact h2 .out {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}

.email-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  width: fit-content;
  max-width: 100%;
  border-bottom: 2px solid var(--line);
  padding-bottom: 10px;
  font-size: clamp(1.15rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  word-break: break-all;
  transition: border-color .4s;
}
.email-link:hover {
  border-color: var(--ink);
}
.email-link .arrow {
  font-weight: 400;
  transition: transform .45s var(--ease);
}
.email-link:hover .arrow {
  transform: translate(8px, -8px);
}

.contact-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: clamp(40px, 7vh, 80px);
}
.contact-meta .col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-meta a {
  width: fit-content;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  transition: border-color .3s;
}
.contact-meta a:hover {
  border-color: var(--ink);
}


/* Formulario. Mismo idioma que el resto de la página: nada de cajas, solo una
   línea bajo cada campo que se enciende al enfocar. */

.contact-form {
  max-width: 780px;
  margin-top: clamp(38px, 6vh, 70px);
}
.contact-form > .label {
  display: block;
  margin-bottom: 22px;
}

/* Trampa antispam. Se saca de la pantalla en vez de esconderla con display:
   none, porque hay robots que se saltan lo que está oculto del todo. */
.honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px var(--gutter);
}
.field,
.form-pie {
  margin: 0;
}
.field-ancho,
.form-pie {
  grid-column: 1 / -1;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field textarea {
  width: 100%;
  padding: 8px 0 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  font-family: var(--sans);
  font-size: 16px;   /* por debajo de 16px iOS hace zoom al enfocar el campo */
  color: var(--ink);
  transition: border-color .35s;
}
.field textarea {
  min-height: 120px;
  line-height: 1.55;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
  opacity: .6;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.field.is-error input,
.field.is-error textarea {
  border-color: var(--alerta);
}
.field .error {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--alerta);
}
/* El autorrelleno de Chrome pinta el campo de azul: se tapa con una sombra
   interior del color del fondo, que es la única forma que respeta. */
.field input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  box-shadow: inset 0 0 0 100px var(--bg);
}

.form-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 4px;
}
.contact-form.is-enviando button[type="submit"] {
  opacity: .5;
  pointer-events: none;
}
.form-aviso {
  margin: 0;
  max-width: 42ch;
  font-size: 14px;
  color: var(--muted);
}
.form-aviso.ok {
  color: var(--ink);
}
.form-aviso.mal {
  color: var(--alerta);
}

@media (max-width: 720px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------- 21. Pie */

.site-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 24px var(--pad);
}
.site-foot p,
.site-foot a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-foot a:hover {
  color: var(--ink);
}
.to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}


/* ------------------------------------------------------------- 22. Case study */

.case-hero {
  padding: clamp(80px, 14vh, 150px) var(--pad) 0;
}
.case-hero .back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(28px, 5vh, 56px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .3s;
}
.case-hero .back:hover {
  color: var(--ink);
}
.case-hero h1 {
  margin-bottom: clamp(28px, 5vh, 56px);
  font-size: clamp(2.8rem, 10vw, 10rem);
}

.case-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  border-top: 1px solid var(--line);
  padding: 22px 0 clamp(36px, 6vh, 64px);
}
@media (max-width: 820px) {
  .case-meta {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 22px;
  }
}
.case-meta .label {
  display: block;
  margin-bottom: 8px;
}
.case-meta p {
  font-size: 14.5px;
  line-height: 1.5;
}

.client-logo {
  display: inline-grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 10px;
  padding: 0;
  background: transparent;
}
.client-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.case-cover {
  position: relative;
  margin: 0 var(--pad);
  overflow: hidden;
  background: var(--bg-2);
}
.case-cover img {
  width: 100%;
  height: auto;
  will-change: transform;
}

.case-section {
  padding: clamp(70px, 10vh, 130px) var(--pad);
}
.case-section .inner {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--gutter);
}
@media (max-width: 820px) {
  .case-section .inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
.case-section h2 {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.case-section h2 .num {
  display: block;
  margin-bottom: 10px;
}
.case-section p {
  max-width: 64ch;
  margin-bottom: 14px;
  font-size: clamp(15px, 1.15vw, 18px);
  color: var(--muted);
}
.case-section p strong {
  color: var(--ink);
  font-weight: 500;
}

.deliverables {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

/* Galería */
.case-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  padding: 0 var(--pad) clamp(40px, 6vh, 80px);
}
.g-row {
  display: grid;
  gap: var(--gutter);
  align-items: start;
}
.g-row.g-2  { grid-template-columns: 1fr 1fr; }
.g-row.g-3  { grid-template-columns: repeat(3, 1fr); }
.g-row.g-21 { grid-template-columns: 2fr 1fr; }
.g-row.g-12 { grid-template-columns: 1fr 2fr; }
@media (max-width: 700px) {
  .g-row.g-2,
  .g-row.g-3,
  .g-row.g-21,
  .g-row.g-12 {
    grid-template-columns: 1fr;
  }
}
.g-item {
  position: relative;
}
.g-media {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
}
.g-media img {
  width: 100%;
  height: auto;
  will-change: transform;
}
/* Documento empotrado (ZenDreams). El folleto es 425x567 pt, así que el marco
   guarda esa proporción y se limita el ancho para que no salga una columna
   larguísima en pantallas grandes. */
.g-doc {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.g-doc-marco {
  width: 100%;
  max-width: 620px;
  aspect-ratio: 425 / 567;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
}
.g-doc-visor {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.g-doc .g-caption {
  width: 100%;
  max-width: 620px;
}

.g-caption {
  padding-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Resultado */
.case-result {
  margin: 0 var(--pad);
  border-top: 1px solid var(--line);
  padding: clamp(50px, 8vh, 90px) 0;
}
.case-result blockquote {
  max-width: 26ch;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.case-result blockquote em {
  font-style: normal;
  color: var(--muted);
}

/* Navegación anterior / siguiente */
.case-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.case-nav a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  padding: clamp(40px, 8vh, 80px) var(--pad);
  transition: background .5s;
}
.case-nav a:hover {
  background: var(--bg-2);
}
.case-nav a + a {
  border-left: 1px solid var(--line);
}
.case-nav .dir {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.case-nav .name {
  font-size: clamp(1.4rem, 3.4vw, 3rem);
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
  transition: transform .5s var(--ease);
}
.case-nav a:hover .name {
  transform: translateX(12px);
}
.case-nav a.prev {
  text-align: left;
}
.case-nav a.prev:hover .name {
  transform: translateX(-12px);
}
@media (max-width: 700px) {
  .case-nav {
    grid-template-columns: 1fr;
  }
  .case-nav a + a {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}


/* -------------------------------------------------------- 23. Reduced motion
   Quien pide menos movimiento no ve animaciones ni cursor personalizado. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  html {
    scroll-behavior: auto;
  }
  .marquee .track,
  .client-row .track {
    animation: none;
  }
  .cursor,
  .cursor-ring {
    display: none !important;
  }
}