/* Alliance Group — sección Propiedades.
   Tres pantallas: índice de zonas, contactos de una zona, y la ficha editorial. */

/* ============ encabezado de sección ============ */

.seccion-head{
  padding-top:clamp(44px,6vw,80px);
  padding-bottom:clamp(30px,4vw,48px);
}

.seccion-head h1{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(42px,8vw,96px);
  line-height:1.02;
  letter-spacing:-.02em;
  text-wrap:balance;
  margin:16px 0 0;
}

.seccion-head .bajada{
  margin:20px 0 0;
  color:var(--muted);
  font-size:clamp(15px,1.8vw,18px);
  max-width:54ch;
}

.seccion-head .conteo{
  margin:22px 0 0;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
}

/* migas: siempre hay camino de vuelta */
.migas{
  padding-top:22px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
}

.migas a{
  color:var(--dim);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}

.migas a:hover{color:var(--brass-soft);border-bottom-color:var(--brass)}
.migas span{margin:0 8px;opacity:.5}

/* ============ índice de zonas ============ */

.zonas{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(16px,2vw,26px);
  padding-bottom:clamp(56px,8vw,96px);
}

.zona{
  position:relative;
  display:block;
  text-decoration:none;
  border:1px solid var(--line-soft);
  background:linear-gradient(160deg,var(--navy-850),var(--navy-900));
  overflow:hidden;
  min-height:270px;
  transition:border-color .25s;
}

.zona:hover{border-color:var(--brass)}

.zona .fondo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.62;
  transform:scale(1.02);
  transition:opacity .4s,transform .6s;
}

.zona:hover .fondo{opacity:.78;transform:scale(1.06)}

.zona::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(200deg,rgba(6,15,30,.18) 0%,rgba(6,15,30,.55) 48%,rgba(6,15,30,.88) 86%);
}

.zona .txt{
  position:relative;
  z-index:2;
  height:100%;
  min-height:270px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  padding:clamp(22px,3vw,30px);
}

.zona h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(26px,3vw,34px);
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0;
}

.zona p{
  margin:0;
  color:var(--muted);
  font-size:14.5px;
  max-width:38ch;
}

.zona .cuenta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass);
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:4px;
}

.zona .cuenta::before{
  content:"";
  width:5px;
  height:5px;
  background:var(--brass);
  transform:rotate(45deg);
  flex:none;
}

.zona--vacia{opacity:.55;cursor:default}
.zona--vacia:hover{border-color:var(--line-soft)}
.zona--vacia .cuenta{color:var(--dim)}
.zona--vacia .cuenta::before{background:var(--dim)}

/* ============ contactos fotográficos de una zona ============ */

.contactos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:clamp(24px,3vw,40px) clamp(18px,2.4vw,30px);
  padding-bottom:clamp(56px,8vw,96px);
}

.ficha-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
}

/* una sola propiedad en la zona: que ocupe el lugar de dos y respire */
.contactos .ficha-card:only-child{
  grid-column:span 2;
  max-width:820px;
}

.contactos .ficha-card:only-child .marco{aspect-ratio:16/10}
.contactos .ficha-card:only-child h3{font-size:31px;margin-top:22px}
.contactos .ficha-card:only-child .resumen{font-size:16px;max-width:46ch}

@media (max-width:720px){
  .contactos .ficha-card:only-child{grid-column:span 1}
}

.ficha-card .marco{
  position:relative;
  overflow:hidden;
  background:var(--navy-850);
  border:1px solid var(--line-soft);
  aspect-ratio:3/2;
  transition:border-color .25s;
}

.ficha-card:hover .marco{border-color:var(--brass)}

.ficha-card .marco img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease,filter .4s;
  filter:saturate(.92);
}

.ficha-card:hover .marco img{transform:scale(1.045);filter:saturate(1)}

.ficha-card .sello{
  position:absolute;
  top:0;
  left:0;
  padding:7px 12px;
  background:var(--brass);
  color:var(--navy-950);
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.ficha-card h3{
  font-family:var(--display);
  font-weight:400;
  font-size:25px;
  line-height:1.15;
  letter-spacing:-.005em;
  margin:18px 0 0;
}

.ficha-card .sub{
  margin:4px 0 0;
  color:var(--brass-soft);
  font-size:14.5px;
}

.ficha-card .resumen{
  margin:10px 0 0;
  color:var(--muted);
  font-size:14.5px;
  max-width:40ch;
}

.ficha-card .datos{
  margin:16px 0 0;
  padding-top:12px;
  border-top:1px solid var(--line-soft);
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dim);
}

.ficha-card .datos .precio{color:var(--brass);font-weight:500}

/* ============ la ficha: portada ============ */

.portada{
  position:relative;
  isolation:isolate;
  min-height:min(82vh,760px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}

.portada img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}

.portada::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(184deg,rgba(6,15,30,.60) 0%,rgba(6,15,30,.12) 30%,rgba(6,15,30,.46) 56%,rgba(6,15,30,.84) 78%,rgba(6,15,30,.97) 100%);
}

.portada .shell{padding-bottom:clamp(36px,6vw,68px)}

.portada h1{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(46px,9vw,112px);
  line-height:.98;
  letter-spacing:-.025em;
  margin:14px 0 0;
}

.portada .subtitulo{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(19px,2.6vw,30px);
  color:var(--brass-soft);
  margin:10px 0 0;
  letter-spacing:-.005em;
}

.portada .lugar{
  margin:18px 0 0;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ============ la ficha: ficha técnica ============ */

.tecnica{
  background:var(--navy-900);
  border-bottom:1px solid var(--line-soft);
  padding-top:clamp(30px,4vw,46px);
  padding-bottom:clamp(30px,4vw,46px);
}

.tecnica dl{
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(20px,2.6vw,34px);
}

.tecnica div{
  border-top:1px solid var(--brass);
  padding-top:13px;
}

.tecnica dt{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
}

.tecnica dd{
  margin:6px 0 0;
  font-family:var(--display);
  font-size:20px;
  font-weight:400;
  line-height:1.25;
}

.tecnica .destacado dd{color:var(--brass-soft)}

/* ============ la ficha: cuerpo editorial ============ */

/* Grilla de tres anchos: columna de texto, ancho de shell, y sangre completa.
   Evita el truco de 100vw, que agrega scroll horizontal cuando hay barra.
   Los sufijos -start/-end no son decorativos: son la convención que hace que
   `grid-column: texto` resuelva a texto-start / texto-end. Con nombres en
   castellano el navegador crea una columna implícita al final y tira todo
   el contenido contra el borde derecho. */
.nota{
  display:grid;
  grid-template-columns:
    [sangre-start] minmax(var(--pad),1fr)
    [ancho-start] minmax(0,calc((var(--shell) - var(--texto))/2))
    [texto-start] min(var(--texto),calc(100% - var(--pad)*2)) [texto-end]
    minmax(0,calc((var(--shell) - var(--texto))/2)) [ancho-end]
    minmax(var(--pad),1fr) [sangre-end];
  padding-top:clamp(44px,6vw,80px);
  padding-bottom:clamp(20px,3vw,36px);
  row-gap:clamp(34px,5vw,64px);
}

.nota > *{grid-column:texto}
.nota > .b-ancho{grid-column:ancho}
.nota > .b-sangre{grid-column:sangre}

.nota p{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(17.5px,2vw,20px);
  line-height:1.62;
  color:#DCE6F3;
  margin:0 0 1.05em;
}

.nota p:last-child{margin-bottom:0}

.nota .bloque-texto:first-child p:first-child{
  font-size:clamp(20px,2.4vw,24px);
  line-height:1.5;
  color:var(--text);
}

/* párrafos que todavía esperan el texto real */
.nota p.provisorio{
  border-left:2px solid var(--brass);
  padding-left:18px;
  color:var(--muted);
}

figure{margin:0}

figure img{
  width:100%;
  height:auto;
  background:var(--navy-850);
}

.b-sangre img{
  max-height:88vh;
  object-fit:cover;
}

figcaption{
  margin-top:11px;
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.5;
  letter-spacing:.03em;
  color:var(--dim);
  max-width:56ch;
}

.b-sangre figcaption{
  padding-left:var(--pad);
  padding-right:var(--pad);
}

.par{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(14px,2vw,26px);
}

/* la foto amplía al hacer clic */
.ampliable{cursor:zoom-in}

/* ============ la ficha: cierre ============ */

.cierre{
  border-top:1px solid var(--line-soft);
  background:var(--navy-900);
  padding-top:clamp(48px,6vw,80px);
  padding-bottom:clamp(48px,6vw,80px);
}

.cierre .shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:clamp(30px,5vw,64px);
  align-items:center;
}

.cierre h2{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(28px,4vw,44px);
  line-height:1.12;
  letter-spacing:-.015em;
  text-wrap:balance;
  margin:14px 0 0;
  max-width:17ch;
}

.cierre h2 em{font-style:normal;color:var(--brass-soft)}

.cierre .acciones{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:min(100%,290px);
}

/* navegación entre propiedades de la misma zona */
.paginacion{
  border-top:1px solid var(--line-soft);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:20px;
  align-items:center;
  padding-top:26px;
  padding-bottom:34px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.paginacion a{
  color:var(--muted);
  text-decoration:none;
  transition:color .2s;
}

.paginacion a:hover{color:var(--brass-soft)}
.paginacion .volver{text-align:center;color:var(--brass)}
.paginacion .sig{text-align:right}
.paginacion .vacio{color:transparent}

/* ============ visor de fotos ============ */

.visor{
  position:fixed;
  inset:0;
  z-index:50;
  background:rgba(6,15,30,.96);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,3vw,48px);
  cursor:zoom-out;
}

.visor img{
  max-width:100%;
  max-height:86vh;
  object-fit:contain;
}

.visor figcaption{
  position:absolute;
  left:0;
  right:0;
  bottom:clamp(14px,3vw,34px);
  text-align:center;
  max-width:none;
  padding:0 var(--pad);
  color:var(--muted);
}

.visor .cerrar{
  position:absolute;
  top:clamp(12px,2vw,26px);
  right:clamp(12px,2vw,26px);
  width:42px;
  height:42px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:border-color .2s,color .2s;
}

.visor .cerrar:hover{border-color:var(--brass);color:var(--brass-soft)}

/* ============ responsive ============ */

@media (max-width:720px){
  .par{grid-template-columns:1fr}
  .cierre .shell{grid-template-columns:1fr;align-items:start}
  .portada{min-height:min(74vh,620px)}
  .paginacion{grid-template-columns:1fr;gap:14px;text-align:left}
  .paginacion .volver,.paginacion .sig{text-align:left}
  .paginacion .vacio{display:none}
}