/* Proyectos — dos versiones. Monta sobre inicio.css (barra, menú, pie, botones,
   .wrap, .sect__row) y soluciones.css (.shero, .cierre). */

.btn-azul{background:var(--blue);color:var(--white)}
.btn-azul:hover{background:var(--blue-dark)}

/* TEMPORAL — selector para comparar A y B. Se quita al elegir versión. */
.cambia{
  position:fixed;
  left:50%;
  bottom:clamp(16px,3vh,28px);
  z-index:50;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  padding:6px 6px 6px var(--sp-4);
  background:rgba(5,5,5,.92);
  backdrop-filter:blur(8px);
  border-radius:999px;
  box-shadow:0 6px 28px rgba(5,5,5,.24);
}
.cambia__t{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:rgba(255,255,255,.6);
  white-space:nowrap;
}
.cambia a{
  padding:7px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,.72);
  white-space:nowrap;
  transition:background var(--tr-fast),color var(--tr-fast);
}
.cambia a:hover{color:var(--white)}
.cambia a[aria-current]{background:var(--white);color:var(--black)}

@media (max-width:520px){
  .cambia__t{display:none}
  .cambia{padding:6px}
}

/* ---------- A: cada proyecto empieza con una conversación ---------- */

.conver{position:relative;overflow:hidden;background:var(--g-050);margin-top:clamp(52px,8vh,96px)}

.conver__in{
  display:grid;
  grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(0,48%);
  align-items:center;
  gap:clamp(20px,3vw,44px);
  min-height:clamp(300px,42vh,420px);
}

.conver__rotulos{
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--g-500);
  line-height:1.55;
}
.conver__rotulos span{display:block}
.conver__rotulos hr{
  width:30px;
  height:1px;
  margin:0;
  border:0;
  background:var(--g-300);
}

.conver__copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--sp-4);
  padding-block:clamp(32px,5vh,56px);
}
.conver__copy h2{
  font-size:clamp(24px,2.9vw,38px);
  letter-spacing:-.025em;
  line-height:1.16;
  max-width:16ch;
}
.conver__copy p{font-size:var(--fs-sm);color:var(--g-700);max-width:44ch}
.conver__copy .btn-azul{margin-top:var(--sp-2)}

.conver__foto{
  position:relative;
  align-self:stretch;
  overflow:hidden;
  margin-right:calc(-1 * var(--gi));
}
.conver__foto img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 40%;
}

/* ---------- A: los seis tipos de edificio ---------- */

.tipos{padding-block:clamp(28px,4vh,48px)}

/* .sect__row y .sect__i vienen de inicio.css */

/* ---------- B: filtro ---------- */

.filtros{padding-top:clamp(20px,3vh,32px)}

.filtros__in{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-3);
}

.filtros__in .opt{height:36px;padding-inline:15px;font-size:13px}

.filtros__cuenta{
  margin-left:auto;
  font-size:var(--fs-xs);
  color:var(--g-500);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ---------- B: la cartera ---------- */

.obras{padding-block:clamp(24px,4vh,40px) clamp(44px,7vh,80px)}

.obras__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,32px);
}

.obras__grid.sin-nada::after{
  content:attr(data-vacio);
  grid-column:1/-1;
  padding-block:clamp(36px,6vh,64px);
  text-align:center;
  font-size:var(--fs-sm);
  color:var(--g-500);
}

.obra{display:grid;gap:var(--sp-3);align-content:start}
.obra.is-off{display:none}

.obra__foto{
  overflow:hidden;
  background:var(--g-100);
  aspect-ratio:16/10;
}
.obra__foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--tr-slow);
}
.obra:hover .obra__foto img{transform:scale(1.04)}

.obra__d{display:grid;gap:2px}
.obra__t{
  font-family:var(--font-display);
  font-size:var(--fs-md);
  font-weight:600;
  letter-spacing:-.015em;
}
.obra__c{font-size:var(--fs-sm);color:var(--g-700)}
.obra__a{font-size:var(--fs-xs);color:var(--g-500);line-height:1.5;margin-top:2px}

/* ---------- Responsive ---------- */

@media (max-width:1024px){
  .conver__in{grid-template-columns:1fr;gap:var(--sp-5);min-height:0}
  .conver__rotulos{flex-direction:row;align-items:center;gap:var(--sp-4);padding-top:clamp(28px,4vh,44px)}
  .conver__rotulos hr{width:24px;flex:none}
  .conver__copy{padding-block:0 clamp(28px,4vh,44px)}
  .conver__copy h2{max-width:none}
  .conver__foto{
    margin-inline:calc(-1 * var(--gi));
    aspect-ratio:16/8;
    order:-1;
  }

  .obras__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .filtros__cuenta{margin-left:0;width:100%}

  .obras__grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .obra{
    grid-template-columns:110px minmax(0,1fr);
    align-items:center;
    gap:var(--sp-4);
    padding-bottom:var(--sp-4);
    border-bottom:1px solid var(--g-200);
  }
  .obra__foto{aspect-ratio:1/1}
  .obra__a{display:none}
}

@media (max-width:420px){
  .conver__rotulos{flex-direction:column;align-items:flex-start}
}

.caps{padding-block:clamp(24px,4vh,40px) clamp(44px,7vh,80px)}

.caps__indice{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-3) var(--sp-6);
  padding-block:var(--sp-4);
  border-bottom:1px solid var(--g-200);
}

.caps__indice a{
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--g-500);
  transition:color var(--tr-fast);
}

.caps__indice a:hover{color:var(--black)}

.cap{padding-block:clamp(32px,5vh,64px)}
.cap + .cap{border-top:1px solid var(--g-200)}
.cap{scroll-margin-top:96px}

.cap__in{
  display:grid;
  grid-template-columns:minmax(0,46%) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);
  align-items:center;
}

.cap__foto{margin:0;overflow:hidden;background:var(--g-100);aspect-ratio:3/2}

.cap__foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--tr-slow);
}

.cap:hover .cap__foto img{transform:scale(1.03)}

.cap__txt h2{
  font-size:var(--fs-2xl);
  font-weight:600;
  letter-spacing:-.025em;
}

.cap__frase{
  margin-top:var(--sp-3);
  font-size:var(--fs-md);
  line-height:1.6;
  color:var(--g-700);
  max-width:46ch;
}

.cap__vacio{
  margin-top:var(--sp-6);
  padding-top:var(--sp-4);
  border-top:1px solid var(--g-200);
  font-size:var(--fs-sm);
  color:var(--g-500);
}

@media (max-width:900px){
  .cap__in{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
  .cap__foto{aspect-ratio:16/9}
  .caps__indice{gap:var(--sp-3) var(--sp-5)}
}

@media (prefers-reduced-motion:reduce){
  .cap:hover .cap__foto img{transform:none}
}

.shero .vert{
  padding:10px 12px;
  border-radius:6px;
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--g-800);
  text-shadow:none;
}
.shero .vert::after{margin-top:var(--sp-2)}

.obras-fig{margin:0}
.obras-fig img{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px;background:var(--g-100)}
.obras-fig figcaption{margin-top:var(--sp-2);font-size:var(--fs-sm);line-height:1.45;color:var(--g-700)}
.obras-fig figcaption b{display:block;font-family:var(--font-display);font-weight:600;color:var(--black)}
.oa{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--g-200)}
.oa__rot{font-size:var(--fs-sm);font-weight:600;color:var(--g-800)}
.oa__fila{display:flex;gap:var(--sp-3);margin-top:var(--sp-3);align-items:flex-start}
.oa__fila .obras-fig{flex:1.13 1 0;min-width:0}
.oa__fila .obras-fig:nth-child(1) img{aspect-ratio:1080/956}
.oa__fila .obras-fig:nth-child(2){flex-grow:.75}
.oa__fila .obras-fig:nth-child(2) img{aspect-ratio:3/4}
.oa__fila .obras-fig:nth-child(3){flex-grow:1}
.oa__fila .obras-fig:nth-child(3) img{aspect-ratio:1}
.oa__fila figcaption{font-size:12px}
@media (max-width:600px){
  .oa__fila{flex-wrap:wrap}
  .oa__fila .obras-fig:nth-child(1){flex-basis:100%}
}