:root{
  --ink:#101820;          /* Pantone Black 6C */
  --ink-soft:#5b636b;     /* gris corporativo */
  --accent:#893C47;       /* Pantone 697 C — burdeos */
  --line:#e4e5e6;
  --bg:#fcfcfb;
  --max:1280px;
  --sans:'Museo Sans','Mulish',Helvetica,Arial,sans-serif;
  --slab:'Museo Slab','Zilla Slab',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 6vw}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(252,252,251,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd{padding:0 34px 0 26px;height:76px;display:flex;align-items:center}
.logo{cursor:pointer;display:flex;align-items:center;flex:0 0 auto}
.logo img{height:42px;width:auto}
nav{flex:1;display:flex;justify-content:space-evenly;align-items:center;margin-left:6vw}
nav a{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;color:var(--ink-soft);padding:6px 0;border-bottom:1px solid transparent;transition:.25s}
nav a:hover,nav a.on{color:var(--ink);border-bottom-color:var(--accent)}
#burger{display:none;background:none;border:none;cursor:pointer;font-size:22px;color:var(--ink)}

/* ---------- pages ---------- */
.page{display:none;padding-top:76px;min-height:100vh}
.page.show{display:block;animation:fade .45s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- home ---------- */
#page-home{padding-top:76px}
.split{display:grid;grid-template-columns:1fr 1fr;height:calc(100vh - 76px);min-height:520px}
.half{position:relative;overflow:hidden;cursor:pointer}
.half img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .6s ease,transform .8s ease}
.half:hover img{filter:none;transform:scale(1.03)}
.half::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.42),rgba(0,0,0,.08));transition:.5s}
.half:hover::after{background:linear-gradient(to top,rgba(0,0,0,.28),rgba(0,0,0,0))}
.half .lbl{position:absolute;left:0;right:0;bottom:9%;z-index:2;text-align:center;color:#fff}
.half .lbl h2{font-family:var(--slab);font-size:clamp(20px,2.4vw,32px);font-weight:400;letter-spacing:.38em;text-transform:uppercase;text-indent:.38em}
.half .lbl p{font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.85;margin-top:8px}
.claim{max-width:820px;margin:0 auto;padding:90px 6vw;text-align:center}
.claim p{font-size:clamp(17px,1.6vw,21px);line-height:1.9;color:var(--ink)}
.claim small{display:block;margin-top:18px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- section headings ---------- */
.head{padding:72px 0 34px;border-bottom:1px solid var(--line);margin-bottom:48px}
.head h1,.head .page-title{font-family:var(--slab);font-size:clamp(24px,3vw,38px);font-weight:500;letter-spacing:.28em;text-transform:uppercase;margin:0}
.head p{max-width:680px;margin-top:16px;color:var(--ink-soft);font-size:15px}
.crumb{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;display:block}
.crumb a{border-bottom:1px solid var(--line)}
.crumb a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px 26px;margin:-18px 0 44px}
.filters button{background:none;border:none;cursor:pointer;font-family:inherit;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);padding:6px 0;border-bottom:1px solid transparent;transition:.25s}
.filters button.on,.filters button:hover{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- grids / cards ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 34px;padding-bottom:100px}
.card{cursor:pointer}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:#ececea}
.card .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .55s ease,transform .8s ease}
.card:hover .ph img{filter:none;transform:scale(1.04)}
.card .ph.empty{display:flex;align-items:center;justify-content:center;color:#b9b9b4;font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.card h3{font-family:var(--slab);margin-top:14px;font-size:14px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.card small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- detail ---------- */
.detail{padding-bottom:110px}
.detail .cols{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;margin-bottom:64px}
.detail .txt p{margin-bottom:18px;font-size:15.5px;text-align:justify;hyphens:auto}
.ficha{border-top:2px solid var(--ink);font-size:13px}
.ficha div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line)}
.ficha dt{color:var(--ink-soft);letter-spacing:.06em}
.ficha dd{text-align:right;font-weight:400}
.ficha dd a{border-bottom:1px solid var(--line);transition:.25s}
.ficha dd a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* Galería de proyecto. Las fotos y los planos tienen proporciones muy
   distintas (de una vertical a un alzado panorámico), lo que antes
   dejaba las filas descuadradas. Ahora cada imagen ocupa una celda de
   igual tamaño y se muestra COMPLETA dentro de ella, sin recortes:
   la rejilla queda alineada y ninguna imagen pierde encuadre.
   Las panorámicas y la primera imagen ocupan el ancho completo. */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:start}
.gal img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--bg);cursor:zoom-in;transition:opacity .3s}
.gal img:hover{opacity:.92}
.gal .wide{grid-column:1/-1;aspect-ratio:auto;background:none}
/* Imagen vertical que queda sola en la última fila: se centra con el
   mismo tamaño que las demás celdas, en lugar de dejarla a un lado. */
.gal .solo{grid-column:1/-1;justify-self:center;width:calc(50% - 10px)}
.note{border:1px solid var(--line);padding:34px;color:var(--ink-soft);font-size:14px;letter-spacing:.04em}

/* ---------- servicios (urbanismo) ---------- */
.svc-hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:80px}
.svc-hero img{filter:grayscale(1);transition:filter .6s}
.svc-hero img:hover{filter:none}
.svc-hero p{font-size:15.5px;margin-bottom:16px;text-align:justify;hyphens:auto}
.svc-hero a,.claim a,.head p a{border-bottom:1px solid var(--line);transition:.25s}
.svc-hero a:hover,.claim a:hover,.head p a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.svc-list{border-top:1px solid var(--ink);margin-bottom:100px}
.svc-cat{font-family:var(--slab);font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);padding:44px 0 14px;border-bottom:1px solid var(--line)}
.svc-cat:first-child{padding-top:26px}
.svc-row{display:grid;grid-template-columns:56px 1fr auto;align-items:baseline;gap:26px;padding:26px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:.25s}
.svc-row:hover{padding-left:10px}
.svc-row .num{font-size:12px;color:var(--accent);letter-spacing:.1em;font-weight:500}
.svc-row h3{font-family:var(--slab);font-size:16px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.svc-row p{grid-column:2;color:var(--ink-soft);font-size:13.5px;margin-top:4px}
.svc-row .arrow{font-size:18px;color:var(--ink-soft);transition:.25s}
.svc-row:hover .arrow{color:var(--accent);transform:translateX(6px)}
.svc-body h2{font-family:var(--slab);font-size:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:38px 0 14px}
.svc-body h2:first-child{margin-top:0}
.svc-body p{margin-bottom:16px;font-size:15px;text-align:justify;hyphens:auto}
.svc-body ul{margin:0 0 18px 20px}
.svc-body li{margin-bottom:8px;font-size:15px;text-align:justify;hyphens:auto}
.svc-body blockquote{border-left:2px solid var(--line);padding-left:22px;color:var(--ink-soft);margin:0 0 18px;font-size:14px}
.svc-body a{border-bottom:1px solid var(--accent)}
.svc-detail-img{margin:44px 0 0}

/* ---------- estudio ---------- */
.block{margin-bottom:110px}
.block h2{font-family:var(--slab);font-size:17px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;margin-bottom:26px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.block .lead{max-width:720px;font-size:15.5px;margin-bottom:34px;text-align:justify;hyphens:auto}
.collage{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:16px;grid-auto-flow:dense}
.collage img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s;cursor:zoom-in;display:block}
.collage img:hover{filter:none}
/* Dos imágenes a doble tamaño: la primera del estudio y la primera de
   interiorismo, que abren cada bloque del collage.
   Con 10 fotos —dos grandes de 4 celdas y ocho normales— salen 16
   celdas exactas: cuatro filas de cuatro, sin huecos. */
.collage img:nth-child(1),.collage img:nth-child(6){grid-column:span 2;grid-row:span 2}
.strip{display:flex;gap:22px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory}
.strip img{height:340px;width:auto;flex:0 0 auto;scroll-snap-align:start;filter:grayscale(1);transition:filter .5s;cursor:zoom-in}
.strip img:hover{filter:none}
.video{aspect-ratio:16/9;max-width:900px;margin:44px 0 0}
.video iframe{width:100%;height:100%;border:0}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.member .ph{aspect-ratio:3/4;overflow:hidden;background:#ececea}
.member .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .55s}
.member:hover .ph img{filter:none}
.member h3{font-family:var(--slab);margin-top:16px;font-size:14px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.member small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:4px 0 10px}
.member p{font-size:13.5px;color:var(--ink-soft);text-align:justify;hyphens:auto}
.member .li{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:12px;letter-spacing:.08em;color:var(--ink-soft);transition:.25s}
.member .li:hover{color:var(--accent)}
.grupo{margin-top:60px}
.grupo img{width:100%;filter:grayscale(1);transition:filter .6s}
.grupo img:hover{filter:none}
/* Cuadrícula de logos. Se usa flex en lugar de grid para que la última
   fila quede centrada cuando el número de clientes no es múltiplo de
   las columnas, y no aparezca un logo suelto a la izquierda. */
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.logos div{flex:0 0 calc(20% - 11.2px);border:1px solid var(--line);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:22px;background:#fff}
.logos img{max-height:100%;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.75;transition:.4s}
.logos div:hover img{filter:none;opacity:1}

/* ---------- contacto ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:70px}
.contact .info{display:flex;flex-direction:column;justify-content:center}
.contact .info h2{font-family:var(--slab);font-size:14px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:28px}
.cline{padding:18px 0;border-bottom:1px solid var(--line);font-size:16px}
.cline small{display:block;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.cline a:hover{border-bottom:1px solid var(--accent)}
.contact .ph{overflow:hidden}
.contact .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .6s}
.contact .ph:hover img{filter:none}
.map{height:420px;margin-bottom:100px}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(1);transition:filter .5s}
.map:hover iframe{filter:none}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:34px 6vw;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- lightbox ---------- */
#lb{position:fixed;inset:0;z-index:100;background:rgba(12,12,12,.94);display:none;align-items:center;justify-content:center;cursor:zoom-out}
#lb.show{display:flex}
#lb img{max-width:92vw;max-height:90vh;object-fit:contain}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr);gap:34px 22px}
  .detail .cols,.svc-hero,.contact{grid-template-columns:1fr;gap:36px}
  .team{grid-template-columns:1fr;max-width:420px}
  .logos div{flex:0 0 calc(33.333% - 9.34px)}
  .strip img{height:250px}
  .collage{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:12px}
}
@media(max-width:640px){
  nav{position:fixed;top:76px;right:0;left:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:10px 6vw 20px;display:none;margin-left:0;justify-content:flex-start;align-items:stretch}
  nav.open{display:flex}
  nav a{padding:13px 0}
  #burger{display:block}
  .split{grid-template-columns:1fr;height:auto;min-height:0}
  .half{height:46vh;min-height:300px}
  .grid{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  /* Con una sola columna no hay hueco que cerrar: la imagen vertical
     ocupa el ancho disponible como las demás. */
  .gal .solo{width:100%}
  .logos div{flex:0 0 calc(50% - 7px);padding:16px}
  .svc-row{grid-template-columns:34px 1fr auto;gap:14px}
}

/* ==========================================================
   MÓVIL — legibilidad y navegación
   Todo lo de este bloque está acotado a pantallas pequeñas o a
   dispositivos táctiles, de modo que la vista en ordenador queda
   exactamente igual. No se toca ningún texto ni la estructura,
   así que tampoco afecta al posicionamiento.
   ========================================================== */

/* Safari en iPhone agranda el texto por su cuenta al girar la
   pantalla. Esto lo evita sin cambiar el tamaño en escritorio. */
html{-webkit-text-size-adjust:100%}

/* Palabras muy largas —direcciones web, términos técnicos— podrían
   desbordar la pantalla y provocar desplazamiento lateral. */
body{overflow-wrap:break-word}

/* En el móvil, 100vh no descuenta la barra del navegador: la página
   "salta" al hacer scroll. La unidad dvh sí mide el alto real.
   En ordenador ambas valen lo mismo, así que no cambia nada. */
.page{min-height:100dvh}
/* Acotado a partir de tablet: por debajo de 640px las dos mitades se
   apilan con altura automática y no debe forzarse el alto. */
@media(min-width:641px){ .split{height:calc(100dvh - 76px)} }

/* Zona segura de los iPhone con muesca o barra inferior. */
.hd{padding-left:max(26px,env(safe-area-inset-left));padding-right:max(34px,env(safe-area-inset-right))}
footer{padding-bottom:max(34px,env(safe-area-inset-bottom))}
#lb img{max-height:min(90vh,90dvh)}

/* Desplazamiento con inercia en las tiras horizontales de fotos. */
.strip{-webkit-overflow-scrolling:touch}

/* ---------- dispositivos táctiles ---------- */
@media (hover:none){
  /* Sin ratón no existe el "pasar por encima": las fotos y los logos
     se quedarían en blanco y negro de forma permanente. En pantallas
     táctiles se muestran a color desde el primer momento. */
  .half img,.card .ph img,.svc-hero img,.collage img,.strip img,
  .member .ph img,.grupo img,.contact .ph img,.map iframe{filter:none}
  .logos img{filter:none;opacity:1}

  /* Impide que los efectos de hover se queden "pegados" tras tocar. */
  .card:hover .ph img{transform:none}
  .svc-row:hover{padding-left:0}
  .half:hover img{transform:none}

  /* Quita el destello gris al pulsar, propio de iOS y Android. */
  a,button,.card,.half,.svc-row,.collage img,.strip img,.logos div{-webkit-tap-highlight-color:transparent}

  /* Área de pulsación algo más alta en la lista de servicios. */
  .svc-row{padding:30px 0}
}

/* ---------- pantallas pequeñas ---------- */
@media(max-width:640px){
  /* El texto justificado en una columna estrecha abre huecos
     irregulares entre palabras y dificulta la lectura. */
  .detail .txt p,.svc-hero p,.svc-body p,.svc-body li,
  .block .lead,.member p,.claim p{text-align:left;hyphens:manual}

  /* La ficha del proyecto pasa de dos columnas a etiqueta sobre
     valor: con nombres largos, el valor quedaba comprimido contra
     el borde derecho y se partía en muchas líneas. */
  .ficha div{flex-direction:column;gap:3px;padding:13px 0}
  .ficha dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase}
  .ficha dd{text-align:left}

  /* Cabecera más compacta para ganar pantalla. */
  .hd{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  .logo img{height:34px}

  /* Alto real de la ventana también en la portada. */
  .half{height:46dvh}

  /* El botón de menú se ancla al extremo derecho de la cabecera.
     Sin esto queda pegado al logotipo, porque en móvil el menú pasa
     a posición fija y salen del flujo todos los elementos menos el
     logo y el propio botón.
     El relleno amplía la zona sensible al toque hasta unos 46 px
     —por debajo de 44 px se falla al pulsar—, y el margen negativo
     compensa ese relleno para que el icono siga alineado con el
     borde de la cabecera. */
  #burger{margin-left:auto;padding:12px;margin-right:-12px;line-height:1}

  /* Filtros de proyecto: botones más altos, más fáciles de acertar. */
  .filters{gap:2px 22px;margin:-10px 0 32px}
  .filters button{padding:11px 0}

  /* Menos aire vertical: los márgenes pensados para escritorio
     obligan a un scroll excesivo en el teléfono. */
  .head{padding:44px 0 26px;margin-bottom:34px}
  .claim{padding:60px 6vw}
  .block{margin-bottom:64px}
  .grid{padding-bottom:64px}
  .svc-list{margin-bottom:64px}
  .svc-hero{margin-bottom:52px}
  .detail{padding-bottom:70px}
  .gal{gap:16px}
  .map{height:300px;margin-bottom:64px}
  .video{margin-top:28px}
  .collage{grid-auto-rows:120px;gap:10px}
  .strip img{height:210px}
  .grupo{margin-top:36px}

  /* Ficha técnica de servicios: cita legal con menos sangría. */
  .svc-body blockquote{padding-left:16px}
  .svc-body ul{margin-left:18px}
}

/* Pantallas muy estrechas (iPhone SE y similares). */
@media(max-width:380px){
  .logos div{flex:0 0 100%}
  .svc-row{grid-template-columns:28px 1fr auto;gap:10px}
  .svc-row h3{font-size:15px;letter-spacing:.14em}
}

/* ---------- accesibilidad / SEO (sin impacto visual) ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}