@charset "UTF-8";
/* ==========================================================================
   M&M Propiedades - desarrollo.css
   Ficha individual de desarrollo.

   Se carga DESPUES de site.css y reutiliza sus variables y componentes
   (--navy, --acc, .wrap, .eyebrow, .btn-solid, .btn-ghost, .form-card,
   .dev-tag). Aca sólo vive lo específico de esta página.
   ========================================================================== */

/* ---------- hero ---------- */
.fh{position:relative;min-height:62vh;display:flex;align-items:flex-end;padding:150px 0 54px;background:var(--navy-d);overflow:hidden}
.fh-bg{position:absolute;inset:0;z-index:0}
.fh-bg img{width:100%;height:100%;object-fit:cover}
.fh-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,15,36,.72) 0%,rgba(9,15,36,.55) 40%,rgba(9,15,36,.92) 100%)}
.fh-in{position:relative;z-index:2;width:100%}

.fh-crumb{display:flex;align-items:center;gap:8px;font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:20px;flex-wrap:wrap}
.fh-crumb a{color:rgba(255,255,255,.72);transition:color .2s}
.fh-crumb a:hover{color:#fff}
.fh-crumb svg{width:13px;height:13px;stroke:rgba(255,255,255,.4);fill:none;stroke-width:2}

.fh-tags{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.fh-tag{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 14px;border-radius:100px;background:rgba(255,255,255,.95);color:var(--navy)}
.fh-tag.is-pozo{background:linear-gradient(90deg,var(--acc),var(--acc-l));color:#fff}
.fh-tag.is-extra{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28)}

.fh h1{font-size:clamp(2rem,4.4vw,3.3rem);color:#fff;line-height:1.1;margin-bottom:14px}
.fh-loc{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.82);font-size:1.02rem;margin-bottom:30px}
.fh-loc svg{width:17px;height:17px;stroke:var(--acc-l);fill:none;stroke-width:2;flex-shrink:0}

.fh-facts{display:flex;gap:44px;flex-wrap:wrap;align-items:flex-end}
/* la etiqueta va ARRIBA y el numero abajo, como en la ficha anterior */
.fh-fact span{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:8px}
.fh-fact b{display:block;font-size:1.7rem;font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
/* El precio es el dato principal: mas grande y en blanco, para que destaque
   sobre la foto sin competir con el azul de los botones. */
.fh-precio span{color:rgba(255,255,255,.75)}
.fh-precio b{font-size:clamp(2.1rem,4vw,2.9rem);color:#fff;letter-spacing:-.02em}
.fh-cta{display:flex;gap:12px;flex-wrap:wrap;margin-left:auto}

/* ---------- cuerpo: contenido + aside ---------- */
.fbody{padding:80px 0 96px;background:var(--paper)}
/* Una sola columna: la informacion del desarrollo usa todo el ancho.
   El formulario ya no va al costado sino en su propia seccion, al final. */
.fcol{max-width:880px;margin:0 auto}

.fsec{margin-bottom:52px}
.fsec:last-child{margin-bottom:0}
.fsec h2{font-size:1.65rem;color:var(--ink);margin-bottom:20px}
.fsec h3{font-size:1.18rem;color:var(--ink);margin:30px 0 14px}
.fsec p{color:var(--slate);font-size:1.02rem;line-height:1.75;margin-bottom:16px}

/* bullets con titulo destacado */
.fbul{display:flex;flex-direction:column;gap:15px;margin:6px 0 22px}
.fbul li{display:flex;gap:13px;align-items:flex-start;list-style:none;color:var(--slate);font-size:.98rem;line-height:1.6}
.fbul svg{width:19px;height:19px;stroke:var(--acc);fill:none;stroke-width:2.4;flex-shrink:0;margin-top:2px}
.fbul b{color:var(--ink);font-weight:700}

/* listas simples de amenities/servicios, en columnas */
.flist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px 26px;margin:4px 0 22px;padding:0}
.flist li{display:flex;gap:10px;align-items:flex-start;list-style:none;color:var(--slate);font-size:.95rem;line-height:1.5}
.flist svg{width:16px;height:16px;stroke:var(--acc);fill:none;stroke-width:2.6;flex-shrink:0;margin-top:3px}

/* ---------- galerias ---------- */
.fgal{margin:0 0 52px}
.fgal-main{position:relative;border-radius:14px;overflow:hidden;background:var(--navy-d);aspect-ratio:16/10}
.fgal-main img{width:100%;height:100%;object-fit:cover;display:block}
.fgal-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 14px;pointer-events:none}
.fgal-btn{pointer-events:auto;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .2s;box-shadow:0 4px 14px -6px rgba(9,15,36,.5)}
.fgal-btn:hover{background:#fff;transform:scale(1.06)}
.fgal-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.4}
.fgal-count{position:absolute;right:14px;bottom:14px;background:rgba(9,15,36,.72);color:#fff;font-size:.78rem;font-weight:600;padding:5px 11px;border-radius:100px;font-variant-numeric:tabular-nums}

.fgal-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.fgal-thumbs button{flex:0 0 92px;height:66px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;background:none;transition:border-color .2s,opacity .2s;opacity:.62}
.fgal-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.fgal-thumbs button.is-on{border-color:var(--acc);opacity:1}
.fgal-thumbs button:hover{opacity:1}

/* ---------- precio destacado ---------- */
.fprecio{background:var(--navy);border-radius:14px;padding:30px 34px;margin:6px 0 26px;
         display:inline-flex;flex-direction:column;min-width:min(100%,340px)}
.fprecio span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--acc-l);margin-bottom:10px}
.fprecio b{font-size:clamp(2rem,5vw,2.7rem);font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ---------- avance de obra ---------- */
.favance{margin:6px 0 26px;max-width:520px}
.favance-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.favance-top span{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.favance-top b{font-size:1.5rem;font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums}
.favance-track{height:10px;border-radius:100px;background:var(--line);overflow:hidden}
.favance-bar{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--acc),var(--acc-l));
             transition:width 1s cubic-bezier(.16,.7,.3,1)}

/* ---------- avance por modulos ---------- */
/* Para los complejos que se entregan por etapas: una tarjeta por modulo en
   vez de una sola barra. Los terminados van en verde con un tilde sobre el
   icono; el que sigue en obra queda en el azul de marca. */
/* 124px hace que las 6 tarjetas entren en una sola fila en escritorio: se lee
   de un vistazo la secuencia completa, de los cuatro terminados al que sigue en
   obra y a lo que viene. Con un minimo mayor la ultima caia sola a una segunda
   fila y las alturas dejaban de coincidir. */
/* grid-auto-rows:1fr iguala la altura de TODAS las filas. Sin esto, cuando la
   ultima tarjeta cae sola a una segunda fila (pasa entre 761px y 939px), esa
   fila tomaba su altura natural y quedaba mas baja que la de arriba. Asi
   sigue funcionando aunque manana se agregue o se saque un modulo. */
.fmod{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));
      grid-auto-rows:1fr;gap:14px;margin:6px 0 26px}
.fmod-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
           padding:22px 16px 18px;border:1px solid var(--line);border-radius:14px;background:#fff}

.fmod-icon{position:relative;width:52px;height:52px;border-radius:14px;display:flex;
           align-items:center;justify-content:center;background:rgba(59,130,246,.1)}
.fmod-icon > svg{width:28px;height:28px;stroke:var(--acc);fill:none}
.fmod-item.is-listo .fmod-icon{background:rgba(22,163,74,.11)}
.fmod-item.is-listo .fmod-icon > svg{stroke:#16A34A}

.fmod-check{position:absolute;right:-5px;bottom:-5px;width:21px;height:21px;border-radius:50%;
            background:#16A34A;border:2px solid #fff;display:flex;align-items:center;justify-content:center}
.fmod-check svg{width:11px;height:11px;stroke:#fff;fill:none}

.fmod-nombre{font-size:.95rem;font-weight:700;color:var(--ink);line-height:1.2}
.fmod-pct{font-size:1.55rem;font-weight:800;line-height:1;color:var(--acc);font-variant-numeric:tabular-nums}
.fmod-item.is-listo .fmod-pct{color:#16A34A}

.fmod-track{width:100%;height:7px;border-radius:100px;background:var(--line);overflow:hidden}
.fmod-bar{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--acc),var(--acc-l));
          transition:width 1s cubic-bezier(.16,.7,.3,1)}
.fmod-item.is-listo .fmod-bar{background:#16A34A}

.fmod-estado{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.fmod-item.is-listo .fmod-estado{color:#16A34A}

/* Tarjeta gris de cierre: lo que todavia no arranco. No lleva numero ni barra,
   asi que su contenido se centra verticalmente para que la tarjeta no quede con
   un hueco abajo: la grilla las estira a todas a la misma altura. */
.fmod-item.is-proximo{justify-content:center;background:var(--paper);border-style:dashed}
.fmod-item.is-proximo .fmod-icon{background:rgba(86,98,122,.1)}
.fmod-item.is-proximo .fmod-icon > svg{stroke:var(--slate)}
.fmod-item.is-proximo .fmod-nombre{color:var(--slate)}
.fmod-item.is-proximo .fmod-estado{color:var(--slate);opacity:.85}

@media (prefers-reduced-motion:reduce){.fmod-bar{transition:none}}

/* ---------- mapa ---------- */
.fmap{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff}
.fmap iframe{display:block;width:100%;height:380px;border:0}

/* ---------- botones de contacto ---------- */
.fwa{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:12px;background:#25D366;color:#fff;font-weight:700;font-size:.96rem;transition:filter .2s,transform .15s}
.fwa:hover{filter:brightness(1.06);transform:translateY(-1px)}
.fwa svg{width:20px;height:20px;fill:currentColor}
.fextra{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 20px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font-weight:600;font-size:.93rem;text-align:center;transition:border-color .2s,color .2s}
.fextra:hover{border-color:var(--acc);color:var(--acc)}

/* ---------- consulta (al final de la pagina) ---------- */
.fform{padding:88px 0;background:var(--navy-d);color:#fff}
.fform-grid{display:grid;grid-template-columns:1fr 440px;gap:60px;align-items:start}
.fform-intro h2{font-size:clamp(1.8rem,3.4vw,2.6rem);color:#fff;margin:14px 0 18px}
.fform-intro p{color:rgba(255,255,255,.72);font-size:1.05rem;max-width:34em;margin-bottom:30px}
.fform-datos{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.fform-datos a{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.86);font-size:1rem;transition:color .2s}
.fform-datos a:hover{color:#fff}
.fform-datos svg{width:19px;height:19px;stroke:var(--acc);fill:none;stroke-width:2;flex-shrink:0}
.fform .form-card{animation:none;opacity:1;margin:0;width:100%;max-width:none}
.fform .fwa{max-width:340px}
.fform .fextra{max-width:340px;margin-top:12px;background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.fform .fextra:hover{border-color:var(--acc-l);color:var(--acc-l)}

/* ---------- otros desarrollos ---------- */
.fotros{padding:88px 0;background:var(--white);border-top:1px solid var(--line)}
.fotros-head{text-align:center;margin-bottom:40px}
.fotros-head h2{font-size:1.9rem;color:var(--ink);margin-top:14px}
.fotros-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .fform-grid{grid-template-columns:1fr;gap:40px}
  .fotros-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .fh{min-height:auto;padding:120px 0 44px}
  .fh-facts{gap:26px}
  .fh-fact b{font-size:1.32rem}
  .fh-cta{margin-left:0;width:100%;margin-top:24px}
  .fh-cta a{flex:1 1 auto;justify-content:center}
  .fbody{padding:56px 0 68px}
  .fsec{margin-bottom:40px}
  .fsec h2{font-size:1.42rem}
  .fgal-main{aspect-ratio:4/3}
  .fgal-btn{width:38px;height:38px}
  .flist{grid-template-columns:1fr}
  .fform{padding:56px 0}
  .fprecio{padding:24px 26px;width:100%}
  .fotros{padding:60px 0}
  .fotros-grid{grid-template-columns:1fr}
  .fmap iframe{height:300px}
  /* en telefono entran 2 tarjetas por fila; se achican un poco */
  .fmod{grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:11px}
  .fmod-item{padding:18px 12px 15px;gap:8px}
  .fmod-pct{font-size:1.35rem}
}

/* ---------- respeto por prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .fgal-btn,.fwa,.fextra,.fgal-thumbs button,.favance-bar{transition:none}
  .fgal-btn:hover,.fwa:hover{transform:none}
}