/* Los Cantos · inventario y modelos · v1 · 22-oct-2026
   Complementa ../../estilos.css sin tocarlo (lo usan otras páginas). Mismos tokens de Studio. */

/* Modelos */
.modelos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.modelo{border:1px solid var(--linea);border-radius:14px;padding:26px 24px 24px;background:#fff}
.modelo h3{font:700 28px/1 "Roboto Condensed",sans-serif;margin:8px 0 4px}
.modelo .m2{font:700 44px/1 "Roboto Condensed",sans-serif;letter-spacing:-.01em;margin:16px 0 4px}
.modelo ul{list-style:none;padding:0;margin:14px 0 18px;color:var(--gris);font-size:15px}
.modelo li{padding:6px 0;border-top:1px solid var(--linea)}
.modelo .cifras{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--negro);padding-top:14px}
.modelo .cifras span{display:block;font-size:12px;color:var(--gris)}
.modelo .cifras b{font:700 19px "Roboto Condensed",sans-serif}

/* Filtros */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin:36px 0 10px}
.filtro{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--linea);background:#fff;font:500 15px Roboto,sans-serif;color:var(--grafito);cursor:pointer}
.filtro[aria-pressed="true"]{background:var(--negro);border-color:var(--negro);color:#fff}
.filtro:focus-visible,.depto:focus-visible{outline:2px solid var(--naranja);outline-offset:2px}
.resumen{font-size:14px;color:var(--gris);margin:6px 0 0}

/* Torres */
.inventario{display:grid;grid-template-columns:1fr 1fr 340px;gap:28px;margin-top:28px;align-items:start}
.torre h3{font:700 13px "Roboto Condensed",sans-serif;letter-spacing:.18em;text-transform:uppercase;margin:0 0 10px}
.pisos{display:grid;grid-template-columns:28px repeat(4,1fr);gap:6px}
.pisos .n{font:600 12px "Roboto Condensed",sans-serif;color:var(--gris);display:flex;align-items:center}
.pisos .cab{font-size:11px;color:var(--gris);text-align:center;line-height:1.2;padding-bottom:4px}
.depto{min-height:52px;border-radius:8px;border:1px solid var(--linea);background:#fff;font:500 13px/1.15 Roboto,sans-serif;color:var(--negro);cursor:pointer;padding:6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:background .2s,opacity .2s}
.depto i{font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.depto.venta{border-color:var(--naranja)}
.depto.venta i{color:var(--naranja)}
.depto.rentado{border-color:var(--naranja);border-style:dashed}
.depto.rentado i{color:var(--naranja)}
.depto.renta{border-color:var(--grafito)}
.depto.renta i{color:var(--grafito)}
.depto.vendido{background:var(--hueso);border-color:var(--hueso);color:#B3AFA9;cursor:default}
.depto.apagado{opacity:.22}
.depto[aria-pressed="true"]{background:var(--negro);border-color:var(--negro);color:#fff}
.depto[aria-pressed="true"] i{color:var(--piedra)}
.base{grid-column:2/-1;border-top:2px solid var(--negro);margin-top:4px}

/* Detalle */
.detalle{position:sticky;top:76px;border:1px solid var(--linea);border-radius:14px;padding:24px;min-height:300px;background:#fff}
.detalle h3{font:700 34px/1 "Roboto Condensed",sans-serif;margin:8px 0 2px}
.detalle .sub{color:var(--gris);font-size:15px;margin:0 0 16px}
.detalle dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0 0 18px;font-size:15px}
.detalle dt{color:var(--gris)}
.detalle dd{margin:0;text-align:right}
.detalle .cifra{font:700 36px/1 "Roboto Condensed",sans-serif;letter-spacing:-.01em;margin:4px 0 4px}
.detalle .vacio{color:var(--gris);font-size:15px}
.detalle .boton{width:100%;margin-top:14px}

/* Leyenda */
.leyenda{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--gris);margin-top:18px}
.leyenda span:before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;border:1px solid}
.leyenda .l-venta:before{border-color:var(--naranja)}
.leyenda .l-rentado:before{border-color:var(--naranja);border-style:dashed}
.leyenda .l-renta:before{border-color:var(--grafito)}
.leyenda .l-vendido:before{background:var(--hueso);border-color:var(--hueso)}

/* Video */
.video{position:relative;border-radius:4px;overflow:hidden;background:var(--negro);aspect-ratio:16/9;margin-top:40px}
.video video{width:100%;height:100%;object-fit:cover}

@media (max-width:1060px){
  .inventario{grid-template-columns:1fr 1fr}
  .detalle{grid-column:1/-1;position:static;min-height:0}
}
@media (max-width:860px){
  .modelos{grid-template-columns:1fr}
  .inventario{grid-template-columns:1fr}
  .depto{min-height:48px}
}

/* Galería de departamentos muestra (4 verticales) */
.g-f{grid-column:span 3;aspect-ratio:3/4}
@media (max-width:860px){.g-f{grid-column:span 1}}