* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family:var(--ff-body);
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
  background-color: #F4EBDD;
}
/* =========================================================
   ▸ HEADER / NAVBAR  ⤵  solo estilos de la cabecera
   ========================================================= */

/* helpers globales (colores, alto fijo, etc.) -------------- */
:root{
  --header-h      : 100px;        /* alto de la barra */
  --header-bg     : #F4EBDD;      /* crema corporativo */
  --brand-color   : #5C4033;      /* marrón corporativo */
  --shadow-hdr    : 3px 3px 5px rgba(0,0,0,.7);
  --field-bg      : rgba(255, 255, 255, 0.85);  /* fondo de los campos */
  --field-text    : #4c362a;  /* color del texto del usuario    */
  --field-bord    : #c0905c8e;  /* color del borde                */
  --field-size    : 1.55rem;  /* tamaño de fuente en los campos */
  --card-top: 12%;
  --ff-display : 'Cormorant Garamond', serif;   /* títulos “elegantes”   */
  --ff-body    : 'Montserrat', sans-serif;      /* texto general / UI    */
  --fs-nav     : 2.1rem;   /* tamaño enlaces / idioma                */
  --fs-btn     : 2.0rem;   /* tamaño botón “Contact”                 */
  --fw-nav     : 550; 
}

/* ---------- contenedor fijo ---------- */
header{
  position : fixed;
  top      : 0; left: 0;
  width    : 100%;
  height   : var(--header-h);
  padding  : 2rem 1rem;
  background: var(--header-bg);
  box-shadow: var(--shadow-hdr);
  z-index   : 10;
}
header,
header *{                           /* cualquier hijo del header */
  font-family: var(--ff-body);
}

/* ---------- flex interno ---------- */
nav{
  display        : flex;
  justify-content: space-between;    /* logo | nav | botones */
  align-items    : center;
  height         : 100%;
}

/* ---------- LOGO ---------- */
.logo{
  display: block;               /* evita inline‑gap */
  margin-right: 2rem;           /* separación con los enlaces */
  padding: 1.5rem 0;
}
.logo img{
  height: 160px;                 /* ajusta aquí el tamaño visible */
  width : auto;
  object-fit: contain;
  margin-top: 2.2rem;
}

/* ---------- MENÚ DE ENLACES ---------- */
.nav-links{
  display    : flex;
  list-style : none;
  gap        : 3rem;            /* distancia entre <li> */
  padding    : 0;               /* ya tienes margin‑gap arriba */
}


.nav-links a{
  font-size  : var(--fs-nav);
  font-weight: var(--fw-nav);
  color: var(--brand-color);
  font-family: var(--ff-body);
  text-decoration: none;
  transition: opacity .25s;
  letter-spacing: 1.5px;
}
.nav-links a:hover{ opacity:.8; }
.nav-links a:active{ outline: none; }

/* ---------- BOTÓN “Contact” ---------- */
.btn{
  margin-left: 8rem;            /* separa del menú */
  transition: opacity .25s;
}
.btn .sign_up{
  display:inline-block;
  font-size  : var(--fs-btn);
  font-weight: var(--fw-nav);
  padding: 10px 20px;
  border-radius: 20px;
  background: var(--brand-color);
  color: var(--header-bg);
  text-decoration: none;
}
.btn .sign_up:hover{ opacity:.8; }

/* ---------- HAMBURGUESA (esconde en desktop) ---------- */
.burgar{
  font-size  : 3rem;
  font-weight: bold;
  color      : var(--brand-color);
  display    : none;             /* se mostrará vía media‑query */
  cursor     : pointer;
}

/* ---------- SELECTOR DE IDIOMA ---------- */
#langSwitcher{
  font-size  : var(--fs-nav);
  font-weight: var(--fw-nav);
  background   : var(--header-bg);
  border       : 2px solid var(--brand-color);
  border-radius: 6px;
  padding      : .4rem .6rem;
  font         : inherit;
  color        : var(--brand-color);
  cursor       : pointer;
}


/* ---------- UTILIDAD: evitar scroll cuando el menú móvil está abierto ---------- */
body.nav-open{ overflow:hidden; }

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav-links li {
  margin-right: 3rem;
  text-decoration: none;
  color: #5C4033;
  font-size: 1.7rem;
  font-weight: bold;
  padding: 0 10px;
  cursor: pointer;
}

/* estado normal y visitado */

.btn .sign_up,
.btn .sign_up:visited {
  color: #5C4033;       /* tu marrón original */
  text-decoration: none;/* sin subrayado       */
}

/* al pasar el ratón: ligero “fade” opcional */
.nav-links a:hover,
.btn .sign_up:hover {
  opacity: .8;          /* o cambia color si lo prefieres */
}

/* al pulsar: sin cambios de fondo/outline azul */
.nav-links a:active,
.btn .sign_up:active {
  color: #5C4033;
  outline: none;
}

/* Hero section styling */
.section_1 {
  position: relative;
  background-image: url("images/home.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 130vh;
  width: 100%;
  max-width: 100%;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.section_1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.bg_text1{
  font-family: var(--ff-display);
  font-weight: 530;
  color: #ffffff;
  text-shadow: 1px 1px 2px #ffffff;
}

.bg_text2 {
  font-family: var(--ff-body);
  color: #ffffff;
  text-shadow: 1px 1px 2px #ffffff;
  font-weight: 300;

}
.bg_div {
  position: absolute;
  text-align: center;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: #F4EBDD;
  padding-top: 240px;
}
.bg_div :first-child {
  font-size: 5rem;
  animation: slideinBottom 2s ease;
}

.bg_div :last-child {
  font-size: 2.8rem;
  margin-top: 0.5rem;
  animation: slideinBottom 4s ease;
}
@keyframes slideinBottom {
  0% {
    transform: translatey(50px);
    opacity: 0;
  }
  100% {
    transform: translatex(0);
    opacity: 1;
  }
}

.reveal {                 /* estado inicial */
  opacity: 0;
  transform: translateY(60px);
  transition: opacity .9s ease, transform .9s ease;
}
.reveal.is-visible {      /* cuando entra en pantalla */
  opacity: 1;
  transform: translateY(0);
}

/*───────────────────────────────────────────────
  BLOQUE IMAGEN + TEXTO  (FULL WIDTH, ESTILO PREMIUM)
───────────────────────────────────────────────*/
.img-text {
  /* Layout */
  display: flex;
  align-items: center;
  gap: var(--gap, 7rem);          /* más aire entre img y texto */

  /* Dimensiones */
  width: 100%;
  margin-block: 4rem;             /* más respiro con secciones vecinas */
  padding: var(--padding, 2.5rem 3rem);

  /* Fondo + efecto tarjeta */
  background: #F4EBDD;
  border-radius: 12px;
}

/* Imagen a la derecha */
.img-text--reverse { flex-direction: row-reverse; }

/*──────── Imagen ────────*/
.img-text__img {
  flex: 0 0 var(--img-basis, 42%);
  max-width: 900px;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

/*──────── Contenido ────────*/
.img-text__body {
  font-family: var(--ff-body);
  font-size: 2.2rem;
  font-weight: 300;
  flex: 1;
  /* Interlineado y anchura máxima del texto para legibilidad */
  line-height: var(--line, 1.9);
  max-width: 800px;
  text-align: var(--align, left);
}

/* Título del bloque imagen-texto */
.img-text__title {
  font-family: var(--ff-body);
  font-size: 2.2rem;
  font-weight: 300;
  color: #5C4033;
  padding-top: 40px;
}

/* ➋  Cuando el observer agregue .is-visible */
.img-text__title.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* Subtítulo opcional */
.img-text__subtitle {
  font-size: 2.2rem;
  font-weight: 600;
  margin: 0 0 0.8rem;
  color: #5C4033;
}

/* ▸ LISTA SIN VIÑETA NATIVA + ESPACIADO PERSONALIZADO */
.img-text__list {
  font-family: var(--ff-body);
  list-style: none;       /* ⬅️   elimina los puntos negros */
  padding: 0;             /* reiniciamos sangría del <ul>   */
  margin: 0 0 1.5rem;
  font-weight: 300;
  font-size: 2.2rem;
  color: #5C4033;
}

.img-text__list li {
  font-family: var(--ff-body);
  position: relative;
  padding-left: 2.2rem;   /* ⬅️  distancia texto-icono (ajusta aquí) */
  font-weight: 300;
  margin-bottom: 0.45rem;
  color: #5C4033;
  font-size: 2.2rem;        /* escala real; subiste antes a 1.95 rem   */
}

/* viñeta “▹” personalizada */
.img-text__list li::before {
  content: "▹";
  color: #c08f5c;
  font-weight: 700;
  position: absolute;
  left: 0;                /* arranca en el borde del li      */
  top: 0.05em;            /* corrige alineación vertical opc. */
  font-size: 1.8rem;      /* tamaño del icono (ajusta libre) */
}

/* Párrafos finales */
.img-text__paragraph {
  font-family: var(--ff-body);
  margin-block: 1rem;
  font-size: 2.2rem;
  font-weight: 300;
  color: #5C4033;
}

/* Hero section stop */

.section_3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  background-color: #F4EBDD;
}
.service-header {
  text-align: center;
  width: 80%;
  line-height: 1.6;
  max-width: none;
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}
.service-header h1 {
  font-family: var(--ff-body);
  font-size: 2.2rem;
  font-weight: 300;
  color: #5C4033;
  padding-top: 40px;
}
.service-header h2 {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 2.2rem;
  padding-top: 15px;
  color: #3d3b3b;
}
.service-header p {
  font-size: 1.7rem;
  padding-top: 10px;
  margin-bottom: 7rem;
  color: #666;
}
.flex {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 30px;
  justify-content: center;
  align-items: center;
}
.section3_div1 {
  background-color: #F4EBDD;
  height: auto;
  width: 200px;
  padding-bottom: 2.5rem;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
  transition: all 0.5s ease;
}
.section3_div1:hover {
  transform: scale(1.05);
}
.font {
  font-size: 3rem;
  padding: 2rem 1rem;
}
.buy {
  font-size: 2rem;
  padding: 0 1rem;
  color: #5C4033;
}
.expert {
  font-size: 1.5rem;
  padding: 1rem 1rem;
  color: #666;
  line-height: 1.5;
}
.learn_more {
  text-decoration: none;
  font-size: 1.5rem;
  padding: 2rem 1rem;
  font-weight: bold;
  color: #5C4033;
}
/* service section end */

/* blog section  styling*/
.section_2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  padding-bottom: 10rem;
  background-color: #F4EBDD;
}
.blog-header {
  text-align: center;
  margin-bottom: 6rem;
}
.blog-header h1 {
  font-family: var(--ff-body);
  padding-top: 8rem;
  font-size: 3.6rem;
  color: #5C4033;
  line-height: 1.6;
  font-weight: 500;
}
.blog-header p {
  font-family: var(--ff-body);
  font-size: 2.2rem;
  font-weight: 300;
  color: #5C4033;
  line-height: 2;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}
.blog-gallary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  align-items: center;
  column-gap: 26px;
}
.section2_div1 {
  background-color: #F4EBDD;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
  height: auto;
  padding-bottom: 2rem;
  transition: all 0.7s ease;
}
.section2_div1:hover {
  transform: scale(1.05);
}
.section2_div1 img {
  width: 100%;
  max-width: 350px;
}
.div_details {
  padding: 2rem;
  line-height: 1.6;
}
.div_details h2 {
  color: #5C4033;
  font-size: 2rem;
}
.div_details p {
  color: rgb(129, 128, 128);
  font-size: 1.5rem;
}
.div_details button {
  margin-top: 3rem;
  padding: 1rem 2rem;
  color: #5C4033;
  font-weight: bold;
  border-radius: 20px;
  background-color: #F4EBDD;
  border: 2px solid #5C4033;
}
/* Blog styling stop */

/* blog section stop*/
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
  padding-bottom: 3rem;
  background-color: #2F4F4F;
  color: #ddd;
}
footer :nth-child(1) {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
}
footer :nth-child(2) {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 2rem;
}
.footer-text1 {
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: bold;
}

/* —— Footer: enlaces legales perfectamente alineados —— */
footer .legal-links{
  display:flex;                  /* fila horizontal             */
  flex-wrap:nowrap;              /* prohíbe saltos              */
  gap:1.4rem;                    /* espacio uniforme            */
  justify-content:center;        /* centrado                    */
  align-items:baseline;          /* misma línea base            */
  margin:.6rem 0;
  font-size:1rem;                /* tamaño único                */
  font-family:Arial,Helvetica,sans-serif;
}

footer .legal-links a{
  display:inline-block;          /* evita que un reset los haga “block” */
  color:#ffffff;                 /* blanco consistente          */
  font-weight:400 !important;    /* fuerza peso regular         */
  text-decoration:none;          /* sin subrayado permanente    */
  line-height:1.4;
}

footer .legal-links a:hover,
footer .legal-links a:focus{
  text-decoration:underline;     /* subrayado al interactuar    */
}

footer .legal-links a:link,
footer .legal-links a:visited{
  display:inline-block;
  color:#ffffff;
  font-weight:400 !important;
  font-size:2rem   !important;   /* ← fuerza el mismo tamaño */
  text-decoration:none;
  line-height:1.4;
}

/* ---------- Modal base ---------- */
.modal {
  position: fixed;
  inset: 0;                      /* top, right, bottom, left = 0 */
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;            /* oculto por defecto */
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 9999;
}

/* ---------- Overlay semitransparente ---------- */
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

/* ---------- Caja central ---------- */
.hp-wrapper{
  position:absolute !important;
  left:-9999px;                /* fuera de pantalla  */
  width:1px; height:1px;       /* mínimo “hit area”  */
  overflow:hidden;
}
.modal__box {
  position: relative;
  background: #F4EBDD;
  padding: 3rem 2.5rem;
  border-radius: 12px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  z-index: 1;
  text-align: center;
}

.modal__title  {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 2.2rem;
  color:#5C4033; 
  margin-bottom:2rem; 
  }
.modal__form   { display:flex; flex-direction:column; gap:1.2rem; }
.modal__form label  { font-size:1.4rem; color:#5C4033; display:flex; flex-direction:column; gap:.4rem; font-family: var(--ff-body);}
.modal__form input,
.modal__form textarea {
  padding:.8rem 1rem;
  border:2px solid #5C4033;
  border-radius:8px;
  font-size:1.4rem;
  background:#ffffff;
}
.modal__send {
  background:#5C4033;
  color:#F4EBDD;
  padding:1rem 2rem;
  border:none;
  border-radius:20px;
  font-size:1.6rem;
  cursor:pointer;
  transition: transform .15s ease;
}
.modal__close {
  position:absolute;
  top:.6rem; right:.6rem;
  background:none; border:none;
  font-size:2.4rem; color:#5C4033;
  cursor:pointer;
  transition: transform .15s ease;
}

.modal__send:active,
.modal__close:active {
  transform: scale(.92);     /* se encoge un poco al hacer clic */
}

/* ---------- Estado visible ---------- */
.modal.show {
  visibility: visible;
  opacity: 1;
}

.modal__paragraph {
  font-size: 1.7rem;   /* antes 1.4 rem */
  line-height: 1.6;    /* un poco más de aire */
}

/*────────────────────────────────────────────
  FORMULARIO EN HERO (sin tarjeta)
  ─ Pon tu estilo tocando las variables
────────────────────────────────────────────*/
.hero-form {
  z-index: 2;                    /* ahora sí está por encima */
  width: min(92%, 480px);
  max-width: 420px;              /* ❸ margen fijo, más fácil de centrar */
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  text-align: left;
}

/*──────── Título ────────*/
.hero-form__title {
  font-family: var(--ff-body); 
  font-size: 3.3rem;        /* ← TAMAÑO de fuente del título   */
  font-weight: 500;
  color: #ffffff;           /* ← COLOR del título              */
  text-shadow: 2px 2px 6px #5C4033;
  margin: 0 0 1.2rem;
  text-align: center;
}



.hero-form input,
.hero-form textarea {
  background   : var(--field-bg);
  color        : var(--field-text);
  border       : 2px solid var(--field-bord);
  border-radius: 8px;
  padding      : 1rem 1.2rem;
  font-size    : var(--field-size);
  width        : 100%;
}

/*──────── Botón (ya hereda .modal__send) ────────*/
.hero-form .modal__send {
  font-family: var(--ff-body);
  font-weight: 450; 
  background: #5C4033;      /* cambia aquí si quieres otro color */
}

.hero-form label {
  font-family: var(--ff-body); 
  font-size: 2.2rem;      /* ← TAMAÑO de letra  (ajústalo)  */
  color: #ffffff;         /* ← COLOR del texto (cámbialo)   */
  font-weight: 450;       /* opcional: negrita              */
  text-shadow: 1px 1px 3px #5C4033; /* opcional: sombra sutil */
}


#avail-img{ 
  max-width:100%;
   height:auto;
    display:block;
}

.section_1--availability{
  background-image: none;
  background-color: #F4EBDD;
  height: auto !important;
  min-height: 110vh;
}

.section_1--availability::before{
  background: none;                /* quita la sombra */
}
/*──────────────────────────────────────────
  Cabecera de los planos (Bloque A, B, …)
  — Sin tocar la animación existente —
──────────────────────────────────────────*/
.section_1--availability .bg_div{
  /* misma mecánica ⤵  (centro X -50 / -50)  */
  top: 17%;                     /* súbelo; prueba 8-15 % a tu gusto   */
  left: 50%;
  transform: translate(-50%, -50%);

  padding-top: 0;               /* quita el “relleno” de 240 px       */

}

/* solo cambia el color del texto */
.section_1--availability .bg_text1,
.section_1--availability .bg_text2{
  color: #ffffff;
}

area:focus{
  outline:2px solid #2F4F4F;   /* mismo tono que el trazo Mapster */
  outline-offset:-2px;         /* que se funda con el stroke del plugin */
}

/*──────────────────────────────────────────────
  CONTENEDOR PRINCIPAL
──────────────────────────────────────────────*/
.plan-container{
  position:relative;       /* referencia para el absolute          */
  display:inline-block;    /* mide lo justo: la caja de la imagen  */
  margin:0 auto;           /* ¡y se centra en la página!            */
}

/*──────────────────────────────────────────────
  ① Caja del plano y títulos
──────────────────────────────────────────────*/
.plan-box{
  max-width:500px;
  position:relative;            /* referencia para elementos absolutos */
  display:inline-block;         /* se adapta al tamaño del plano       */
}
.plan-box img{ width:100%; height:auto; }

/* Títulos (ya los tenías) */
.plan-box .bg_div{
  position:absolute;
  left:50%; top:15%;
  transform:translate(-50%,-50%);
  text-align:center;
}


/*──────────────────────────────────────────────
  ② Bloque de texto plano (no empuja a nadie)
──────────────────────────────────────────────*/
/* ─────────  Bloque de datos más grande  ───────── */
.info-text{
  position:absolute;
  left:-380px;            /* ancho y desplazamiento algo mayores          */
  top:12%;
  width:360px;           /* +40 px sobre el original                      */
  font-size:2rem;    /* antes era implícitamente 1rem → +12,5 %       */
  line-height:1.85;      /* separa un poco más las líneas                 */
  color:#4c362a;
}

.info-text h3{
  font-family: var(--ff-body);
  margin:.2rem 0 .7rem;
  font-size:2rem;       /* antes heredaba ≈1.6 rem */
  color:#5C4033;
  font-weight: 700;
}

.info-text li{
  font-size:2rem;    /* sube cada línea un 10-15 % */
  line-height:1.55;     /* mantiene la separación */
  font-weight: 500;
}

/* lista */
.info-text ul{
  margin:.5rem 0 1.1rem;
  padding-left:1.4rem;   /* un pelín más de sangría                        */
  font-size:2rem;     /* antes heredaba ≈1.125 → apenas +2 px visuales */
}

.info-text .estado-disponible{color:#4B9B4B;font-weight:700}
.info-text .estado-reservado {color:#C08F5C;font-weight:700}
.info-text .estado-vendido   {color:#B63E3E;font-weight:700;text-decoration:line-through}


/*──────────────────────────────────────────────
  ③ Adaptación móvil: texto debajo del plano
──────────────────────────────────────────────*/
@media (max-width: 900px){
  /* ① la caja lateral desaparece y todo vuelve al flujo */
  .info-text{
    position:static;       /* sale del absoluto */
    width:auto;
    margin:1.5rem 0 0;     /* separación inferior del plano */
    left:auto; top:auto;   /* por si el navegador conserva valores */
  }

  /* ② centramos el bloque completo para que no quede pegado a los bordes */
  .plan-container{
    justify-content:center;
    padding:0 1rem;        /* respiración lateral */
  }

  /* ③ los títulos sobre el plano bajan un poco para no tapar la parte alta */
  .plan-box .bg_div{
    top:16%;
  }
}

/*──────────────────────────────────────────────
  Tarjeta informativa de la vivienda
──────────────────────────────────────────────*/
.info-card{
  font-family: var(--ff-body);
  background:#fff;                       /* tarjeta clara */
  border-radius:12px;
  padding:1.6rem 2rem;
  box-shadow:0 6px 18px rgba(0,0,0,.12); /* sombra suave */
  max-width:320px;                       /* anchura máx. */
  margin-inline:auto;                    /* centrada */
  animation:popIn .35s ease;  
  font-weight: 300;           /* entrada */
  top: var(--card-top);
}

.info-card h3{
  font-family: var(--ff-body);
}
/* lista sin viñeta nativa */
.info-card ul{
  list-style:none;
  padding-left:0;
  margin:0 0 1rem;
  font-family: var(--ff-body);
}
.info-card li{
  font-family: var(--ff-body);
  margin-bottom:.35rem
}

/* pdf-preview separador */
.pdf-preview{margin-top:1rem}

/* pequeño “pop” al aparecer */
@keyframes popIn{
  0%{transform:scale(.85);opacity:0}
  100%{transform:scale(1);opacity:1}
}

/* ── badge de estado ───────────────────── */
.badge{
  display:inline-block;
  padding:0.25rem 1.5rem;
  font-size:1.35rem;
  font-weight:700;
  border-radius:9999px;
  margin-left:0.6rem;
  line-height:1.2;
}
.badge-disponible{background:#E1F4E1;color:#4B9B4B;}
.badge-reservado {background:#FFF5D1;color:#C08F5C;}
.badge-vendido   {background:#F8D7D7;color:#B63E3E;}

/* precio destacado */
.precio{
  margin-top:0.6rem;
  font-size:1.6rem;
  font-weight:700;
  color:#C08F5C;
}

/*═════════════════════════════════════════════════════════════
  FORMULARIO “lead-card”  (interés por vivienda)
═════════════════════════════════════════════════════════════*/
.lead-card{
  /* ‑‑ Layout ‑‑ */
  position:absolute;
  top:50%;
  left:calc(100% + 2.8rem);   /* separa 2 .8 rem del plano */
  top: var(--card-top);         /* MISMA ALTURA            */
  transform:none;
  max-width:370px;            /* antes 420 px → +120 px     */
  width:100%;
  padding:3rem 3.2rem;        /* más aire interior          */

  /* ‑‑ Estética ‑‑ */
  background:#fff;            /* fondo blanco puro          */
  border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.12);

  /* ‑‑ Tipografía ‑‑ */
  font-family:"Manrope",sans-serif;
  color:#2F4F4F;

  display:grid;
  gap:1.4rem;                 /* separación entre campos    */
}

/* ─── Título ─────────────────────────────────────────────── */
.lead-card h3{
  margin:0 0 .6rem;
  font-size:clamp(1.8rem,1.4rem + .8vw,2.2rem);
  font-weight:700;
  text-align:center;
}

/* ─── Campos ─────────────────────────────────────────────── */
.lead-card label{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  font-size:1.6rem;           /* un poco mayor               */
  font-weight:600;
}

.lead-card input,
.lead-card textarea{
  font:inherit;
  background:#fff;
  border:0.5px solid #C08F5C;
  border-radius:8px;
  padding:1.2rem 1.4rem;      /* ↑ padding                   */
  resize:vertical;
  color:#2F4F4F;
}

.lead-card input:focus,
.lead-card textarea:focus{
  outline:none;
  border-color:#5C4033;
  box-shadow:0 0 0 2px rgba(92,64,51,.25);
}

/* ─── Botón ──────────────────────────────────────────────── */
.lead-card button{
  justify-self:center;
  padding:1.1rem 2.6rem;
  border:none;
  border-radius:28px;
  background:#5C4033;
  color:#F4EBDD;
  font-size:1.6rem;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease, opacity .15s;
}

.lead-card button:hover  { opacity:.9; }
.lead-card button:active { transform:scale(.95); }

/* Iconos sociales en el footer */
footer .social a{
  text-decoration:none;    /* quita el subrayado */
  border-bottom:none;      /* por si algún reset añade borde */
  color:#ddd;
  margin:0 .4rem;
  font-size:2.2rem;
  line-height:1;           /* evita que la línea base deje espacio raro */
  display:inline-block;    /* más consistente en todos los navegadores */
  transition:color .25s ease;
}

footer .social a:visited{
  text-decoration:none;
  color:#ddd;
}

footer .social a:hover,
footer .social a:focus{
  color:#F4EBDD;
  outline:none;
  text-decoration:none;
}

.btn .primary{
  background:#5C4033;
  color:#F4EBDD !important;
  /* …resto… */
}
/* ░░░ Botón fantasma que conserva el espacio ░░░ */
/* =========== HONEYPOT – totalmente fuera del flujo =========== */
.ghost-btn{
  position: absolute;     /* lo saca del flujo normal */
  left: -10000px;         /* lo manda muy fuera de pantalla */
  width: 1px;             /* ni ancho ni alto apreciables   */
  height: 1px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: transparent;
  pointer-events: none;   /* por si alguien clicara “a ciegas” */
}


.ghost-btn:hover,
.ghost-btn:focus{
  opacity:0;                           /* evita que “aparezca” al pasar */
}

/*════════════════════════════════════════════
  FOOTER → tipografías corporativas
════════════════════════════════════════════*/

/* texto general del pie (dirección, copyright, developer…) */
footer,
footer p,
footer .footer-text1{
  font-family: var(--ff-body);   /* Montserrat */
  font-weight: 400;
}

/* titular “Contáctanos / Síguenos” (si quieres resaltarlo) */
footer p:first-of-type{
  font-family: var(--ff-body);/* Cormorant Garamond */
  font-weight: 500;
}

/* iconos sociales: sólo hereden color, no cambies la fuente */
footer .social a{
  font-family: unset;
}


/* ─── Vista móvil ────────────────────────────────────────── */
@media (max-width:900px){
  .lead-card{
    position:static;
    transform:none;
    max-width:92%;
    padding:2.4rem 2.6rem;
    margin:2rem auto 0;
    left:auto;
  }
}

/* ——————————————————————————————
   HERO  “Proceso de compra”
   ——————————————————————————————*/
.process-hero-img{
  /* la anchura que quieras mostrar */
  width: 70%;          /* cámbialo a 60 %, 80 %… según te convenga */
  max-width: 1200px;   /* tope en desktop muy ancho */
  height: auto;
  display: block;
  margin: var(--header-h) auto 4rem;   /* respeta la barra fija y centra */
}

/* ——————————————————————————————
   FAQ • tipografías propias
   ——————————————————————————————*/

/* 1) Preguntas (summary) */
.faq summary{
  font-family: var(--ff-body);   /* título “elegante” */
  font-size  : 2.5rem;
  font-weight: 470;                 /* semibold ligero   */
  letter-spacing: .2px;
  color:#5C4033;
  cursor:pointer;
  padding: 1.2rem 1.5rem;
}

/* quitamos el ▶ predeterminado */
.faq summary::-webkit-details-marker{display:none}

/* 2) Respuestas (p) */
.faq p{
  font-family: var(--ff-body);      /* texto general     */
  font-size  : 1.8rem;
  font-weight: 200;
  color:#4c362a;
  padding: 1.5rem 1.5rem 1.5rem;
  line-height: 1.75;
}

/* 3) Tarjeta abierta: fondo crema opcional */
.faq details[open] summary{
  background:#f4ebdd;
}

/* Sangrado para todas las listas del acordeón FAQ */
.faq ul{
  padding-left: 2.5rem;   /* ajústalo a tu gusto */
  margin: 0;              /* quita margen por defecto */
}


/* 4) Caja general del acordeón (ancho + separación) */
.faq{
  max-width: 1200px;
  margin   : 4rem auto;
  padding  : 0 1rem;
}

/* 5) Borde y radio de cada “card” */
.faq details{
  border: 1px solid #c08f5c8e;
  border-radius: 4px;
  margin-bottom: 1.2rem;
}

/*════════  Cajetín sobre la foto (hero)  ══════════════════════*/
.promo-info{
  position:absolute;
  left:4%;
  bottom:3%;

  font-family:var(--ff-body);
  font-size:2.3rem;
  font-weight:200;
  line-height:1.4;
  color:#F4EBDD;
  background:transparent;
  z-index:10;
}

.promo-info ul{
  display:flex;
  flex-wrap:wrap;
  column-gap:3rem;   /* espacio horizontal mayor  */
  row-gap:1.2rem;    /* espacio vertical cuando salte a 2ª fila */
  margin:0;
  padding:0;
  list-style:none;
}


/* pareja número + icono */
.promo-pair{
  display:inline-flex;
  align-items:baseline;         /* línea de base compartida */
  gap:.35rem;
}

/* número grande */
.promo-value{
  font-size:2.2em;
  line-height:1;
}

/* ---- ICONOS ------------------------------------------------*/
.promo-icon{
  width:2.75em;                 /* antes 1 em → un poco más grande */
  height:2.75em;
  object-fit:contain;
  transform:translateY(-0.05em);/* ajuste fino general */
}

/* ajuste individual */
.icon-dorm  { 
  position:relative;      /*  ← necesario para top/bottom  */
  top: .45em !important;
 }  /* baja  ≈ 2‑3 px */
.icon-plano { 
  position:relative;      /*  ← necesario para top/bottom  */
  top: .25em !important;
 }  /* baja igual     */


/* número grande */
.promo-count{          /* antes .promo-value */
  font-size:2.6em;     /* prueba 2.4‑2.8em según tu diseño */
  line-height:1;
  font-weight:400;     /* opcional: un poco más grueso */
}

.plan-wrapper canvas{
  pointer-events: none !important;
}

/* El contenedor que crea Mapster (div.plan-wrapper) debe ser fluido */
.plan-wrapper{
  width: 100% !important;     /* se adapta al ancho del móvil       */
  margin: 0 !important;
}
/* ——— Plano a 1024 px ——— */
.plan-box{
  max-width: 1024px;   /* o “none” si prefieres que adopte lo que mida la imagen */
  width: 1024px;       /* opcional, fija ancho explícito */
}

.lead-success { 
  max-width: 920px; 
  font-family: var(--ff-body);
  color: #ffffff;
  font-size: 3.3rem;
  margin: 0 auto; 
  padding: 16px 0; 
  font-weight: 600; 
}