/* Mendivil Arquitectos. Estilos del sitio. Todo sale de tokens.css (ver DESIGN.md). */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;--page-bg:var(--grafito);--page-fg:var(--hueso);background:var(--page-bg);color:var(--page-fg);font:300 var(--t-texto)/1.65 var(--f-texto);overflow-x:clip;transition:background-color .7s ease,color .7s ease}
body.pagina-dia{--page-bg:var(--hueso);--page-fg:var(--grafito)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--cantera);outline-offset:3px}
.salto{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--hueso);color:var(--grafito);padding:10px 16px;border-radius:var(--r-boton)}
.salto:focus{left:8px}

.display,.display-2,.display-3{font-family:var(--f-display);font-weight:300;text-wrap:balance}
.display{font-size:var(--t-h1);line-height:1.02;text-transform:uppercase;letter-spacing:-.01em}
.display em{font-style:normal;color:var(--cantera)}
.display-2{font-size:var(--t-h2);line-height:1.1;letter-spacing:-.02em}
.display-3{font-size:clamp(24px,2.4vw,34px);line-height:1.15;letter-spacing:-.015em}
.ln{display:block;overflow:hidden;padding-bottom:.04em}
.ln>span{display:block}
.entrada{font-size:var(--t-entrada);line-height:1.65;max-width:46ch}
.etiqueta{font-weight:600;font-size:var(--t-nota);letter-spacing:.02em;color:var(--sombra)}
.nota{font-style:normal;font-size:var(--t-nota);opacity:.8}

.boton{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:var(--r-boton);font:600 14px var(--f-texto);letter-spacing:.02em;text-decoration:none;border:0;cursor:pointer;transition:background-color .3s,color .3s;text-align:center}
.boton-cantera{background:var(--cantera);color:var(--grafito)}
.boton-cantera:hover{background:var(--hueso)}
.boton-claro{background:var(--hueso);color:var(--grafito)}
.boton-claro:hover{background:var(--cantera)}
.boton-oscuro{background:var(--grafito);color:var(--hueso)}
.boton-oscuro:hover{background:var(--basalto)}
.liga{font-weight:600;font-size:14px;text-decoration:none;padding:6px 0;background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;transition:background-size .4s var(--curva)}
.liga:hover{background-size:30% 1px}
.botones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e4) var(--e5)}

/* Vidrio: Grafito translúcido con desenfoque; el texto nunca depende del desenfoque */
.vidrio{background:var(--vidrio);border:1px solid var(--linea-clara);border-radius:var(--r-tarjeta);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);color:var(--hueso)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .vidrio{background:var(--grafito-velo)} }

/* ---------- Marco del hero ---------- */
.marco-hero{position:relative;margin:var(--gutter);border:1px solid var(--linea-clara);border-radius:var(--r-marco);overflow:hidden;background:var(--grafito);color:var(--hueso);isolation:isolate}
.barra{position:relative;z-index:3;display:flex;align-items:center;gap:var(--e5);padding:18px var(--e5);border-bottom:1px solid var(--linea-clara)}
.barra-logo img{width:58px}
.barra-nav{margin:0 auto}
.barra-nav ul{display:flex;gap:var(--e5)}
.barra-nav a{font-weight:400;font-size:14px;text-decoration:none;opacity:.85;transition:opacity .3s}
.barra-nav a:hover,.barra-nav a[aria-current]{opacity:1}
.barra-nav a[aria-current]{background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;padding-bottom:3px}
.barra-cta{min-height:42px;border-radius:999px;padding:0 22px}
.menu-boton{display:none}

/* Barra fija: aparece cuando la barra del hero sale de pantalla (solo con JS) */
.barra-fija{position:fixed;top:10px;left:50%;z-index:50;width:min(calc(100% - 20px),980px);transform:translate(-50%,-140%);transition:transform .5s var(--curva);display:flex;align-items:center;gap:var(--e4);padding:8px 8px 8px 18px;border-radius:999px}
.barra-fija.visible{transform:translate(-50%,0)}
.barra-fija img{width:44px}
.barra-fija nav{margin:0 auto}
.barra-fija ul{display:flex;gap:var(--e4)}
.barra-fija nav a{font-size:13px;font-weight:400;text-decoration:none;opacity:.85}
.barra-fija nav a:hover{opacity:1}
.barra-fija .boton{min-height:40px;border-radius:999px;padding:0 20px;font-size:13px}
.barra-fija.vidrio{background:rgba(60,55,46,.9)}
.barra-fija:not(.lista){display:none}

.hero{position:relative;min-height:min(68svh,640px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:end;gap:var(--e5);padding:var(--e6) var(--e5) var(--e5)}
.hero-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 50%;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(60,55,46,.92) 0,rgba(60,55,46,.72) 34%,rgba(60,55,46,.12) 62%,rgba(60,55,46,0) 80%),linear-gradient(0deg,rgba(60,55,46,.85) 0,rgba(60,55,46,0) 30%)}
.hero-texto{display:grid;gap:var(--e4);align-self:center;max-width:640px}
.tarjeta-plano{align-self:start;display:grid;gap:var(--e3);padding:var(--e4);text-decoration:none;transition:border-color .3s}
.tarjeta-plano:hover{border-color:rgba(245,242,236,.5)}
.plano{width:100%;opacity:.9}
.vidrio-texto{font-size:17px;font-weight:400;line-height:1.35}
.vidrio-liga{font-size:13px;font-weight:600;justify-self:start;border-bottom:1px solid currentColor;padding-bottom:2px}
.js .marco-hero:not(.play) .ln>span{transform:translateY(105%)}
.marco-hero .ln>span{transition:transform 1s var(--curva)}
.marco-hero .ln:nth-child(2)>span{transition-delay:.1s}
.js .marco-hero:not(.play) .plano{clip-path:inset(0 100% 0 0)}
.plano{transition:clip-path 1.8s var(--curva) .35s}

/* Franja inferior */
.franja{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1.2fr);gap:var(--e5);align-items:stretch;padding:var(--e5);border-top:1px solid var(--linea-clara)}
.franja-cifras{display:flex;gap:var(--e5);align-items:end;font-size:var(--t-nota);color:var(--cantera);font-weight:400}
.franja-cifras li{line-height:1.35;max-width:12ch}
.cifra{display:block;font:700 var(--t-cifra)/1 var(--f-cifra);color:var(--hueso);margin:4px 0 6px}
.tarjeta-clara{display:grid;grid-template-columns:1fr;justify-items:center;gap:var(--e4);align-items:center;background:var(--hueso);color:var(--grafito);border-radius:var(--r-tarjeta);padding:var(--e4) var(--e5);text-decoration:none}
.tc-texto{display:grid;gap:var(--e3);justify-items:center;text-align:center}
.tc-titulo{font-size:22px;line-height:1.25;letter-spacing:-.01em}
.tc-firma{width:170px}
.tc-plano{width:100%;opacity:.55}
.franja-servicios{display:grid;gap:6px;align-content:center;border-left:1px solid var(--linea-clara);padding-left:var(--e5)}
.franja-servicios a{display:flex;align-items:center;gap:var(--e3);text-decoration:none;font-size:15px;font-weight:400;padding:6px 0}
.icono{flex:none;width:40px;height:40px;fill:none;stroke:var(--hueso);stroke-width:1.6;stroke-linecap:round;border:1px solid var(--linea-clara);border-radius:10px;padding:6px}
.icono-oscuro{stroke:var(--grafito);border-color:var(--linea);width:52px;height:52px;padding:8px}

/* ---------- Secciones ---------- */
.seccion{padding:var(--e7) 0;background:var(--hueso);color:var(--grafito)}
.noche{background:var(--grafito);color:var(--hueso)}
.js .seccion{background:transparent;color:inherit}
.ancho{max-width:var(--ancho);margin:0 auto;padding:0 calc(var(--gutter) + var(--e4))}
.cabeza{display:grid;gap:var(--e4);max-width:720px;margin-bottom:var(--e6)}
.cabeza-fila{max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:end}
.cabeza-fila p{max-width:52ch;opacity:.85}

/* El arquitecto */
.arq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--e6);align-items:center}
.arq-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-tarjeta)}
.arq-solo{grid-template-columns:minmax(0,1fr)}
@media (min-width:901px){.arq-solo .arq-texto{max-width:none;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--e6);align-items:start}.arq-solo .arq-texto>*{grid-column:2}.arq-solo .arq-texto>h2{grid-column:1;grid-row:1 / span 2}.arq-solo .arq-texto>.firma{grid-column:1;grid-row:3;align-self:end}}
.arq-texto{display:grid;gap:var(--e4);max-width:62ch}
.firma{width:230px}
.arq-cifras{display:flex;gap:var(--e6);border-top:1px solid var(--linea);padding-top:var(--e4);margin-top:var(--e3);font-size:var(--t-nota);font-weight:400;color:var(--sombra)}
.arq-cifras .cifra{color:var(--grafito);font-size:clamp(32px,2.8vw,44px)}

/* Servicios */
.serv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e4)}
.panel{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-tarjeta);padding:var(--e5) var(--e4) var(--e4);display:grid;gap:var(--e3);align-content:start;color:var(--grafito)}
.panel h3{font-weight:400;font-size:21px;letter-spacing:-.01em}
.panel p{font-size:15px}
.incluye{display:grid;gap:6px;font-size:14px;font-weight:400;border-top:1px solid var(--linea);padding-top:var(--e3)}
.incluye li{padding-left:16px;position:relative}
.incluye li::before{content:"";position:absolute;left:0;top:.8em;width:8px;height:1px;background:var(--bronce)}

/* Casas y espacios comerciales */
.tipos{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--e4);align-items:start}
.tipo{position:relative;display:block;text-decoration:none;overflow:hidden;border-radius:var(--r-tarjeta);background:var(--basalto);color:var(--hueso)}
.tipo img{width:100%;height:100%;object-fit:cover}
.tipo-a{aspect-ratio:4/3}
.tipo-b{aspect-ratio:4/3;margin-top:var(--e7)}
.tipo-datos{position:absolute;left:var(--e3);right:var(--e3);bottom:var(--e3);padding:var(--e4);display:grid;gap:var(--e2)}
.tipo-datos h3{font-weight:400;font-size:24px;letter-spacing:-.01em}
.tipo-datos p{font-size:15px;max-width:48ch}

/* Cómo trabajamos */
.pasos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--e4);counter-reset:paso;position:relative}
.pasos::before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:var(--linea-clara)}
.paso{position:relative;display:grid;gap:var(--e3);align-content:start;padding-top:0}
.paso-num{position:relative;width:56px;height:56px;display:grid;place-items:center;border:1px solid var(--linea-clara);border-radius:50%;background:var(--grafito);font:700 15px var(--f-cifra);color:var(--cantera)}
.paso h3{font-weight:400;font-size:19px;letter-spacing:-.01em;margin-top:var(--e2)}
.paso p{font-size:15px;opacity:.85}
.paso:last-child .paso-num{background:var(--cantera);color:var(--grafito);border-color:var(--cantera)}

/* Proyectos destacados */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(200px,20vw,300px);gap:var(--e3);margin-bottom:var(--e5)}
.obra{position:relative;display:block;overflow:hidden;border-radius:var(--r-tarjeta);text-decoration:none;background:var(--basalto);color:var(--hueso)}
.obra img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--curva)}
.obra:hover img{transform:scale(1.04)}
.obra-a{grid-column:span 2;grid-row:span 2}
.obra-datos{position:absolute;left:12px;bottom:12px;right:12px;display:grid;gap:2px;padding:10px 14px;border-radius:10px}
.obra-nombre{font-size:16px;font-weight:400}
.obra-lugar{font-size:12px;opacity:.85}

/* Casa Altozano */
.casa-marco{position:relative;border-radius:var(--r-marco);overflow:hidden;min-height:min(80svh,720px);display:flex;align-items:flex-end;padding:var(--e5)}
.casa-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.casa-panel{position:relative;max-width:480px;padding:var(--e5);display:grid;gap:var(--e4);justify-items:start}

/* Equipo */
.personas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--e4)}
.persona{display:grid;gap:6px;align-content:start;background:var(--blanco);border:1px solid var(--linea-clara);border-radius:var(--r-tarjeta);padding:var(--e4)}
.persona b{font-weight:400;font-size:clamp(18px,1.6vw,21px);letter-spacing:-.01em;line-height:1.25}
.persona span{font-size:15px;color:var(--sombra);font-weight:400;line-height:1.4}
.persona-contacto{display:grid;gap:2px;margin-top:var(--e3);padding-top:var(--e3);border-top:1px solid var(--linea-clara);font-size:15px}
.persona-contacto a{color:var(--grafito);text-decoration:none;overflow-wrap:normal}
.persona-contacto a:hover,.persona-contacto a:focus-visible{text-decoration:underline;text-underline-offset:3px}

/* Preguntas frecuentes */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--e6);align-items:start}
.faq details{border-bottom:1px solid var(--linea)}
.faq details:first-child{border-top:1px solid var(--grafito)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--e4);padding:var(--e4) 0;font-size:18px;font-weight:400}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;transition:transform .35s var(--curva)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 var(--e4);max-width:60ch}

/* Contacto */
.cont-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--e6);align-items:start}
.cont-texto{display:grid;gap:var(--e4);justify-items:start}
.datos{display:grid;gap:var(--e3);border-top:1px solid var(--linea);padding-top:var(--e4);width:100%;font-size:15px}
.datos dt{font-size:var(--t-nota);font-weight:600;color:var(--sombra)}
.datos dd{font-weight:400}
.datos a{text-decoration:none;border-bottom:1px solid var(--linea)}
.mapa{width:100%;aspect-ratio:16/10;border:0;border-radius:var(--r-tarjeta);background:var(--cantera);filter:grayscale(.6) sepia(.15)}
.forma{grid-template-columns:1fr 1fr;gap:var(--e4)}
.forma label{display:grid;gap:4px;font-size:12px;font-weight:600;letter-spacing:.05em;color:var(--sombra)}
.forma .completo{grid-column:1/-1}
.forma input,.forma select,.forma textarea{font:400 16px var(--f-texto);color:var(--grafito);border:1px solid var(--linea);background:var(--hueso);padding:12px 14px;border-radius:10px;width:100%}
.forma input:focus,.forma select:focus,.forma textarea:focus{outline:2px solid var(--bronce);outline-offset:1px}
.forma button{grid-column:1/-1;justify-self:start}
.forma .aviso{grid-column:1/-1;font-size:12px;color:var(--sombra);font-weight:400;letter-spacing:0}

/* Pie */
.pie{padding:var(--e6) 0;font-size:var(--t-nota);background:var(--grafito);color:var(--hueso)}
.pie-grid{display:grid;grid-template-columns:auto 1fr auto;gap:var(--e4) var(--e6);align-items:end}
.pie img{width:200px}
.pie address{font-style:normal;max-width:40ch;display:grid;gap:4px}
.pie address a{text-decoration:none}
.pie-ligas{display:flex;flex-wrap:wrap;gap:var(--e4)}
.pie-ligas a{text-decoration:none;opacity:.85}
.pie-ligas a:hover{opacity:1}
.pie-copy{grid-column:1/-1;color:var(--cantera)}

/* ---------- Página de proyectos ---------- */
.hero-corto{padding:var(--e6) var(--e5) var(--e5);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--e5);align-items:end}
.hero-corto .display{font-size:clamp(34px,4vw,60px)}
.filtro{display:flex;flex-wrap:wrap;gap:var(--e2);margin-bottom:var(--e5)}
.filtro button{font:600 13px var(--f-texto);color:var(--hueso);background:transparent;border:1px solid var(--linea-clara);border-radius:999px;min-height:40px;padding:0 18px;cursor:pointer;transition:background-color .3s,color .3s}
.filtro button[aria-pressed="true"]{background:var(--hueso);color:var(--grafito);border-color:var(--hueso)}
.filtro:not(.lista){display:none}
.lista-obras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e5) var(--e4)}
.tarjeta-obra{display:grid;gap:var(--e3);text-decoration:none;align-content:start}
.tarjeta-obra figure{overflow:hidden;border-radius:var(--r-tarjeta);background:var(--basalto);aspect-ratio:4/3}
.tarjeta-obra img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--curva)}
.tarjeta-obra:hover img{transform:scale(1.04)}
.tarjeta-obra h2{font-weight:400;font-size:21px;letter-spacing:-.01em}
.tarjeta-obra p{font-size:14px;opacity:.8}
.tarjeta-obra[hidden]{display:none}

/* ---------- Ficha de proyecto ---------- */
.hero-ficha{position:relative;min-height:min(74svh,700px);display:flex;align-items:flex-end;padding:var(--e5)}
.hero-ficha .hero-foto{object-position:50% 50%}
.hero-ficha::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(60,55,46,.75) 0,rgba(60,55,46,0) 45%)}
.ficha-panel{display:grid;gap:var(--e4);padding:var(--e5);max-width:620px}
.ficha-panel .display{font-size:clamp(32px,4vw,58px)}
.ficha-datos{display:grid;gap:var(--e4);align-content:start;border-top:1px solid currentColor;padding-top:var(--e4)}
.solo-datos{grid-template-columns:1fr}
.solo-datos .ficha-datos{grid-template-columns:repeat(3,auto);justify-content:start;column-gap:var(--e6)}
.solo-datos .prosa{display:none}
.ficha-datos dt{font-size:var(--t-nota);font-weight:600;color:var(--sombra)}
.ficha-datos dd{font-size:18px;font-weight:400;margin-top:2px}
.migas{display:flex;gap:var(--e2);font-size:var(--t-nota);opacity:.85}
.migas a{text-decoration:none;border-bottom:1px solid var(--linea-clara)}
.ficha-texto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--e6);align-items:start}
.ficha-texto .prosa{display:grid;gap:var(--e3);max-width:66ch}
.ficha-texto .prosa p:first-child{font-size:var(--t-entrada)}
.prosa-resto{display:grid;gap:var(--e3)}
.prosa-resto[hidden],.leer-mas[hidden]{display:none}
.leer-mas{justify-self:start;font:600 14px var(--f-texto);color:inherit;background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;border:0;padding:6px 0;cursor:pointer;transition:background-size .4s var(--curva)}
.leer-mas:hover{background-size:30% 1px}
.galeria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e4)}
.galeria figure{margin:0;display:grid;gap:var(--e3);align-content:start}
.galeria img{width:100%;border-radius:var(--r-tarjeta);background:var(--basalto)}
.galeria .ancha{grid-column:1/-1}
.galeria .planos{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e4)}
.galeria .planos a{display:block;border-radius:var(--r-tarjeta)}
.galeria .planos a:focus-visible{outline:2px solid var(--cantera);outline-offset:3px}
.galeria .plano-img img{background:var(--blanco);padding:var(--e4);border:1px solid var(--linea-clara)}
.galeria .con-texto{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--e5);align-items:center}
.galeria .con-texto figcaption{display:grid;gap:var(--e3);font-size:15px;opacity:.9}
.galeria .con-texto.invertida{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.galeria .con-texto.invertida img{order:2}
.siguiente{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--e4);align-items:end;border-top:1px solid var(--linea-clara);padding-top:var(--e5)}
.siguiente a.sig{display:grid;gap:4px;text-decoration:none}
.siguiente .sig b{font-weight:300;font-size:var(--t-h2);letter-spacing:-.02em;line-height:1.1}
.siguiente .sig span{font-size:var(--t-nota);color:var(--cantera);font-weight:600}
.cta-banda{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--e5);align-items:center}

/* Aviso de privacidad */
.legal{max-width:760px;margin:0 auto;display:grid;gap:var(--e3)}
.legal h2{font-weight:400;font-size:21px;margin-top:var(--e4)}
.legal ul{list-style:disc;padding-left:1.2em;display:grid;gap:6px}

.js .revela{opacity:0;transform:translateY(18px);transition:opacity .8s var(--curva),transform .8s var(--curva)}
.js .revela.in{opacity:1;transform:none}

/* ---------- Tableta y celular ---------- */
@media (max-width:1100px){
  .franja{grid-template-columns:1fr 1fr}
  .tarjeta-clara{grid-column:1/-1;order:3}
  .barra-fija nav{display:none}
  .barra-fija .boton{margin-left:auto}
  .pasos{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--e5)}
  .pasos::before{display:none}
  .lista-obras{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  html{scroll-padding-top:70px}
  .marco-hero{margin:10px;border-radius:18px}
  .barra{gap:var(--e3);padding:12px 16px}
  .barra-logo img{width:46px}
  .barra-cta{margin-left:auto;min-height:38px;font-size:13px;padding:0 14px}
  .menu-boton{display:block;background:none;border:1px solid var(--linea-clara);color:var(--hueso);font:600 13px var(--f-texto);height:38px;padding:0 14px;border-radius:999px;order:3;cursor:pointer}
  .barra-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--grafito);padding:var(--e4) 16px;margin:0;border-bottom:1px solid var(--linea-clara)}
  .barra.abierta .barra-nav{display:block}
  .no-js .barra-nav{display:block;position:static;padding:var(--e3) 0 0;border:0;flex-basis:100%;order:5}
  .no-js .barra{flex-wrap:wrap}
  .no-js .menu-boton{display:none}
  .barra-nav ul{flex-direction:column;gap:var(--e3)}
  .barra-nav a{font-size:22px;font-weight:300}
  .hero{grid-template-columns:1fr;padding:min(46svh,360px) 16px var(--e5);min-height:0}
  .hero-foto{height:min(56svh,440px);bottom:auto}
  .hero::before{background:linear-gradient(0deg,var(--grafito) 0,var(--grafito) 42%,rgba(60,55,46,.2) 70%,rgba(60,55,46,0) 100%)}
  .tarjeta-plano{display:none}
  .franja{grid-template-columns:1fr;padding:var(--e4) 16px;gap:var(--e4)}
  .franja-cifras{justify-content:center;text-align:center;gap:var(--e6)}
  .franja-cifras li{max-width:none}
  .tarjeta-clara{grid-template-columns:1fr;padding:var(--e4)}
  .tc-plano{display:none}
  .franja-servicios{border-left:0;padding-left:0;border-top:1px solid var(--linea-clara);padding-top:var(--e3)}
  .barra-fija{padding:6px 6px 6px 14px}
  .ancho{padding:0 20px}
  .seccion{padding:var(--e6) 0}
  .arq-grid,.cont-grid,.cabeza-fila,.faq-grid,.ficha-texto,.hero-corto,.cta-banda{grid-template-columns:1fr;gap:var(--e5)}
  .arq-cifras{gap:var(--e5)}
  .serv-grid{grid-template-columns:1fr}
  .tipos{grid-template-columns:1fr}
  .tipo-a,.tipo-b{aspect-ratio:auto;display:grid;background:var(--grafito);margin-top:0}
  .tipo img{aspect-ratio:4/3}
  .tipo-datos{position:static;border-radius:0;border:0;background:var(--grafito);-webkit-backdrop-filter:none;backdrop-filter:none}
  .pasos{grid-template-columns:1fr;gap:0}
  .paso{grid-template-columns:56px 1fr;column-gap:var(--e4);padding-bottom:var(--e5);position:relative}
  .paso::before{content:"";position:absolute;left:27px;top:56px;bottom:0;width:1px;background:var(--linea-clara)}
  .paso:last-child::before{display:none}
  .paso-num{grid-row:span 2}
  .paso h3{margin-top:12px}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:180px}
  .obra-a{grid-column:1/-1;grid-row:span 1}
  .casa-marco{display:block;min-height:0;padding:0;background:var(--grafito)}
  .casa-foto{position:relative;height:42svh}
  .casa-panel{max-width:none;border-radius:0;border:0;background:var(--grafito);-webkit-backdrop-filter:none;backdrop-filter:none;padding:var(--e5) 20px}
  .personas{grid-template-columns:1fr 1fr;gap:var(--e3)}
  .forma{grid-template-columns:1fr}
  .pie-grid{grid-template-columns:1fr}
  .hero-corto{padding:var(--e5) 16px}
  .lista-obras{grid-template-columns:1fr}
  .hero-ficha{display:block;min-height:0;padding:0}
  .hero-ficha .hero-foto{position:relative;height:46svh}
  .hero-ficha::before{display:none}
  .ficha-panel{border-radius:0;border:0;background:var(--grafito);-webkit-backdrop-filter:none;backdrop-filter:none;padding:var(--e5) 16px;max-width:none}
  .ficha-datos{grid-template-columns:1fr 1fr}
  .ficha-datos div:first-child{grid-column:1/-1}
  .galeria{grid-template-columns:1fr}
  .galeria .con-texto,.galeria .con-texto.invertida{grid-template-columns:1fr;gap:var(--e3)}
  .galeria .con-texto.invertida img{order:0}
  .siguiente{grid-template-columns:1fr}
}
@media (max-width:420px){ .barra-cta{font-size:12px;padding:0 10px} .obra-datos{left:8px;right:8px;bottom:8px;padding:8px 10px} }
@media (prefers-reduced-motion:reduce){
  .marco-hero .ln>span{transition-duration:.01s}
  .plano{transition:none}
  body{transition:none}
  .js .revela{transform:none;transition:opacity .4s}
}

@media (max-width:560px){.personas{grid-template-columns:1fr}}
@media (max-width:900px){.galeria .planos{grid-template-columns:1fr}}