/* ============================================================
   Starford Marketing — sistema de diseño
   Dirección: editorial brutalista de lujo.
   Negro con grano, dos voces tipográficas (Playfair itálica como
   voz editorial, Satoshi como estructura) y un único acento oro.
   ============================================================ */

:root {
  /* barras de scroll, resize del textarea y controles nativos en versión oscura */
  color-scheme: dark;

  --negro: #08090a;
  --carbon: #101113;
  --carbon-2: #16181a;
  --hueso: #edeae3;
  --gris: #8b8b86;
  --acento: #fbe94e;
  --linea: rgba(237, 234, 227, .13);
  /* .42 y no menos: es el único borde de los inputs y de .btn--linea,
     y por debajo baja de 3:1 sobre el negro (WCAG 1.4.11) */
  --linea-fuerte: rgba(237, 234, 227, .42);

  --sans: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Playfair Display", Georgia, serif;

  --lado: clamp(1.25rem, 5vw, 5rem);
  --rail: 0rem;
  --bloque: clamp(5rem, 12vw, 11rem);
  --gap: clamp(1.25rem, 2.5vw, 2rem);
  --ancho: 90rem;

  --sal: cubic-bezier(.22, .61, .36, 1);
  --t: 400ms var(--sal);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
  /* reserva el hueco de la barra: si no, abrir el menú (overflow:hidden) la quita
     y toda la página pega un salto lateral */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  padding-left: var(--rail);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--hueso);
  background: var(--negro);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }
strong { color: var(--hueso); font-weight: 700; }

h1, h2, h3 {
  margin: 0 0 .4em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  text-wrap: balance;
}

em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
}

::selection { background: var(--acento); color: var(--negro); }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: .85rem 1.4rem;
  background: var(--acento);
  color: var(--negro);
  font-weight: 700;
  text-decoration: none;
}
/* .5rem y no 0: con outline-offset 4px el foco se recortaría contra el borde */
.skip-link:focus { left: .5rem; top: .5rem; }

/* Grano: da profundidad al negro para que no sea un plano muerto. */
.grano {
  position: fixed;
  /* inset: 0 y no -50%: es fija y el patrón se repite, así que sólo necesita cubrir
     la pantalla. A -50% ocupaba casi el doble en cada eje y obligaba a repintar
     cuatro veces más superficie en cada frame de scroll — se notaba en móvil. */
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  background-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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Piezas compartidas ---------- */

.kicker {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin: 0 0 clamp(1.5rem, 3vw, 2.75rem);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gris);
}
.kicker__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--acento);
}

.titulo {
  max-width: 18ch;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  font-size: clamp(2rem, 1.1rem + 4vw, 4.5rem);
}
.titulo em { color: var(--gris); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.05rem 2rem;
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--negro);
  background: var(--acento);
  border: 1px solid var(--acento);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.btn:hover { background: transparent; color: var(--acento); }

.btn--linea { color: var(--hueso); background: transparent; border-color: var(--linea-fuerte); }
.btn--linea:hover { background: var(--hueso); color: var(--negro); border-color: var(--hueso); }
.btn--bloque { width: 100%; }

.enlace-acento {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--acento);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t);
}
.enlace-acento:hover { border-bottom-color: var(--acento); }

/* ---------- Navegación ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto var(--rail);
  /* por encima de .menu (200): el botón de cerrar vive aquí, y con z-index 100
     el overlay opaco lo tapaba y no había forma visible de cerrar el índice */
  z-index: 300;
  padding: 0 var(--lado);
  background: linear-gradient(to bottom, var(--negro) 55%, transparent);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--ancho);
  margin-inline: auto;
  min-height: 5.75rem;
}
/* el SVG ya viene en blanco: cualquier invert() lo dejaría negro sobre negro.
   Crece con la pantalla pero se queda en 7.5rem en móvil, donde comparte fila
   con "Conectemos" y el botón de índice. El SVG es 2.4:1, así que a 11rem mide
   73px de alto y necesita los 5.75rem de la barra. */
.nav__logo img { width: clamp(7.5rem, 11vw, 11rem); }
.nav__tag {
  margin: 0;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
}
.nav__actions { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); }

/* Enlaces de cabecera de las páginas secundarias: la home tiene el menú completo,
   las demás no tenían nada más que el logo. */
.nav__enlace {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gris);
  transition: color var(--t);
}
.nav__enlace:hover,
.nav__enlace[aria-current="page"] { color: var(--hueso); }
/* en móvil sólo caben dos junto al logo; se cae el menos usado */
@media (max-width: 48rem) { .nav__enlace--opcional { display: none; } }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem 0;
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hueso);
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__toggle-bars { display: grid; gap: 5px; width: 20px; }
/* 2px enteros y no 1.5: en fraccionario cada barra cae distinto sobre la rejilla
   de píxeles (una empieza en y=0 y la otra en y=6.5) y se ven de grosor desigual
   a densidad 1x. Si cambias esta altura o el gap, recalcula el translateY de la X:
   es (alto_caja / 2) - (alto_barra / 2) = (9/2) - (2/2) = 3.5 */
.nav__toggle-bars span { height: 2px; background: currentColor; transition: transform var(--t); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 56rem) { .nav__tag { display: none; } }

/* Índice lateral: la numeración 01–12 como navegación con progreso */
.indice { display: none; }

@media (min-width: 75rem) {
  /* 10rem y no menos: "TESTIMONIOS" y "COMPROMISO" en mayúsculas con letter-spacing
     necesitan ~146px junto al número y el padding.
     :has(.indice) y no :root a secas: sólo la home lleva rail, y sin esto las demás
     páginas reservaban 160px de hueco vacío a la izquierda. Se autoajusta: la página
     que tenga rail reserva sitio, la que no, no. */
  :root:has(.indice) { --rail: 10rem; }

  .indice {
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 90;
    display: block;
    /* el ancho ES el rail: si se escribe a mano se desincroniza del padding del body */
    width: var(--rail);
    padding-left: clamp(1.25rem, 2vw, 2rem);
    transform: translateY(-50%);
  }
  .indice ol { display: grid; gap: .28rem; }
  /* los tres estados se distinguen por color, no por opacidad: a .5 el gris
     caía a 2.3:1 sobre el negro y este rail es navegación, no decoración */
  .indice a {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .12rem 0;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-decoration: none;
    white-space: nowrap;
    color: var(--gris);
    transition: color var(--t);
  }
  .indice a:hover { color: var(--hueso); }
  .indice em {
    font-family: var(--sans);
    font-style: normal;
    text-transform: uppercase;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--t), transform var(--t);
  }
  .indice a:hover em,
  .indice a.is-activa em { opacity: 1; transform: none; }
  .indice a.is-activa { color: var(--acento); }
}

/* Menú a pantalla completa */
.menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  /* safe: con 12 entradas en una pantalla baja, centrar dejaría el principio
     de la lista por encima del scroll y sin forma de alcanzarlo */
  align-items: safe center;
  justify-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6rem var(--lado) 3rem;
  background: var(--negro);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t), visibility var(--t);
}
.menu.is-open { visibility: visible; opacity: 1; }
.menu__inner { width: min(100%, 44rem); }

.menu__list { display: grid; }
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .35rem 0;
  font-size: clamp(1.25rem, 3.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  text-decoration: none;
  border-bottom: 1px solid var(--linea);
  transition: color var(--t), padding-left var(--t);
}
.menu__list a span {
  font-family: var(--serif);
  font-style: italic;
  font-size: .8125rem;
  font-weight: 400;
  color: var(--acento);
}
.menu__list a:hover { color: var(--acento); padding-left: 1rem; }

.menu__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2.5rem;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}
.menu__meta a { text-decoration: none; transition: color var(--t); }
.menu__meta a:hover { color: var(--acento); }

body.menu-abierto { overflow: hidden; }
/* con el menú abierto la cabecera se queda en logo + cerrar; el resto estorba.
   display:none y no opacity: así también salen del orden de tabulación. */
body.menu-abierto .nav__tag,
body.menu-abierto .nav .enlace-acento { display: none; }

/* ---------- Contenedor de sección ---------- */

.bloque {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: var(--bloque) var(--lado);
}
.bloque--ancho { max-width: none; }
.bloque--sin-fondo { padding-bottom: 0; }

/* ---------- 01 · Hero ---------- */

/* Sin imagen de fondo: las miniaturas de proyecto son mockups de móvil, y a
   pantalla completa sólo se veía el avatar y la pantalla del perfil recortados.
   El negro con grano ya es la textura de la marca. */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding: 7.5rem var(--lado) 2.5rem;
}
.hero__cuerpo { max-width: var(--ancho); width: 100%; margin-inline: auto; }

.display {
  margin: 0;
  /* El tope por altura es lo que importa: sólo con vw, en un portátil de 1366x768
     el titular ocupaba toda la pantalla y los botones caían bajo la línea de
     flotación.
     svh y NUNCA vh: en el móvil la barra del navegador se colapsa al bajar y `vh`
     la sigue, así que el titular crecía a media página y se reordenaban las líneas
     delante del usuario. `svh` es la altura con la barra visible y no se mueve. */
  font-size: min(clamp(2.5rem, 1rem + 9.5vw, 9.5rem), 8.5svh);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.display em {
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.02em;
  color: var(--gris);
}
.display__acento { color: var(--acento); }

.hero__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--linea);
}
.hero__claim { margin: 0; max-width: 42ch; color: var(--gris); }
.hero__claim span { color: var(--hueso); font-family: var(--serif); font-style: italic; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__scroll {
  align-self: center;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gris);
  transition: color var(--t);
}
.hero__scroll:hover { color: var(--acento); }
.hero__scroll span { display: inline-block; animation: flota 2.4s ease-in-out infinite; }

/* Pantallas anchas y bajas: portátiles de 768px de alto y tablets apaisadas, donde
   el hero no cabe entero. Se recorta el aire y se cae el indicador de scroll, que
   es decorativo, antes que dejar los botones fuera de vista.

   `and (min-width: 48rem)` NO es cosmético: en el móvil la barra del navegador se
   colapsa al hacer scroll y la altura del viewport crece, así que una consulta de
   `max-height` a secas se enciende y se apaga a media página y reordena el hero
   delante del usuario. Los móviles no deben entrar aquí nunca; para ellos el
   tamaño sale del `svh` estable de `.display`. */
@media (max-height: 46rem) and (min-width: 48rem) {
  .hero { padding-top: 6rem; }
  .hero__scroll { display: none; }
  .hero .kicker { margin-bottom: 1rem; }
  .hero__pie { margin-top: 1.5rem; padding-top: 1.25rem; }
}

/* Móvil: por anchura, que es estable, nunca por altura. Con la barra del navegador
   desplegada un iPhone deja ~650px útiles y los botones caían 36px por debajo;
   recortando el aire del hero entran sin tocar el tamaño del titular. */
@media (max-width: 48rem) {
  .hero { padding-top: 6rem; }
  .hero__pie { margin-top: 1.5rem; padding-top: 1rem; gap: 1rem; }
  .hero .kicker { margin-bottom: 1rem; }
}

@keyframes flota {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ---------- Cinta ---------- */

.cinta {
  overflow: hidden;
  padding: 1.1rem 0;
  border-block: 1px solid var(--linea);
  background: var(--carbon);
}
/* --g tiene que ser una variable: el bucle necesita el valor del gap (ver @keyframes desliza) */
.cinta__pista {
  --g: 1.75rem;
  display: flex;
  align-items: center;
  gap: var(--g);
  width: max-content;
  animation: desliza 42s linear infinite;
}
.cinta__pista span {
  flex: none;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cinta__pista span:nth-child(even) { color: var(--acento); }

.cinta--logos { padding: clamp(1.75rem, 4vw, 3rem) 0; background: transparent; border-block-color: var(--linea); }
.cinta__pista--lenta { --g: clamp(3rem, 7vw, 6rem); animation-duration: 60s; }
.cinta__pista--lenta img {
  flex: none;
  width: clamp(6rem, 10vw, 9rem);
  height: 3.5rem;
  object-fit: contain;
  /* Los seis logos son PNG/WebP con transparencia, y cuatro de ellos son oscuros
     sobre ese transparente (luminancia media 34-47): sobre el negro de la página
     desaparecerían. brightness(0) los aplana a negro e invert(1) los levanta a
     blanco puro, conservando la silueta y el antialiasing del alfa. Así el muro
     se lee parejo aunque las marcas no tengan nada que ver entre sí.
     No devuelvas los colores originales en :hover — cuatro se apagarían. */
  filter: brightness(0) invert(1);
  opacity: .45;
  transition: opacity var(--t), filter var(--t);
}
.cinta__pista--lenta img:hover { opacity: 1; }

/* Al pasar el ratón, cada marca recupera SU color. No basta con quitar el filtro:
   tres de los cuatro logos con color son azul marino o granate muy oscuros
   (luminancia 34-47) y sobre el negro dan 1,3:1, o sea invisibles. Cada
   multiplicador está calculado para subirlos por encima de 4:1 conservando el
   tono, no elegido a ojo:
     nexus       #012656 -> #037aff   1,3:1 -> 5,0:1
     caravista   #15245e -> #3b65ff   1,4:1 -> 4,3:1
     grupo-elias #6d2218 -> #ff523a   1,8:1 -> 6,2:1
     tr          #ebbe0c ya es claro, con quitar el filtro basta (11,3:1)
   frame16 y jaiak no llevan regla: son monocromos, no tienen color que revelar,
   y el negro de frame16 sobre el negro del fondo no se vería. Se quedan blancos. */
.cliente--nexus:hover       { filter: brightness(3.2) saturate(1.3); }
.cliente--caravista:hover   { filter: brightness(2.8) saturate(1.3); }
.cliente--grupo-elias:hover { filter: brightness(2.4) saturate(1.2); }
.cliente--tr:hover          { filter: none; }

/* Con n elementos duplicados el ancho es 2S + (n-1)·gap, así que el 50% cae medio
   gap antes del inicio de la copia. Sin ese -g/2 la cinta pega un salto por vuelta. */
@keyframes desliza {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - var(--g) / 2)); }
}

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

/* ---------- 02 · Resultados ---------- */

.cifra { margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.cifra__num {
  margin: 0;
  /* 11vw sin sumando: "+100.000.000" son 13 caracteres y a 12vw se salía del
     contenedor 16px por la derecha en móvil */
  font-size: clamp(2.5rem, 11vw, 11rem);
  font-weight: 900;
  line-height: .85;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  color: var(--acento);
}
.cifra__pie {
  margin: 1rem 0 0;
  max-width: 24ch;
  font-size: clamp(1rem, .9rem + .6vw, 1.375rem);
  color: var(--gris);
}

.resultados {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
/* Móvil: el texto primero y ancho completo, las dos capturas en pareja debajo.
   Apiladas a lo alto ocuparían tres pantallas, porque son verticales. */
.resultados__texto { order: -1; grid-column: 1 / -1; max-width: 44ch; }
.resultados__texto .destacado {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--acento);
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem);
  font-family: var(--serif);
  font-style: italic;
  line-height: 1.4;
}
/* Sin borde: las capturas ya traen su propio fondo oscuro, así que el filete
   sólo dibujaba un rectángulo suelto sobre el negro. */
.resultados__prueba { margin: 0; }
.resultados__prueba img { width: 100%; }

@media (min-width: 64rem) {
  /* captura · texto · captura; la columna central algo más ancha para el texto */
  .resultados { grid-template-columns: 1fr 1.15fr 1fr; }
  .resultados__texto { order: 0; grid-column: auto; }
  /* desalineación deliberada: rompe la simetría del par */
  .resultados__prueba:last-child { transform: translateY(clamp(1rem, 4vw, 3rem)); }
}

/* ---------- 03 · Servicios ---------- */

/* Entrada que nombra "la cosa" y presenta la lista como fases, no como catálogo */
.titulo--con-entrada { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.servicios__entrada {
  max-width: 48ch;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem);
  line-height: 1.5;
  color: var(--gris);
}

.servicios { border-top: 1px solid var(--linea); }
.servicios li {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1rem, 2.2vw, 1.75rem) 0;
  border-bottom: 1px solid var(--linea);
  transition: padding-left var(--t), background var(--t);
}
.servicios li:hover { padding-left: clamp(.75rem, 2vw, 1.75rem); }
.servicios__num {
  flex: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--acento);
}
.servicios__nombre {
  font-size: clamp(1.25rem, .8rem + 2vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  transition: color var(--t);
}
.servicios li:hover .servicios__nombre { color: var(--acento); }

/* ---------- 04 · Trabajos ---------- */

.obras {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem) var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}
.obra__media {
  position: relative;
  overflow: hidden;
  background: var(--carbon);
  /* 1/1 y sin excepciones: los siete son mockups cuadrados con el nombre del
     cliente en vertical pegado al borde, así que cualquier recorte se lo come.
     La variación de altura la dan los spans de la rejilla, no el ratio. */
  aspect-ratio: 1;
}
.obra__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.55);
  transition: transform 700ms var(--sal), filter var(--t);
}
.obra:hover .obra__media img { transform: scale(1.05); filter: none; }

/* Toda la tarjeta es el enlace al caso; el foco lo dibuja el <a>, no la imagen. */
.obra__enlace { display: block; text-decoration: none; color: inherit; }
.obra__enlace:focus-visible { outline-offset: 2px; }

.obra__pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--linea);
}
/* h3 en la home (bajo el h2 de sección), h2 en el índice de trabajos (bajo su h1) */
.obra__pie h3,
.obra__pie h2 { margin: 0; font-size: clamp(1rem, .9rem + .5vw, 1.375rem); }
/* El resultado en una línea: en un índice, el dato es lo que hace clicar */
.obra__dato {
  margin: .6rem 0 0;
  max-width: 36ch;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--gris);
}
.obra__pie p {
  margin: 0;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
}

/* margen amplio: las tarjetas 5 y 7 bajan 3rem y 2rem con translate */
.obras__salida { margin: clamp(4rem, 8vw, 6rem) 0 0; }

/* Todas las tarjetas iguales. Antes tenían vanos desiguales (5, 4, 3, 4, 5, 3, 6
   de doce) con desfases verticales: quedaba desordenado y, peor, el tamaño
   insinuaba una jerarquía que no se correspondía con las pruebas — la tarjeta más
   grande era la de un caso sin ninguna cifra publicada. Con siete proyectos y
   tres columnas la última fila queda con uno solo, y está bien: se lee como el
   final de la lista. El peso lo lleva el orden, no el tamaño. */
@media (min-width: 64rem) {
  .obras { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 05 · Equipo ---------- */

/* auto-fit y no auto-fill: son 5 personas y en pantalla ancha caben 6 columnas,
   así que auto-fill dejaba un hueco muerto al final de la fila */
.equipo {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
/* 2/3 es la proporción real de los retratos: a 4/5 se les recortaba la cabeza */
.persona img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--t);
}
.persona:hover img { filter: none; }
.persona h3 {
  margin: 1rem 0 .1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
  font-weight: 400;
  letter-spacing: -.01em;
}
.persona__rol {
  margin: 0 0 .6rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento);
}
.persona__bio { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--gris); }

/* ---------- 07 · Manifiesto ---------- */

.manifiesto {
  border-block: 1px solid var(--linea);
  background: var(--carbon);
  max-width: none;
}
.manifiesto__titulo {
  max-width: 16ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  font-size: clamp(2.25rem, 1rem + 6vw, 6rem);
  text-transform: uppercase;
}
.manifiesto__titulo em { text-transform: none; color: var(--acento); }
.manifiesto__texto {
  max-width: 52ch;
  margin-bottom: 2.5rem;
  font-size: clamp(1rem, .95rem + .4vw, 1.1875rem);
  color: var(--gris);
}

/* ---------- 08 · Diferenciación ---------- */

.diferencias {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
.diferencia { padding-top: 1.5rem; border-top: 2px solid var(--acento); }
.diferencia__num {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 3rem;
  line-height: 1;
  color: var(--acento);
}
.diferencia h3 {
  margin-bottom: 1rem;
  font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.diferencia p { font-size: .9375rem; color: var(--gris); }
.diferencia p:last-child { margin-bottom: 0; }

@media (min-width: 64rem) {
  .diferencia:nth-child(2) { transform: translateY(3rem); }
  .diferencia:nth-child(3) { transform: translateY(6rem); }
  .diferencias { margin-bottom: 6rem; }
}

/* ---------- 09 · Compromiso ---------- */

.declaracion {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: var(--bloque) var(--lado);
  text-align: center;
}
.declaracion .kicker { justify-content: center; }
.declaracion__titulo {
  margin: 0 auto .5em;
  max-width: 14ch;
  font-size: clamp(1.75rem, 1rem + 6vw, 7rem);
  text-transform: uppercase;
}
.declaracion__titulo em { text-transform: none; color: var(--acento); }
.declaracion__texto {
  max-width: 52ch;
  margin-inline: auto;
  font-size: clamp(1rem, .95rem + .4vw, 1.1875rem);
  color: var(--gris);
}

/* ---------- 10 · Método ---------- */

.metodo { display: grid; }
.paso {
  display: grid;
  gap: clamp(.75rem, 3vw, 3rem);
  grid-template-columns: 1fr;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  border-top: 1px solid var(--linea);
}
.paso:last-child { border-bottom: 1px solid var(--linea); }
.paso__num {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  line-height: .9;
  color: var(--acento);
}
.paso h3 { margin-bottom: .6rem; font-size: clamp(1.125rem, 1rem + .8vw, 1.75rem); }
.paso p:last-child { margin: 0; max-width: 60ch; color: var(--gris); }

@media (min-width: 48rem) {
  .paso { grid-template-columns: 8rem 1fr; align-items: start; }
}

/* ---------- 11 · Testimonios ---------- */

/* ---------- 12 · Contacto ---------- */

.contacto {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  align-items: start;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: var(--bloque) var(--lado);
}
.contacto__titulo {
  max-width: 14ch;
  font-size: clamp(2rem, 1.1rem + 4vw, 4.5rem);
  text-transform: uppercase;
}
.contacto__titulo em { text-transform: none; color: var(--acento); }
.contacto__lead { max-width: 44ch; color: var(--gris); }

.contacto__directo { margin-top: 2.5rem; border-top: 1px solid var(--linea); }
.contacto__directo li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--linea);
}
.contacto__directo span {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
}
.contacto__directo a {
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--t);
}
.contacto__directo a:hover { color: var(--acento); }

.form { display: grid; gap: 1.5rem; }
.campo { display: grid; gap: .5rem; margin: 0; }
.campo label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
}
.campo input,
.campo textarea {
  width: 100%;
  padding: .85rem 0;
  font: inherit;
  color: var(--hueso);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linea-fuerte);
  border-radius: 0;
  transition: border-color var(--t);
}
/* .9 y no menos: por debajo baja de 4.5:1 sobre el negro */
.campo input::placeholder,
.campo textarea::placeholder { color: rgba(139, 139, 134, .9); }
.campo textarea { resize: vertical; min-height: 6.5rem; }
.campo input:focus,
.campo textarea:focus { outline: none; border-bottom-color: var(--acento); }
/* sin esto Chrome pinta el autorrelleno con su fondo claro y texto oscuro */
.campo input:-webkit-autofill,
.campo input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--hueso);
  -webkit-box-shadow: 0 0 0 100px var(--negro) inset;
  caret-color: var(--hueso);
}

/* Consentimiento del RGPD: sin esta casilla se recogían datos personales sin
   base jurídica ninguna. Es obligatoria, no decorativa. */
.campo--consentimiento {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .7rem;
  margin-top: .25rem;
}
.campo--consentimiento input {
  width: 1.15rem;
  height: 1.15rem;
  margin: .1rem 0 0;
  accent-color: var(--acento);
  cursor: pointer;
}
.campo--consentimiento label {
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
  color: var(--gris);
  cursor: pointer;
}
.campo--consentimiento label a { color: var(--acento); text-underline-offset: 3px; }
.campo--consentimiento .campo__error { grid-column: 1 / -1; }
.campo--consentimiento.tiene-error label { color: #ff6b5e; }

.campo.tiene-error input,
.campo.tiene-error textarea { border-bottom-color: #ff6b5e; }
/* la casilla no tiene borde inferior que teñir: se marca el propio control */
.campo--consentimiento.tiene-error input { outline: 2px solid #ff6b5e; outline-offset: 2px; }
.campo__error { margin: 0; font-size: .8125rem; color: #ff6b5e; }

.form__estado { margin: 0; font-size: .9375rem; min-height: 1.4em; }
.form__estado.es-ok { color: var(--acento); }
.form__estado.es-error { color: #ff6b5e; }

/* ---------- Instagram ---------- */

.ig {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: var(--ancho);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--lado) var(--bloque);
  border-top: 1px solid var(--linea);
}
.ig__titulo {
  margin: 0 0 .2em;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem);
  font-weight: 400;
}
.ig__texto p { margin: 0; max-width: 30ch; color: var(--gris); }

/* ---------- Pie ---------- */

.pie {
  padding: clamp(3rem, 7vw, 5rem) var(--lado) 2rem;
  border-top: 1px solid var(--linea);
}
/* marca gigante: el nombre como remate tipográfico */
.pie__marca {
  margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
  font-size: clamp(3rem, 15vw, 15rem);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.055em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--linea-fuerte);
  text-align: center;
}

.pie__grid {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  max-width: var(--ancho);
  margin-inline: auto;
}
.pie__col--intro { grid-column: span 2; max-width: 26rem; }
/* Por debajo de ~400px la rejilla auto-fit sólo genera una columna, y el span 2
   forzaba una columna implícita que desbordaba el pie 39px. */
@media (max-width: 26rem) { .pie__col--intro { grid-column: auto; } }
.pie__col--intro p { color: var(--gris); font-size: .9375rem; }

.pie__col h2 {
  margin-bottom: 1rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acento);
}
.pie__col ul { display: grid; gap: .45rem; }
.pie__col a, .pie address {
  overflow-wrap: break-word;
  font-size: .9375rem;
  font-style: normal;
  line-height: 1.7;
  color: var(--gris);
  text-decoration: none;
  transition: color var(--t);
}
.pie__col a:hover { color: var(--hueso); }

.pie__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--ancho);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linea);
}
.pie__base p { margin: 0; max-width: 48rem; font-size: .75rem; line-height: 1.6; color: var(--gris); }
.pie__subvencion { max-width: 48rem; }
/* los logos institucionales traen su propio fondo blanco: nada de placa detrás */
.pie__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.pie__logos img { width: auto; height: 3rem; }


/* ---------- Páginas legales (aviso-legal/, privacidad/) ----------
   Texto largo de lectura seguida: medida corta y jerarquía sobria. Nada de
   los recursos editoriales del resto del sitio, que aquí sólo estorbarían. */

.legal {
  max-width: 46rem;
  margin-inline: auto;
  padding: 9rem var(--lado) var(--bloque);
}
.legal h1 {
  margin-bottom: .5em;
  font-size: clamp(1.875rem, 1.2rem + 2.5vw, 3rem);
  text-transform: uppercase;
}
.legal__meta {
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--linea);
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--gris);
}
.legal h2 {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 .9rem;
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem);
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.legal h2 span {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--acento);
}
.legal p, .legal li { color: var(--gris); }
.legal a { color: var(--acento); text-underline-offset: 3px; }
.legal ul { display: grid; gap: .6rem; margin: 0 0 1em; }
.legal ul li { padding-left: 1.1rem; position: relative; }
.legal ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--acento);
}
.legal dl { display: grid; gap: .5rem 1.5rem; margin: 0 0 1em; }
@media (min-width: 34rem) { .legal dl { grid-template-columns: 11rem 1fr; } }
.legal dt {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
  padding-top: .3rem;
}
.legal dd { margin: 0; color: var(--hueso); }

/* ---------- Página de contacto (contacto.html) ---------- */

/* La misma rejilla que el bloque de contacto de la home, pero despejando la cabecera */
.contacto--pagina { padding-top: 9rem; }
.contacto--pagina .contacto__titulo { font-size: clamp(2rem, 1.1rem + 3.6vw, 4rem); }

/* El teléfono como botón, no como dato enterrado en una lista.
   Es lo único que la competencia local hace mejor y cuesta cero. */
.llamada {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 2rem;
  max-width: var(--ancho);
  margin: 0 auto clamp(3rem, 7vw, 5rem);
  padding: clamp(1.5rem, 3vw, 2rem) var(--lado);
  border-block: 1px solid var(--linea);
}
.llamada p {
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
}
.llamada a {
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color var(--t);
}
.llamada a:hover { color: var(--acento); }

.faq {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0 var(--lado) var(--bloque);
}
.faq__lista { border-top: 1px solid var(--linea); }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.1rem, 2.2vw, 1.6rem) 0;
  font-size: clamp(1.0625rem, .95rem + .7vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  cursor: pointer;
  list-style: none;
  transition: color var(--t);
}
/* el triángulo por defecto no encaja con nada de este sitio */
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  flex: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--acento);
  transition: transform var(--t);
}
.faq__item[open] summary::after { content: "–"; }
.faq__item summary:hover { color: var(--acento); }
.faq__item summary:focus-visible { outline-offset: -2px; }
.faq__respuesta { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.faq__respuesta p { max-width: 68ch; color: var(--gris); }
.faq__respuesta p:last-child { margin-bottom: 0; }
.faq__respuesta a { color: var(--acento); text-underline-offset: 3px; }

/* ---------- Páginas de caso (trabajos/*.html) ---------- */

.caso {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 8rem var(--lado) 0;
}
.caso__titulo {
  margin: 0 0 .35em;
  font-size: clamp(2.5rem, 1rem + 6.5vw, 6rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.caso__lead {
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem);
  color: var(--gris);
}
.caso__lead em { color: var(--hueso); }
.caso__portada { margin: clamp(2.5rem, 6vw, 4rem) 0 0; }
.caso__portada img { width: 100%; }

/* Mismo ritmo que .metodo en la home: número grande, contenido a la derecha */
.caso__pasos {
  display: grid;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 5rem) var(--lado) 0;
}
.caso__paso {
  display: grid;
  gap: clamp(.75rem, 3vw, 3rem);
  grid-template-columns: 1fr;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  border-top: 1px solid var(--linea);
}
.caso__paso:last-child { border-bottom: 1px solid var(--linea); }
.caso__paso > p:first-child {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  line-height: .9;
  color: var(--acento);
}
.caso__paso h2 {
  margin-bottom: .7rem;
  font-size: clamp(1.125rem, 1rem + .8vw, 1.75rem);
  text-transform: uppercase;
}
.caso__paso h3 {
  margin: 1.6rem 0 .3rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1875rem;
  letter-spacing: -.01em;
  text-transform: none;
}
.caso__paso p { max-width: 62ch; color: var(--gris); }
.caso__paso > div > p:last-child { margin-bottom: 0; }

@media (min-width: 48rem) {
  .caso__paso { grid-template-columns: 8rem 1fr; align-items: start; }
}

/* Métricas: sólo aparecen cuando el caso tiene cifras publicables de verdad */
.metricas {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  max-width: var(--ancho);
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 5rem) var(--lado) 0;
}
.metrica { border-top: 2px solid var(--acento); padding-top: 1.1rem; }
.metrica__num {
  margin: 0;
  font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--acento);
}
.metrica__pie {
  margin: .5rem 0 0;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
}

/* El caso cierra pidiendo una conversación, no un "síguenos" */
.caso__cierre {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--lado);
  text-align: center;
}
.caso__cierre h2 {
  margin: 0 auto .8em;
  max-width: 18ch;
  font-size: clamp(1.75rem, 1rem + 3.5vw, 3.5rem);
  text-transform: uppercase;
}
.caso__cierre h2 em { text-transform: none; color: var(--acento); }

.caso__saltos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 1.75rem var(--lado);
  border-top: 1px solid var(--linea);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.caso__saltos a { text-decoration: none; color: var(--gris); transition: color var(--t); }
.caso__saltos a:hover { color: var(--acento); }

/* ---------- Entrada al hacer scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms ease, transform 800ms var(--sal);
  /* --retardo lo pone script.js según la posición entre hermanos */
  transition-delay: var(--retardo, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* En móvil todo cae en una sola columna: son decenas de elementos animando 24px
   durante 800ms, uno detrás de otro, y con el scroll rápido del dedo se percibe
   como tirones. Menos recorrido, menos tiempo y la mitad de escalonado: sigue
   habiendo cascada, sin que se arrastre. */
@media (max-width: 48rem) {
  .reveal {
    transform: translateY(12px);
    transition-duration: 450ms;
    transition-delay: calc(var(--retardo, 0ms) * .5);
  }
}
/* los desfases de la rejilla editorial se conservan al revelarse */
@media (min-width: 64rem) {
  .diferencia:nth-child(2).reveal.is-visible { transform: translateY(3rem); }
  .diferencia:nth-child(3).reveal.is-visible { transform: translateY(6rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .cinta__pista { animation: none; }
  .reveal { opacity: 1; transform: none; }
}