/* =====================================================================
   Desarrollos MCC · paginas.css
   Composición de cada página (grillas y ubicaciones). Los componentes
   están en componentes.css y los valores en tokens.css.
   ===================================================================== */

.botones{display:flex;flex-wrap:wrap;gap:10px}
.chip-vivo,.chip-horario{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 16px 0 12px;border-radius:var(--r-pildora);background:var(--c-superficie);border:1px solid var(--c-linea);font-size:var(--t-chico);color:var(--c-tinta-2)}
.chip-vivo b{color:var(--c-tinta)}
.punto-vivo{width:10px;height:10px;border-radius:50%;background:#2A9BD6}
.chip-horario{margin-top:var(--e-4);padding-inline:12px 18px}
.chip-horario.abierto{color:var(--c-exito-texto);border-color:rgba(30,143,78,.3);background:rgba(30,143,78,.08)}

/* ---------- Inicio ---------- */
/* Inicio (11/11/2026): titular de 2-3 líneas y los botones dentro del primer pantallazo;
   la foto del dron es la protagonista y las pastillas van al costado, sin taparla. */
.inicio-portada{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--e-8);align-items:center;padding-top:var(--e-8)}
.inicio-portada .titulo-mega{margin-top:var(--e-5);text-wrap:pretty}
.inicio-portada .bajada b{color:var(--c-tinta);font-weight:600}
.collage{position:relative;height:520px}
.collage img{position:absolute;object-fit:cover;border-radius:var(--r-grande);box-shadow:var(--sombra-3);border:6px solid var(--c-superficie)}
.collage__a{left:0;top:0;width:66%;height:60%}
.collage__b{left:0;bottom:0;width:40%;height:36%}
.collage__c{right:0;bottom:0;width:56%;height:52%}
.flotante{position:absolute;display:flex;flex-direction:column;gap:2px;max-width:32%;padding:12px 14px;border-radius:var(--r-medio);background:var(--c-superficie);color:var(--c-tinta);box-shadow:var(--sombra-2);font-size:var(--t-chico);text-decoration:none;transition:transform var(--d-rapida) var(--curva-suave),box-shadow var(--d-rapida)}
.flotante b{font-weight:700}.flotante small{display:inline-flex;align-items:center;gap:4px;color:var(--c-tinta-2);font-size:var(--t-mini)}
a.flotante:hover{transform:translateY(-2px);box-shadow:var(--sombra-3)}
.flotante .boton__flecha svg{width:14px;height:14px}
.flotante--3{right:0;top:8%}
.flotante--3 b{font:800 1.75rem/1 var(--fuente-titulos)}
.grilla-desarrollos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-5)}
.grilla-desarrollos .tarjeta-desarrollo--destacada{grid-column:1/-1}
.grilla-proximos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-5);margin-top:var(--e-5)}
/* Una sola banda de llamado en el inicio (12/11/2026): la tira roja «Pagalo en
   cuotas» se sacó; el simulador ya está en la portada y en la banda del final. */
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-4);margin-top:var(--e-7)}
.pasos li{padding:var(--e-6);border-radius:var(--r-grande);background:var(--c-superficie);border:1px solid var(--c-linea);box-shadow:var(--sombra-1)}
.pasos i{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:14px;border-radius:50%;background:var(--c-fondo-2);color:var(--c-tinta);font:800 1.1rem var(--fuente-titulos);font-style:normal}
.pasos h3{margin-bottom:6px}

/* ---------- Desarrollos ---------- */
.desarrollos-cabeza{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:var(--e-8);align-items:end}
.resumen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.resumen>div{padding:18px 16px;border-radius:var(--r-medio);background:var(--c-superficie);border:1px solid var(--c-linea);box-shadow:var(--sombra-2)}
.resumen b{display:block;font:800 2.4rem/1 var(--fuente-titulos);letter-spacing:-.04em;color:var(--c-marca-texto)}
.resumen span{display:block;margin-top:6px;font-size:var(--t-mini);line-height:1.3;color:var(--c-tinta-2)}
.filtros[data-filtro-desarrollos]{margin:var(--e-8) 0 var(--e-5)}
.grilla-todos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-5)}
.grilla-todos .tarjeta-desarrollo--destacada{grid-column:1/-1}
.grilla-todos [hidden]{display:none}

/* ---------- Loteo y edificio ---------- */
.plano-y-lista{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:var(--e-5);align-items:start}
.plano-con-tarjeta{position:relative}
.plano-con-tarjeta>.plano{isolation:isolate}
.plano-con-tarjeta .tarjeta-lote{z-index:var(--z-tarjeta-lote)}
@media (min-width:900px){.plano-con-tarjeta .tarjeta-lote{position:absolute}}
.dos-columnas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--e-8);align-items:start}
.fotos-tira{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}
.fotos-tira>img,.fotos-tira>picture>img{width:100%;height:100%;min-height:220px;object-fit:cover;border-radius:var(--r-medio)}
.fotos-tira--dos{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.tarjeta-ubicacion{padding:var(--e-6);border-radius:var(--r-medio)}
.plano__numero--oscuro{fill:#17150F;stroke:rgba(255,255,255,.8);font-size:44px}
.edificio-grilla{display:grid;grid-template-columns:400px minmax(0,1fr);gap:var(--e-7);align-items:start;margin-top:var(--e-7)}
.pila-pisos{position:relative;height:420px;perspective:1500px;display:flex;align-items:center;justify-content:center;margin-top:30px}
.capa-piso{position:absolute;z-index:var(--n);left:50%;top:50%;width:340px;height:212px;margin:-106px 0 0 -170px;padding:0;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 20px 40px rgba(40,50,80,.18);
  transform:rotateX(58deg) rotateZ(-36deg) translateZ(calc(var(--n) * 56px - 60px));transition:transform var(--d-lenta) var(--curva-salida),box-shadow var(--d-lenta),border-color var(--d-rapida)}
.capa-piso img{width:100%;height:100%;object-fit:cover;opacity:.92}
.capa-piso span{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.92);font:800 1rem var(--fuente-titulos);color:#17150F}
.capa-piso:hover{transform:rotateX(58deg) rotateZ(-36deg) translateZ(calc(var(--n) * 56px - 44px))}
.capa-piso.seleccionado{border:4px solid var(--c-marca);transform:rotateX(58deg) rotateZ(-36deg) translateZ(calc(var(--n) * 56px - 20px));box-shadow:0 40px 60px rgba(40,50,80,.28)}
.capa-piso--pb{background:#D9CFBF;pointer-events:none}

/* ---------- Fichas ---------- */
.ficha{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--e-8);align-items:start}
.ficha__visual{position:sticky;top:calc(var(--alto-cabecera) + 32px)}
.ficha__visual .plano{aspect-ratio:520/340}
.ficha__visual .plano--claro{aspect-ratio:1680/1050}
.fotos-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.fotos-mini img{width:100%;height:130px;object-fit:cover;border-radius:var(--r-chico)}
.ficha__datos>.volver{display:flex;width:max-content}.ficha__datos>.etiqueta-estado{margin-top:var(--e-3)}
.precio{display:block;font:800 clamp(2rem,1.6rem + 1.4vw,2.75rem)/1.1 var(--fuente-titulos);letter-spacing:-.03em}
.tarjeta-sin-precio,.aviso-estado{padding:var(--e-5);border-radius:var(--r-medio);margin-top:var(--e-5)}
.tarjeta-cuota{display:flex;flex-direction:column;gap:var(--e-4);padding:var(--e-6);border-radius:var(--r-grande);background:linear-gradient(160deg,var(--c-superficie),color-mix(in srgb,var(--c-superficie) 80%,#FFE6D9))}

/* ---------- Consulta ---------- */
.consulta{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:var(--e-8);align-items:start}
.consulta .formulario,.avisame{padding:var(--e-7);border-radius:var(--r-grande)}

/* ---------- Simulador ---------- */
.simulador-grilla{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:var(--e-6);align-items:start;margin-top:var(--e-7)}
.etiqueta-tasa{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:var(--r-pildora);background:var(--c-fondo-2);font-size:var(--t-mini);color:var(--c-tinta-2);white-space:nowrap}

/* ---------- Contacto ---------- */
.contacto-grilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-4);margin-top:var(--e-7)}
.tarjeta-contacto{display:flex;flex-direction:column;gap:10px;padding:var(--e-6);border-radius:var(--r-grande);background:var(--c-superficie);border:1px solid var(--c-linea);box-shadow:var(--sombra-1);text-decoration:none;color:var(--c-tinta);transition:transform var(--d-media) var(--curva-suave),box-shadow var(--d-media)}
a.tarjeta-contacto:hover{transform:translateY(-4px);box-shadow:var(--sombra-2)}
.tarjeta-contacto i{width:48px;height:48px;border-radius:14px;background:var(--c-marca-suave);color:var(--c-marca);display:flex;align-items:center;justify-content:center}
.tarjeta-contacto .enlace{color:var(--c-marca-texto);font-weight:600;font-size:var(--t-chico)}
.tarjeta-contacto--marca{background:var(--degrade-marca);color:#fff;border-color:transparent}
.tarjeta-contacto--marca .boton{align-self:flex-start}
.horario{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0}
.horario dt{color:var(--c-tinta-2)}.horario dd{margin:0;font-weight:700}
.tarjeta-inmobiliarias{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--e-5);margin-top:var(--e-4);padding:var(--e-6);border-radius:var(--r-grande);background:var(--c-superficie);border:1px solid var(--c-linea);text-decoration:none;color:var(--c-tinta);transition:transform var(--d-media) var(--curva-suave)}
.tarjeta-inmobiliarias:hover{transform:translateY(-3px)}
.tarjeta-inmobiliarias i{width:56px;height:56px;border-radius:16px;background:var(--degrade-marca);color:#fff;display:flex;align-items:center;justify-content:center}
.tarjeta-inmobiliarias b{display:block;font-size:1.1rem}

/* ---------- 404 ---------- */
.error-404{max-width:760px}
.error-404__lote{width:220px;margin-bottom:var(--e-6)}
.error-404 .dibuja{stroke-dasharray:1;stroke-dashoffset:1;animation:dibujar-lote 1.4s .3s var(--curva-salida) forwards}
@keyframes dibujar-lote{to{stroke-dashoffset:0}}

/* ---------- Componentes ---------- */
.componentes h2{margin:var(--e-9) 0 var(--e-2)}
.componentes code{font:500 .875em ui-monospace,SFMono-Regular,Menlo,monospace;padding:2px 6px;border-radius:6px;background:var(--c-fondo-2)}
.componentes__grilla3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e-5);margin-top:var(--e-5)}
.fila-muestras{display:flex;flex-wrap:wrap;gap:var(--e-5);align-items:flex-start;margin-top:var(--e-5)}
.muestra{margin:0;display:flex;flex-direction:column;gap:10px;font-size:var(--t-mini);color:var(--c-tinta-2)}
.muestra--ancha{width:min(100%,360px)}
.muestra__lote{width:200px;border-radius:14px;overflow:visible}
.muestra__caja{min-height:64px;display:flex;align-items:center}
.forzar-hover{transform:translateY(-2px);box-shadow:var(--sombra-2)}
.boton--primario.forzar-hover{box-shadow:var(--sombra-marca-alta)}

/* ---------- Celular y tableta ---------- */
@media (max-width:1100px){
  .plano-y-lista{grid-template-columns:1fr}
  .edificio-grilla{grid-template-columns:1fr}
  .simulador-grilla{grid-template-columns:1fr}
}
@media (max-width:899px){
  .inicio-portada{grid-template-columns:1fr;gap:var(--e-7);padding-top:var(--e-7)}
  .collage{height:340px}
  .flotante{padding:8px 10px;max-width:46%}.flotante--3{top:6%}.flotante--3 b{font-size:1.35rem}
  .sede{grid-template-columns:1fr}
  .desarrollos-cabeza,.dos-columnas,.ficha,.consulta{grid-template-columns:1fr;gap:var(--e-6)}
  .ficha__visual{position:relative;top:0;order:2}
  .ficha__datos{order:1}
  .fotos-tira{grid-template-columns:1fr 1fr}
  .fotos-tira .tarjeta-ubicacion{grid-column:1/-1}
  .pasos,.componentes__grilla3{grid-template-columns:1fr}
  .contacto-grilla{grid-template-columns:1fr}
}
@media (max-width:719px){
  .seccion{margin-top:var(--e-9)}
  .grilla-desarrollos,.grilla-proximos,.grilla-todos{grid-template-columns:1fr}
  .resumen{grid-template-columns:1fr;gap:8px}
  .resumen>div{display:flex;align-items:baseline;gap:12px;padding:12px 18px}
  .resumen b{font-size:1.9rem}.resumen span{margin-top:0;font-size:var(--t-chico)}
  .banda-llamado,.banda-inmobiliarias{padding:var(--e-6);border-radius:var(--r-grande)}
  .banda-llamado .botones,.banda-llamado .boton{width:100%}
  .banda-inmobiliarias .boton{width:100%}
  .pila-pisos{height:300px;margin-top:40px}
  .capa-piso{width:240px;height:150px;margin:-75px 0 0 -120px;transform:rotateX(58deg) rotateZ(-36deg) translateZ(calc(var(--n) * 40px - 44px))}
  .capa-piso:hover{transform:rotateX(58deg) rotateZ(-36deg) translateZ(calc(var(--n) * 40px - 32px))}
  .capa-piso.seleccionado{transform:rotateX(58deg) rotateZ(-36deg) translateZ(calc(var(--n) * 40px - 14px))}
  .fotos-mini img{height:96px}
  .consulta .formulario,.avisame{padding:var(--e-5)}
  .tarjeta-inmobiliarias{grid-template-columns:auto minmax(0,1fr)}
  .tarjeta-inmobiliarias>.boton{grid-column:1/-1;justify-self:start}
  .horario{grid-template-columns:1fr;gap:2px}.horario dd{margin-bottom:10px}
  .plano__ayuda:not(.plano__ayuda--tactil){display:none}
  .lista-unidades__filas{max-height:none}
  .portada .cifras{gap:var(--e-4) var(--e-6)}
}

/* ---- Mapa satelital de la ficha (lote / departamento) — sumado por Code el 11/11/2026 ---- */
.mapa-ficha{margin:var(--e-6) 0 0;display:grid;gap:var(--e-3)}
.mapa-ficha[hidden]{display:none}
.mapa-ficha__marco{position:relative;aspect-ratio:4/3;border-radius:var(--r-grande);overflow:hidden;box-shadow:var(--sombra-2);background:var(--c-fondo-2)}
.mapa-ficha__marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapa-ficha figcaption{display:flex}
.mapa-desarrollo{display:grid;gap:var(--e-4)}
.mapa-desarrollo .ceja+.titulo-2{margin-top:0}

/* ---- La sede y la gente de la Mutual (12/11/2026) ----
   Sale sólo si contenido.SEDE tiene una foto real cargada; hoy no se ve. */
.sede{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--e-8);align-items:center}
.sede img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-grande);box-shadow:var(--sombra-2)}
.sede a{color:var(--c-marca-texto);font-weight:600}

/* ---- El simulador (12/11/2026) ----
   La palabra sola en la última línea del aviso legal («crédito.») sube. */
.aviso-legal{text-wrap:pretty}
.mapa-desarrollo .mapa-ficha__marco{aspect-ratio:21/9}
@media (max-width:760px){.mapa-desarrollo .mapa-ficha__marco{aspect-ratio:4/3}}

/* ---- Simulador: la cuota grande entra siempre entera (Code, 11/11/2026) ----
   «$ 1.200.774» a 4rem no cabía al lado del anillo y se cortaba. El tamaño
   sigue el ancho de su caja (container query) con el mismo tope del diseño. */
.cuota-caja{container-type:inline-size}
.cuota-caja .cuota-grande{font-size:min(clamp(2.6rem,2rem + 2.4vw,4rem),15.5cqi)}

/* ---- Visor de la galería: los botones quietos (Code, 11/11/2026) ----
   Antes el bloque foto + pie + botones se centraba en vertical y, como cada
   foto tiene otra altura, «siguiente» cambiaba de lugar en cada pasada. La
   foto va en una caja de alto fijo (se ajusta adentro sin deformarse) y el
   pie ocupa siempre una línea. */
.visor img{width:100%;height:72vh;object-fit:contain;border-radius:0;filter:drop-shadow(0 10px 30px rgba(0,0,0,.35))}
.visor>p{max-width:min(100%,720px);height:3em;line-height:1.5;margin:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-align:center}
@media (max-width:719px){.visor img{height:62vh}}

/* ---- Textos de ejemplo de los campos en gris bien claro (Code, 11/11/2026) ----
   Con el gris del texto terciario parecían datos reales ya cargados. */
.campo__entrada::placeholder{color:var(--c-tinta-3);opacity:.45}

/* ---- «Sobre el edificio / el loteo» (Code, 11/11/2026) ----
   Texto largo del desarrollo en su página y en cada ficha: columna de lectura
   cómoda y el equipamiento con las mismas tildes que los servicios. */
.sobre-desarrollo{margin:var(--e-9) 0 0;padding:var(--e-7);border-radius:var(--r-grande);background:var(--c-superficie);border:1px solid var(--c-linea);box-shadow:var(--sombra-1);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--e-4) var(--e-8);align-items:start}
.sobre-desarrollo[hidden]{display:none}
.sobre-desarrollo>h2{grid-column:1/-1}
.sobre-desarrollo__texto{display:grid;gap:var(--e-4);max-width:66ch}
.sobre-desarrollo__texto p{margin:0;line-height:1.7}
.enlace-superficies{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--c-marca-texto);text-decoration:none}
.enlace-superficies:hover{text-decoration:underline}
@media (max-width:860px){.sobre-desarrollo{grid-template-columns:1fr;padding:var(--e-6)}}
.sobre-desarrollo--corto{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3) var(--e-6);padding:var(--e-5) var(--e-6);margin-top:var(--e-7)}
.sobre-desarrollo--corto p{margin:0;flex:1 1 420px;line-height:1.6}

/* ---- Tabla de superficies del edificio (Code, 11/11/2026) ---- */
.tablas-superficies{display:grid;gap:var(--e-6);margin-top:var(--e-6)}
/* Sin esto el ítem del grid crece al ancho de la tabla y el scroll nunca se activa (11/11/2026). */
.tablas-superficies>*{min-width:0}
.tabla-superficies .titulo-3{margin-bottom:var(--e-3)}
.tabla-superficies .tabla-scroll{overflow-x:auto;border-radius:var(--r-medio);border:1px solid var(--c-linea);background:var(--c-superficie);box-shadow:var(--sombra-1)}
.tabla-superficies table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:560px}
.tabla-superficies th,.tabla-superficies td{padding:12px 16px;text-align:right;border-bottom:1px solid var(--c-linea)}
.tabla-superficies thead th{font:600 var(--t-mini)/1.3 var(--fuente-texto);letter-spacing:.04em;text-transform:uppercase;color:var(--c-tinta-2);background:var(--c-fondo-2)}
.tabla-superficies th:first-child,.tabla-superficies td:first-child{text-align:left}
.tabla-superficies tbody tr:last-child>*{border-bottom:0}
.tabla-superficies tbody th a{color:var(--c-tinta);font-weight:700;text-decoration:none}
.tabla-superficies tbody th a:hover{color:var(--c-marca-texto)}
/* En el celular, una tarjeta por departamento con las cuatro medidas a la vista. */
@media (max-width:599px){
  .tabla-superficies table{min-width:0}
  .tabla-superficies thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tabla-superficies tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;padding:14px 16px;border-bottom:1px solid var(--c-linea)}
  .tabla-superficies tbody tr:last-child{border-bottom:0}
  .tabla-superficies tbody th{grid-column:1/-1;padding:0 0 4px;border:0}
  .tabla-superficies tbody td{display:flex;flex-direction:column;padding:0;border:0;text-align:left}
  .tabla-superficies tbody td::before{content:attr(data-rotulo);font-size:var(--t-mini);color:var(--c-tinta-3)}
  .tabla-superficies tbody td:empty::after{content:"—"}
}

/* ---- Plano amoblado de cada departamento (Code, 11/11/2026) ---- */
.amoblado{margin:0 0 var(--e-5);display:grid;gap:var(--e-3)}
.amoblado[hidden]{display:none}
.amoblado img{width:100%;height:auto;max-height:520px;object-fit:contain;border-radius:var(--r-grande);background:#fff;border:1px solid var(--c-linea);box-shadow:var(--sombra-2)}
.tarjeta-lote__amoblado{display:block;width:100%;height:auto;max-height:220px;object-fit:contain;margin-top:10px;border-radius:var(--r-chico);background:#fff;border:1px solid var(--c-linea)}
.tarjeta-lote__amoblado[hidden]{display:none}


/* ---- Tarjeta del plano: los dos botones siempre adentro (Code, 11/11/2026) ----
   «Simulá tu cuota» es más largo que el texto de la entrega y se salía. Los dos
   reparten el ancho y, si no entran, el segundo baja de línea. */
.tarjeta-lote.seleccionado .tarjeta-lote__acciones,.tarjeta-lote .tarjeta-lote__acciones{flex-wrap:wrap}
.tarjeta-lote__acciones .boton{flex:1 1 auto;min-width:0;justify-content:center;white-space:nowrap;padding-inline:14px}
.sobre-desarrollo:not(:has(.servicios)){grid-template-columns:1fr}
.sobre-desarrollo:not(:has(.servicios)) .sobre-desarrollo__texto{max-width:60ch}