/* ============================================================
   NGN — Nicolás Gómez Núñez · Arquitecto
   ngnarquitecto.com · hoja de estilos
   ------------------------------------------------------------
   Paleta: papel, tinta y terracota (la del propio portfolio).
   Tipografía: Inter Tight (títulos) + Inter (texto).
   ============================================================ */

:root{
  color-scheme: light;
  --white:#FFFFFF;
  --paper:#F4F2EE;
  --paper-2:#ECE9E3;
  --ink:#1F2121;
  --ink-2:#4A4C4C;
  --muted:#6F6B64;          /* gris lápiz: 5,3:1 sobre blanco y 4,7:1 sobre papel (AA en pies y etiquetas) */
  --accent:#B0522F;
  --accent-ink:#8F4124;
  --blush:#E8CFC5;          /* el rectángulo rosa de los bocetos */
  --line:rgba(31,33,33,.14);
  --hair:rgba(31,33,33,.08);
  --on-dark:#EDEAE4;
  --on-dark-muted:rgba(237,234,228,.58);

  --font-display:"Inter Tight","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;

  --gut:clamp(20px, 5vw, 88px);
  --max:1520px;
  --ease:cubic-bezier(.22,.61,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --header-h:72px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px)}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--font-body); font-weight:400; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  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; padding:0}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:300; letter-spacing:-.02em; line-height:1.05; text-wrap:balance}
p{margin:0; text-wrap:pretty}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:1.5px solid var(--accent); outline-offset:4px}
::selection{background:var(--blush); color:var(--ink)}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:#fff; padding:8px 14px; z-index:2000}
.skip:focus{left:8px}

.wrap{width:min(100% - 2*var(--gut), var(--max)); margin-inline:auto}
.eyebrow{
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.eyebrow--ink{color:var(--ink)}
.eyebrow--accent{color:var(--accent)}
.num{font-family:var(--font-display); font-weight:300; color:var(--accent); font-variant-numeric:tabular-nums}
.rule{border:0; height:1px; background:var(--line); margin:0}
em{font-style:normal; color:var(--accent)}
.lead{font-size:clamp(17px,1.4vw,21px); line-height:1.55; color:var(--ink-2); font-weight:300}
.small{font-size:13.5px; color:var(--muted); line-height:1.5}

.section{padding-block:clamp(72px, 10vw, 150px)}
.section--paper{background:var(--paper)}
.section--tight{padding-block:clamp(48px, 6vw, 96px)}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
  padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:clamp(36px, 5vw, 72px);
}
.section-head h2{font-size:clamp(30px, 4.2vw, 60px)}
.section-head p{max-width:46ch; color:var(--ink-2); font-weight:300}
/* cuando la sección que sigue abre con su propio filete de tinta, la cabecera no cierra con otro */
.section-head--open{border-bottom:0; padding-bottom:0}

/* ---------- enlaces con línea ---------- */
.link{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  padding-bottom:6px;
}
/* área táctil de 44 px sin mover el texto */
.link::before{content:""; position:absolute; inset:-10px -6px}
.link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform-origin:left; transition:transform .55s var(--ease-out);
}
.link:hover::after{transform:scaleX(0); transform-origin:right}
.link svg{width:14px; height:14px; transition:transform .5s var(--ease-out)}
.link:hover svg{transform:translateX(5px)}
.link--down:hover svg{transform:translateY(4px)}
.btn{
  display:inline-flex; align-items:center; gap:12px; padding:14px 22px;
  border:1px solid var(--ink); border-radius:999px;
  font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn:hover{background:var(--ink); color:#fff}
.btn--light{border-color:rgba(237,234,228,.5); color:var(--on-dark)}
.btn--light:hover{background:var(--on-dark); color:var(--ink); border-color:var(--on-dark)}
.btn--accent{background:var(--accent); border-color:var(--accent); color:#fff}
.btn--accent:hover{background:var(--accent-ink); border-color:var(--accent-ink); color:#fff}
.btn svg{width:14px; height:14px}

/* ---------- cabecera ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:900; height:var(--header-h);
  display:flex; align-items:center;
  transition:background .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-color:var(--line);
}
.site-header--dark:not(.is-scrolled){color:var(--on-dark)}
/* sobre el pie de tinta la cabecera se invierte: si no, una banda blanca corta el titular */
.site-header--dark.is-scrolled{
  background:rgba(31,33,33,.86); border-color:rgba(237,234,228,.16); color:var(--on-dark);
}
.site-header--dark.is-scrolled .nav__cta--book{background:var(--on-dark); color:var(--ink); border-color:var(--on-dark)}
.site-header--dark.is-scrolled .nav__cta--book:hover{background:transparent; color:var(--on-dark)}
.site-header--dark.is-scrolled .nav__cta:hover{background:var(--on-dark); color:var(--ink); border-color:var(--on-dark)}
.site-header .wrap{display:flex; align-items:center; gap:clamp(18px, 2.6vw, 40px)}
.brand{display:inline-flex; align-items:center; gap:16px; min-width:0; min-height:44px; margin-right:auto}
.brand__mark{width:66px; height:auto; flex:0 0 auto; color:inherit}
.brand__text{display:flex; flex-direction:column; line-height:1.2}
.brand__name{font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap}
.brand__role{font-size:11px; letter-spacing:.24em; text-transform:uppercase; opacity:.7}
.nav{display:flex; align-items:center; gap:clamp(18px, 2.6vw, 40px)}
.site-header__actions{display:flex; align-items:center; gap:8px}
.nav__link{
  position:relative; font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; padding:6px 0;
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease-out);
}
.nav__link:hover::after,.nav__link[aria-current]::after{transform:scaleX(1); transform-origin:left}
.nav__cta{
  display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border:1px solid currentColor; border-radius:999px;
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.nav__cta:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.nav__cta-short{display:none}
/* el libro es la acción principal de la cabecera: la única píldora rellena en reposo */
.nav__cta--book{background:var(--ink); color:#fff; border-color:var(--ink)}
.nav__cta--book:hover{background:var(--white); color:var(--ink); border-color:var(--ink)}
.site-header--dark:not(.is-scrolled) .nav__cta--book{background:var(--on-dark); color:var(--ink); border-color:var(--on-dark)}
.site-header--dark:not(.is-scrolled) .nav__cta--book:hover{background:transparent; color:var(--on-dark)}
.site-header--dark:not(.is-scrolled) .nav__cta:hover{background:var(--on-dark); color:var(--ink); border-color:var(--on-dark)}
/* hamburguesa: tres barras centradas en el botón; abiertas, giran sobre el mismo centro y forman una X */
.nav-toggle{display:none; position:relative; width:44px; height:44px; margin-right:-10px}
.nav-toggle span{
  position:absolute; left:11px; top:50%; width:22px; height:1.5px; margin-top:-.75px; background:currentColor;
  transition:transform .4s var(--ease), opacity .3s;
}
.nav-toggle span:nth-child(1){transform:translateY(-7px)}
.nav-toggle span:nth-child(3){transform:translateY(7px)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}

/* ---------- portada ----------
   Titular e imagen comparten la primera pantalla: el titular a la izquierda, la presentación
   a la derecha apoyada en la misma línea, y debajo la lámina a todo el ancho en formato panorámico. */
.hero{padding-top:calc(var(--header-h) + clamp(20px, 4vh, 44px)); background:var(--white); position:relative}
.hero__grid{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(24px, 4vw, 72px);
  grid-template-areas:"top top" "title intro" "figure figure" "caption caption";
  align-items:end;
}
.hero__top{
  grid-area:top; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.hero__title{
  grid-area:title; margin:clamp(28px, 5vh, 56px) 0 clamp(24px, 4vh, 40px);
  font-size:clamp(40px, 5.4vw, 84px); line-height:.98; letter-spacing:-.035em;
}
.hero__title em{color:var(--accent)}
.hero__intro{grid-area:intro; max-width:44ch; margin:clamp(20px, 3vh, 32px) 0 clamp(24px, 4vh, 40px)}
.hero__cta{display:flex; align-items:center; gap:18px 24px; flex-wrap:wrap; margin-top:26px}

.hero__figure{
  grid-area:figure; position:relative; margin:0; overflow:hidden; background:var(--paper-2);
}
/* el collage se muestra entero, en su proporción original, sin recorte ni parallax */
.hero__figure img{width:100%; aspect-ratio:2400/1588; object-fit:cover}
.hero__caption{
  grid-area:caption; display:flex; justify-content:space-between; align-items:center; gap:8px 16px; flex-wrap:wrap;
  padding:12px 0 0; border-top:1px solid var(--line); margin-top:8px;
}
/* enlace en línea (la flecha viaja con la última palabra) con 44 px de área táctil */
.hero__caption a{display:inline-block; padding:14px 0; margin:-14px 0; transition:color .3s}
.hero__caption a svg{display:inline-block; width:12px; height:12px; margin-left:8px; vertical-align:-1px; transition:transform .5s var(--ease-out)}
.hero__caption a:hover{color:var(--accent)}
.hero__caption a:hover svg{transform:translateX(4px)}

/* ---------- enfoque ---------- */
.approach{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px, 5vw, 96px); align-items:start}
.approach__statement{font-size:clamp(28px, 3.6vw, 52px); line-height:1.12; letter-spacing:-.025em; max-width:18ch; margin-top:18px}
.pillars{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(20px, 3vw, 40px); margin-top:clamp(36px, 5vw, 72px)}
.pillar{border-top:1px solid var(--ink); padding-top:20px}
.pillar .num{font-size:13px; display:block; margin-bottom:24px; letter-spacing:.1em}
.pillar h3{font-family:var(--font-body); font-weight:500; font-size:15px; letter-spacing:-.005em; margin-bottom:10px}
.pillar p{font-size:14.5px; color:var(--ink-2); line-height:1.6; font-weight:300}
.approach__aside{position:relative}
/* la figura lleva el color del papel debajo para que el multiply del boceto se funda con la sección */
.approach__aside .sketch{position:relative; margin:0; background:var(--paper)}
.approach__aside .sketch img{position:relative; z-index:1; mix-blend-mode:multiply}
.approach__aside figcaption{position:relative; z-index:1; margin-top:14px}

/* ---------- proyectos ---------- */
.projects{display:flex; flex-direction:column; gap:clamp(64px, 9vw, 140px)}
.project{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(18px, 3vw, 48px); align-items:end;
}
.project__media{grid-column:1 / span 8; position:relative}
.project__media img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease-out)}
.project:hover .project__media img{transform:scale(1.035)}
.project__media a{display:block; aspect-ratio:3/2; overflow:hidden; background:var(--paper-2)}
.project--alt .project__media{grid-column:5 / span 8}
/* un dibujo de linea sobre blanco no tiene borde propio: se le da el mismo filete fino que a las laminas */
.project--dibujo .project__media a{border:1px solid var(--hair); background:var(--white)}
.project--alt .project__body{grid-column:1 / span 4; grid-row:1}
.project__body{grid-column:9 / span 4; display:flex; flex-direction:column; gap:18px; padding-bottom:6px}
.project__num{font-size:clamp(44px, 5vw, 72px); line-height:1; color:var(--accent); font-family:var(--font-display); font-weight:200; letter-spacing:-.03em}
.project__title{font-size:clamp(28px, 2.9vw, 42px); line-height:1.05}
.project__meta{display:flex; flex-direction:column; gap:4px; color:var(--ink-2); font-size:14px; font-weight:300}
.project__meta strong{font-weight:500; color:var(--ink)}
.project__excerpt{font-size:14.5px; color:var(--ink-2); line-height:1.6; font-weight:300; max-width:40ch}
.project__body .link{margin-top:6px; align-self:flex-start}
.project__caption{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 0 0; border-top:1px solid var(--line); margin-top:10px;
  color:var(--muted); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.project__caption span{text-wrap:balance}

.book-banner{
  margin-top:clamp(64px, 9vw, 140px); display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(24px, 4vw, 72px);
  align-items:center; padding:clamp(28px, 4vw, 56px); background:var(--paper); border:1px solid var(--line); overflow:hidden;
}
.book-banner h3{font-size:clamp(26px, 2.8vw, 40px); margin:10px 0 14px}
.book-banner p{color:var(--ink-2); font-weight:300; max-width:48ch}
.book-banner__actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}
.book-stack{position:relative; aspect-ratio:3/2; perspective:1400px}
.book-stack img{
  position:absolute; width:78%; left:11%; top:12%; box-shadow:0 20px 50px rgba(31,33,33,.16);
  transition:transform .9s var(--ease-out); transform-origin:center; background:#fff;
}
.book-stack img:nth-child(1){transform:rotate(-6deg) translate(-10%, 8%)}
.book-stack img:nth-child(2){transform:rotate(2deg) translate(0, 2%)}
.book-stack img:nth-child(3){transform:rotate(7deg) translate(10%, -6%)}
.book-banner:hover .book-stack img:nth-child(1){transform:rotate(-9deg) translate(-16%, 10%)}
.book-banner:hover .book-stack img:nth-child(3){transform:rotate(10deg) translate(16%, -8%)}

/* ---------- el ensayo abierto en la propia pagina: el visor de libros dentro de un marco ---------- */
.lector__marco{display:block; width:100%; height:86vh; height:min(86svh, 940px); min-height:min(480px, 96svh); border:0; background:var(--paper)}
.lector__pie{display:flex; justify-content:space-between; align-items:center; gap:14px 28px; flex-wrap:wrap; margin-top:22px}
.lector__acciones{display:flex; gap:14px 28px; flex-wrap:wrap}
@media (max-width:859px){
  /* en el movil el libro va a sangre: la hoja gana los margenes de la pagina */
  .lector__marco{width:calc(100% + 2*var(--gut)); margin-inline:calc(-1*var(--gut)); height:88vh; height:min(88svh, calc(100svh - var(--header-h)), calc(142vw + 120px)); min-height:0}
}

/* ---------- memorias del PFG: una serie numerada de documentos ---------- */
.docs{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(36px, 4vw, 56px) clamp(20px, 3vw, 48px)}
.doc{display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--ink); padding-top:18px}
.doc .num{font-size:13px; letter-spacing:.1em}
.doc h3{font-size:clamp(20px, 1.7vw, 24px); letter-spacing:-.015em}
.doc p{font-size:14.5px; color:var(--ink-2); line-height:1.6; font-weight:300; max-width:46ch}
/* el pie cae al fondo: las seis tarjetas cierran en la misma linea */
.doc__pie{margin-top:auto; padding-top:10px; display:flex; justify-content:space-between; align-items:baseline; gap:12px 16px; flex-wrap:wrap}
.doc__meta{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}

/* ---------- sobre mí ---------- */
.about{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(32px, 6vw, 110px); align-items:start}
.portrait{position:sticky; top:calc(var(--header-h) + 24px); margin:0; max-width:420px}
.portrait::before{content:""; position:absolute; right:-9%; top:42%; width:70%; height:50%; background:var(--blush)}
.portrait img{position:relative; z-index:1; width:100%; aspect-ratio:442/650; object-fit:cover; filter:grayscale(1) contrast(1.02)}
.portrait figcaption{position:relative; z-index:1; margin-top:16px; display:flex; justify-content:space-between; gap:6px 12px; flex-wrap:wrap}
.portrait figcaption span{white-space:nowrap}
.about__body h2{font-size:clamp(34px, 4.4vw, 64px); margin:18px 0 clamp(20px, 2.5vw, 32px)}
.about__bio{max-width:62ch; margin-bottom:clamp(36px, 4vw, 56px)}
.cv{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(24px, 3vw, 48px); align-items:start; border-bottom:1px solid var(--line)}
.cv h3{font-size:11px; font-family:var(--font-body); font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:18px}
.cv-item{padding:16px 0; border-top:1px solid var(--line)}
.cv-item__title{font-weight:500; font-size:15px; letter-spacing:-.005em}
.cv-item__where{font-size:13px; color:var(--muted); margin:2px 0 8px}
.cv-item__text{font-size:14px; color:var(--ink-2); line-height:1.55; font-weight:300}
.tools{margin-top:clamp(32px, 4vw, 56px); display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:clamp(24px, 3vw, 48px)}
.tools h3{font-size:11px; font-family:var(--font-body); font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:14px}
.tag-row{display:flex; flex-direction:column; gap:12px}
/* los datos de contacto del CV: una fila a todo el ancho, bajo herramientas e idiomas */
.tools__contacto{grid-column:1 / -1}
.datos{display:flex; flex-wrap:wrap; gap:4px 28px; font-size:14px}
.datos li{padding-block:6px}
.datos a{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:5px; transition:text-decoration-color .3s}
.datos a:hover{text-decoration-color:var(--ink)}
.tag-row > div{display:grid; grid-template-columns:112px minmax(0,1fr); align-items:start; gap:8px 10px; font-size:14px}
.tag-row > div > span:first-child{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-top:7px}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{padding:5px 11px; border:1px solid var(--line); border-radius:999px; font-size:12.5px; color:var(--ink-2); background:var(--white)}

/* ---------- servicios ---------- */
.services{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; border-top:1px solid var(--ink)}
.service{
  display:flex; flex-direction:column;
  padding:28px clamp(16px, 2vw, 32px) 36px 0; border-right:1px solid var(--line); position:relative; transition:background .4s;
}
.service:last-child{border-right:0}
/* la línea de terracota crece con transform (sin recalcular layout) */
.service::before{
  content:""; position:absolute; left:0; top:-1px; height:2px; width:calc(100% - clamp(16px, 2vw, 32px)); background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease-out);
}
.service:hover::before{transform:scaleX(1)}
.service .num{display:block; font-size:13px; letter-spacing:.1em; margin-bottom:56px}
.service h3{font-size:clamp(20px, 1.7vw, 24px); margin-bottom:14px; letter-spacing:-.015em}
.service p{font-size:14.5px; color:var(--ink-2); line-height:1.6; font-weight:300}
/* las etiquetas caen al fondo: las cuatro columnas cierran en la misma linea */
.service ul{margin-top:auto; padding-top:16px; display:flex; flex-wrap:wrap; gap:6px}
.service li{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
/* el punto viaja con la palabra anterior: nunca abre línea */
.service li:not(:last-child)::after{content:"·"; margin-left:6px; color:var(--accent)}

/* ---------- contacto ---------- */
.contact{background:var(--ink); color:var(--on-dark); padding-block:clamp(80px, 11vw, 160px) 40px}
.contact .eyebrow{color:var(--on-dark-muted)}
.contact__grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px, 5vw, 96px); align-items:end}
.contact h2{font-size:clamp(46px, 8vw, 128px); letter-spacing:-.04em; line-height:.95; margin:20px 0 20px}
.contact__note{max-width:44ch; font-size:clamp(16px, 1.25vw, 19px); font-weight:300; line-height:1.55; color:var(--on-dark-muted); margin-bottom:32px}
.contact :focus-visible{outline-color:var(--on-dark)}
.contact__mail{
  position:relative; display:inline-block; font-family:var(--font-display); font-weight:300; font-size:clamp(20px, 2.6vw, 38px); letter-spacing:-.02em;
  border-bottom:1px solid rgba(237,234,228,.4); padding-bottom:6px; transition:border-color .4s, color .4s;
}
.contact__mail::before{content:""; position:absolute; inset:-14px 0}
.contact__mail:hover{border-color:var(--on-dark); color:#fff}
.contact dl{margin:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px 24px}
.contact dt{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--on-dark-muted); margin-bottom:10px}
.contact dd{margin:0; font-size:15px; font-weight:300}
/* enlaces del pie con 44 px de alto sin alterar el ritmo de la lista */
.contact dd a{position:relative; display:inline-block; border-bottom:1px solid rgba(237,234,228,.28); transition:border-color .3s}
.contact dd a::before{content:""; position:absolute; inset:-12px 0}
.contact dd a:hover{border-color:var(--on-dark)}
.contact dd .sep{color:var(--on-dark-muted); margin:0 8px}
.contact__foot{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:clamp(64px, 8vw, 120px); padding-top:22px; border-top:1px solid rgba(237,234,228,.16);
}
.contact__foot .brand__mark{width:58px}
.contact__foot .eyebrow{font-size:11px}
.contact__foot nav{display:flex; gap:0 22px; flex-wrap:wrap}
.contact__foot nav a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-muted); transition:color .3s;
}
.contact__foot nav a:hover{color:var(--on-dark)}

/* ---------- páginas de proyecto ---------- */
.p-hero{padding-top:calc(var(--header-h) + clamp(28px, 6vh, 72px)); background:var(--white)}
.p-hero__top{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--line)}
.p-hero__top a{display:inline-block; padding:14px 0; margin:-14px 0}
.p-hero__title{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px, 3vw, 48px); align-items:baseline;
  margin:clamp(32px, 6vh, 72px) 0 clamp(28px, 5vh, 56px);
}
.p-hero__num{font-family:var(--font-display); font-weight:200; font-size:clamp(56px, 9vw, 150px); line-height:.9; letter-spacing:-.04em; color:var(--accent)}
.p-hero__title h1{font-size:clamp(38px, 6.4vw, 100px); line-height:.98; letter-spacing:-.035em}
.p-meta{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px clamp(16px, 2vw, 40px);
  padding:22px 0 clamp(28px, 4vw, 48px); border-top:1px solid var(--line);
}
.p-meta dt{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.p-meta dd{margin:0; font-size:14.5px; font-weight:300; color:var(--ink)}
.p-hero__figure{margin:0; overflow:hidden; background:var(--white)}
.p-hero__figure img{width:100%; object-fit:cover; will-change:transform}
/* indice de una pagina larga (el PFG): una fila de enlaces bajo el pie de la imagen */
.p-indice{display:flex; flex-wrap:wrap; align-items:center; gap:0 24px; margin-top:clamp(22px, 3vw, 36px); padding-top:6px; border-top:1px solid var(--line)}
.p-indice .eyebrow{margin-right:6px}
.p-indice a{position:relative; display:inline-flex; align-items:center; min-height:44px; font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase}
.p-indice a::after{content:""; position:absolute; left:0; right:0; bottom:11px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease-out)}
.p-indice a:hover::after{transform:scaleX(1); transform-origin:left}
.p-hero__caption{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--line); margin-top:8px}

.p-memoria{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(28px, 5vw, 96px); align-items:start}
.p-memoria__aside{position:sticky; top:calc(var(--header-h) + 24px)}
.p-memoria__aside .sketch{position:relative; margin:28px 0 0; max-width:520px; background:var(--white)}
.p-memoria__aside .sketch img{position:relative; z-index:1; mix-blend-mode:multiply}
.p-memoria__aside figcaption{margin-top:12px}
.p-memoria__text{display:flex; flex-direction:column; gap:22px; max-width:68ch}
.p-memoria__text p{font-size:clamp(16px, 1.25vw, 19px); line-height:1.65; color:var(--ink-2); font-weight:300}
.p-memoria__text p:first-child{font-size:clamp(20px, 1.9vw, 30px); line-height:1.35; color:var(--ink); letter-spacing:-.015em}
.p-memoria__text p:first-child::first-letter{color:var(--accent)}

.steps{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(20px, 3vw, 44px)}
.step{border-top:1px solid var(--ink); padding-top:18px}
.step figure{margin:0 0 22px; background:var(--white); border:1px solid var(--hair)}
.step figure img{width:100%; aspect-ratio:4/3; object-fit:contain; padding:6%}
.steps--32 .step figure img{aspect-ratio:3/2; padding:4%}
.step .num{display:block; font-size:22px; margin-bottom:8px}
.step h3{font-family:var(--font-body); font-weight:500; font-size:15px; margin-bottom:8px}
.step p{font-size:14px; color:var(--ink-2); line-height:1.6; font-weight:300}

.plates{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(18px, 3vw, 44px) clamp(18px, 3vw, 40px)}
.plate{margin:0}
.plate button{display:block; width:100%; overflow:hidden; background:var(--white); border:1px solid var(--hair); cursor:zoom-in}
.plate img{width:100%; aspect-ratio:842/569; object-fit:cover; transition:transform 1.2s var(--ease-out)}
.plate button:hover img{transform:scale(1.02)}
.plate figcaption{display:flex; justify-content:space-between; gap:12px; margin-top:12px}
.plate--wide{grid-column:1 / -1}
.plates--three{grid-template-columns:repeat(3, minmax(0,1fr))}
.plates--four{grid-template-columns:repeat(4, minmax(0,1fr))}
.plates--four .plate figcaption{flex-direction:column; gap:2px}
.plate--photo img{aspect-ratio:3/2}
.plate--sq img{aspect-ratio:4/3}
/* collage de bordes rasgados sobre blanco: se ve entero, sin recortar */
.plate--collage img{object-fit:contain; background:var(--white)}
/* laminas A1 verticales (la entrega del PFG): se ven enteras, sin recorte */
.plate--a1 img{aspect-ratio:2825/4000; object-fit:contain}
/* laminas A4 apaisadas: su proporcion real, para no cortar la escala del pie */
.plate--a4 img{aspect-ratio:842/595}
/* fotos que conservan su proporcion (una vertical junto a una apaisada, apoyadas en la misma linea) */
/* dos clases: tiene que ganar a la regla .plates{1fr} de <=900 y solo apilarse en movil */
.plates.plates--natural{grid-template-columns:minmax(0,16fr) minmax(0,9fr); align-items:end}
.plate--horizontal img{aspect-ratio:4/3}
.plate--vertical img{aspect-ratio:3/4}
/* dentro de una seccion, un grupo de laminas con su propio titulo pequeno */
/* el indice de la entrega: el orden de las laminas es el flujo del proyecto */
.entrega-indice{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px clamp(14px, 2vw, 32px); margin:0 0 clamp(32px, 4vw, 56px); padding:0; list-style:none}
.entrega-indice li{display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--ink); padding-top:14px}
.entrega-indice .num{font-size:13px; letter-spacing:.1em}
.entrega-indice li span + span{font-size:15px; font-weight:500; letter-spacing:-.005em}
.plates__group + .plates__group{margin-top:clamp(56px, 7vw, 104px)}
.plates__head{display:flex; justify-content:space-between; align-items:flex-end; gap:12px 24px; flex-wrap:wrap; margin-bottom:clamp(24px, 3vw, 40px)}
.plates__head h3{font-size:clamp(22px, 2vw, 30px); letter-spacing:-.015em}
/* tamano con suelo propio: nunca por debajo de los 11 px del sistema, sea cual sea el titulo */
.plates__head h3 .num{font-size:clamp(13px, 1.25vw, 18px); margin-right:12px; vertical-align:.18em}
/* 50.75ch a 14,5 px mide lo mismo que los 46ch a 16 px de .section-head p: los dos parrafos arrancan en el mismo eje */
.plates__head p{color:var(--ink-2); font-weight:300; font-size:14.5px; line-height:1.6; max-width:50.75ch}

/* video de proceso: vertical, al lado de su texto */
/* el video de la maqueta, vertical, centrado bajo la cabecera de su seccion */
.p-video{margin:0 auto; width:100%; max-width:360px}
.p-video video{display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; background:var(--ink); border:1px solid var(--hair)}
.p-video figcaption{display:flex; justify-content:space-between; gap:12px; margin-top:12px}
/* laminas A0 verticales: la serie A es 1:raiz(2), asi que el panel manda sobre la rejilla */
.plate--a0 img{aspect-ratio:1/1.4145}

.p-next{border-top:1px solid var(--line)}
.p-next a{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(24px, 4vw, 72px); align-items:center;
}
.p-next__media{overflow:hidden; background:var(--paper-2)}
.p-next__media img{width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform 1.4s var(--ease-out)}
.p-next a:hover .p-next__media img{transform:scale(1.035)}
.p-next h2{font-size:clamp(30px, 4vw, 60px); margin:12px 0 16px}
.p-next .link{margin-top:20px}

/* ---------- visor (lightbox) ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1000; background:rgba(24,25,25,.96); color:var(--on-dark);
  display:none; flex-direction:column;
}
.lightbox.is-open{display:flex}
.lightbox__top{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px clamp(16px, 3vw, 32px)}
.lightbox__top .eyebrow{color:var(--on-dark-muted)}
.lightbox__body{flex:1; min-height:0; display:grid; grid-template:minmax(0,1fr) / minmax(0,1fr); place-items:center; padding:0 clamp(12px, 3vw, 40px) 12px}
.lightbox__body img{width:100%; height:100%; min-height:0; object-fit:contain; filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
/* mientras llega la imagen nueva no se ve la anterior con el nombre de otra */
.lightbox__body img.is-loading{visibility:hidden}
.lightbox__top,.lightbox__foot{position:relative; z-index:1}
.lightbox__foot{display:flex; justify-content:center; align-items:center; gap:22px; padding:0 20px calc(18px + env(safe-area-inset-bottom))}
.lb-btn{width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(237,234,228,.3); border-radius:50%; transition:border-color .3s, opacity .3s}
.lb-btn:hover:not(:disabled){border-color:var(--on-dark)}
.lb-btn:disabled{opacity:.3; cursor:default}
.lb-btn svg{width:14px; height:14px}
.lightbox__count{font-size:11px; letter-spacing:.16em; color:var(--on-dark-muted); font-variant-numeric:tabular-nums}
.lightbox__close{font-size:11px; letter-spacing:.2em; text-transform:uppercase; min-height:44px}
.lightbox__actions{display:flex; align-items:center; gap:clamp(16px, 3vw, 32px)}
.lightbox__full{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-muted);
  transition:color .3s;
}
.lightbox__full:hover{color:var(--on-dark)}
.lightbox__full svg{width:11px; height:11px}
.lightbox__full[hidden]{display:none}
.lightbox__full-short{display:none}
body.lb-open{overflow:hidden}
body.lb-open .site-header{visibility:hidden}

/* ---------- aparición al hacer scroll (solo con JS) ----------
   La clase .js-off la pone la cabecera de cada página si main.js no ha arrancado a los 2,5 s:
   la página nunca se queda en blanco por un script que no llega. */
.js:not(.js-off) .reveal{opacity:0; transform:translateY(22px); transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out)}
.js:not(.js-off) .reveal.in{opacity:1; transform:none}
.js .reveal[data-delay="1"]{transition-delay:.12s}
.js .reveal[data-delay="2"]{transition-delay:.24s}
.js .reveal[data-delay="3"]{transition-delay:.36s}

/* ---------- menú móvil ---------- */
.nav-overlay{
  position:fixed; inset:0; z-index:850; background:var(--paper); display:none; flex-direction:column; justify-content:center;
  padding:calc(var(--header-h) + 8px) var(--gut) var(--gut); overflow-y:auto;
}
.nav-overlay.is-open{display:flex}
.nav-overlay a{font-family:var(--font-display); font-weight:300; font-size:clamp(34px, 9vw, 64px); letter-spacing:-.03em; line-height:1.15; padding:6px 0; border-bottom:1px solid var(--line)}
.nav-overlay .eyebrow{margin-bottom:24px}
.nav-overlay__foot{margin-top:32px; display:flex; gap:12px; flex-wrap:wrap}
.nav-overlay__foot a{
  display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 18px;
  font-family:var(--font-body); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1;
  border:1px solid var(--ink); border-radius:999px;
}
.nav-overlay__foot a svg{width:12px; height:12px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .services{grid-template-columns:repeat(2, minmax(0,1fr))}
  .service:nth-child(2n){border-right:0}
  .service:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .steps{grid-template-columns:repeat(2, minmax(0,1fr))}
  .docs{grid-template-columns:repeat(2, minmax(0,1fr))}
  .plates--four{grid-template-columns:repeat(2, minmax(0,1fr))}
  /* las A1 son un indice: siguen a cuatro columnas hasta los 900 px, donde la regla de <=900 las pasa a dos */
  .plates.plates--a1{grid-template-columns:repeat(4, minmax(0,1fr))}
}
@media (max-width:900px){
  :root{--header-h:64px}
  .nav{display:none}
  .nav-toggle{display:block}
  .brand__text{display:none}
  /* el CTA del PDF se queda junto a la hamburguesa, en versión corta y con 44 px de alto */
  .nav__cta{min-height:44px; padding:0 14px}
  .nav__cta-long{display:none}
  .nav__cta-short{display:inline}
  .hero__grid{grid-template-columns:1fr; grid-template-areas:"top" "title" "figure" "caption" "intro"}
  .hero__title{margin:clamp(24px, 4vh, 40px) 0 clamp(20px, 3vh, 28px)}
  .hero__intro{max-width:62ch; margin:clamp(20px, 3vh, 32px) 0 0}
  .approach,.about,.contact__grid,.book-banner,.p-memoria,.p-next a{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr; gap:14px}
  /* a una columna el parrafo ocuparia todo el ancho: la medida manda */
  .pillar p{max-width:62ch}
  .project,.project--alt{display:flex; flex-direction:column; align-items:stretch}
  .project__body{padding-top:4px}
  /* el plano rosa sobresale un 9 % a la derecha: se deja sitio para que no desborde la pantalla */
  .portrait{max-width:340px; width:calc(100% - 32px)}
  .p-meta{grid-template-columns:repeat(2, minmax(0,1fr))}
  .p-memoria__aside,.portrait{position:static}
  .p-memoria__aside .sketch{max-width:420px}
  .plates,.plates--three{grid-template-columns:1fr}
  /* las A1 son verticales: a una columna serian veinte mil pixeles; a dos se leen como indice */
  .plates.plates--a1{grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px 16px}
  /* las laminas se quedan en dos: a una sola columna serian ocho pantallas de scroll */
  .book-stack{width:100%; max-width:420px; margin:0 auto; aspect-ratio:4/3}
  .approach__aside{order:-1}
}
@media (max-width:600px){
  .hero__title{font-size:clamp(36px, 10.5vw, 56px)}
  .services{grid-template-columns:1fr}
  .service{border-right:0; border-bottom:1px solid var(--line); padding-right:0}
  .service:last-child{border-bottom:0}
  .steps{grid-template-columns:1fr}
  .docs{grid-template-columns:1fr}
  .cv,.tools{grid-template-columns:1fr}
  .contact dl{grid-template-columns:1fr}
  .plates.plates--natural{grid-template-columns:1fr}
  .p-hero__title{grid-template-columns:1fr; gap:4px}
  .plates--four{grid-template-columns:1fr}
  /* las A1 son verticales: a una columna serian dieciseis pantallas; a dos se leen como indice */
  .lightbox__full .lightbox__full-long{display:none}
  .lightbox__full .lightbox__full-short{display:inline}
  .entrega-indice{grid-template-columns:1fr; gap:0}
  .entrega-indice li{flex-direction:row; align-items:baseline; gap:16px; padding:11px 0; border-top-color:var(--line)}
  .entrega-indice li:first-child{border-top-color:var(--ink)}
  .entrega-indice .num{min-width:52px}
}

/* Con movimiento reducido se apaga todo lo que se mueve solo: cinta, parallax, aparición al hacer scroll,
   zoom de imágenes y giro de las láminas. Los cambios de color en hover se mantienen. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .p-hero__figure img{transform:none !important}
  /* la regla base usa :not(.js-off) y suma esa especificidad: hay que igualarla o no se aplica */
  .js:not(.js-off) .reveal,.js .reveal{opacity:1; transform:none; transition:none}
  .js .reveal[data-delay="1"],.js .reveal[data-delay="2"],.js .reveal[data-delay="3"]{transition-delay:0s}
  .project__media img,.p-next__media img,.plate img,.book-stack img,.link svg,.hero__caption a svg{transition:none}
  /* el subrayado de la navegacion cambia solo al hacer scroll: sin movimiento, aparece y ya */
  .nav__link::after,.link::after,.p-indice a::after{transition:none}
  .project:hover .project__media img,.p-next a:hover .p-next__media img,.plate button:hover img{transform:none}
  .link:hover svg,.link--down:hover svg,.hero__caption a:hover svg{transform:none}
  .book-banner:hover .book-stack img:nth-child(1){transform:rotate(-6deg) translate(-10%, 8%)}
  .book-banner:hover .book-stack img:nth-child(3){transform:rotate(7deg) translate(10%, -6%)}
}

@media print{
  .site-header,.nav-overlay,.lightbox,.book-banner,.lector{display:none !important}
  .contact{background:#fff; color:#000}
}

/* enlace al libro debajo de las láminas */
.plates__more{margin-top:clamp(28px, 4vw, 48px)}