:root{
  --papel:#F5F4F0; --tinta:#1E2528; --gris:#4A5659; --gris2:#3F4A4D; --linea:#D5D3CC; --suave:#E4E2DB; --claro:#C9CFD0;
  --margen:clamp(20px,4vw,56px);
  --fuente:'Avenir','Avenir Next','Nunito Sans',system-ui,sans-serif;
  --curva:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--fuente);font-weight:400;font-size:16px;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit}
a:hover{color:var(--gris)}
:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
.oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* enlaces con subrayado que se dibuja */
.u-link{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:3px;transition:background-size .45s var(--curva)}
.u-link:hover,.u-link[aria-current="page"],.tarjeta:hover .u-link{background-size:100% 1px}

/* encabezado */
.cabecera{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:28px var(--margen);position:relative;z-index:2}
.cabecera .logo img{height:44px;width:auto}
.cabecera nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 32px;font-size:15px;letter-spacing:.02em}
.cabecera .idioma{color:var(--gris)}
.inicio .cabecera .logo img{height:48px}
.inicio .cabecera,.inicio .cabecera a{color:#fff}
.inicio .cabecera .idioma{color:#D9DEDF}

/* pie */
.pie{padding:28px var(--margen);border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:var(--gris)}

/* animaciones */
.u-in{animation:uIn .9s var(--curva) both}
@keyframes uIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){.u-reveal{animation:uIn linear both;animation-timeline:view();animation-range:entry 0% entry 35%}}

/* inicio */
.inicio{background:var(--tinta)}
.portada{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;color:#fff;display:flex;flex-direction:column}
.portada .fotos{position:absolute;inset:0;filter:grayscale(1) contrast(1.05)}
.portada .fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:uSlide 30s linear infinite both}
.portada .velo{position:absolute;inset:0;background:rgba(18,24,26,.38)}
@keyframes uSlide{0%{opacity:0;transform:scale(1)}4%{opacity:1}20%{opacity:1}24%{opacity:0;transform:scale(1.06)}100%{opacity:0;transform:scale(1.06)}}
.portada .base{position:relative;margin-top:auto;padding:0 var(--margen) 48px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px}
.portada .frase{max-width:680px;display:flex;flex-direction:column;gap:20px}
.portada .frase h1{margin:0;font-size:clamp(24px,2.4vw,34px);line-height:1.25;font-weight:400}
.portada .frase p{margin:0;font-size:15px;color:#E6E2DA}
.portada .frase a,.portada .pies a{color:#fff}
.portada .pies{width:280px;display:flex;flex-direction:column;gap:12px}
.portada .textos{position:relative;height:20px;font-size:13px;color:#E6E2DA}
.portada .textos span{position:absolute;left:0;bottom:0;white-space:nowrap;opacity:0;animation:uCap 30s linear infinite both}
@keyframes uCap{0%{opacity:0;transform:translateY(6px)}4%{opacity:1;transform:none}20%{opacity:1}23%{opacity:0}100%{opacity:0}}
.portada .barra{height:1px;background:rgba(255,255,255,.3)}
.portada .barra i{display:block;height:1px;background:#fff;transform-origin:left;animation:uBar 6s linear infinite}
@keyframes uBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* títulos de página */
.seccion{padding:40px var(--margen) 96px}
.titulo-pagina{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--tinta)}
.titulo-pagina h1{margin:0;font-size:40px;line-height:1.1;font-weight:400;letter-spacing:-.01em}
.titulo-pagina p{margin:8px 0 0;font-size:15px;color:var(--gris)}
.etiqueta{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}

/* botones y filtros */
.boton{min-height:44px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;cursor:pointer;background:transparent;color:var(--tinta);border:1px solid #A3A9A7;transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.boton[aria-pressed="true"]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.boton .n{opacity:.6;font-variant-numeric:tabular-nums}
.vista{display:flex;border:1px solid var(--tinta)}
.vista .boton{border:0}
.filtros{display:flex;flex-direction:column;gap:12px;padding:20px 0 36px}
.filtros .fila{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.filtros .fila>.etiqueta{width:72px}
.contador{margin:0;font-size:13px;color:var(--gris);font-variant-numeric:tabular-nums}

/* rejilla de obra */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:36px 20px}
.tarjeta{display:flex;flex-direction:column;text-decoration:none;color:var(--tinta)}
.tarjeta .marco{aspect-ratio:4/5;background:var(--suave);overflow:hidden;position:relative}
.tarjeta .marco img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--curva)}
.tarjeta:hover .marco img{transform:scale(1.045)}
.tarjeta .premio{position:absolute;top:10px;left:10px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--papel);padding:4px 8px}
.tarjeta .meta{display:flex;justify-content:space-between;gap:8px;padding-top:12px;font-size:12px;color:var(--gris);font-variant-numeric:tabular-nums}
.tarjeta .nombre{align-self:flex-start;margin-top:4px;font-size:16px;line-height:1.3;font-weight:600}
.tarjeta .detalle{font-size:13px;color:var(--gris);padding-top:2px}
.estado{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--gris);padding-top:4px}
.estado i{width:8px;height:8px;display:inline-block}
.estado.construido i{border-radius:50%;background:var(--tinta)}
.estado.proyecto i{border-radius:50%;border:1.5px solid var(--tinta)}
.estado.concurso i{background:#8A6D1E}
.tarjeta.entra{animation:uIn .7s var(--curva) both}
.tabla-wrap{overflow-x:auto}
.tabla{width:100%;min-width:760px;border-collapse:collapse;font-size:15px}
.tabla th{padding:10px 8px;border-bottom:1px solid var(--tinta);font-weight:400;text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.tabla td{padding:10px 8px;border-bottom:1px solid var(--linea)}
.tabla tr{transition:background-color .3s ease}
.tabla tbody tr:hover{background:#ECEAE3}
.tabla a{display:flex;align-items:center;gap:14px;text-decoration:none;font-weight:600}
.tabla img{width:64px;height:44px;object-fit:cover}
[hidden]{display:none!important}

/* ficha */
.migas{margin:0 0 20px;font-size:13px;color:var(--gris)}
.ficha-cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px 64px}
.ficha-cab h1{margin:0;flex:1 1 560px;min-width:0;font-size:clamp(48px,8vw,120px);line-height:.95;font-weight:400;letter-spacing:-.03em}
.datos{margin:0;flex:0 1 420px;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;font-size:15px}
.datos div{border-top:1px solid var(--tinta);padding-top:8px}
.datos dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.datos dd{margin:4px 0 0}
.foto-principal{padding:0 var(--margen);animation:uHero 1.6s var(--curva) both}
.foto-principal img{width:100%;height:clamp(320px,62vw,860px);object-fit:cover}
@keyframes uHero{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.texto-proyecto{padding:96px var(--margen);display:flex;flex-wrap:wrap;gap:32px 64px}
.texto-proyecto .etiqueta{flex:0 1 240px}
.texto-proyecto p.cuerpo{margin:0;flex:1 1 560px;max-width:760px;font-size:clamp(20px,1.8vw,26px);line-height:1.5}
.galeria{padding:0 var(--margen) 96px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.galeria img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;background:var(--suave)}
.galeria img.ancha{grid-column:1/-1;aspect-ratio:16/9}
.galeria .credito{grid-column:1/-1;margin:0;font-size:13px;color:var(--gris)}
.siguiente{border-top:1px solid var(--tinta);display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.siguiente a{display:flex;flex-direction:column;gap:6px;padding:32px var(--margen);text-decoration:none;border-right:1px solid var(--linea)}
.siguiente a:last-child{border-right:0;align-items:flex-end;text-align:right}
.siguiente a.centro{justify-content:center;align-items:center}
.siguiente .u-link{font-size:22px;align-self:inherit}

/* estudio */
.bloque{padding:96px var(--margen) 0;display:flex;flex-wrap:wrap;gap:32px 64px}
.bloque>h2,.bloque>.etiqueta{margin:0;flex:0 1 240px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:400;color:var(--gris)}
.bloque>.contenido{flex:1 1 600px;min-width:0}
.intro p.grande{margin:0;font-size:clamp(22px,2vw,28px);line-height:1.45}
.intro p{margin:20px 0 0;font-size:17px;line-height:1.65;color:var(--gris2)}
.enfoque{margin:96px var(--margen) 0;background:var(--tinta);color:var(--papel);padding:clamp(32px,5vw,72px);display:flex;flex-direction:column;gap:40px}
.enfoque a{color:var(--papel)}
.enfoque .fila{display:flex;flex-wrap:wrap;gap:24px 64px}
.enfoque .etiqueta{flex:0 1 240px;color:var(--claro)}
.enfoque .fila>div{flex:1 1 600px}
.enfoque h2{margin:0;font-size:clamp(28px,3vw,44px);line-height:1.2;font-weight:400}
.enfoque p{margin:18px 0 0;max-width:680px;font-size:17px;line-height:1.6;color:#D9DEDF}
.enfoque .ejemplos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.enfoque .ejemplos a{display:flex;flex-direction:column;gap:10px;text-decoration:none;font-size:15px}
.enfoque .ejemplos img{width:100%;aspect-ratio:4/5;object-fit:cover}
.mapa{display:flex;flex-wrap:wrap;gap:40px 56px;align-items:flex-start}
.mapa svg{flex:0 1 380px;width:100%;max-width:380px;height:auto}
.mapa .lista{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:24px}
.mapa .lista p{margin:0;font-size:clamp(22px,2vw,28px);line-height:1.35}
.filas{margin:0;display:flex;flex-direction:column}
.filas div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--linea)}
.filas div:first-child{border-top-color:var(--tinta)}
.filas div:last-child{border-bottom:1px solid var(--linea)}
.filas dd{margin:0;font-variant-numeric:tabular-nums}
.equipo{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 32px}
.equipo div{border-top:1px solid var(--linea);padding:14px 0 20px}
.equipo div:nth-child(-n+2){border-top-color:var(--tinta)}
.equipo dt{font-size:18px}
.equipo dd{margin:4px 0 0;font-size:14px;color:var(--gris)}
.servicios{border-bottom:1px solid var(--tinta)}
.servicios a{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1.4fr) 24px;gap:16px;align-items:baseline;padding:20px 0;border-top:1px solid var(--tinta);text-decoration:none;transition:padding-left .45s var(--curva),background-color .3s ease}
.servicios a:hover{padding-left:16px;background:#ECEAE3}
.servicios .n{font-size:13px;color:var(--gris)}
.servicios .t{font-size:20px}
.servicios .d{font-size:15px;line-height:1.5;color:var(--gris2)}
.servicios .f{opacity:0;transform:translateX(-8px);transition:opacity .35s ease,transform .45s var(--curva)}
.servicios a:hover .f{opacity:1;transform:none}
.premios td{padding:14px 16px 14px 0;border-top:1px solid var(--linea)}
.premios td:first-child{font-size:18px}
.premios .sello{font-size:12px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--tinta);padding:4px 8px;white-space:nowrap}
.contacto{margin-top:96px;background:var(--tinta);color:var(--papel);padding:88px var(--margen) 32px}
.contacto a{color:var(--papel)}
.contacto .fila{display:flex;flex-wrap:wrap;gap:32px 64px;padding-bottom:72px}
.contacto .fila>.etiqueta{flex:0 1 240px;color:var(--claro)}
.contacto .fila>div{flex:1 1 600px;display:flex;flex-direction:column;gap:28px}
.contacto h2{margin:0;font-size:clamp(28px,3vw,44px);line-height:1.2;font-weight:400}
.contacto .medios{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;font-size:17px}
.contacto .medios .etiqueta{margin:0 0 6px;color:var(--claro)}
.contacto .base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid #4B5A5E;padding-top:20px;font-size:13px;color:var(--claro)}
.contacto .base img{height:32px;width:auto}
.placeholder{min-height:420px;margin:96px var(--margen) 0;background:var(--suave);display:flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}

@media (max-width:640px){
  .galeria{grid-template-columns:1fr}
  .servicios a{grid-template-columns:32px minmax(0,1fr);}
  .servicios .d{grid-column:2}
  .servicios .f{display:none}
  .filtros .fila>.etiqueta{width:100%}
  .cabecera .logo img{height:38px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .portada .fotos img:first-child,.portada .textos span:first-child{opacity:1}
}