/* ============================================================
   COSMESS EDIFICA · estilos de la FICHA DEL MODELO (modelo.html)
   ============================================================ */

.ficha { padding-top: 32px; padding-bottom: 72px; }
.ficha-titulo { font-size: var(--titulo-pagina); }
.ficha-sub { margin: 6px 0 22px; font-size: 18px; color: var(--gris-texto); }
.enlace-fuerte { font-weight: 700; font-size: 15px; }
.etiqueta-clara { color: #FF6B72; }
.bajada { margin-bottom: 24px; }

/* Botones de modelos: casas y dúplex en dos grupos prolijos */
.selector-modelos { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-bottom: 32px; padding: 16px 0; border-top: 1px solid var(--gris-borde); border-bottom: 1px solid var(--gris-borde); }
.selector-grupo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.selector-casa { flex: 1 1 100%; } /* las 11 casas en una fila; dúplex y quinchos/locales abajo */
.selector-duplex { flex: 4 1 320px; }
.selector-duplex .chips { grid-template-columns: repeat(3, minmax(64px, 1fr)) minmax(100px, 1.4fr); }
.selector-otros { flex: 3 1 220px; }
.selector-otros .chips { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.selector-casa .chips { grid-template-columns: repeat(11, minmax(0, 1fr)); }

/* Quinchos y locales: destacados + ambientes */
.ambientes { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-start; }
.ambientes .lista-incluye { flex: 2 1 420px; }
.lista-ambientes { flex: 1 1 280px; margin: 0; border-top: 1.5px solid var(--negro); }
.lista-ambientes div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gris-borde); font-size: 16px; }
.lista-ambientes dt { color: var(--gris-texto); }
.lista-ambientes dd { margin: 0; font-weight: 700; }
.selector-grupo-titulo { font-family: var(--fuente-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--gris-suave); }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.chip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 8px 6px;
  border: 1.5px solid #C9C9C7;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--negro);
  text-decoration: none;
}
.chip:hover { border-color: var(--negro); color: var(--negro); }
.chip.activo { background: var(--negro); border-color: var(--negro); color: var(--blanco); }

/* Imagen y datos */
.ficha-grilla { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.ficha-imagen { flex: 999 1 600px; min-width: 0; margin: 0; border: 1.5px solid var(--negro); position: sticky; top: 100px; }
.ficha-imagen-cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--negro);
  font-family: var(--fuente-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.selector-chico { display: flex; gap: 6px; }
.selector-chico button {
  min-height: 40px;
  padding: 6px 14px;
  border: 1.5px solid var(--negro);
  border-radius: 4px;
  background: var(--blanco);
  font-family: var(--fuente-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.selector-chico button.activo { background: var(--negro); color: var(--blanco); }
.ficha-imagen img { width: 100%; aspect-ratio: 960 / 478; object-fit: cover; background: var(--gris-fondo); }
.ficha-imagen img.plano { object-fit: contain; }
.ficha-imagen img.plano {
  padding: 18px;
  background-color: #FAFAF8;
  background-image: linear-gradient(#EFEFEB 1px, transparent 1px), linear-gradient(90deg, #EFEFEB 1px, transparent 1px);
  background-size: 24px 24px;
}
.ficha-imagen img[hidden] { display: none; }
.ficha-imagen-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--negro); }
.ficha-imagen-datos div { padding: 12px 16px; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid var(--gris-borde); }
.ficha-imagen-datos span { font-family: var(--fuente-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--gris-suave); }

.ficha-datos { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ficha-datos dl { margin: 0; border-top: 1.5px solid var(--negro); }
.ficha-datos dl div { display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--gris-borde); }
.ficha-datos dt { font-family: var(--fuente-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--gris-suave); }
.ficha-datos dd { margin: 0; font-weight: 700; line-height: 1.4; }
.ficha-datos dd.destacado { font-family: var(--fuente-titulos); font-size: 22px; font-weight: 800; color: var(--rojo); }
.ficha-botones { display: flex; flex-direction: column; gap: 8px; }
.ficha-medida { background: var(--gris-fondo); padding: 16px 18px; }
.ficha-medida span { font-family: var(--fuente-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--rojo); }
.ficha-medida p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--gris-texto); }
.ficha-nota { margin: 14px 0 0; font-size: 15px; color: var(--gris-texto); line-height: 1.5; }

/* Secciones */
.ficha-seccion { margin-top: 80px; }
.ficha-seccion h2, .ficha-planes h2 { font-size: var(--titulo-seccion); margin-bottom: 28px; }
.grilla-lineas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--gris-borde); border-left: 1px solid var(--gris-borde); }
.linea { padding: 22px; border-right: 1px solid var(--gris-borde); border-bottom: 1px solid var(--gris-borde); }
.linea-cabecera { display: flex; justify-content: space-between; font-family: var(--fuente-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--verde); }
.linea-cabecera span:first-child { color: var(--gris-suave); }
.linea h3 { font-size: 22px; margin: 12px 0 6px; }
.linea p { margin: 0; font-size: 15px; color: var(--gris-texto); line-height: 1.5; }
.linea.no-disponible { background: var(--gris-fondo); color: #8F8F8C; }
.linea.no-disponible .linea-cabecera { color: #8F8F8C; }

.grilla-tipologias { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.tipologia { margin: 0; border: 1px solid var(--gris-borde); display: flex; flex-direction: column; }
.tipologia img { width: 100%; aspect-ratio: 1200 / 555; object-fit: cover; }
.tipologia figcaption { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.tipologia strong { font-family: var(--fuente-titulos); font-size: 22px; }
.tipologia p { margin: 0; font-size: 15px; color: var(--gris-texto); line-height: 1.5; min-height: 4.5em; }
.pastillas { display: flex; flex-wrap: wrap; gap: 6px; }
.pastillas span { border: 1.5px solid var(--negro); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; }
.mini-titulo { margin-top: 4px; font-family: var(--fuente-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--rojo); }
.tipologia ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.tipologia li::marker { color: var(--rojo); }

.incluye-grilla { display: flex; flex-wrap: wrap; gap: 48px; }
.incluye-grilla > div { flex: 1 1 380px; min-width: 0; }
.lista-incluye { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: 24px; font-size: 16px; }
.lista-incluye li { display: flex; align-items: center; min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--gris-borde); line-height: 1.35; }
.ficha-texto { margin: 14px 0 0; font-size: 15px; color: var(--gris-texto); line-height: 1.55; }
.lista-adicionales { margin: 0; padding: 0; list-style: none; font-size: 16px; }
.lista-adicionales li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gris-borde); }
.lista-adicionales li span:last-child { color: var(--gris-suave); font-size: 14px; }

/* Planes del modelo */
.ficha-planes { background: var(--negro); color: var(--blanco); padding: 72px 0; }
.grilla-planes-modelo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-bottom: 32px; }
.plan-modelo { border-top: 1px solid #3A3A38; padding-top: 18px; }
.plan-modelo-pct { font-family: var(--fuente-titulos); font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.plan-modelo-nombre { font-weight: 700; font-size: 17px; margin-top: 10px; }
.plan-modelo-cuota { font-size: 16px; font-weight: 700; margin-top: 8px; }
.plan-modelo p { margin: 6px 0 0; font-size: 15px; color: #CFCFCC; line-height: 1.5; }
.plan-modelo-enlace { color: var(--blanco); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.plan-modelo-enlace:hover { color: #FFE3E5; }

@media (max-width: 860px) {
  .ficha-imagen { position: static; }
  .selector-modelos { padding: 12px 0; }
  .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .selector-otros .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selector-casa .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .selector-duplex .chips { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); }
  .ficha-datos dl div { grid-template-columns: 112px 1fr; }
  .tipologia p { min-height: 0; }
  .ficha-seccion { margin-top: 56px; }
  .ficha-planes { padding: 56px 0; }
}

.cuota-monto { white-space: nowrap; }

/* Valor por m² por línea */
.precios-m2 { border: 1.5px solid var(--negro); padding: 14px 16px; }
.precios-m2-titulo { font-family: var(--fuente-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--rojo); }
.precios-m2 table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 15px; }
.precios-m2 th { text-align: left; font-weight: 500; color: var(--gris-texto); padding: 6px 0; border-bottom: 1px solid var(--gris-borde); }
.precios-m2 td { text-align: right; font-weight: 700; white-space: nowrap; padding: 6px 0; border-bottom: 1px solid var(--gris-borde); }
.precios-m2 p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gris-suave); }
.grilla-planes-modelo { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }