/* =========================================================================
   PEGADA ARQUITECTURA · hoja de estilos (dirección «Silencio»)
   Novantrek, 10/10/2026.

   Lienzo #FFFFFF en todo, sin modo oscuro. Dos voces tipográficas, alojadas en
   /fuentes/ (OFL, subconjunto latino, sin CDN):
     · Newsreader Light (300), redonda y cursiva: titulares, entradillas, índices
       y pies «Fig. 0X». Sustituye a Cormorant Garamond (10/10/2026): Cormorant
       descoloca las tildes de «-ción», «Xoán»… en cualquier peso; Newsreader las centra.
     · Hanken Grotesk (variable): texto corrido, rótulos en versal y cifras.
   Sin estilos en línea (CSP), sin sombras, degradados, esquinas redondas ni
   iconos. Las líneas miden 1 px.

   Contraste WCAG 2.2 sobre #FFFFFF (calculado; el generador lo vuelve a
   comprobar a partir de estas variables):
     tinta   #1C1A17  17,36:1  titulares, enlaces, foco, líneas de índice
     tinta-2 #4A4541   9,46:1  texto corrido
     gris    #6E6963   5,44:1  rótulos, pies de foto, cifras de índice
     pend    #55514C   7,87:1  marcas [PENDIENTE]
     error   #B3261E   6,54:1  mensajes del formulario
     linea   #DAD6D0   1,44:1  SOLO decorativa: filetes entre filas que ya
                               separan el espacio y los títulos (no la exige 1.4.11)

   Movimiento: todo dentro de prefers-reduced-motion: no-preference, al final.
   ========================================================================= */

@font-face{font-family:"Newsreader";font-style:normal;font-weight:300;font-display:swap;src:url(/pegada-arquitectura/fuentes/newsreader-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300;font-display:swap;src:url(/pegada-arquitectura/fuentes/newsreader-latin-300-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(/pegada-arquitectura/fuentes/hanken-grotesk-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Respaldos con las métricas ajustadas (anchos medidos en Edge sobre los titulares de la web, 10/10/2026; ascenso y descenso
   de la tabla hhea de cada fuente, 1470/-530 sobre 2000, divididos por el ajuste): el cambio de fuente no mueve la página.
   Newsreader 300 mide el 101,0 % de Times New Roman (la cursiva, el 92,9 % de la cursiva de Times); Hanken, el 100,35 % de Arial. */
@font-face{font-family:"Newsreader respaldo";font-style:normal;src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Times");size-adjust:101%;ascent-override:72.8%;descent-override:26.2%;line-gap-override:0%}
@font-face{font-family:"Newsreader respaldo";font-style:italic;src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT"),local("Times Italic");size-adjust:92.9%;ascent-override:79.1%;descent-override:28.5%;line-gap-override:0%}
@font-face{font-family:"Hanken respaldo";src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:100.35%;ascent-override:99.65%;descent-override:29.9%;line-gap-override:0%}

:root{
  color-scheme:light;
  --fondo:#FFFFFF;
  --tinta:#1C1A17;
  --tinta-2:#4A4541;
  --gris:#6E6963;
  --pend:#55514C;
  --error:#B3261E;
  --foco:#1C1A17;
  --linea:#DAD6D0;

  --serif:"Newsreader","Newsreader respaldo",Georgia,serif;
  --sans:"Hanken Grotesk","Hanken respaldo",system-ui,sans-serif;

  --t-mini:.78125rem;                                    /* 12,5 px: rótulos en versal */
  --t-pie:.84375rem;                                     /* 13,5 px: pies de foto */
  --t-peq:.9375rem;                                      /* 15 px */
  --t-texto:1.0625rem;                                   /* 17 px: texto corrido */
  /* Newsreader tiene la x más alta que Cormorant: los cuerpos de la serif bajan un 8 % para ocupar lo mismo */
  --t-h3:clamp(1.375rem,1.1rem + .95vw,2.125rem);        /* títulos de índice */
  --t-lead:clamp(1.375rem,1rem + 1.4vw,2.375rem);        /* entradillas */
  --t-cita:clamp(1.875rem,1rem + 3vw,4.25rem);           /* frases en grande */
  --t-cita-media:clamp(2rem,1.2rem + 2.2vw,3.25rem);     /* cita bajo un H1 grande (un solo titular grande por pantalla) */
  --t-h1:clamp(2.75rem,1rem + 5.6vw,7.5rem);             /* título de página interior */
  --t-h1-largo:clamp(2.25rem,1rem + 3.6vw,5.25rem);      /* título de página de varias palabras (los dos nombres) */
  --t-display:clamp(3rem,1rem + 6.8vw,9rem);             /* portada y «Hablemos» */

  --margen:max(clamp(1.25rem,4.2vw,4.5rem),calc((100vw - 110rem) / 2));
  --hueco:clamp(.75rem,1.6vw,1.5rem);
  --orilla:max(0px,calc(var(--margen) - var(--hueco)));
  --seccion:clamp(6rem,3rem + 9vw,13rem);
  --cab-alto:5.25rem;

  --lenta:cubic-bezier(.2,.7,0,1);       /* máscaras y líneas: arranque decidido, llegada larga */
  --suave:cubic-bezier(.2,.7,0,1);       /* textos */
}
@media (min-width:60em){:root{--cab-alto:6.5rem}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--fondo);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--cab-alto) + 1rem)}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 var(--t-texto)/1.65 var(--sans);font-kerning:normal;font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,figure,dl,dd,ol,ul,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
address{font-style:normal}
em{font-style:italic}
strong{font-weight:500}
abbr[title]{text-decoration:none;cursor:auto}
h1,h2,h3,h4{font-weight:inherit;font-size:inherit}
p{text-wrap:pretty}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.28em;text-decoration-color:var(--gris)}
a:hover{text-decoration-color:currentColor}
::selection{background:var(--tinta);color:var(--fondo)}
:focus-visible{outline:2px solid var(--foco);outline-offset:4px}
[hidden]{display:none!important}
main:focus{outline:none}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.salta{position:absolute;left:var(--margen);top:-6rem;z-index:60;background:var(--fondo);color:var(--tinta);padding:.75rem 1rem;outline:1px solid var(--tinta)}
.salta:focus{top:.75rem}

/* ---------- retícula: 12 columnas + una orilla a cada lado para las fotos a sangre ----------
   línea 1 = borde de la pantalla · 2 = columna 1 · 14 = fin de la columna 12 · 15 = borde */
.rejilla{display:grid;grid-template-columns:[sangre-ini] var(--orilla) [c1] repeat(12,minmax(0,1fr)) [c13] var(--orilla) [sangre-fin];column-gap:var(--hueco)}
.rejilla>*{grid-column:2/14;min-width:0}
.sangre{grid-column:1/-1}
@media (min-width:60em){
  .c1-3{grid-column:2/5}.c1-4{grid-column:2/6}.c1-5{grid-column:2/7}.c1-6{grid-column:2/8}.c1-7{grid-column:2/9}.c1-8{grid-column:2/10}.c1-9{grid-column:2/11}
  .c4-8{grid-column:5/10}.c4-9{grid-column:5/11}.c4-10{grid-column:5/12}.c4-11{grid-column:5/13}.c4-12{grid-column:5/14}
  .c5-10{grid-column:6/12}.c5-12{grid-column:6/14}.c6-12{grid-column:7/14}.c7-12{grid-column:8/14}.c8-12{grid-column:9/14}.c9-12{grid-column:10/14}
  .c1-7s{grid-column:1/9}.c7-12s{grid-column:8/15}
}
.sec{padding-top:var(--seccion)}
.sec--junta{padding-top:clamp(3.5rem,2rem + 4vw,6rem)}

/* ---------- voces ---------- */
.rotulo{position:relative;display:flex;align-items:baseline;gap:1rem;padding-top:.85rem;font:500 var(--t-mini)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta)}
.rotulo::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--tinta);transform-origin:0 50%}
.rotulo__n{color:var(--gris);font-variant-numeric:tabular-nums lining-nums;letter-spacing:.06em}
/* subapartados (Equipo, Valores, Principios, Legal…): sin número, en gris y con el filete claro; solo los cinco apartados llevan número y filete de tinta */
.rotulo--sub{color:var(--gris)}
.rotulo--sub::before{background:var(--linea)}
.mini{font:500 var(--t-mini)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.lead{font:300 var(--t-lead)/1.22 var(--serif);letter-spacing:-.008em;text-wrap:pretty}
.cita{font:300 var(--t-cita)/1.06 var(--serif);letter-spacing:-.018em;text-wrap:balance}
.cita--media{font-size:var(--t-cita-media);line-height:1.12}
.display{font:300 var(--t-display)/.96 var(--serif);letter-spacing:-.026em;text-wrap:balance}
.h1{font:300 var(--t-h1)/.98 var(--serif);letter-spacing:-.024em;text-wrap:balance}
.h1--largo{font-size:var(--t-h1-largo);line-height:1.04;letter-spacing:-.018em}
.h3{font:300 var(--t-h3)/1.1 var(--serif);letter-spacing:-.008em}
.texto{max-width:34rem;color:var(--tinta-2);font-size:var(--t-texto);line-height:1.65}
.texto p+p{margin-top:1.1em}
.peq{font-size:var(--t-peq);line-height:1.55;color:var(--gris)}
.num{font-variant-numeric:tabular-nums lining-nums}
.ind{font:400 var(--t-mini)/1 var(--sans);letter-spacing:.06em;color:var(--gris);font-variant-numeric:tabular-nums lining-nums}
.vers{font-variant-caps:all-small-caps;letter-spacing:.045em}
.lead em,.cita em,.display em,.h1 em{letter-spacing:-.01em}
.display em,.h1 em{letter-spacing:-.016em}
@media (max-width:40em){.texto,.legal p,.indice__p,.ficha p{hyphens:auto}}

/* enlaces de acción: versal pequeña con un subrayado que se dibuja */
.enlace{display:inline-flex;align-items:center;min-height:2.75rem;font:500 var(--t-mini)/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--tinta);background:linear-gradient(currentColor,currentColor) 0 calc(50% + .85em)/100% 1px no-repeat}
.boton{display:inline-flex;align-items:center;min-height:2.75rem;padding:0;border:0;background:linear-gradient(currentColor,currentColor) 0 calc(50% + .85em)/100% 1px no-repeat;color:var(--tinta);font:500 var(--t-mini)/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
@keyframes subraya{0%{background-size:100% 1px;background-position:100% calc(50% + .85em)}45%{background-size:0 1px;background-position:100% calc(50% + .85em)}46%{background-position:0 calc(50% + .85em)}100%{background-size:100% 1px;background-position:0 calc(50% + .85em)}}
.acciones{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;margin-top:2.5rem}

/* ---------- fotos y pies ---------- */
.fig{display:flex;flex-direction:column;min-width:0}
.marco{position:relative;overflow:clip}   /* clip, no hidden: hidden crearía un contenedor de desplazamiento y el paralaje (view()) se quedaría quieto */
.marco picture{display:block;height:100%}
.revela-img::after{content:"";position:absolute;inset:0;z-index:1;background:var(--fondo);transform-origin:50% 0;transform:scaleY(0);pointer-events:none}
.marco img{width:100%;height:100%;object-fit:cover}
.paral{position:absolute;inset:-8% 0;height:auto;margin:0}   /* fuera de flujo y un 8 % más alto por arriba y por abajo: el paralaje (±6 %) nunca descubre el fondo */
.r-2x3{aspect-ratio:2/3}.r-3x4{aspect-ratio:3/4}.r-4x5{aspect-ratio:4/5}.r-1x1{aspect-ratio:1/1}
.r-5x4{aspect-ratio:5/4}.r-4x3{aspect-ratio:4/3}.r-3x2{aspect-ratio:3/2}.r-16x9{aspect-ratio:16/9}
.r-21x9{aspect-ratio:4/5}
@media (min-width:60em){.r-21x9{aspect-ratio:21/9}}
.op-50-40{object-position:50% 40%}.op-50-50{object-position:50% 50%}.op-40-50{object-position:40% 50%}
.op-45-50{object-position:45% 50%}.op-50-60{object-position:50% 60%}.op-55-45{object-position:55% 45%}
.pie-foto{display:flex;gap:.9rem;align-items:baseline;margin-top:.9rem;font:400 var(--t-pie)/1.45 var(--sans);color:var(--gris)}
.pie-foto__n{flex:none;font:italic 300 1rem/1 var(--serif);letter-spacing:.01em;color:var(--tinta);font-variant-numeric:lining-nums}
.pie-foto__c{margin-left:auto;flex:none;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.04em}
.fig--enlace a{display:block;text-decoration:none;color:inherit}
.vacio{color:var(--gris)}
/* en móvil el pie va a todo el ancho del texto (número · texto · contador); solo se desplaza la imagen */
@media (max-width:47.99em){.pie-foto{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:.9rem}.pie-foto__c{margin-left:0}}

/* ---------- borrador ---------- */
.franja-borrador{padding:.45rem var(--margen);border-bottom:1px solid var(--linea);font:400 .75rem/1.5 var(--sans);letter-spacing:.02em;color:var(--gris);text-align:center}
.franja-borrador a{color:var(--tinta)}
@media (max-width:37.5em){.franja-borrador__mas{display:none}}   /* «Borrador · Notas de revisión», en una línea */
.pendiente{font:400 .75rem/1.5 var(--sans);letter-spacing:0;font-style:normal;text-transform:none;color:var(--pend);border-bottom:1px dashed var(--gris);-webkit-box-decoration-break:clone;box-decoration-break:clone;overflow-wrap:anywhere}
.aviso-pendiente{max-width:40rem;margin-top:2.5rem;padding:1rem 0;border:0;border-top:1px dashed var(--gris);color:var(--pend);font-size:var(--t-peq);line-height:1.55}
.aviso-pendiente p+p,.aviso-pendiente p+ul{margin-top:.75rem}
.aviso-pendiente ul{padding-left:1.2em;list-style:disc}
.aviso-pendiente .pendiente{border:0}
.aviso-pendiente code{font:inherit;color:var(--tinta)}
.nota-borrador{max-width:40rem;margin-top:2rem;font:400 .75rem/1.55 var(--sans);letter-spacing:.01em;color:var(--pend)}   /* nota discreta del borrador (Proyectos) */
.nota-borrador a{color:var(--tinta)}

/* ---------- cabecera ---------- */
.cab{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:var(--cab-alto);padding:1rem var(--margen);background:var(--fondo)}
.cab__logo{position:relative;z-index:2;display:block;flex:none;padding:.5rem 0}
.cab__logo img{width:8rem}
.cab__nav{display:none}
.cab__nav ul{display:flex;gap:clamp(1.5rem,2.6vw,3rem);margin-top:6px}   /* centrado: baja el menú 3 px, a la línea base del logotipo */
.cab__nav a,.pie a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat}
.cab__nav a{display:inline-flex;align-items:center;min-height:2.75rem;font:400 .9375rem/1 var(--sans);letter-spacing:.01em;background-position:0 calc(50% + .75em)}
.cab__nav a:hover,.pie a:hover,.cab__nav a[aria-current="page"]{background-size:100% 1px}
.cab__menu summary{position:relative;z-index:2;display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .25rem;font:500 var(--t-mini)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;list-style:none;cursor:pointer}
.cab__menu summary::-webkit-details-marker{display:none}
.cab__cierra,.cab__menu[open] .cab__abre{display:none}
.cab__menu[open] .cab__cierra{display:inline}
/* con el menú abierto la página no se desplaza: el panel y «Cerrar» se quedan en su sitio */
html:has(.cab__menu[open]){overflow:hidden}
.cab__panel{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--cab-alto) + clamp(3rem,10vh,6rem)) var(--margen) 2.5rem;background:var(--fondo);overflow-y:auto}
.cab__panel ol{display:grid;gap:.25rem}
.cab__panel ol a{display:flex;align-items:baseline;gap:1rem;padding:.35rem 0;font:300 clamp(2.25rem,9.5vw,3.25rem)/1.05 var(--serif);letter-spacing:-.015em;text-decoration:none}
.cab__panel ol a[aria-current="page"]{font-style:italic}
.cab__num{flex:none;min-width:1.5rem;font:400 .75rem/1 var(--sans);font-style:normal;letter-spacing:.06em;color:var(--gris);font-variant-numeric:tabular-nums lining-nums}
.cab__panel-pie{display:grid;gap:.5rem;margin-top:2.5rem;font:400 var(--t-pie)/1.5 var(--sans);color:var(--gris)}
.cab__panel-pie a{display:inline-block;padding:.2rem 0;color:var(--tinta);text-decoration:none}
.cab__panel-pie a:hover{text-decoration:underline}
@media (min-width:60em){
  .cab__logo img{width:9.5rem}
  .cab__nav{display:block}
  .cab__menu{display:none}
}

/* ---------- cabecera de página interior ---------- */
.cab-pagina{row-gap:1.75rem;padding-top:clamp(1.5rem,1rem + 3vw,4rem)}
.cab-pagina .h1,.cab-pagina .display{margin-top:.25rem}
.cab-pagina .lead{max-width:30em;margin-top:1rem}
.cab-pagina .texto{margin-top:1rem}
.cab-pagina__cita{margin-top:2rem;font-size:clamp(1.75rem,1rem + 1.9vw,2.75rem);line-height:1.12}   /* Filosofía: la cita, en la columna del título y alineada abajo con la foto */
/* con foto a la derecha, la entradilla pesa menos que el título (4–5 líneas) */
.cab-pagina--foto .lead{font-size:clamp(1.25rem,1rem + .9vw,1.625rem);line-height:1.35;max-width:none}
@media (min-width:60em){
  .cab-pagina{padding-top:clamp(2rem,1rem + 4vw,5rem)}
  .cab-pagina .rotulo{grid-column:2/5;grid-row:1;align-self:start}
  .cab-pagina .h1,.cab-pagina .display{grid-column:5/14;grid-row:1}
  .cab-pagina .lead,.cab-pagina .texto{grid-column:5/11;grid-row:2;margin-top:1.5rem}
  .cab-pagina .aviso-pendiente,.cab-pagina .nota-borrador,.cab-pagina__enlace{grid-column:5/11;grid-row:3}
  .cab-pagina--foto .h1{grid-column:5/9;min-width:0;font-size:min(var(--t-h1),3.9vw)}   /* junto a la foto la columna es estrecha: el título se ajusta para que «bioconstrucción» quepa sin pisar la foto */
  .cab-pagina--foto .cab-pagina__cita{font-size:min(1.75rem,2.3vw)}   /* la cita, por debajo del título en tamaño */
  .cab-pagina--foto .lead,.cab-pagina--foto .cab-pagina__cita{grid-column:5/9}
  .cab-pagina--foto .lead,.cab-pagina--foto .cab-pagina__cita{padding-right:clamp(2rem,4vw,4rem)}   /* calle entre el texto y la foto (el título no, para que no se parta en cinco líneas) */
  .cab-pagina--foto .cab-pagina__cita{grid-row:2;align-self:end;margin-top:3rem}
  .cab-pagina--foto .fig{grid-column:9/-1;grid-row:1/4;align-self:start;margin-top:.5rem}
  .cab-pagina--foto .marco{max-height:80svh}
  .cab-pagina--foto .pie-foto{padding-right:var(--margen)}
}

/* ---------- portada ---------- */
.portada{row-gap:2rem;padding-top:clamp(1rem,3vw,2.5rem)}
.portada__texto{display:flex;flex-direction:column;min-height:0}
.portada__h1{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}   /* el h1 lleva dentro el antetítulo y el lema (plan SEO): se comporta como antes la columna */
.portada__ante{font:500 var(--t-mini)/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.portada__titulo{margin-top:1.5rem;font:300 var(--t-display)/.96 var(--serif);letter-spacing:-.026em}
.portada__linea{display:block;padding:.08em 0 .22em;margin:-.08em 0 -.22em;overflow:hidden}   /* máscara de cada línea: deja sitio a tildes y descendentes */
@media (max-width:40em){.portada__titulo{font-size:clamp(3.25rem,12.5vw,4.25rem)}}   /* en móvil, a 390 px unos 49 px: «arquitectura» ocupa el ancho */
.portada__linea>span{display:block}
.portada__titulo em{letter-spacing:-.012em}
.portada__foto{grid-column:1/-1;display:flex;flex-direction:column;min-height:0}
.portada__foto .marco{aspect-ratio:4/5;max-height:84svh}
.cajetin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem var(--hueco);position:relative;padding-top:1rem;font:400 var(--t-pie)/1.45 var(--sans)}
.cajetin::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--tinta);transform-origin:0 50%}
.cajetin dt{font:500 var(--t-mini)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.cajetin dd{margin-top:.3rem;color:var(--tinta-2);max-width:22em}
.cajetin .pie-foto__n{display:block;margin-bottom:.2rem;text-transform:none;letter-spacing:.01em}   /* «Fig. 01», no en versal: el dt la heredaba */
.cajetin .pendiente{display:table;margin-top:.3rem}
@media (min-width:40em) and (max-width:59.99em){
  .portada__foto .marco{aspect-ratio:auto;height:min(84svh,60rem)}
}
@media (min-width:60em){
  .portada{grid-template-rows:minmax(30rem,calc(100svh - var(--cab-alto)));padding-top:0;row-gap:0}
  html:has(.franja-borrador) .portada{grid-template-rows:minmax(30rem,calc(100svh - var(--cab-alto) - 2.1rem))}
  .portada__texto{grid-column:2/8;grid-row:1;padding:0 0 1.75rem}
  .portada__ante{margin-top:-.3em}   /* las versales del rótulo, a la altura del borde superior de la foto */
  .portada__titulo{margin-top:auto;padding-right:var(--hueco)}
  .portada__foto{grid-column:8/-1;grid-row:1}
  .portada__foto .marco{flex:1;aspect-ratio:auto;max-height:none;min-height:0}
  .cajetin{grid-column:2/14;grid-row:2;grid-template-columns:repeat(12,minmax(0,1fr));margin-top:1.25rem;padding-top:1.1rem}
  .cajetin>div{grid-column:span 3}
  .cajetin>div:nth-child(2){grid-column:span 3}
  .cajetin>div:last-child{grid-column:span 3}
}

/* ---------- apartados de la portada ---------- */
.estudio{row-gap:2.5rem}
.estudio__p1{margin-top:.5rem}
.estudio__fig{margin-top:2rem}
.estudio__equipo .equipo__p{margin-top:2rem}
.estudio__enlace{margin-top:1rem}
/* dos ejes de texto en toda la portada: la columna 5 (396 px a 1440) y la columna 10 (955 px) */
@media (min-width:60em){
  .estudio .rotulo{grid-column:2/5;grid-row:1;align-self:start;margin-top:.35em}
  .estudio__lead{grid-column:5/13;grid-row:1}
  .estudio__p1{grid-column:5/9;grid-row:2;margin-top:3rem}
  .estudio__p2{grid-column:10/14;grid-row:2;margin-top:3rem}
  .estudio__fig{grid-column:2/8;grid-row:3;margin-top:clamp(5rem,8vw,8rem)}
  .estudio__equipo{grid-column:10/14;grid-row:3;align-self:end;padding-bottom:2.6rem}
  .estudio__enlace{grid-column:10/14;grid-row:4;margin-top:1.5rem}
}

.filosofia{row-gap:2.5rem}
.filosofia__sub{margin-top:.5rem}
.filosofia__enlace{margin-top:.5rem}
@media (min-width:60em){
  .filosofia .rotulo{grid-column:2/5;grid-row:1;align-self:start;margin-top:.35em}
  .filosofia .cita{grid-column:5/14;grid-row:1}
  .filosofia__sub{grid-column:10/14;grid-row:2;margin-top:2rem}
  .filosofia .indice{grid-column:5/14;grid-row:3;margin-top:clamp(4rem,7vw,7rem)}
  .filosofia__enlace{grid-column:5/14;grid-row:4;margin-top:1.5rem}
}

.pausa{padding-top:var(--seccion)}
.pausa .pie-foto{padding-inline:var(--margen);justify-content:flex-end}

.servicios{row-gap:2.5rem}
/* portada: entradilla, los tres primeros títulos en una línea y el enlace (el índice completo está en /servicios) */
.servicios__tres{font:300 var(--t-h3)/1.3 var(--serif);letter-spacing:-.008em;color:var(--tinta)}
.servicios__tres span{color:var(--gris);padding:0 .25em}
.servicios__tres a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(50% + .62em)/0 1px no-repeat}
.servicios__tres a:hover{background-size:100% 1px}
.servicios__enlace{margin-top:.5rem}
.indice{margin-top:1rem}
.indice li{display:grid;grid-template-columns:2.75rem minmax(0,1fr);align-items:baseline;row-gap:.6rem;padding:1.5rem 0 1.85rem}
.indice li:last-child::after,.principios li:last-child::after,.datos__fila:last-child::after,.personas li:last-child::after,.fases li:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--linea)}
.indice__t{grid-column:2;font:300 var(--t-h3)/1.1 var(--serif);letter-spacing:-.008em}
.indice__t a,.personas__n a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(50% + .62em)/0 1px no-repeat}
.indice__t a:hover,.personas__n a:hover{background-size:100% 1px}
.indice__p{grid-column:2;max-width:30rem;font-size:var(--t-peq);line-height:1.6;color:var(--tinta-2)}
.indice__p p+p{margin-top:.75em}
@media (min-width:60em){
  .servicios .rotulo{grid-column:2/5;grid-row:1;align-self:start;margin-top:.35em}
  .servicios__lead{grid-column:5/13;grid-row:1}
  .servicios .indice{grid-column:5/14;grid-row:2;margin-top:clamp(4rem,7vw,7rem)}
  .servicios .rotulo+.indice{grid-row:1;margin-top:0}   /* sin entradilla, el índice arranca a la altura del rótulo */
  .servicios__tres{grid-column:5/14;grid-row:2;margin-top:3rem}
  .servicios__enlace{grid-column:5/14;grid-row:3;margin-top:1.5rem}
  .indice li{grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--hueco);padding:1.75rem 0 2.1rem}
  .indice .ind{grid-column:1}
  .indice__t{grid-column:2/6}
  .indice__p{grid-column:6/10}
  .indice--ancho li{grid-template-columns:repeat(12,minmax(0,1fr))}
  .indice--ancho .indice__t{grid-column:2/7}
  .indice--ancho .indice__p{grid-column:7/12}
}

/* una sola obra a sangre (16:9); el enlace, en el eje de su pie de foto (el margen) */
.obra{row-gap:2.5rem}
.obra__a{grid-column:1/-1}
.obra__a .pie-foto{padding-inline:var(--margen)}
.obra__enlace{margin-top:.5rem}
@media (min-width:60em){
  .obra .rotulo{grid-column:2/5;grid-row:1}
  .obra__a{grid-column:1/-1;grid-row:2;margin-top:2.5rem}
  .obra__enlace{grid-column:2/14;grid-row:3;margin-top:1.5rem}
}

.equipo{row-gap:2.5rem}
.equipo .personas{margin-top:-1.5rem}
.personas li{position:relative;padding:1.5rem 0 1.4rem}
.personas__n{font:300 var(--t-h3)/1.1 var(--serif);letter-spacing:-.008em}
.personas__c{margin-top:.35rem;font:400 var(--t-peq)/1.5 var(--sans);color:var(--gris)}
.personas .enlace{margin-top:.25rem}
.equipo__p{margin-top:2.5rem}
@media (min-width:60em){
  .equipo .rotulo{grid-column:2/5;grid-row:1;align-self:start;margin-top:.35em}
  .equipo__texto{grid-column:5/11;grid-row:1}
  .equipo__texto{grid-column:5/14}   /* el equipo acaba donde acaban los índices (Valores) */
  .personas li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:var(--hueco);align-items:baseline}
  .personas__c{grid-column:1}
  .personas .enlace{grid-column:2;grid-row:1/3;justify-self:end;margin-top:0}
}

.contacto{row-gap:2.5rem}
.contacto__p{margin-top:.5rem}
.datos{margin-top:2rem}
.datos__fila{position:relative;display:grid;gap:.6rem;padding:1.5rem 0 1.75rem}
.datos dt{font:500 var(--t-mini)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.datos dd{font:400 var(--t-texto)/1.6 var(--sans)}
.datos__lista{display:flex;flex-direction:column;align-items:flex-start}
.datos__lista a{padding:.15rem 0;font:300 clamp(1.25rem,1rem + .8vw,1.75rem)/1.3 var(--serif);letter-spacing:-.006em;overflow-wrap:anywhere;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(50% + .66em)/0 1px no-repeat}
.datos__lista a:hover{background-size:100% 1px}
.datos__lista--tel a{font-variant-numeric:tabular-nums lining-nums;letter-spacing:0}
.datos address{color:var(--tinta-2)}
.datos .mapas{margin-top:.5rem;font-size:var(--t-peq);color:var(--gris)}
.datos .mapas a{display:inline-block;padding:.35rem 0;color:var(--tinta)}
@media (min-width:40em){.datos__lista--tel{flex-direction:row;flex-wrap:wrap;gap:0 2.5rem}}
@media (min-width:60em){
  .contacto .rotulo{grid-column:2/5;grid-row:1;align-self:start;margin-top:.6em}
  .contacto__titulo{grid-column:5/14;grid-row:1}
  .contacto__p{grid-column:5/10;grid-row:2;margin-top:1.5rem}
  .contacto .acciones{grid-column:5/14;grid-row:3;margin-top:2.5rem}
  .datos__fila{grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--hueco);align-items:baseline;padding:1.9rem 0 2.1rem}
  .datos dt{grid-column:1/3}
  .datos dd{grid-column:3/10}
}

/* ---------- llamada final de las páginas interiores ---------- */
.llamada{row-gap:2rem}
.llamada__p{margin-top:.5rem}
.llamada--corta .acciones{margin-top:1.5rem}
@media (min-width:60em){
  .llamada .rotulo{grid-column:2/5;grid-row:1;align-self:start;margin-top:.6em}
  .llamada .display,.llamada .cita{grid-column:5/14;grid-row:1}
  .llamada__p{grid-column:5/10;grid-row:2;margin-top:1.5rem}
  .llamada .acciones{grid-column:5/14;grid-row:3;margin-top:2rem}
  /* versión corta: una línea de entradilla con el enlace al lado, en el eje de la columna 10 */
  .llamada--corta .lead{grid-column:5/10;grid-row:1}
  .llamada--corta .acciones{grid-column:10/14;grid-row:1;align-self:start;margin-top:.35em}
}

/* ---------- estudio (página) ---------- */
.valores .indice__p{max-width:34rem}

/* ---------- filosofía (página) ---------- */
/* las listas cuyas filas son retículas anidadas van a sangre: así sus columnas coinciden con las de la página */
.pilares-largos,.fichas{grid-column:1/-1}
.pilares-largos{margin-top:1.5rem}
.pilar-largo{position:relative;row-gap:1.75rem;padding:2.5rem 0 3.5rem}
.pilar-largo.revela-linea::before,.pilar-largo:last-child::after{left:var(--margen);right:var(--margen)}   /* las filas van a sangre; sus filetes, dentro de los márgenes */
.pilar-largo:last-child::after{content:"";position:absolute;bottom:0;height:1px;background:var(--linea)}
.pilar-largo--grande{padding-top:0}                              /* la 01, grande y a sangre; las demás, filas de índice con figura pequeña */
.pilar-largo--grande .pilar-largo__fig{grid-column:1/-1}
.pilar-largo--grande .pie-foto{padding-inline:var(--margen)}
.pilar-largo__fig{grid-column:2/14}   /* en móvil, la figura a todo el ancho del texto (4:5); en escritorio, tres columnas */
.pilar-largo__texto .ind{display:block;margin-bottom:1rem}
.pilar-largo__rot{line-height:1.45}   /* número y título original del pilar, sobre la pregunta */
.pilar-largo__texto .h3{max-width:14em}
.pilar-largo__texto .texto{margin-top:1.25rem}
.pilar-largo__texto .enlace{margin-top:1.25rem}
@media (min-width:60em){
  .pilares-sec .rotulo{grid-column:2/5}
  .pilares-largos{margin-top:3rem}
  .pilar-largo{padding:3.5rem 0 4.5rem}
  .pilar-largo--grande{padding-top:0;padding-bottom:clamp(5rem,8vw,8rem)}
  .pilar-largo--grande .pilar-largo__fig{grid-column:1/9;grid-row:1}
  .pilar-largo--grande .pie-foto{padding-inline:var(--margen) 0}
  .pilar-largo--grande .pilar-largo__texto{grid-column:10/14;grid-row:1;align-self:center}
  .pilar-largo__fig{grid-column:2/5;grid-row:1}
  .pilar-largo__texto{grid-column:6/12;grid-row:1}
}

/* ---------- servicios (página) ---------- */
.principios{margin-top:1rem}
.principios li{position:relative;display:grid;grid-template-columns:2.75rem minmax(0,1fr);align-items:baseline;row-gap:.4rem;padding:1.25rem 0 1.45rem;font:300 var(--t-h3)/1.15 var(--serif);letter-spacing:-.008em}
.principios h3{grid-column:2;font-size:clamp(1.375rem,1.15rem + .8vw,1.875rem)}
.principios p{grid-column:2;max-width:26rem;font:400 var(--t-peq)/1.55 var(--sans);letter-spacing:0;color:var(--tinta-2)}
.diagrama{margin-top:2.5rem}
.diagrama svg{width:100%;height:auto}
.diagrama figcaption{margin-top:1.25rem}
.leyenda{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:var(--t-pie);color:var(--gris)}
.leyenda li{display:inline-flex;align-items:center;gap:.5rem}
.muestra{display:inline-block;width:1.75rem;height:0;border-top:1px solid var(--tinta)}
.muestra--aislante{height:.75rem;border:1px solid var(--tinta);background:repeating-linear-gradient(45deg,var(--gris) 0 1px,transparent 1px 5px)}
.muestra--hermetica{border-top:1px dashed var(--tinta)}
.muestra--interior{border-top:2px solid var(--tinta)}
.muestra--exterior{border-top:3px dotted var(--tinta)}
.dg-borde{stroke:var(--tinta);stroke-width:1}
.dg-trama{stroke:var(--gris);stroke-width:1}
.dg-interior{fill:var(--fondo);stroke:var(--tinta);stroke-width:1}
.dg-suelo{fill:none;stroke:var(--gris);stroke-width:1}
.dg-hermetica{fill:none;stroke:var(--tinta);stroke-width:1;stroke-dasharray:8 5}
.dg-vidrio,.dg-equipo{fill:var(--fondo);stroke:var(--tinta);stroke-width:1}
.dg-linea{fill:none;stroke:var(--tinta);stroke-width:1}
.dg-halo{fill:none;stroke:var(--fondo);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.dg-aire-int{fill:none;stroke:var(--tinta);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.dg-aire-ext{fill:none;stroke:var(--tinta);stroke-width:4;stroke-linecap:round;stroke-dasharray:0 9}
.dg-punta{fill:var(--tinta)}
.dg-num circle{fill:var(--fondo);stroke:var(--tinta);stroke-width:1}
.dg-num text{fill:var(--tinta);font:400 17px var(--sans);text-anchor:middle;dominant-baseline:central}
.dg-rotulo{fill:var(--gris);font:400 17px var(--sans);letter-spacing:.06em}
.dg-rotulo--fin{text-anchor:end}
.dg-rotulo--medio{text-anchor:middle}
.fases{margin-top:1rem}
.fases li{position:relative;display:grid;grid-template-columns:2.75rem minmax(0,1fr);align-items:baseline;row-gap:.6rem;padding:1.5rem 0 1.85rem}
.fases h3{grid-column:2;font:300 var(--t-h3)/1.1 var(--serif);letter-spacing:-.008em}
.fases p{grid-column:2;max-width:30rem;font-size:var(--t-peq);line-height:1.6;color:var(--tinta-2)}
@media (min-width:60em){
  .principios-sec .rotulo{grid-column:2/5;grid-row:1;align-self:start;margin-top:.35em}
  .principios-sec .lead{grid-column:5/13;grid-row:1}
  .principios-sec .principios{grid-column:5/9;grid-row:2;margin-top:clamp(4rem,7vw,7rem)}
  .principios-sec .diagrama{grid-column:10/14;grid-row:2;align-self:start;position:sticky;top:calc(var(--cab-alto) + 2rem);margin-top:clamp(4rem,7vw,7rem)}
  .principios li{grid-template-columns:7rem minmax(0,1fr)}   /* el título arranca donde los de .indice (una columna más el hueco) */
  .como .rotulo{grid-column:2/5;grid-row:1;align-self:start;margin-top:.35em}
  .como .lead{grid-column:5/13;grid-row:1}
  .como .fases{grid-column:5/14;grid-row:2;margin-top:clamp(4rem,7vw,7rem)}
  .como .rotulo+.fases{grid-row:1;margin-top:0}
  .fases li{grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--hueco);padding:1.75rem 0 2.1rem}
  .fases .ind{grid-column:1}
  .fases h3{grid-column:2/6}
  .fases p{grid-column:6/10}
}

/* ---------- proyectos ---------- */
.fichas{margin-top:1rem}
.ficha{row-gap:1.75rem}
.ficha+.ficha{margin-top:clamp(6rem,10vw,10rem)}
.ficha__cuerpo .ind{display:block;margin-bottom:1rem}
.ficha__cuerpo h2{max-width:14em}
.ficha__nota{margin-top:.75rem;font-size:var(--t-peq);line-height:1.55;color:var(--gris)}
.ficha__cuerpo .texto{margin-top:1.5rem}
.ficha-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:0 var(--hueco);margin-top:1.5rem;border-top:1px solid var(--tinta)}
.ficha-datos abbr{text-decoration:none}
.ficha-datos div{padding:.8rem 0 .9rem;border-bottom:1px solid var(--linea)}
.ficha-datos dt{font:500 var(--t-mini)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.ficha-datos dd{margin-top:.25rem;font-size:var(--t-peq);font-variant-numeric:tabular-nums lining-nums;color:var(--tinta-2)}
@media (min-width:60em){
  .fichas{margin-top:3rem}
  .ficha__fig{grid-column:1/9;grid-row:1}
  .ficha--vertical .ficha__fig{grid-column:2/8}   /* una foto vertical no ocupa toda la pantalla: seis columnas, dentro del margen */
  .ficha--vertical .ficha__fig .pie-foto{padding-inline:0}
  .ficha__fig .pie-foto{padding-inline:var(--margen) 0}
  .ficha:nth-child(even) .ficha__fig .pie-foto{padding-inline:0 var(--margen)}
  .ficha__cuerpo{grid-column:10/14;grid-row:1;align-self:end;padding-bottom:2.5rem}
  .ficha:nth-child(even) .ficha__fig{grid-column:7/15}
  .ficha:nth-child(even) .ficha__cuerpo{grid-column:2/6}
}

/* ---------- contacto (página) y formulario ---------- */
.contacto-pagina{row-gap:3rem}
.contacto-datos .datos{margin-top:0}
.formulario>p.peq{margin:.75rem 0 2rem}
.campo{display:grid;gap:.5rem;margin-bottom:2.25rem}
.ayuda{margin-top:.1rem;font-size:var(--t-pie);line-height:1.5;color:var(--gris)}   /* ayudas de los campos: más pequeñas que las etiquetas y lejos del campo siguiente */
.campo label{font:500 var(--t-mini)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta)}
.campo .opc{color:var(--gris);letter-spacing:.08em;text-transform:none;font-weight:400}
input,textarea{font:400 var(--t-texto)/1.5 var(--sans);color:var(--tinta);background:var(--fondo);border:0;border-bottom:1px solid var(--gris);border-radius:0;padding:.65rem 0;width:100%;max-width:100%}
textarea{min-height:9rem;resize:vertical}
input:focus-visible,textarea:focus-visible{outline:none;border-bottom:1px solid var(--tinta);box-shadow:0 1px 0 0 var(--tinta)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-bottom:2px solid var(--error)}
.error{color:var(--error);font-size:var(--t-peq)}
.resumen-errores{margin-bottom:2rem;padding:1rem 1.25rem;border:1px solid var(--error)}
.resumen-errores:focus{outline:2px solid var(--foco);outline-offset:3px}
.resumen-errores__t{font:400 var(--t-texto)/1.4 var(--sans);color:var(--error)}
.resumen-errores ul{margin-top:.5rem;padding-left:1.2em;list-style:disc}
.resumen-errores a{color:var(--error)}
.estado{margin-top:1.5rem;padding:.75rem 1rem;border-left:1px solid var(--tinta);color:var(--tinta-2)}
.estado:empty{margin:0;padding:0;border:0}
.capa-datos{margin-top:3rem;padding-top:1rem;border-top:1px solid var(--linea);font-size:var(--t-pie);line-height:1.5;color:var(--gris)}
.capa-datos dl{display:grid;grid-template-columns:max-content 1fr;gap:.25rem 1rem;margin-top:.5rem}
.capa-datos dt{color:var(--tinta)}
.capa-datos a{color:var(--tinta)}
@media (max-width:30em){.capa-datos dl{grid-template-columns:1fr}.capa-datos dd{margin-bottom:.5rem}}
@media (min-width:60em){
  .contacto-datos{grid-column:5/9;grid-row:1}      /* los datos, en el eje del título (col. 5); el formulario, en el de la col. 10 */
  .formulario{grid-column:10/14;grid-row:1}
  .contacto-datos .datos__fila{grid-template-columns:1fr;row-gap:.6rem;padding:1.5rem 0 1.75rem}
  .contacto-datos .datos dt,.contacto-datos .datos dd{grid-column:auto}
}

/* ---------- textos legales y notas de revisión ---------- */
.legal{max-width:42rem;overflow-wrap:anywhere}
.legal h2{font:300 clamp(1.5rem,1.2rem + 1vw,2.125rem)/1.15 var(--serif);letter-spacing:-.008em;margin:3.5rem 0 1rem}
.legal h3{font:500 var(--t-mini)/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:2rem 0 .75rem}
.legal p,.legal li{color:var(--tinta-2)}
.legal p+p,.legal p+ul,.legal ul+p,.legal p+ol{margin-top:1rem}
.legal ul,.legal ol{padding-left:1.2em}
.legal ul{list-style:disc}
.legal ol{list-style:decimal}
.legal li+li{margin-top:.5rem}
.legal dl{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:0 1.5rem;margin-top:1rem;border-top:1px solid var(--linea)}   /* columna fija: todas las tablas alinean los valores */
.legal dt,.legal dd{padding:.6rem 0;border-bottom:1px solid var(--linea)}
.legal dt{font:500 var(--t-mini)/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.legal dd{overflow-wrap:anywhere;color:var(--tinta-2)}
.legal code{font:inherit;color:var(--tinta)}
@media (max-width:36em){.legal dl{grid-template-columns:1fr}.legal dt{border:0;padding-bottom:0}}
.legal .actualizado{margin-top:3.5rem;font-size:var(--t-peq);color:var(--gris)}
.legal>.aviso-pendiente{margin:0 0 3rem}
.tabla{width:100%;border-collapse:collapse;font-size:var(--t-peq);margin-top:1rem}
.tabla th,.tabla td{text-align:left;vertical-align:top;padding:.6rem .75rem .6rem 0;border-bottom:1px solid var(--linea);color:var(--tinta-2)}
.tabla th{font:500 var(--t-mini)/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.tabla-envoltura{overflow-x:auto}
@media (min-width:60em){.legal{grid-column:5/12}}

/* ---------- 404 ---------- */
.no-encontrada .display{max-width:12ch}
.no-encontrada .enlaces{display:flex;flex-wrap:wrap;gap:.5rem 2.5rem;margin-top:2rem}
@media (min-width:60em){.no-encontrada .enlaces{grid-column:5/14;grid-row:3}}

/* ---------- pie ---------- */
.pie{margin-top:var(--seccion);padding-block:3.5rem 2rem;row-gap:2.5rem;border-top:1px solid var(--linea);font:400 .875rem/1.6 var(--sans)}
.pie__logo{margin-bottom:.9rem}
.pie__logo img{width:8rem}
.pie__marca p+p{color:var(--gris)}
.pie ul{display:grid;gap:.15rem}
.pie a{display:inline-flex;align-items:center;min-height:2rem;background-position:0 calc(50% + .75em)}
.pie__contacto{color:var(--tinta-2)}
.pie__contacto ul{margin-top:.75rem}
.pie__contacto a{overflow-wrap:anywhere}
.pie__nav{grid-column:2/8}
.pie__legal{grid-column:8/14}
/* base: © y crédito en la misma línea, «Volver arriba» a la derecha; todo sobre la misma línea base */
.pie__base{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.5rem;padding-top:1.5rem;border-top:1px solid var(--linea);font-size:var(--t-pie);color:var(--gris)}
.pie__base a{color:var(--tinta);min-height:0}
.pie__arriba{margin-left:auto}
@media (min-width:60em){
  .pie{padding-top:4.5rem}
  .pie__logo img{width:9.5rem}
  .pie__marca{grid-column:2/5}
  .pie__contacto{grid-column:5/9}
  .pie__nav{grid-column:10/12}
  .pie__legal{grid-column:12/14}
  .pie__base{grid-column:2/14;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--hueco);margin-top:3rem}
  .pie__copia{grid-column:1/5}
  .pie__credito{grid-column:5/9}
  .pie__arriba{grid-column:10/14;margin-left:0}
}

/* =========================================================================
   Movimiento: lento, escaso y solo si la persona no pidió reducirlo.
   · La portada se anima sola al cargar (CSS): el titular sube línea a línea
     tras su máscara y la foto se asienta (1,06 → 1). La foto se pinta desde
     el primer instante: solo cambia su escala, así no retrasa el LCP.
   · El resto aparece al llegar a él: app.js pone .anima en <html> y .visto en
     cada bloque. Sin JS (o con «reducir movimiento»), todo se ve quieto.
   · Paralaje sutil de las fotos grandes con animation-timeline: view() donde
     hay soporte; si no, app.js lo calcula con IntersectionObserver + rAF.
   · Transición entre páginas con View Transitions (CSS puro).
   ========================================================================= */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .cab__nav a,.pie a,.indice__t a,.personas__n a,.servicios__tres a,.datos__lista a{transition:background-size .9s var(--lenta)}
  .enlace:hover,.boton:hover{animation:subraya 1.1s var(--lenta)}
  .cab{transition:transform .7s var(--suave)}
  .cab--oculta{transform:translateY(-100%)}
  .cab__panel{transition:opacity .6s var(--suave),translate .6s var(--suave)}
  @starting-style{.cab__menu[open] .cab__panel{opacity:0;translate:0 -.75rem}}
  .cab__panel ol li{transition:opacity .8s var(--suave),translate .8s var(--suave)}
  .cab__panel ol li:nth-child(2){transition-delay:.06s}.cab__panel ol li:nth-child(3){transition-delay:.12s}
  .cab__panel ol li:nth-child(4){transition-delay:.18s}.cab__panel ol li:nth-child(5){transition-delay:.24s}.cab__panel ol li:nth-child(6){transition-delay:.3s}
  @starting-style{.cab__menu[open] .cab__panel ol li{opacity:0;translate:0 .75rem}}

  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:.6s var(--suave) both se-va}
  ::view-transition-new(root){animation:.9s var(--suave) both llega}
  @keyframes se-va{to{opacity:0}}
  @keyframes llega{from{opacity:0;transform:translateY(.75rem)}}
  .cab{view-transition-name:cabecera}

  .portada__foto img{animation:portada-escala 1.6s var(--lenta) both}
  .portada__linea>span{animation:sube 1.4s var(--suave) both}
  .portada__linea:nth-child(1)>span{animation-delay:.1s}
  .portada__linea:nth-child(2)>span{animation-delay:.24s}
  .portada__linea:nth-child(3)>span{animation-delay:.38s}
  .portada__ante,.cajetin>*{animation:aparece 1.4s var(--suave) .7s both}
  .cajetin::before{animation:dibuja 1.6s var(--lenta) .5s both}
  @keyframes portada-escala{from{transform:scale(1.06)}to{transform:none}}
  @keyframes sube{from{transform:translateY(140%)}to{transform:none}}   /* 140 %: ni tildes ni puntos asoman bajo la máscara de la línea anterior */
  @keyframes aparece{from{opacity:0}to{opacity:1}}
  @keyframes dibuja{from{transform:scaleX(0)}to{transform:none}}

  /* apariciones al desplazarse (solo con .anima en <html>) */
  .revela{transition:opacity 1.2s var(--suave),transform 1.2s var(--suave);transition-delay:var(--retraso,0s)}
  .anima .revela:not(.visto){opacity:0;transform:translateY(1.25rem)}
  .r1{--retraso:.12s}.r2{--retraso:.24s}.r3{--retraso:.36s}.r4{--retraso:.48s}

  /* la máscara es un velo blanco (::after) que se recoge hacia arriba: si se recortara el propio marco con
     clip-path, IntersectionObserver lo daría por invisible y nunca llegaría a revelarse */
  .revela-img::after{transition:transform 1.5s var(--lenta)}
  .revela-img img{transition:transform 1.6s var(--suave)}
  .anima .revela-img:not(.visto)::after{transform:scaleY(1)}
  .anima .revela-img:not(.visto) img{transform:scale(1.04)}
  .fig--enlace .marco.visto img,.ficha__fig .marco.visto img{transition:transform 1.4s var(--suave)}
  .fig--enlace a:hover .marco.visto img,.fig--enlace a:focus-visible .marco.visto img,.ficha__fig:hover .marco.visto img{transform:scale(1.03)}   /* zoom lento también en las obras de Proyectos */

  .revela-linea{position:relative}
  .revela-linea::before,.rotulo::before{transition:transform 1.4s var(--lenta);transition-delay:var(--retraso,0s)}
  .revela-linea>*,.rotulo>*{transition:opacity 1.1s var(--suave);transition-delay:calc(var(--retraso,0s) + .2s)}
  .anima .revela-linea:not(.visto)::before,.anima .rotulo:not(.visto)::before{transform:scaleX(0)}
  .anima .revela-linea:not(.visto)>*,.anima .rotulo:not(.visto)>*{opacity:0}
  .indice li:nth-child(2),.principios li:nth-child(2),.personas li:nth-child(2),.datos__fila:nth-child(2),.fases li:nth-child(2),.cajetin>div:nth-child(2){--retraso:.1s}
  .indice li:nth-child(3),.principios li:nth-child(3),.datos__fila:nth-child(3),.fases li:nth-child(3){--retraso:.2s}
  .indice li:nth-child(4),.principios li:nth-child(4),.datos__fila:nth-child(4),.fases li:nth-child(4){--retraso:.3s}
  .indice li:nth-child(5),.principios li:nth-child(5),.fases li:nth-child(5){--retraso:.4s}
  .indice li:nth-child(6){--retraso:.5s}

  /* paralaje: la foto se desplaza un 12 % de su alto mientras cruza la pantalla (cabe en el 8 % que sobra arriba y abajo) */
  @supports (animation-timeline:view()){
    .anima .paral{animation:paralaje linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
  @keyframes paralaje{from{transform:translateY(-6%)}to{transform:translateY(6%)}}
}
/* las filas de índice llevan el filete arriba también sin movimiento */
.revela-linea{position:relative}
.revela-linea::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--linea);transform-origin:0 50%}

/* ---------- impresión ---------- */
@media print{
  .cab__nav,.cab__menu,.salta,.franja-borrador,.formulario{display:none!important}
  .cab{position:static}
  .sec,.bodegones,.pausa{padding-top:2rem}
  .diagrama{position:static}
}