@font-face{font-family:"Geist";src:url("/fonts/geist-variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/fonts/geist-mono-variable.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --bg:#E6E7E8; --bg-alt:#D9DADB; --ink:#0E0E0E; --muted:#595A5C; --muted-inv:#A8A8AA;
  --line:rgba(0,0,0,.12); --accent:#2A2724; --inverse:#F4F1EC;
  --leaf:#3D4A3A;   /* el verde del capítulo de materiales, ahora en /nosotros/ */
  --leaf-hondo:#141A12;
  --ff-display:"Geist",system-ui,sans-serif;
  --ff-body:"Geist",system-ui,sans-serif;
  --ff-mono:"Geist Mono",ui-monospace,monospace;
  --step--1:clamp(.83rem,.78rem + .2vw,.94rem);
  --step-0:clamp(1rem,.93rem + .3vw,1.15rem);
  --step-1:clamp(1.3rem,1.1rem + 1vw,1.8rem);
  --step-2:clamp(1.9rem,1.4rem + 2.4vw,3rem);
  --step-3:clamp(2.6rem,1.6rem + 5vw,5.2rem);
  --step-4:clamp(3.2rem,1.6rem + 8vw,7.5rem);
  --space:8px; --container:1320px;
  --pad-section:clamp(4rem,8vw,9rem);
  --ease:cubic-bezier(.22,1,.36,1);--ease-panel:cubic-bezier(.65,0,.35,1);--ease-vuelo:cubic-bezier(.4,.1,.6,.9);--ease-letra:cubic-bezier(.78,0,.22,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--ff-body); font-size:var(--step-0);
  line-height:1.55; font-weight:400;
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--ff-display);font-weight:550;line-height:1.04;letter-spacing:-.02em}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
/* el recuadro azul que pinta el móvil al tocar; el foco de teclado sigue vivo
   por :focus-visible */
a,button{-webkit-tap-highlight-color:transparent}
.container{width:min(100% - 2.5rem,var(--container));margin-inline:auto}
.kicker{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
.section{padding-block:var(--pad-section)}
/* ---- Móvil: rejilla de módulo y tipografía de lámina ----
   La retícula de fondo es el gesto que ata el sitio: es la trama con la que se
   dibuja un plano, y aquí queda debajo de todo, fija, para que el contenido
   corra por encima de una cuadrícula que no se mueve. Solo asoma donde el
   fondo es plano; bajo las fotos no se ve, que es como debe ser. ---- */
@media (max-width:780px){
  :root{--modulo:calc(100vw / 6);--trama:rgba(14,14,14,.055);--trama-inv:rgba(244,241,236,.07)}
  body{position:relative}
  body::before{
    content:"";position:fixed;inset:-1px;z-index:-1;pointer-events:none;
    background-image:
      linear-gradient(to right,var(--trama) 1px,transparent 1px),
      linear-gradient(to bottom,var(--trama) 1px,transparent 1px);
    background-size:var(--modulo) var(--modulo);
  }
  /* las secciones de fondo plano se abren para dejar pasar la trama */
  #proyectos,.pf{background:transparent}
  /* sobre fondo oscuro la trama se invierte */
  .mat,#arquitecto{position:relative}
  .mat::before,#arquitecto::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:
      linear-gradient(to right,var(--trama-inv) 1px,transparent 1px),
      linear-gradient(to bottom,var(--trama-inv) 1px,transparent 1px);
    background-size:var(--modulo) var(--modulo);
  }
  .mat>*,#arquitecto>*{position:relative;z-index:1}

  /* Tipografía de lámina: los títulos pasan a ocupar el ancho, como el rótulo
     de un plano. Es el cambio que más levanta la página en pantalla chica. */
  h1,h2{letter-spacing:-.035em;line-height:.95}
  .arq-name{font-size:clamp(3rem,15vw,4.6rem)}
  /* en móvil el titular cede tamaño para que las cuatro cards quepan con él */
  .mat-title{font-size:clamp(2.6rem,12vw,4rem)}
  .proyectos-head h2{font-size:clamp(2.8rem,14vw,4.2rem)}
}
/* Botón de WhatsApp: solo el glifo, traslúcido. Sin círculo, sin badge verde.
   La sombra suave es lo único que lo sostiene sobre las fotos claras. */
.wa{position:fixed;z-index:90;right:clamp(16px,4.5vw,30px);
  bottom:calc(clamp(16px,4.5vw,30px) + env(safe-area-inset-bottom));
  display:grid;place-items:center;width:44px;height:44px;
  color:#fff;opacity:.7;transition:opacity .35s var(--ease),transform .35s var(--ease)}
/* relleno claro con un filo oscuro: así se lee igual sobre el fondo claro del
   sitio que sobre una foto */
.wa svg{width:30px;height:30px;display:block;fill:rgba(255,255,255,.92);
  stroke:rgba(20,19,15,.45);stroke-width:.55;paint-order:stroke fill;
  filter:drop-shadow(0 1px 4px rgba(20,19,15,.35))}
.wa:hover,.wa:focus-visible{opacity:1;transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.wa{transition:none}}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--inverse);padding:.6rem 1rem;z-index:100}
.skip-link:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
[data-reveal]{opacity:0;transform:translateY(40px);clip-path:inset(0 0 12% 0);will-change:opacity,transform,clip-path}
[data-reveal].is-in{will-change:auto}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;clip-path:none}}
header[role=banner]{position:fixed;inset:0 0 auto;z-index:50;color:var(--ink);transition:transform .5s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
header.nav-on-dark{color:var(--inverse)}
header.is-scrolled{background:rgba(230,231,232,.28);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid rgba(0,0,0,.06)}
header.nav-on-dark.is-scrolled{background:rgba(20,19,15,.34);border-bottom-color:rgba(255,255,255,.12)}
header.is-hidden{transform:translateY(-100%)}
header.is-scrolled .nav-bar{height:68px}
.nav-bar{display:flex;align-items:center;justify-content:space-between;height:84px;color:inherit;transition:height .4s var(--ease)}
/* El logo va inline (no <img>) para poder contraerlo a la marca mini "e|a" en
   móvil: la ventana recorta a las primeras 104 unidades del viewBox y el bloque
   barra+tag viaja hasta pegarse a la "e". 5.698 = 735/129 (proporción del
   logotipo) y .806 = 104/129 (proporción ya contraído). */
.brand{position:relative;display:inline-flex;align-items:center;--logo-h:clamp(22px,.9rem + .8vw,30px)}
.brand-logo{display:block;overflow:hidden;width:calc(var(--logo-h)*5.698);height:var(--logo-h)}
.brand-logo svg{display:block;width:calc(var(--logo-h)*5.698);height:var(--logo-h)}
.brand-logo .logo-linea,.brand-logo .logo-barra,.brand-logo .logo-nombre-e,.brand-logo .logo-nombre-resto,.brand-logo .logo-tag-a,.brand-logo .logo-tag-resto{fill:currentColor}
.brand-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nav-desktop{display:flex;gap:2.5rem;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.12em}
.nav-desktop a{position:relative;padding:.25rem 0}
.nav-desktop a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .35s var(--ease)}
.nav-desktop a:hover::after{width:100%}
.nav-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;margin-right:-9px;background:none;border:0;cursor:pointer;color:inherit}
.nav-toggle span{width:26px;height:2px;background:currentColor;transition:transform .4s var(--ease)}
/* Abierto, las dos rayas se juntan y cruzan: el mismo botón es la X de cerrar.
   Cada una viaja 4px al centro (2px de raya + 6px de hueco = 8 entre ejes). */
.nav-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
/* El panel baja como cortina — se recorta desde abajo en vez de deslizarse,
   así el fondo no se arrastra. Sin display:none: alternarlo mata la
   transición de entrada porque el elemento nace ya en su estado final. */
.nav-overlay{position:fixed;inset:0;background:var(--ink);color:var(--inverse);display:flex;align-items:center;justify-content:center;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease),visibility 0s .7s;z-index:49}
.nav-overlay.is-open{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .7s var(--ease),visibility 0s}
.nav-overlay nav{display:flex;flex-direction:column;gap:1.5rem;text-align:center;font-family:var(--ff-display);font-size:var(--step-2)}
/* los enlaces suben escalonados, ya bajada la cortina */
.nav-overlay nav a{opacity:0;transform:translateY(26px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.nav-overlay.is-open nav a{opacity:1;transform:none}
.nav-overlay.is-open nav a:nth-child(1){transition-delay:.30s}
.nav-overlay.is-open nav a:nth-child(2){transition-delay:.38s}
.nav-overlay.is-open nav a:nth-child(3){transition-delay:.46s}
@media (prefers-reduced-motion:reduce){.nav-overlay{transition:none}.nav-overlay nav a{opacity:1;transform:none}}
/* ---- Header móvil: dos pills de vidrio, no una franja de lado a lado. El logo
   arranca completo y se contrae a la marca mini en cuanto hay scroll, para
   dejar de estorbar sobre el contenido. Ambas pills miden lo mismo ya
   contraídas — que es como se ven casi todo el rato. ---- */
@media (max-width:780px){
  .nav-desktop{display:none}
  .brand{--logo-h:30px}
  /* La franja del header completo se apaga: el fondo ahora vive en las pills.
     Va también el selector .nav-on-dark.is-scrolled porque pesa más que este
     y si no, sobre las secciones oscuras reaparecía la banda con su filo. */
  header.is-scrolled,header.nav-on-dark.is-scrolled{
    background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;
  }
  /* Pastillas translúcidas y planas: un velo parejo que difumina lo que tapa,
     sin filo de luz ni brillos — el fondo se sigue leyendo detrás. El velo va
     del tono del fondo (claro sobre claro, oscuro sobre oscuro) y la tinta del
     contrario, así el logo mantiene el mismo contraste caiga donde caiga. */
  .brand,.nav-toggle{
    position:relative;height:44px;border-radius:999px;border:0;
    background:rgba(244,241,236,.62);color:var(--ink);
    -webkit-backdrop-filter:blur(16px) saturate(125%);
    backdrop-filter:blur(16px) saturate(125%);
    box-shadow:0 4px 14px rgba(0,0,0,.08);
    transition:width .5s var(--ease),background .4s var(--ease),color .4s var(--ease);
  }
  header.nav-on-dark .brand,header.nav-on-dark .nav-toggle{
    background:rgba(20,19,15,.55);color:var(--inverse);
    box-shadow:0 4px 14px rgba(0,0,0,.18);
  }
  .brand{justify-content:center;width:calc(var(--logo-h)*5.698 + 26px)}
  .nav-toggle{display:flex;width:52px;margin-right:0}
  .brand-logo{transition:width .5s var(--ease)}
  .brand-logo .logo-nombre-resto,.brand-logo .logo-tag-resto{transition:opacity .3s var(--ease)}
  .brand-logo .logo-bar-tag{transition:transform .5s var(--ease)}
  header.is-compact .brand{width:52px}
  header.is-compact .brand-logo{width:calc(var(--logo-h)*.806)}
  header.is-compact .logo-nombre-resto,header.is-compact .logo-tag-resto{opacity:0}
  header.is-compact .logo-bar-tag{transform:translateX(-446.6px)}
}
/* Hero contenido: la foto se muestra completa sobre fondo claro (las verticales
   se respetan tal cual). El nombre va centrado encima, con un velo suave. */
#hero{position:relative;overflow:hidden;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;min-height:clamp(360px,56svh,600px);padding:clamp(92px,13vh,140px) clamp(1.25rem,5vw,3rem) clamp(2rem,6vh,4rem)}
.hero-media{position:relative;z-index:0;max-width:100%}
.hero-media img{display:block;width:auto;height:auto;max-width:100%;max-height:78svh;margin-inline:auto}
.hero-cta{display:inline-flex;align-items:center;gap:.55em;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.14em;color:inherit}
.hero-cta>span{padding-bottom:.35em;background:linear-gradient(currentColor,currentColor) 0 100%/35% 1px no-repeat;transition:background-size .45s var(--ease)}
.hero-cta:hover>span{background-size:100% 1px}
.hero-cta::after{content:"→";display:inline-block;transition:transform .4s var(--ease)}
.hero-cta:hover::after{transform:translateX(4px)}
#proyectos{background:var(--bg-alt)}
.proyectos-scroll{position:relative}
.proyectos-track{display:flex;flex-wrap:wrap;gap:clamp(1rem,3vw,2.5rem);padding-inline:clamp(1.25rem,5vw,5rem);margin-top:clamp(2rem,5vw,4rem);will-change:transform}
.proyectos-scroll--active{height:300vh}
.proyectos-scroll--active .proyectos-sticky{overflow:hidden;position:sticky;top:0;height:100svh;display:flex;align-items:center;margin-top:0}
.proyectos-scroll--active .proyectos-track{flex-wrap:nowrap;margin-top:0;max-width:100%}
.proyecto{flex:0 0 min(46vw,560px)}
.proyecto img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.08)}
.proyecto-meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:1rem;border-top:1px solid var(--line);margin-top:1rem}
.proyecto-meta h3{font-size:var(--step-1)}
.proyecto-meta p{color:var(--muted);font-size:var(--step--1)}
.proyecto{transition:transform .6s var(--ease)}
.proyecto:hover img{filter:grayscale(0)}
@media (max-width:780px){
  .proyectos-track{padding-inline:1.25rem}
  .proyecto{flex:0 0 88vw}
}
footer[role=contentinfo]{background:var(--ink);color:var(--inverse);padding-block:clamp(2.2rem,5vw,4rem)}
.pie{display:flex;flex-direction:column}
.pie-logo{width:100%;height:auto;color:inherit}
.pie-logo .logo-nombre,.pie-logo .logo-linea,.pie-logo .logo-barra,.pie-logo .logo-tag{fill:currentColor}
.pie-logo .logo-linea{transform-box:fill-box;transform-origin:left center}
.pie-logo .logo-barra{transform-box:fill-box;transform-origin:center top}
/* El pie es un directorio, no una tira de datos: cuatro columnas con su
   encabezado, y los servicios plegados para que no compitan con lo principal. */
.pie-rejilla{display:grid;gap:1.6rem;margin-top:clamp(2rem,5vw,3.4rem);
  padding-top:clamp(1.6rem,4vw,2.4rem);border-top:1px solid rgba(244,241,236,.16);
  font-family:var(--ff-mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.14em;color:rgba(244,241,236,.72)}
.pie-col{display:flex;flex-direction:column;align-items:flex-start;gap:.62rem;min-width:0}
.pie-tit{color:rgba(244,241,236,.55);letter-spacing:.2em;margin:0}
.pie-rejilla a{transition:color .3s var(--ease)}
.pie-rejilla a:hover{color:var(--inverse)}
.pie-correo{overflow-wrap:anywhere;text-transform:none;letter-spacing:.1em}
.pie-col span{line-height:1.75}

/* Desplegable de servicios: sin el triangulito del navegador, con un signo
   propio que se convierte en menos al abrirse. */
.pie-plegable{gap:0}
.pie-plegable summary{display:flex;align-items:center;gap:.7rem;cursor:pointer;
  list-style:none;padding-bottom:.62rem}
.pie-plegable summary::-webkit-details-marker{display:none}
.pie-plegable summary:hover .pie-tit{color:var(--inverse)}
.pie-mas{position:relative;width:.55rem;height:.55rem;flex:none}
.pie-mas::before,.pie-mas::after{content:"";position:absolute;inset:50% 0 auto 0;
  height:1px;background:rgba(244,241,236,.65);transition:transform .35s var(--ease)}
.pie-mas::after{transform:rotate(90deg)}
.pie-plegable[open] .pie-mas::after{transform:rotate(0)}
.pie-servicios{display:flex;flex-direction:column;gap:.62rem;align-items:flex-start}
/* La apertura se anima donde el navegador lo permite; donde no, simplemente abre. */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .pie-plegable::details-content{block-size:0;overflow:hidden;
    transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
  .pie-plegable[open]::details-content{block-size:auto}
}

.pie-cierre{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;
  margin-top:clamp(1.8rem,4vw,2.6rem);padding-top:1.1rem;
  border-top:1px solid rgba(244,241,236,.16);
  font-family:var(--ff-mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.14em;color:rgba(244,241,236,.55)}
.pie-cierre small{font-size:inherit}

@media (min-width:781px){
  .pie-rejilla{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem clamp(1.5rem,3vw,3rem)}
  .pie-col{gap:.8rem}
  .pie-plegable summary{padding-bottom:.8rem}
  .pie-servicios{gap:.8rem}
}

/* La entrada al panel vive en el © del pie: mismo color, mismo cursor, sin
   subrayado ni hover. Quien no sabe que está ahí, no lo encuentra. */
.pie-acceso{color:inherit;text-decoration:none;cursor:inherit}
.pie-acceso:hover{color:inherit}
.pie-acceso:focus-visible{outline:2px solid var(--inverse);outline-offset:3px}
/* ── Páginas de proyecto ── */
/* Nombre corto sobre la foto del hero: cada letra sube en cascada. Es decorativo
   (aria-hidden) — el nombre completo va en el h1 de abajo. El degradado asegura
   contraste sobre cualquier foto, porque el hero cambia con el morph de entrada. */
.hero-media::after{content:"";position:absolute;inset:0;z-index:1;
  background:rgba(14,14,15,.3);pointer-events:none}
/* Nombre centrado sobre la foto, en su ancho natural — no repartido de borde a
   borde. El cuerpo se acota por el ancho del contenedor (cqw) según cuántas
   letras tenga, para que "04" no se salga de la foto igual que "01".
   La caja recorta (overflow:hidden) y hace de máscara: cada letra entra
   subiendo desde debajo del renglón, en cascada. */
.proy-hero-name{position:absolute;inset:0;z-index:2;margin:0;
  container-type:inline-size;display:flex;justify-content:center;align-items:center;
  padding-inline:clamp(.5rem,1.4vw,1.1rem);color:var(--inverse);
  font-family:var(--ff-display);font-weight:400;line-height:.95;letter-spacing:-.01em}
.hn-linea{display:flex;overflow:hidden;
  /* deja aire para las colas de "g" e "y" sin mover el renglón */
  padding-bottom:.14em;margin-bottom:-.14em}
.proy-hero-name .hn-linea span{display:inline-block;
  font-size:min(8.9vw,calc(100cqw / var(--n) * 1.55),20svh);
  transform:translateY(100%);
  animation:heroName 1.25s var(--ease-letra) forwards;
  animation-delay:calc(1.9s + var(--i) * 25ms)}
@keyframes heroName{to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.proy-hero-name .hn-linea span{transform:none;animation:none}}
.proy-title-block{padding-block:clamp(1.5rem,3vw,2.5rem) 0}
.proy-breadcrumb{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--ff-mono);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);padding-block:.35rem;margin-bottom:clamp(.6rem,1.6vw,1.2rem)}
.proy-breadcrumb::before{content:"←"}
.proy-title{font-family:var(--ff-display);font-size:clamp(2.4rem,1.6rem+4.5vw,5.5rem);font-weight:500;line-height:1.05;letter-spacing:-.02em;margin:0;color:var(--ink)}
.proy-title-rule{border:0;border-top:1px solid var(--line);margin-block:clamp(2rem,4vw,3rem) 0}
.proy-intro-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem);padding-block:clamp(2rem,5vw,4rem)}
@media (min-width:840px){.proy-intro-grid{grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem)}}
.proy-intro-text{font-size:var(--step-0);line-height:1.65;color:var(--ink);max-width:48ch}
.proy-meta-table{display:flex;flex-direction:column}
.proy-meta-row{display:flex;justify-content:space-between;align-items:baseline;padding:clamp(.9rem,1.8vw,1.2rem) 0;border-top:1px solid var(--line);gap:1rem}
.proy-meta-row:last-child{border-bottom:1px solid var(--line)}
.proy-meta-label{font-family:var(--ff-mono);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.proy-meta-value{font-size:var(--step-0);color:var(--ink);text-align:right}
.galeria-2col{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2vw,1.5rem);
  width:min(100% - 2.5rem,var(--container));margin-inline:auto;padding-block:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:780px){.galeria-2col{grid-template-columns:1fr 1fr}}
.galeria-2col figure{display:flex;flex-direction:column;gap:.6rem;margin:0}
.galeria-2col img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--bg-alt)}
/* ANTES y DESPUÉS son el titular de esta comparación, no un pie de foto */
.galeria-2col figcaption{font-family:var(--ff-mono);font-size:clamp(1rem,.75rem + .9vw,1.5rem);
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink);margin-top:.2em}
.galeria-2col.galeria-solo{max-width:560px;margin-inline:auto}
@media (min-width:780px){.galeria-2col.galeria-solo{grid-template-columns:1fr}}
.galeria-solo img{aspect-ratio:auto;height:auto}
.proy-editorial-sticky{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem);padding-block:clamp(3rem,6vw,6rem)}
.proy-editorial-text h2{font-family:var(--ff-display);font-size:clamp(1.6rem,1.2rem+1.8vw,2.6rem);font-weight:500;line-height:1.1;letter-spacing:-.015em;max-width:20ch;color:var(--ink)}
.proy-editorial-text p{font-size:var(--step-0);line-height:1.65;color:var(--muted);margin-top:1.5em;max-width:42ch}
.proy-editorial-text p+p{margin-top:1rem}
.proy-editorial-images{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.5rem)}
.proy-editorial-images img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--bg-alt)}
.proy-editorial-images img.ed-h{aspect-ratio:auto;height:auto;object-fit:fill}
@media (min-width:840px){
  .proy-editorial-sticky{grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
  .proy-editorial-sticky--text-left .proy-editorial-text{position:sticky;top:120px;align-self:start}
  .proy-editorial-sticky--text-right .proy-editorial-text{order:2;position:sticky;top:120px;align-self:start}
  .proy-editorial-sticky--text-right .proy-editorial-images{order:1}
}
/* ---- Página de proyecto en móvil: un texto y el resto obra ----
   En pantalla chica el proyecto se cuenta con fotos, no con bloques de texto
   intercalados: queda el párrafo de entrada con su ficha de datos, y de ahí
   abajo la galería completa a sangre. Los textos editoriales siguen en el
   HTML — solo se ocultan aquí — y en escritorio se ven igual que siempre. ---- */
@media (max-width:839px){
  .pag-proyecto .proy-editorial-text{display:none}
  .pag-proyecto .proy-editorial-sticky{padding-block:0;gap:0}
  .pag-proyecto .proy-intro-grid{padding-bottom:clamp(1.6rem,4vw,2.4rem)}
  /* de borde a borde: el contenedor tiene margen, la obra no lo necesita */
  .pag-proyecto .proy-editorial-images{
    width:100vw;margin-inline:calc(50% - 50vw);
    gap:clamp(.5rem,1.6vw,.9rem);
  }
  .pag-proyecto .proy-editorial-images + .proy-editorial-images,
  .pag-proyecto .proy-editorial-sticky + .proy-editorial-sticky{margin-top:clamp(.5rem,1.6vw,.9rem)}
  /* el salto de lo que lleva márgenes (ficha, antes y después) a la galería a
     sangre se leía como un pegote: aquí empieza otra cosa y hay que notarlo */
  .pag-proyecto .galeria-titulo{display:block;font-family:var(--ff-display);font-weight:500;
    font-size:clamp(1.6rem,1.2rem + 1.8vw,2.6rem);line-height:1.1;letter-spacing:-.015em;
    color:var(--ink);margin:clamp(2rem,7vw,3rem) 0 clamp(.9rem,3vw,1.4rem)}
  .pag-proyecto .antes-title{margin-top:clamp(1rem,4vw,1.6rem)}
  .pag-proyecto .proy-editorial-images img{aspect-ratio:3/4}
  .pag-proyecto .proy-editorial-images img.ed-h{aspect-ratio:4/3;object-fit:cover;height:auto}
}
/* la trama de módulo no entra aquí: la obra manda y el fondo estorba */
@media (max-width:780px){
  body.pag-proyecto::before,body.pag-nosotros::before{display:none}
  /* ni la versión invertida sobre el fondo oscuro de acabados */
  body.pag-nosotros .mat::before,body.pag-nosotros #arquitecto::before{display:none}
}
.relacionados{background:var(--bg-alt);padding-block:clamp(1.8rem,4vw,3rem)}
.relacionados .kicker{color:var(--muted)}
.relacionados-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.9rem,2.2vw,1.4rem);margin-top:clamp(1rem,2.2vw,1.6rem);max-width:1120px}
.proy-meta-value a{color:inherit;padding-bottom:.15em;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  transition:opacity .3s var(--ease)}
.proy-meta-value a:hover{opacity:.62}
.rel-card{display:block}
.rel-card img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:grayscale(.1);transition:filter .4s var(--ease)}
.rel-card:hover img{filter:grayscale(0)}
.rel-card-meta{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;padding-top:.6rem;border-top:1px solid var(--line);margin-top:.6rem}
.rel-card-meta h3{font-size:var(--step-0);font-family:var(--ff-display);font-weight:550}
.rel-card-meta p{color:var(--muted);font-size:var(--step--1)}
@media (max-width:640px){.relacionados-grid{grid-template-columns:1fr 1fr}}
@media (min-width:641px) and (max-width:900px){.relacionados-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}}
/* ── Página de contacto ── */
.contacto-page-hero{background:var(--accent);color:var(--inverse);padding:clamp(6rem,18vh,10rem) 0 clamp(3rem,6vw,5rem)}
.contacto-page-hero .kicker{color:rgba(244,241,236,.7)}
.contacto-page-hero h1{font-size:var(--step-3);max-width:16ch;margin:.4em 0 .6em}
.contacto-page-sub{font-size:var(--step-1);color:rgba(244,241,236,.85);max-width:38ch}
.contacto-form-wrap{max-width:560px;padding-block:clamp(4rem,8vw,7rem)}
.contacto-form{display:flex;flex-direction:column;gap:1.2rem}
.contacto-form label{display:flex;flex-direction:column;gap:.4rem;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.contacto-form input,.contacto-form textarea{background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);font-family:var(--ff-body);font-size:16px;line-height:1.4;text-transform:none;letter-spacing:normal;padding:.6rem 0}
.contacto-form input:focus,.contacto-form textarea:focus{outline:0;border-color:var(--ink)}
.contacto-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;visibility:hidden}
.contacto-form button{align-self:flex-start;margin-top:.5rem;padding:.95rem 2.4rem;border:1px solid var(--ink);background:var(--ink);color:var(--inverse);border-radius:999px;text-transform:uppercase;letter-spacing:.14em;font-size:var(--step--1);cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease)}
.contacto-form button:hover{background:transparent;color:var(--ink)}
.form-ok{color:var(--muted);font-size:var(--step--1)}
/* Tarjeta de contacto: el botón abre esto encima de la página en vez de llevar
   a /contacto/. Es un <dialog> nativo, así que el foco atrapado, el Esc y el
   inerte del fondo los pone el navegador. El diálogo ocupa la pantalla entera y
   la tarjeta va dentro, para que un clic fuera de ella se pueda distinguir. */
.cto{width:100%;max-width:none;height:100%;max-height:none;border:0;margin:0;padding:clamp(.75rem,3vw,2rem);
  background:transparent;overflow:auto;place-items:center;overscroll-behavior:contain}
.cto[open]{display:grid}
.cto::backdrop{background:rgba(10,10,10,.5);backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%)}
/* El diálogo se pinta en el top layer, por encima del cursor propio del sitio:
   dentro de él manda el puntero del sistema o no habría con qué apuntar. */
.has-cursor .cto,.has-cursor .cto *{cursor:auto!important}
.has-cursor .cto a,.has-cursor .cto button,.has-cursor .cto label{cursor:pointer!important}
.has-cursor .cto input,.has-cursor .cto textarea{cursor:text!important}
html:has(.cto[open]) .cursor{opacity:0}

.cto-card{position:relative;width:min(100%,940px);background:var(--bg);color:var(--ink);
  border-radius:18px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.35)}
.cto-cerrar{position:absolute;top:.9rem;right:.9rem;z-index:2;display:grid;place-items:center;
  width:40px;height:40px;border-radius:999px;border:1px solid rgba(244,241,236,.28);
  background:rgba(20,20,20,.35);color:var(--inverse);cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.cto-cerrar:hover{background:rgba(20,20,20,.6);border-color:rgba(244,241,236,.5)}

/* panel izquierdo: el que pone la cara del estudio */
.cto-lado{position:relative;isolation:isolate;background:var(--ink);color:var(--inverse);
  padding:clamp(1.7rem,4vw,2.6rem);display:flex;flex-direction:column;gap:clamp(1.6rem,4vw,2.6rem);justify-content:space-between}
.cto-lado::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url("/images/content/acabado-01-tab.avif") center 42%/cover;opacity:.42;filter:grayscale(.25)}
.cto-lado::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(155deg,rgba(10,10,10,.3),rgba(10,10,10,.78))}
.cto-lado .kicker{color:rgba(244,241,236,.7)}
.cto-titulo{font-size:clamp(1.9rem,1.3rem + 2.2vw,2.7rem);line-height:1.02;letter-spacing:-.02em;margin-top:.35em}
.cto-sub{margin-top:.9em;max-width:32ch;color:rgba(244,241,236,.78);font-size:var(--step--1);line-height:1.5;text-wrap:pretty}
.cto-directo{list-style:none;display:grid;gap:.9rem}
.cto-directo li{display:grid;gap:.15rem}
.cto-directo span:first-child{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,236,.5)}
.cto-directo a,.cto-directo span:last-child{font-size:var(--step-0);color:var(--inverse)}
.cto-directo a{display:inline-block;width:fit-content;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:.15em;transition:background-size .4s var(--ease)}
.cto-directo a:hover{background-size:100% 1px}

.cto-panel{padding:clamp(1.7rem,4vw,2.6rem)}
.cto .contacto-form{gap:clamp(1rem,2.2vw,1.35rem)}
.cto .contacto-form label{gap:.5rem;font-size:.66rem;letter-spacing:.18em;font-family:var(--ff-mono)}
.cto .contacto-form input,.cto .contacto-form textarea{border-bottom-color:rgba(0,0,0,.16)}
.cto .contacto-form input::placeholder,.cto .contacto-form textarea::placeholder{color:var(--muted-inv)}
.cto .contacto-form button[type=submit]{display:inline-flex;align-items:center;gap:.7em;margin-top:.4rem}
.cto .contacto-form button[type=submit] span{transition:transform .35s var(--ease)}
.cto .contacto-form button[type=submit]:hover span{transform:translateX(4px)}

@media (min-width:781px){
  /* dos paneles: el editorial a la izquierda, el formulario a la derecha */
  .cto-card{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
  .cto-cerrar{border-color:rgba(0,0,0,.14);background:rgba(255,255,255,.5);color:var(--ink)}
  .cto-cerrar:hover{background:#fff;border-color:rgba(0,0,0,.3)}
}
@media (max-width:780px){
  /* apilado: el panel oscuro se compacta para que el formulario entre pronto */
  .cto-lado{gap:1.4rem}
  /* en dos columnas el teléfono se partía en tres renglones */
  .cto-directo{gap:.8rem}
  .cto-directo a,.cto-directo span:last-child{font-size:var(--step--1)}
  .cto-directo li:last-child{display:none}
}
.cto[open] .cto-card{animation:cto-entra .55s var(--ease) both}
.cto[open]::backdrop{animation:cto-velo .45s var(--ease) both}
@keyframes cto-entra{from{opacity:0;transform:translateY(24px) scale(.975)}to{opacity:1;transform:none}}
@keyframes cto-velo{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.cto[open] .cto-card,.cto[open]::backdrop{animation:none}}
/* ── Galería del proceso ── */
/* Galería del antes: páginas de 4 fotos que se deslizan con las flechas (sin autoplay) */
/* En móvil los textos editoriales se ocultan y la galería arrancaba sin decir
   qué es. En escritorio no hace falta: cada bloque lleva su propio h2. */
.galeria-titulo{display:none}
.antes-title{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.6rem);font-weight:500;line-height:1.1;letter-spacing:-.015em;max-width:22ch;margin-top:0;color:var(--ink)}
.antes-carrusel{margin-top:clamp(.8rem,1.6vw,1.2rem)}
.antes-nav{display:flex;align-items:center;justify-content:flex-end;gap:1rem;margin-bottom:clamp(1rem,2vw,1.4rem)}
.antes-count{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.18em;color:var(--muted)}
.antes-prev,.antes-next{width:44px;height:44px;display:grid;place-items:center;background:none;
  border:1px solid var(--line);border-radius:999px;color:var(--ink);cursor:pointer;font-size:1rem;
  transition:border-color .3s var(--ease),opacity .3s var(--ease)}
.antes-prev:hover:not(:disabled),.antes-next:hover:not(:disabled){border-color:var(--ink)}
.antes-prev:disabled,.antes-next:disabled{opacity:.35;cursor:default}
.antes-carrusel{--antes-gap:clamp(12px,2vw,22px)}
.antes-stage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--antes-gap)}
/* Con JS la cuadrícula pasa a las páginas y el escenario solo recorta el carril */
.antes-stage--js{display:block;overflow:hidden;transition:height .9s var(--ease)}
.antes-track{display:flex;align-items:start;gap:var(--antes-gap);
  transition:transform .9s var(--ease);will-change:transform}
.antes-page{flex:0 0 100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--antes-gap)}
.antes-slide{margin:0}
.antes-slide[hidden]{display:none}
.antes-slide img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--bg-alt);cursor:zoom-in}
@media (max-width:820px){
  .antes-stage,.antes-page{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- Índice de proyectos: nombres al centro + fotos flotantes al hover ---- */
.pf{position:relative;min-height:100svh;overflow:hidden;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center}

/* Título "Portafolio" arriba, centrado (cursiva serif) */
.pf-title{position:absolute;top:clamp(94px,13vh,140px);left:0;right:0;z-index:5;text-align:center;
  font-family:var(--ff-mono);font-weight:400;text-transform:uppercase;
  font-size:clamp(.9rem,1.6vw,1.15rem);letter-spacing:.26em;color:var(--muted)}

/* Capa de fotos (detrás de los nombres), anclada a la sección con position:absolute
   para que se desplace con el scroll en vez de quedar fija al viewport. display:none
   hasta .pf-ready: sin JS / en móvil no descarga imágenes y el arranque es texto puro. */
.pf-media{position:absolute;inset:0;z-index:1;pointer-events:none;display:none}
.pf-ready .pf-media{display:block}
.pf-set{position:absolute;inset:0}
/* sin fondo propio: durante el cambio el marco entrante deja ver, por el hueco
   que la foto aún no ocupa, a la foto que se va deslizando detrás */
.pf-img{position:absolute;overflow:hidden;opacity:0;visibility:hidden;
  will-change:opacity;box-shadow:0 24px 60px rgba(0,0,0,.16)}
/* la foto se desliza dentro del marco (el marco no se mueve). El gris de carga
   va aquí, no en el marco: así viaja con la foto y el marco sigue transparente */
.pf-img picture{display:block;width:100%;height:100%;background:var(--bg-alt);will-change:transform}
.pf-img img{width:100%;height:100%;object-fit:cover;display:block}
/* Dos verticales grandes a los lados, casi a pantalla completa, con el mismo
   marco que las fotos del hero (clamp(16px,3vw,32px) desde los bordes). El centro
   queda libre para los nombres. Igual para todos los proyectos. */
.pf-img--1{top:calc(84px + clamp(16px,3vw,32px));bottom:clamp(16px,3vw,32px);left:clamp(16px,3vw,32px);width:37vw}
.pf-img--2{top:calc(84px + clamp(16px,3vw,32px));bottom:clamp(16px,3vw,32px);right:clamp(16px,3vw,32px);width:37vw}

/* Nombres centrados */
.pf-hint{display:none}
.pf-list{position:relative;z-index:4;list-style:none;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(.05rem,.6vh,.55rem);text-align:center}
/* inline-block: el ancho lo da solo el nombre (01, 02…), así queda
   centrado en el eje de la página. */
.pf-name{position:relative;display:inline-block;font-family:var(--ff-display);font-weight:550;
  /* --nc = letras del nombre: los nombres largos ("Casa Cuatro") se achican solos
     para no salirse del canal central de 26vw ni pisar las fotos de los lados. */
  font-size:min(clamp(1.9rem,3.9vw,3.6rem),calc((26vw - 3rem) / var(--nc,2) * 1.5));
  white-space:nowrap;letter-spacing:-.02em;line-height:1.02;
  text-decoration:none;color:var(--ink);transition:opacity .45s var(--ease)}
.pf-list.is-hot .pf-item:not(.is-act) .pf-name{opacity:.3}
/* Stats del proyecto: en desktop aparecen justo debajo de los nombres, solo para el
   proyecto con hover y en sync con las fotos (los anima el JS); en móvil van bajo
   cada nombre (ver @media). Absolute anclado al pie de la lista → no mueve los
   nombres; los 5 se solapan en el mismo punto y solo el activo se ve. */
.pf-stat{position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:5;pointer-events:none;margin-top:clamp(2.6rem,7.5vh,4.5rem);
  /* Dos líneas (año · m² / tipo · uso) vía <br>. width:max-content evita que el
     absolute con left:50% se encoja a min-content (una palabra por renglón); el
     max-width lo mantiene dentro del canal central (26vw − marcos) sin pisar fotos. */
  width:max-content;max-width:calc(26vw - 4.5rem);text-align:center;
  font-family:var(--ff-mono);font-size:clamp(.6rem,.82vw,.72rem);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);line-height:1.8;opacity:0;visibility:hidden}

/* ---- Móvil: pantalla partida. Arriba la foto del proyecto, abajo una rueda
   de nombres como el selector de hora de iOS — los de la orilla se inclinan
   hacia atrás y se apagan, el del centro manda. Al girarla cambia la foto.
   El giro (rotateX/escala/opacidad por item) lo calcula el JS en cada frame;
   aquí solo va el andamio y el encuadre. ---- */
@media (max-width:820px){
  /* stretch: el .pf de escritorio centra sus hijos y aquí eso los encoge a su
     contenido — el panel de la foto, que solo lleva capas absolutas, colapsa a 0 */
  /* --pf-vis = renglones a la vista. El alto del riel y el relleno de las
     puntas salen de ahí, así que mover el tamaño del renglón no descuadra nada. */
  .pf{height:100svh;min-height:0;overflow:hidden;justify-content:flex-start;align-items:stretch;
    --pf-item:104px;--pf-vis:2.7}
  /* sobre la foto: el título va en claro, como los nombres */
  .pf-title{top:calc(84px + .35rem);z-index:5;color:rgba(255,255,255,.72);
    text-shadow:0 1px 10px rgba(0,0,0,.5)}

  /* la obra ocupa la pantalla entera y los nombres van encima. La foto también
     abre el proyecto: en la base va con pointer-events:none porque en
     escritorio es capa decorativa bajo los nombres */
  .pf-media{position:absolute;inset:0;display:block;margin:0;overflow:hidden;
    background:var(--bg-alt);pointer-events:auto;cursor:pointer}
  /* velo: sin él los nombres se pierden en las fotos claras */
  .pf-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(20,19,15,.5),rgba(20,19,15,.28) 32%,
      rgba(20,19,15,.3) 60%,rgba(20,19,15,.68))}
  .pf-set{position:absolute;inset:0}
  /* una sola vertical a todo el panel: la segunda es del montaje de escritorio */
  /* aquí sí lleva fondo: en móvil las fotos se cruzan con fade, no deslizan */
  .pf-img{position:absolute;inset:0;width:auto;box-shadow:none;background:var(--bg-alt);
    opacity:0;visibility:hidden;transition:opacity .8s var(--ease)}
  .pf-img--2{display:none}
  .pf-set.is-on .pf-img{opacity:1;visibility:visible}

  /* La rueda no usa scroll nativo: el gesto lo lleva el JS para poder frenarlo.
     El scroll del sistema sigue al dedo 1:1 y su inercia no se puede amortiguar,
     así que un tirón rápido siempre salía disparado. touch-action:none entrega
     el gesto entero al JS. Sin él (o sin JS) esto se queda como lista normal,
     que es el estado de .pf-list a secas. */
  .pf-list{position:absolute;inset:0;z-index:4;min-height:0;padding:0;gap:0;
    justify-content:center;perspective:620px;
    -webkit-mask-image:linear-gradient(to bottom,transparent 6%,#000 26%,#000 74%,transparent 94%);
    mask-image:linear-gradient(to bottom,transparent 6%,#000 26%,#000 74%,transparent 94%)}
  .pf-ready .pf-list{overflow:hidden;display:block;touch-action:none}
  /* con el JS vivo cada renglón se coloca solo, midiendo desde el centro del riel */
  .pf-ready .pf-item{position:absolute;left:0;right:0;top:50%;height:var(--pf-item);
    margin-top:calc(var(--pf-item)/-2);display:flex;align-items:center;justify-content:center;
    transform-origin:center;backface-visibility:hidden;will-change:transform,opacity}
  .pf-name{font-size:min(3rem,calc((100vw - 2.5rem) / var(--nc,2) * 1.75));line-height:1;
    color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35),0 4px 26px rgba(0,0,0,.5);transition:none}
  /* La rueda no se ve como rueda hasta que se toca: quien llega de nuevas
     tocaría el nombre de en medio y se metería al primer proyecto sin haber
     visto el resto. Este renglón lo dice, y se va en cuanto el dedo actúa. */
  /* va sobre el pie de la foto: fuera del flujo (si ocupa alto, la rueda se
     comprime) y lejos de los nombres, que ocupan todo lo que queda abajo */
  .pf-hint{display:block;position:absolute;left:0;right:0;z-index:5;pointer-events:none;
    bottom:calc(.4rem + env(safe-area-inset-bottom));
    padding:2.6rem 1rem .9rem;text-align:center;
    font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.16em;
    text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55);
    opacity:0;transition:opacity .45s var(--ease)}
  /* la enciende el JS al asomar la rueda; así no parpadea al volver de un
     proyecto, cuando ya no hace falta */
  .pf-hint.se-ve{opacity:1}
  .pf-hint::after{content:"";display:block;width:1px;height:11px;margin:.45rem auto 0;
    background:currentColor;transform-origin:top;animation:pfHint 1.8s var(--ease) infinite}

  @keyframes pfHint{0%,100%{transform:scaleY(.3) translateY(0)}45%{transform:scaleY(1) translateY(4px)}}
  @media (prefers-reduced-motion:reduce){ .pf-hint::after{animation:none;transform:scaleY(1)} }
  .pf-list.is-hot .pf-item:not(.is-act) .pf-name{opacity:1}
  .pf-stat{display:none}
}
@media (prefers-reduced-motion:reduce){ .pf-img{transition:none} }

/* Lightbox de fotos en páginas de proyecto */
.galeria-2col img,.proy-editorial-images img{cursor:zoom-in}
body.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(14,14,14,.92);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:lb-in .25s var(--ease)}
.lb[hidden]{display:none}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lb-figure{margin:0;max-width:92vw;max-height:88vh;display:flex}
.lb-figure img{max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-close,.lb-nav{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(244,241,236,.35);color:var(--inverse);
  border-radius:50%;cursor:pointer;transition:background .25s var(--ease),border-color .25s var(--ease)}
.lb-close:hover,.lb-nav:hover{background:rgba(244,241,236,.12);border-color:var(--inverse)}
.lb-close{top:clamp(1rem,3vw,1.75rem);right:clamp(1rem,3vw,1.75rem);width:44px;height:44px;font-size:1.1rem}
.lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:1.3rem}
.lb-prev{left:clamp(.5rem,2vw,1.75rem)}
.lb-next{right:clamp(.5rem,2vw,1.75rem)}
.lb-count{position:absolute;bottom:clamp(1rem,3vw,1.75rem);left:50%;transform:translateX(-50%);
  font-family:var(--ff-mono);font-size:var(--step--1);letter-spacing:.14em;color:var(--muted-inv)}
@media (max-width:640px){
  .lb-nav{width:44px;height:44px}
  .lb-figure,.lb-figure img{max-width:94vw;max-height:80vh}
}
@media (prefers-reduced-motion:reduce){ .lb{animation:none} }

/* ---- Cursor personalizado: círculo opaco → caret sobre texto → crece en interactivos.
   mix-blend-mode:difference invierte contra el fondo (oscuro→claro, claro→oscuro). ---- */
.cursor{position:fixed;left:0;top:0;width:14px;height:14px;border-radius:999px;background:#a6a6a6;
  mix-blend-mode:exclusion;pointer-events:none;z-index:300;opacity:0;
  transition:width .5s var(--ease),height .5s var(--ease),opacity .3s var(--ease)}
.cursor.is-vis{opacity:1}
.cursor.is-text{width:4px;height:var(--cursor-caret,26px)}
.cursor.is-link{width:34px;height:34px}
.has-cursor,.has-cursor *{cursor:none!important}
@media (pointer:coarse){.cursor{display:none}}

/* ---- Transiciones entre páginas (View Transitions cross-document).
   La foto clickeada viaja hasta convertirse en el hero del proyecto;
   navegadores sin la API navegan normal (mejora progresiva). ---- */
@view-transition{navigation:auto}
/* El velo del resto de la página acompaña al vuelo en vez de terminar a media
   trayectoria: si se resuelve antes, el fondo cambia de golpe con la foto aún
   en el aire y se lee como un corte. */
::view-transition-old(root),::view-transition-new(root){animation-duration:1s}
/* Curva pareja: el resorte de antes gastaba ~80% del recorrido en el primer
   tercio y luego se arrastraba, que es lo que se sentía como tirón. Esta
   reparte el movimiento a lo largo de todo el vuelo. */
::view-transition-group(proyecto-hero){animation-duration:1.9s;animation-timing-function:var(--ease-vuelo)}
/* La foto ya viene pintada al tamaño del hero, así que el grupo sólo la
   traslada. Lo que se anima es el recorte: arranca en la ventana que tapaba
   el marco de la galería (--rec-*, que pone el script de la página) y se abre
   hasta destapar la foto entera. El marco se abre; la foto nunca escala. */
/* El recorte se anima en el image-pair, no en el grupo: declarar `animation`
   sobre el grupo reemplaza la que genera el navegador para trasladarlo, y la
   foto aparecía de golpe en su destino en vez de viajar hasta él. */
html.vt-entrante::view-transition-image-pair(proyecto-hero){
  animation:abrirMarco 1.9s var(--ease-vuelo) both}
@keyframes abrirMarco{
  from{clip-path:inset(var(--rec-t,0) var(--rec-r,0) var(--rec-b,0) var(--rec-l,0))}
  to{clip-path:inset(0)}
}
/* solo en pares old+new (:only-child excluido): en navegaciones de un solo lado
   el UA conserva su fade; sin esto el hero saliente queda congelado y hace pop.
   OJO: esta receta vive duplicada en el <style> inline de index.html. */
::view-transition-old(proyecto-hero):not(:only-child),
::view-transition-new(proyecto-hero):not(:only-child){
  animation:none;mix-blend-mode:normal;height:100%;width:100%;object-fit:cover}
.hero-media picture{display:block}
.hero-media img{view-transition-name:proyecto-hero}
/* Llegando desde una foto, el #hero deja su fondo propio para el final: durante
   el vuelo la foto está en la capa de transición y el hueco que deja mostraría
   el rectángulo --bg-alt recortado contra el fondo de la página — el corte más
   visible de la secuencia. Arrancando del color del body, el hueco no existe. */
html.vt-entrante #hero{animation:heroFondo 1.9s var(--ease-vuelo) both}
@keyframes heroFondo{from{background:var(--bg)}to{background:var(--bg-alt)}}
/* El velo del nombre vive en .hero-media, que no viaja en la transición: sin
   esto se pinta de una vez en el sitio de aterrizaje y se ve un rectángulo
   oscuro flotando mientras la foto todavía va en camino. */
html.vt-entrante .hero-media::after{animation:heroVelo 1.9s var(--ease-vuelo) both}
@keyframes heroVelo{0%,80%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  html.vt-entrante #hero,html.vt-entrante .hero-media::after,
  html.vt-entrante::view-transition-image-pair(proyecto-hero){animation:none}
  ::view-transition-group(*),::view-transition-image-pair(*),
  ::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---- Portada: tablero en móvil, recorrido largo en escritorio ----
   El mismo index sirve las dos: en pantalla chica manda el tablero de fichas
   —se arrastra, no se scrollea— y el recorrido vertical se apaga; de 781px
   para arriba pasa lo contrario. Un solo HTML y una sola URL: nada de
   redirigir ni de mantener dos portadas. ---- */
.tab,.tab-rotulo{display:none}
@media (max-width:780px){
  body:has(#tablero){overflow:hidden;height:100%}
  html:has(#tablero){height:100%}
  /* el recorrido de la portada se guarda; queda el tablero solo */
  body:has(#tablero) main>section,
  body:has(#tablero)>footer[role=contentinfo]{display:none}
  .tab{display:block;position:fixed;inset:0;z-index:1;touch-action:none;
    cursor:grab;background:var(--bg)}
  .tab.is-drag{cursor:grabbing}
  .tab-capa{position:absolute;inset:0;z-index:1}
  .ficha{position:absolute;top:0;left:0;width:calc(var(--w) * 1px);display:block;
    color:inherit;will-change:transform;
    -webkit-user-select:none;user-select:none;-webkit-user-drag:none}
  .ficha picture{display:block;overflow:hidden;background:var(--bg-alt);aspect-ratio:var(--ar)}
  /* la foto desborda su recorte: ese excedente es el recorrido del parallax.
     max-width:none es obligatorio — la regla global img{max-width:100%} le
     recortaría el ancho al del marco y dejaría ver el fondo al correrse */
  .ficha img{width:148%;height:148%;max-width:none;object-fit:cover;display:block;
    pointer-events:none;position:relative;left:-24%;top:-24%;will-change:transform}
  .ficha-nom{display:block;margin-top:.5rem;font-family:var(--ff-mono);font-size:.62rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  /* rótulo del estudio: se aparta en cuanto mueves el tablero */
  .tab-rotulo{display:grid;position:fixed;inset:0;z-index:2;place-items:center;
    pointer-events:none;text-align:center;padding-inline:1.25rem;
    transition:opacity .7s var(--ease),transform .9s var(--ease)}
  .tab-rotulo.is-ido{opacity:0;transform:scale(1.04)}
  /* halo del color del fondo: despeja el centro para que el nombre se lea
     aunque debajo caiga una foto */
  .tab-rotulo::before{content:"";position:absolute;inset:0;z-index:-1;
    background:radial-gradient(ellipse 88% 34% at 50% 47%,
      var(--bg) 34%,rgba(230,231,232,.72) 58%,transparent 76%)}
  .tab-rotulo h1{font-size:clamp(2.9rem,15vw,5rem);line-height:.92;letter-spacing:-.04em;
    text-shadow:0 2px 30px var(--bg)}
  .tab-rotulo p{margin-top:1.1rem;font-family:var(--ff-mono);font-size:.64rem;
    letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
}
/* Enlace a Nosotros bajo el adelanto de la biografía */
.arq-mas{display:inline-flex;align-items:center;gap:.55em;margin-top:clamp(1.6rem,3vw,2.4rem);
  font-family:var(--ff-mono);font-size:var(--step--1);text-transform:uppercase;
  letter-spacing:.14em;color:inherit}
.arq-mas>span{padding-bottom:.35em;
  background:linear-gradient(currentColor,currentColor) 0 100%/38% 1px no-repeat;
  transition:background-size .45s var(--ease)}
.arq-mas:hover>span{background-size:100% 1px}
.arq-mas::after{content:"→";display:inline-block;transition:transform .4s var(--ease)}
.arq-mas:hover::after{transform:translateX(4px)}
/* Portada de Nosotros */
.nos-intro{padding:calc(84px + clamp(2rem,6vw,4rem)) 0 clamp(1rem,3vw,2rem)}
.nos-title{font-size:var(--step-3);line-height:1.02;margin-top:.35em;max-width:16ch}

/* ---- Biografía y capítulo de materiales ----
   Viven en /nosotros/. El home conserva solo el adelanto de la biografía,
   asi que estas reglas tienen que estar en la hoja compartida. ---- */
#arquitecto{background:var(--ink);color:var(--inverse)}
.arq-grid{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr);gap:clamp(2rem,6vw,5.5rem);align-items:center}
.arq-portrait{margin:0;overflow:hidden}
.arq-portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.arq-kicker{color:var(--muted-inv)}
.arq-name{font-size:var(--step-3);line-height:1.02;margin-top:.4em;overflow-wrap:break-word}
.arq-lead{color:rgba(244,241,236,.72);max-width:44ch;margin-top:clamp(1.2rem,2.5vw,1.8rem);font-size:var(--step-0)}
.arq-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.2rem);margin-top:clamp(2rem,4vw,3.2rem);padding-top:clamp(1.4rem,3vw,2rem);border-top:1px solid rgba(244,241,236,.22)}
.arq-stat{min-width:0}
.arq-stat-num{font-family:var(--ff-display);font-weight:550;letter-spacing:-.02em;font-size:clamp(1.5rem,1rem + 2vw,2.2rem);line-height:1}
.arq-stat-label{color:var(--muted-inv);font-family:var(--ff-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;margin-top:.6rem;line-height:1.4}
@media (max-width:820px){
  .arq-grid{grid-template-columns:1fr;gap:clamp(1.8rem,6vw,2.6rem)}
  .arq-portrait{max-width:min(66vw,300px)}
}
@media (max-width:480px){
  .arq-stats{grid-template-columns:1fr;gap:0}
  .arq-stat{display:flex;align-items:baseline;gap:1rem;border-top:1px solid rgba(244,241,236,.12);padding-block:.9rem}
  .arq-stat:first-child{border-top:0;padding-top:0}
  .arq-stat-num{flex:0 0 auto;min-width:4.5rem}
  .arq-stat-label{margin-top:0}
}
/* ---- Materiales & acabados: intro + capítulos narrados por scroll ---- */
.mat{background:var(--ink);color:var(--inverse)}
.mat .kicker{color:rgba(244,241,236,.72)}
.mat-title{font-size:var(--step-3);line-height:1.02;margin-top:.35em}
.mat-lead{max-width:44ch;margin-top:clamp(1.2rem,2.6vw,1.9rem);font-size:var(--step-1);line-height:1.4;text-wrap:pretty;color:rgba(244,241,236,.8)}
/* Cards de acabado: la foto llena la card y el nombre vive en un panel de
   vidrio al pie. La descripción solo asoma cuando la card se abre — con cursor
   la abre el hover, con dedo el botón, porque ahí no hay hover. */
.acabados{list-style:none;margin:clamp(1.6rem,4vw,2.4rem) 0 0;padding:0;display:grid;gap:.7rem}
.acabado{position:relative;overflow:hidden;aspect-ratio:4/3;background:#0A0A0A;outline:1px solid rgba(244,241,236,.06);outline-offset:-1px}
.acabado-foto{position:absolute;inset:0;margin:0}
.acabado-foto img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:grayscale(.06);transition:transform 1s var(--ease),filter .6s var(--ease)}
/* El panel flota separado del borde: así el desenfoque siempre tiene foto que
   difuminar por los cuatro lados y no se estira contra el filo de la card,
   que es lo que delata al backdrop-filter barato. */
.acabado-info{position:absolute;inset:auto 0 0 0;z-index:1;
  display:grid;grid-template-rows:auto auto 0fr;transition:grid-template-rows .52s var(--ease-panel);
  padding:clamp(1rem,2.2vw,1.4rem) clamp(1.1rem,2.4vw,1.5rem);
  background:rgba(10,12,10,.3);
  overflow:hidden}
/* El desenfoque NO es backdrop-filter: ese se recorta al propio elemento, así
   que junto a los bordes le falta material y difumina menos — medido, la banda
   de abajo dejaba pasar 2.4 veces más textura que el centro, y eso se lee como
   si el velo cambiara de opacidad. Extender la capa no sirve, porque el
   recorte lo impone la card. Así que se difumina una copia de la propia foto:
   un filter normal sí tiene toda la imagen que emborronar.
   La copia se encuadra igual que la foto de la card (mismo aspecto, mismo
   bottom, mismo center 42%) y se escala desde su centro para que sus propios
   bordes —donde cualquier blur se desvanece— caigan fuera de lo que se ve. */
.acabado-info::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;
  aspect-ratio:4/3;background:var(--velo) center 42%/cover;
  filter:blur(22px) saturate(220%) contrast(62%) brightness(1.02);
  transform:scale(1.22)}
/* grano finísimo: sin él el desenfoque bandea y se ve plástico */
.acabado-info::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.acabado-num{position:relative;font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.2em;color:rgba(244,241,236,.66)}
.acabado-name{position:relative;font-size:var(--step-1);line-height:1.05;margin-top:.22em;text-shadow:0 1px 16px rgba(0,0,0,.5)}
.acabado-btn{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer}
/* el hit area es la card entera, no solo el nombre */
.acabado-btn::after{content:"";position:absolute;inset:0}
.acabado-btn:focus-visible{outline:2px solid var(--inverse);outline-offset:3px}
/* La descripción no se oculta con max-height: animar hacia un tope fijo mucho
   mayor que el texto hace que el crecimiento real acabe en el primer cuarto de
   la transición y el resto sea tiempo muerto — se percibe como un salto. La
   fila 0fr → 1fr resuelve al alto exacto del texto y recorre todo el tiempo. */
.acabado-desc-caja{position:relative;overflow:hidden;min-height:0}
.acabado-desc{max-width:56ch;padding-top:.6em;text-shadow:0 1px 10px rgba(0,0,0,.45);font-size:var(--step--1);line-height:1.5;color:rgba(244,241,236,.86);text-wrap:pretty;opacity:0;transform:translateY(6px);transition:opacity .34s var(--ease-panel),transform .46s var(--ease-panel)}
.acabado.is-open .acabado-info{grid-template-rows:auto auto 1fr}
.acabado.is-open .acabado-desc{opacity:1;transform:none;transition-delay:.14s}
.acabado.is-open .acabado-foto img{transform:scale(1.04)}
@media (min-width:781px){
  /* una sola retícula para todo: titular y párrafo a la izquierda, la primera
     card a su derecha y las otras tres en la fila de abajo */
  .mat-rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
  .acabados{display:contents}
  /* el titular baja de cuerpo: en una columna de un tercio, el display grande
     se parte en cuatro líneas y estira la fila por encima de la card */
  .mat-title{font-size:var(--step-2)}
  .mat-cab{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:flex-end;padding-right:clamp(1rem,2.4vw,2.2rem);padding-bottom:.4rem}
  .mat-lead{margin-top:clamp(1rem,2vw,1.5rem);max-width:38ch}
  .acabado{aspect-ratio:4/5}
  .acabado .acabado-info::after{aspect-ratio:4/5}
  .acabado:first-child{grid-column:2/-1;grid-row:1;aspect-ratio:4/3}
  .acabado:first-child .acabado-info::after{aspect-ratio:4/3}
  .acabado:first-child .acabado-name{font-size:var(--step-2)}
  .acabado:hover .acabado-foto img,.acabado:focus-within .acabado-foto img{transform:scale(1.04);filter:grayscale(0)}
  .acabado:hover .acabado-info,.acabado:focus-within .acabado-info{grid-template-rows:auto auto 1fr}
  .acabado:hover .acabado-desc,.acabado:focus-within .acabado-desc{opacity:1;transform:none;transition-delay:.14s}
}
/* ---- Acabados en móvil: sin tap ni velos ----
   Con dedo el hover no existe y la explicación quedaba escondida tras un toque
   que nadie adivinaba. Aquí la card se abre en dos: la foto arriba y, debajo,
   el nombre con su explicación siempre a la vista. ---- */
@media (max-width:780px){
  .acabados{gap:clamp(1.6rem,6vw,2.4rem)}
  .acabado{position:static;aspect-ratio:auto;overflow:visible;background:none;outline:0;
    display:grid;gap:.85rem;padding-bottom:clamp(1.5rem,5vw,2.2rem);
    border-bottom:1px solid rgba(244,241,236,.14)}
  .acabado:last-child{border-bottom:0;padding-bottom:0}
  .acabado-foto{position:static;display:block;aspect-ratio:4/3;overflow:hidden}
  .acabado-foto img{filter:none;transform:none}
  .acabado-info{position:static;display:grid;grid-template-rows:auto;gap:.1rem;
    padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .acabado-info::before,.acabado-info::after{display:none}
  .acabado-name{text-shadow:none;font-size:var(--step-1)}
  .acabado-btn{pointer-events:none;cursor:default}
  .acabado-desc-caja{overflow:visible}
  .acabado-desc{opacity:1;transform:none;text-shadow:none;padding-top:.5em;max-width:46ch;
    color:rgba(244,241,236,.72)}
}
@media (prefers-reduced-motion:reduce){
  .acabado-info,.acabado-desc,.acabado-foto img{transition:none}
}
@media (max-width:780px){
  .mat,#arquitecto{position:relative}
  .mat::before,#arquitecto::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(to right,var(--trama-inv) 1px,transparent 1px),linear-gradient(to bottom,var(--trama-inv) 1px,transparent 1px);background-size:var(--modulo) var(--modulo)}
  .mat>*,#arquitecto>*{position:relative;z-index:1}
  .arq-name{font-size:clamp(3rem,15vw,4.6rem)}
  /* en móvil el titular cede tamaño para que las cuatro cards quepan con él */
  .mat-title{font-size:clamp(2.6rem,12vw,4rem)}
}

/* ─── Páginas de servicio ─────────────────────────────────────────────────────
   Texto largo con las obras de por medio: la foto sostiene lo que el texto
   promete. Todo lo de escritorio va en la consulta de 781px; en base, una
   columna. */
.svc-hero{position:relative;isolation:isolate;overflow:hidden}
/* la foto entra un 6% más grande y se asienta al bajar (js/servicios.js):
   sin este recorte, ese sobreancho empuja la página a lo ancho */
.svc-hero-img{display:block;overflow:hidden}
.svc-hero-img img{width:100%;height:clamp(46svh,52svh,58svh);object-fit:cover;display:block}
/* El título va sobre la foto: sin este velo, un cielo claro se lo come. */
.svc-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;z-index:1;
  background:linear-gradient(to bottom,transparent,rgba(12,12,10,.78));pointer-events:none}
.svc-hero-txt{position:absolute;inset:auto 0 clamp(1.6rem,4vw,3rem) 0;z-index:2;color:var(--inverse)}
.svc-hero-txt .kicker{color:rgba(244,241,236,.75)}
.svc-h1{font-size:clamp(2.1rem,7vw,3.6rem);line-height:1;letter-spacing:-.03em;margin-top:.2em}

.svc-lead{font-size:var(--step-0);line-height:1.55;max-width:52ch;color:var(--ink)}
.svc-cuerpo{padding-block:clamp(2.4rem,7vw,4.5rem) clamp(3rem,9vw,6rem)}
.svc-prosa p,.svc-bloque p{max-width:62ch;line-height:1.62}
.svc-p{margin-top:1.1em}
.svc-bloque{margin-top:clamp(3rem,8vw,5rem)}
.svc-bloque h2{font-size:var(--step-1);line-height:1.15;letter-spacing:-.02em;
  margin-bottom:.7em;max-width:22ch}
.svc-lista{margin:0;padding:0;list-style:none;max-width:62ch}
.svc-lista li{padding:.85em 0 .85em 1.4em;border-top:1px solid var(--linea);
  position:relative;line-height:1.55}
.svc-lista li::before{content:"";position:absolute;left:0;top:1.45em;width:.5em;height:1px;
  background:var(--muted)}
.svc-lista li:last-child{border-bottom:1px solid var(--linea)}

/* Bloque de dos piezas: foto y texto. La foto recorta a formato fijo para que
   el ritmo de la página no dependa del alto de cada original. */
.svc-media{margin-bottom:1.6rem}
.svc-media picture{display:block;overflow:hidden}
.svc-media img{will-change:transform}
.svc-media img{width:100%;display:block;object-fit:cover;filter:grayscale(.12);
  transition:filter .5s var(--ease),transform .9s var(--ease)}
.svc-foto-v img{aspect-ratio:4/3}
.svc-foto-h img{aspect-ratio:4/3}
.svc-media:hover img{filter:grayscale(0)}

/* Antes y después, con el tirador en medio (ver js/modules/comparador.js). */
.svc-par{display:grid;gap:1rem}
.svc-par figure{margin:0}
.svc-par img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.svc-par figcaption{margin-top:.5rem;font-family:var(--ff-mono);font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.comparador{position:relative;overflow:hidden;touch-action:pan-y;cursor:ew-resize;
  user-select:none;-webkit-user-select:none}
.comparador figure{margin:0}
.comparador .cmp-b{position:absolute;inset:0;
  clip-path:inset(0 0 0 var(--cmp,50%))}
.comparador .cmp-b img{height:100%}
.comparador figcaption{position:absolute;bottom:.7rem;z-index:3;margin:0;
  padding:.3em .7em;background:rgba(12,12,10,.62);color:var(--inverse);
  backdrop-filter:blur(4px)}
.comparador .cmp-a figcaption{left:.7rem}
.comparador .cmp-b figcaption{right:.7rem}
.cmp-tirador{position:absolute;top:0;bottom:0;left:var(--cmp,50%);z-index:4;width:2px;
  background:var(--inverse);transform:translateX(-50%);pointer-events:none}
.cmp-tirador::after{content:"";position:absolute;top:50%;left:50%;width:2.6rem;height:2.6rem;
  transform:translate(-50%,-50%);border:2px solid var(--inverse);border-radius:50%;
  background:rgba(12,12,10,.35);backdrop-filter:blur(3px)}
.cmp-rango{position:absolute;inset:0;z-index:5;width:100%;opacity:0;cursor:ew-resize;margin:0}
.cmp-rango:focus-visible+.cmp-tirador::after{outline:3px solid var(--ink);outline-offset:3px}

/* Preguntas: acordeón, para que la lista no sea un muro. */
.svc-faq{border-top:1px solid var(--linea);max-width:62ch}
.svc-faq:last-of-type{border-bottom:1px solid var(--linea)}
.svc-faq summary{display:flex;gap:1rem;align-items:baseline;justify-content:space-between;
  padding:1.1em 0;cursor:pointer;list-style:none}
.svc-faq summary::-webkit-details-marker{display:none}
.svc-faq h3{font-size:var(--step-0);line-height:1.35;font-weight:500}
.svc-faq p{padding-bottom:1.2em;color:var(--muted);max-width:60ch}
.svc-faq .pie-mas::before,.svc-faq .pie-mas::after{background:var(--muted)}
@supports (interpolate-size: allow-keywords){
  .svc-faq::details-content{block-size:0;overflow:hidden;
    transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
  .svc-faq[open]::details-content{block-size:auto}
}

.svc-obras,.svc-otros{margin:0;padding:0;list-style:none;max-width:62ch}
.svc-otros a{display:block;padding:1em 0;border-top:1px solid var(--linea);
  color:inherit;text-decoration:none}
.svc-otros li:last-child a{border-bottom:1px solid var(--linea)}
.svc-obra-n{display:block;font-size:var(--step-0);line-height:1.3}
.svc-obra-d{display:block;margin-top:.25em;font-family:var(--ff-mono);font-size:var(--step--1);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.svc-otros a:hover{color:var(--muted)}
.svc-cta p{margin-top:.6em}

@media (min-width:781px){
  .svc-lead{font-size:var(--step-1);max-width:34ch;line-height:1.4}
  .svc-prosa{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
    gap:clamp(2rem,5vw,4rem);align-items:start}
  .svc-doble{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
    gap:clamp(2rem,5vw,4rem);align-items:center}
  .svc-doble--inv .svc-media{order:2}
  .svc-media{margin-bottom:0}
  .svc-foto-v img{aspect-ratio:3/4}
  .svc-bloque h2{font-size:var(--step-2)}
  .svc-par{grid-template-columns:1fr 1fr;gap:1.4rem}
  .comparador{grid-template-columns:1fr}
}
.svc-idx-d{display:block;margin-top:.35em;max-width:44ch;color:var(--muted);line-height:1.5}