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


body {
font-family: Arial, Helvetica, sans-serif;
background-color: #ffffff;
color: #333333;
line-height: 1.6;
}



/* =========================
ENCABEZADO
========================= */

header {
background-color: #ffffff;

display: flex;
align-items: center;
justify-content: space-between;

padding: 18px 6%;

border-bottom: 1px solid #eeeeee;
}


header img {
width: 110px;
height: auto;
display: block;
}


nav {
display: flex;
gap: 30px;
}


nav a {
text-decoration: none;
color: #5b1018;

font-weight: 600;

transition: 0.3s;
}


nav a:hover {
color: #a51c2b;
}



/* =========================
PORTADA
========================= */

.hero {
background: linear-gradient(
rgba(91, 16, 24, 0.88),
rgba(91, 16, 24, 0.88)
);

color: white;

text-align: center;

padding: 100px 20px;
}


.hero h2 {
font-size: 48px;

max-width: 800px;

margin: 0 auto 25px;
}


.hero p {
max-width: 800px;

margin: 0 auto 18px;

font-size: 18px;
}


.btn {
display: inline-block;

margin-top: 25px;

padding: 13px 28px;

background-color: #a51c2b;

color: white;

text-decoration: none;

border-radius: 6px;

font-weight: bold;

transition: 0.3s;
}


.btn:hover {
background-color: #7d121e;
}



/* =========================
BUSCADOR
========================= */

.buscador {
width: 90%;
max-width: 1200px;

margin: -45px auto 70px;

background-color: white;

padding: 35px;

border-radius: 12px;

box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);

position: relative;
}


.buscador h2 {
color: #5b1018;

margin-bottom: 20px;

text-align: center;
}


.buscador-opciones {
display: flex;

justify-content: center;

gap: 10px;

margin-bottom: 25px;
}


.buscador-opciones button {
padding: 10px 30px;

border: 1px solid #5b1018;

background-color: white;

color: #5b1018;

border-radius: 5px;

cursor: pointer;

font-weight: bold;
}


.buscador-opciones button:hover {
background-color: #5b1018;

color: white;
}


.buscador-form {
display: grid;

grid-template-columns:
1fr
1fr
1fr
auto;

gap: 15px;

align-items: end;
}


.campo {
display: flex;

flex-direction: column;

gap: 6px;
}


.campo label {
font-size: 14px;

font-weight: bold;

color: #555555;
}


.campo input,
.campo select {
height: 45px;

padding: 0 12px;

border: 1px solid #dddddd;

border-radius: 5px;

background-color: white;

font-size: 14px;
}


.btn-buscar {
height: 45px;

padding: 0 22px;

border: none;

border-radius: 5px;

background-color: #a51c2b;

color: white;

font-weight: bold;

cursor: pointer;
}


.btn-buscar:hover {
background-color: #7d121e;
}



/* =========================
PROPIEDADES DESTACADAS
========================= */

.destacadas {
width: 90%;
max-width: 1200px;

margin: 0 auto 80px;

padding: 0;

text-align: center;
}

.destacadas h2 {
color: #5b1018;

font-size: 32px;

margin-bottom: 10px;
}


.destacadas > p {
margin-bottom: 35px;

color: #666666;
}


.propiedades-grid {
display: grid;

grid-template-columns:
repeat(3, 1fr);

gap: 25px;
}


.propiedad-card {
background-color: white;

border-radius: 10px;

overflow: hidden;

box-shadow:
0 4px 20px rgba(0, 0, 0, 0.08);

text-align: left;
}


.imagen-propiedad {
height: 200px;

background-color: #eeeeee;

display: flex;

align-items: center;

justify-content: center;

color: #888888;
  
overflow: hidden;
}

.imagen-propiedad img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}


.propiedad-card h3 {
padding: 20px 20px 5px;

color: #5b1018;
}


.propiedad-card p {
padding: 0 20px 20px;

color: #666666;
}



/* =========================
SOBRE NOSOTROS
========================= */

.sobre-nosotros {
background-color: #f8f5f5;

text-align: center;

padding: 80px 20px;
}


.sobre-nosotros h2 {
color: #5b1018;

font-size: 32px;

margin-bottom: 20px;
}


.sobre-nosotros p {
max-width: 750px;

margin: 0 auto;

color: #555555;

font-size: 17px;
}



/* =========================
PIE DE PÁGINA
========================= */

footer {
background-color: #5b1018;

color: white;

text-align: center;

padding: 40px 20px;
}


footer h3 {
margin-bottom: 10px;
}


footer p {
margin: 5px 0;

opacity: 0.9;
}
header {
width: 100%;
}

header img {
width: 110px;
height: auto;
flex-shrink: 0;
}

nav {
margin-left: auto;
}

/* =========================
PÁGINA DE PROPIEDADES
========================= */

.titulo-propiedades {
text-align: center;

padding: 70px 20px 40px;
}


.titulo-propiedades h1 {
color: #5b1018;

font-size: 42px;

margin-bottom: 10px;
}


.titulo-propiedades p {
color: #666666;

font-size: 18px;
}



.filtros {
width: 90%;
max-width: 1200px;

margin: 0 auto 70px;

padding: 35px;

background-color: #ffffff;

border-radius: 12px;

box-shadow:
0 8px 30px rgba(0, 0, 0, 0.10);
}


.filtros h2 {
color: #5b1018;

margin-bottom: 25px;

text-align: center;
}


.filtros-grid {
display: grid;

grid-template-columns:
repeat(4, 1fr);

gap: 18px;
}


.filtros .campo {
display: flex;

flex-direction: column;

gap: 6px;
}


.filtros .campo label {
font-size: 14px;

font-weight: bold;

color: #555555;
}


.filtros .campo input,
.filtros .campo select {
width: 100%;

height: 45px;

padding: 0 12px;

border: 1px solid #dddddd;

border-radius: 5px;

background-color: white;

font-size: 14px;
}


.filtros > .btn-buscar {
display: block;

margin: 25px auto 0;

padding: 13px 30px;

border: none;

border-radius: 6px;

background-color: #a51c2b;

color: white;

font-weight: bold;

cursor: pointer;
}



.resultados {
width: 90%;
max-width: 1200px;

margin: 0 auto 80px;
}


.resultados-titulo {
margin-bottom: 30px;
}


.resultados-titulo h2 {
color: #5b1018;

font-size: 30px;
}


.resultados-titulo p {
color: #666666;
}


.contenido-propiedad {
padding: 20px;
}


.contenido-propiedad .tipo {
color: #a51c2b;

font-size: 13px;

font-weight: bold;

text-transform: uppercase;
}


.contenido-propiedad h3 {
color: #5b1018;

margin: 8px 0;
}


.contenido-propiedad .ubicacion {
color: #555555;

margin-bottom: 10px;
}
/* =========================
FICHA DE PROPIEDAD
========================= */

.volver-propiedades {
width: 90%;
max-width: 1200px;

margin: 30px auto 20px;
}


.volver-propiedades a {
color: #5b1018;

text-decoration: none;

font-weight: bold;
}


.detalle-propiedad {
width: 90%;
max-width: 1200px;

margin: 0 auto 60px;

display: grid;

grid-template-columns: 1.5fr 1fr;

gap: 40px;

align-items: start;
}



/* GALERÍA */

.galeria-propiedad {
width: 100%;
}


.foto-principal {
width: 100%;

height: 450px;

background-color: #eeeeee;

border-radius: 10px;

display: flex;

align-items: center;

justify-content: center;

color: #888888;

font-size: 18px;
}


.fotos-secundarias {
display: grid;

grid-template-columns:
repeat(3, 1fr);

gap: 10px;

margin-top: 10px;
}


.fotos-secundarias div {
height: 100px;

background-color: #eeeeee;

border-radius: 7px;

display: flex;

align-items: center;

justify-content: center;

color: #888888;
}



/* INFORMACIÓN */

.info-propiedad {
padding: 20px 0;
}


.info-propiedad .tipo {
color: #a51c2b;

font-size: 14px;

font-weight: bold;
}


.info-propiedad h1 {
color: #5b1018;

font-size: 38px;

margin: 10px 0;
}


.info-propiedad .ubicacion {
color: #666666;

font-size: 17px;

margin-bottom: 20px;
}


.precio {
color: #5b1018;

font-size: 32px;

margin-bottom: 30px;
}



/* CARACTERÍSTICAS */

.caracteristicas {
display: grid;

grid-template-columns:
repeat(2, 1fr);

gap: 15px;

margin-bottom: 30px;
}


.caracteristicas div {
background-color: #f8f5f5;

padding: 18px;

border-radius: 8px;

display: flex;

flex-direction: column;
}


.caracteristicas strong {
color: #5b1018;

font-size: 20px;
}


.caracteristicas span {
color: #666666;

font-size: 14px;
}



/* DESCRIPCIÓN */

.descripcion-propiedad {
width: 90%;
max-width: 1000px;

margin: 0 auto 70px;
}


.descripcion-propiedad h2,
.ubicacion-propiedad h2,
.contacto-propiedad h2 {
color: #5b1018;

font-size: 30px;

margin-bottom: 20px;
}


.descripcion-propiedad p {
color: #555555;

margin-bottom: 15px;

font-size: 17px;
}



/* MAPA */

.ubicacion-propiedad {
width: 90%;
max-width: 1200px;

margin: 0 auto 70px;
}


.mapa {
width: 100%;

height: 400px;

background-color: #eeeeee;

border-radius: 10px;

display: flex;

align-items: center;

justify-content: center;

color: #888888;

font-size: 18px;
}



/* CONTACTO */

.contacto-propiedad {
background-color: #f8f5f5;

text-align: center;

padding: 70px 20px;

margin-top: 20px;
}


.contacto-propiedad p {
color: #555555;

margin-bottom: 15px;
}
/* =========================
CELULARES
========================= */


@media (max-width: 800px) {

header {
flex-direction: column;

gap: 20px;
}


nav {
gap: 18px;

flex-wrap: wrap;

justify-content: center;
}


.hero {
padding: 70px 20px;
}


.hero h2 {
font-size: 36px;
}


.buscador {
margin: 30px 15px 60px;
}


.buscador-form {
grid-template-columns: 1fr;
}


.propiedades-grid {
grid-template-columns: 1fr;
}

}

/* =========================
DISEÑO FINAL DE LA FICHA
========================= */

.volver-propiedades {
width: 90%;
max-width: 1200px;
margin: 30px auto 20px;
}

.volver-propiedades a {
color: #5b1018;
text-decoration: none;
font-weight: bold;
}


/* CONTENIDO PRINCIPAL */

.detalle-propiedad {
width: 90%;
max-width: 1200px;
margin: 0 auto 70px;

display: grid;
grid-template-columns: 1.5fr 1fr;

gap: 45px;
}


/* GALERÍA */

.galeria-propiedad {
width: 100%;
}

.foto-principal {
width: 100%;
height: 480px;

background-color: #eeeeee;

border-radius: 12px;

display: flex;
align-items: center;
justify-content: center;

color: #888888;
font-size: 18px;
}

.fotos-secundarias {
display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 10px;

margin-top: 10px;
}

.fotos-secundarias div {
height: 110px;

background-color: #eeeeee;

border-radius: 8px;

display: flex;
align-items: center;
justify-content: center;

color: #888888;
}


/* INFORMACIÓN */

.info-propiedad {
padding: 15px 0;
}

.info-propiedad .tipo {
display: inline-block;

color: #a51c2b;

font-size: 13px;

font-weight: bold;

letter-spacing: 1px;

margin-bottom: 10px;
}

.info-propiedad h1 {
color: #5b1018;

font-size: 40px;

line-height: 1.15;

margin: 0 0 12px;
}

.info-propiedad .ubicacion {
color: #666666;

font-size: 17px;

margin-bottom: 25px;
}

.precio {
color: #5b1018;

font-size: 34px;

margin: 0 0 30px;
}


/* CARACTERÍSTICAS */

.caracteristicas {
display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 12px;

margin-bottom: 30px;
}

.caracteristicas div {
background-color: #f8f5f5;

padding: 18px;

border-radius: 8px;
}

.caracteristicas strong {
display: block;

color: #5b1018;

font-size: 21px;

margin-bottom: 4px;
}

.caracteristicas span {
color: #666666;

font-size: 14px;
}


/* BOTÓN */

.info-propiedad .btn,
.contacto-propiedad .btn {
display: inline-block;

background-color: #5b1018;

color: white;

text-decoration: none;

padding: 14px 24px;

border-radius: 6px;

font-weight: bold;

transition: 0.2s;
}

.info-propiedad .btn:hover,
.contacto-propiedad .btn:hover {
opacity: 0.85;
}


/* DESCRIPCIÓN */

.descripcion-propiedad {
width: 90%;
max-width: 1000px;

margin: 0 auto 70px;
}

.descripcion-propiedad h2,
.ubicacion-propiedad h2,
.contacto-propiedad h2 {
color: #5b1018;

font-size: 30px;

margin-bottom: 20px;
}

.descripcion-propiedad p {
color: #555555;

font-size: 17px;

line-height: 1.7;

margin-bottom: 15px;
}


/* MAPA */

.ubicacion-propiedad {
width: 90%;
max-width: 1200px;

margin: 0 auto 70px;
}

.mapa {
width: 100%;
height: 420px;

background-color: #eeeeee;

border-radius: 12px;

display: flex;
align-items: center;
justify-content: center;

color: #888888;

font-size: 18px;
}


/* CONTACTO */

.contacto-propiedad {
text-align: center;

background-color: #f8f5f5;

padding: 70px 20px;

margin-top: 20px;
}

.contacto-propiedad p {
color: #555555;

font-size: 17px;

margin-bottom: 25px;
}


/* CELULAR */

@media (max-width: 800px) {

.detalle-propiedad {
width: 92%;

grid-template-columns: 1fr;

gap: 25px;
}

.foto-principal {
height: 300px;
}

.fotos-secundarias div {
height: 80px;
}

.info-propiedad h1 {
font-size: 30px;
}

.precio {
font-size: 28px;
}

.caracteristicas {
grid-template-columns: repeat(2, 1fr);
}

.descripcion-propiedad,
.ubicacion-propiedad {
width: 92%;
}

.mapa {
height: 300px;
}

}

.foto-principal {
height: 450px;
overflow: hidden;
border-radius: 10px;
}

.foto-principal img {
width: 100%;
height: auto;
object-fit: cover;
display: block;
}

.fotos-secundarias {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

.fotos-secundarias div {
height: 100px;
overflow: hidden;
border-radius: 8px;
}

.fotos-secundarias img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
}

#mapa {
width: 100%;
height: 400px;
border-radius: 10px;
overflow: hidden;
}

/* =========================
PÁGINA DE CONTACTO
========================= */

.pagina-contacto {
background-color: #f8f5f5;
}

.titulo-contacto {
text-align: center;
padding: 70px 20px 40px;
}

.titulo-contacto h1 {
color: #5b1018;
font-size: 42px;
margin-bottom: 10px;
}

.titulo-contacto p {
color: #666666;
font-size: 18px;
}

.contacto {
width: 90%;
max-width: 1100px;
margin: 0 auto 80px;
}

.contacto-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

.contacto-card {
background-color: #ffffff;
border-top: 5px solid #5b1018;
border-radius: 12px;
padding: 35px 25px;
text-align: center;
box-shadow: 0 6px 20px rgba(91, 16, 24, 0.10);
}

.contacto-card h2 {
color: #5b1018;
font-size: 22px;
margin: 0 0 25px;
}

.contacto-card p {
color: #555555;
margin: 12px 0;
line-height: 1.6;
}

.contacto-card a {
color: #5b1018;
text-decoration: none;
font-weight: 600;
}

.contacto-card a:hover {
color: #a51c2b;
text-decoration: underline;
}

@media (max-width: 800px) {

.contacto-grid {
grid-template-columns: 1fr;
gap: 20px;
}

}

/* =========================
   PÁGINA NOSOTROS
========================= */

.pagina-nosotros {
  background-color: #f8f5f5;
}

.titulo-nosotros {
  text-align: center;
  padding: 70px 20px 45px;
}

.titulo-nosotros h1 {
  color: #5b1018;
  font-size: 42px;
  margin-bottom: 12px;
}

.titulo-nosotros p {
  color: #666666;
  font-size: 18px;
}


/* HISTORIA */

.historia-nosotros {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto 70px;
  background-color: #ffffff;
  border-radius: 14px;
  padding: 55px;
  box-shadow: 0 6px 20px rgba(91, 16, 24, 0.08);
}

.texto-nosotros {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
}

.etiqueta-nosotros {
  color: #a51c2b;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
}

.texto-nosotros h2 {
  color: #5b1018;
  font-size: 32px;
  margin: 12px 0 20px;
}

.texto-nosotros p {
  color: #555555;
  font-size: 17px;
  line-height: 1.8;
  margin: 10px 0;
}


/* FORMA DE TRABAJAR */

.forma-trabajo {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto 80px;
  text-align: center;
}

.forma-trabajo h2 {
  color: #5b1018;
  font-size: 32px;
  margin-bottom: 15px;
}

.forma-trabajo > p {
  max-width: 800px;
  margin: 0 auto 40px;
  color: #666666;
  font-size: 17px;
  line-height: 1.7;
}

.pilares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.pilar {
  background-color: #ffffff;
  border-top: 5px solid #5b1018;
  border-radius: 12px;
  padding: 35px 25px;
  box-shadow: 0 6px 20px rgba(91, 16, 24, 0.08);
}

.icono-pilar {
  font-size: 34px;
  margin-bottom: 15px;
}

.pilar h3 {
  color: #5b1018;
  font-size: 22px;
  margin-bottom: 12px;
}

.pilar p {
  color: #666666;
  line-height: 1.6;
}


/* EQUIPO */

.equipo-nosotros {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto 80px;
}

.titulo-seccion-nosotros {
  text-align: center;
  margin-bottom: 35px;
}

.titulo-seccion-nosotros h2 {
  color: #5b1018;
  font-size: 32px;
  margin: 12px 0 15px;
}

.titulo-seccion-nosotros p {
  max-width: 750px;
  margin: 0 auto;
  color: #666666;
  font-size: 17px;
  line-height: 1.7;
}

.foto-equipo {
  width: 100%;
  height: 420px;
  overflow: hidden;
  border-radius: 14px;
  background-color: #e9e2e2;
  box-shadow: 0 6px 20px rgba(91, 16, 24, 0.10);
}

.foto-equipo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* OFICINA */

.oficina-nosotros {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px;
  align-items: center;
}

.foto-oficina {
  width: 100%;
  height: 380px;
  overflow: hidden;
  border-radius: 14px;
  background-color: #e9e2e2;
  box-shadow: 0 6px 20px rgba(91, 16, 24, 0.10);
}

.foto-oficina img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.texto-oficina h2 {
  color: #5b1018;
  font-size: 32px;
  margin: 12px 0 20px;
}

.texto-oficina p {
  color: #555555;
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 15px;
}


/* FRASE FINAL */

.frase-nosotros {
  background-color: #5b1018;
  padding: 55px 20px;
  text-align: center;
  margin-top: 20px;
}

.frase-nosotros p {
  color: #ffffff;
  font-size: 28px;
  font-weight: 600;
  max-width: 850px;
  margin: 0 auto;
  line-height: 1.5;
}


/* CELULAR */

@media (max-width: 800px) {

  .titulo-nosotros {
    padding: 50px 20px 35px;
  }

  .titulo-nosotros h1 {
    font-size: 34px;
  }

  .historia-nosotros {
    padding: 35px 25px;
  }

  .texto-nosotros h2,
  .forma-trabajo h2,
  .titulo-seccion-nosotros h2,
  .texto-oficina h2 {
    font-size: 27px;
  }

  .pilares {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .foto-equipo {
    height: 280px;
  }

  .oficina-nosotros {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .foto-oficina {
    height: 280px;
  }

  .frase-nosotros p {
    font-size: 22px;
  }

}

/* IMPACTO VISUAL - ENCABEZADO NOSOTROS */

.pagina-nosotros .titulo-nosotros {
  background-color: #5b1018;
  padding: 95px 20px 100px;
  text-align: center;
}

.pagina-nosotros .titulo-nosotros h1 {
  color: #ffffff;
  font-size: 58px;
  font-weight: 500;
  margin: 0 0 22px;
  letter-spacing: 1px;
}

.pagina-nosotros .titulo-nosotros p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 21px;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

.pagina-nosotros .historia-nosotros {
  background-color: #f8f6f6;
  margin: 0;
  width: 100%;
  max-width: none;
  padding: 100px 10%;
  display: block;
}

.pagina-nosotros .texto-nosotros {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
}

.pagina-nosotros .texto-nosotros h2 {
  color: #5b1018;
  font-size: 42px;
  font-weight: 500;
  margin: 0 0 25px;
}

.pagina-nosotros .texto-nosotros p {
  color: #5d5d5d;
  font-size: 17px;
  line-height: 1.8;
  margin: 10px 0;
}


/* VERSIÓN CELULAR */

@media (max-width: 800px) {

  .pagina-nosotros .titulo-nosotros {
    padding: 70px 20px 75px;
  }

  .pagina-nosotros .titulo-nosotros h1 {
    font-size: 44px;
  }

  .pagina-nosotros .titulo-nosotros p {
    font-size: 18px;
  }

  .pagina-nosotros .historia-nosotros {
    padding: 70px 8%;
  }

  .pagina-nosotros .texto-nosotros h2 {
    font-size: 32px;
  }

}
/* ========================================
TARJETA FLOTANTE - OFRECER PROPIEDAD
======================================== */

.captacion-flotante {
position: fixed;
right: 25px;
bottom: 25px;
width: 320px;
background-color: #ffffff;
color: #5b1018;
padding: 28px;
border-radius: 16px;
border: 2px solid #5b1018;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.18);
z-index: 9999;
cursor: grab;
}

.captacion-flotante:active {
cursor: grabbing;
}

.cerrar-captacion {
position: absolute;
top: 10px;
right: 12px;
border: none;
background: none;
color: #5b1018;
font-size: 25px;
line-height: 1;
cursor: pointer;
}

.icono-captacion {
font-size: 30px;
margin-bottom: 12px;
}

.captacion-flotante h3 {
font-size: 21px;
line-height: 1.3;
margin: 0 25px 12px 0;
color: #5b1018;
}

.captacion-flotante p {
font-size: 15px;
line-height: 1.5;
margin: 0 0 20px;
color: #5b1018;
}

.btn-captacion {
width: 100%;
border: none;
background-color: #5b1018;
color: #ffffff;
padding: 12px 15px;
border-radius: 8px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: 0.3s;
}

.btn-captacion:hover {
background-color: #a51c2b;
}

.captacion-minimizada {
display: none;
position: fixed;
right: 20px;
bottom: 20px;
border: none;
background-color: #5b1018;
color: #ffffff;
padding: 13px 18px;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
cursor: pointer;
z-index: 9999;
  touch-action: none;
}

/* CELULAR */

@media (max-width: 600px) {

.captacion-flotante {
right: 12px;
bottom: 12px;
width: calc(100% - 24px);
max-width: 300px;
padding: 18px;
border-radius: 14px;
}

.captacion-flotante h3 {
font-size: 17px;
margin-bottom: 8px;
}

.captacion-flotante p {
font-size: 13px;
line-height: 1.4;
margin-bottom: 14px;
}

.icono-captacion {
font-size: 24px;
margin-bottom: 8px;
}

.btn-captacion {
padding: 10px 12px;
font-size: 14px;
}

.cerrar-captacion {
top: 8px;
right: 10px;
font-size: 23px;
}

.captacion-minimizada {
right: 12px;
bottom: 12px;
padding: 11px 15px;
font-size: 13px;
}

}

/* ========================================
FORMULARIO - OFRECER PROPIEDAD
======================================== */

.modal-captacion {
display: none;
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.45);
z-index: 10000;
overflow-y: auto;
padding: 30px 20px;
}

.formulario-captacion {
position: relative;
width: 100%;
max-width: 650px;
margin: 20px auto;
background-color: #ffffff;
border: 2px solid #5b1018;
border-radius: 18px;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.25);
overflow: hidden;
}

.cerrar-formulario {
position: absolute;
top: 18px;
right: 20px;
border: none;
background: none;
color: #ffffff;
font-size: 30px;
line-height: 1;
cursor: pointer;
z-index: 2;
}

.encabezado-formulario {
background-color: #5b1018;
color: #ffffff;
text-align: center;
padding: 35px 45px 30px;
}

.icono-formulario {
display: block;
font-size: 32px;
margin-bottom: 10px;
}

.encabezado-formulario h2 {
margin: 0 35px 10px;
font-size: 30px;
font-weight: 500;
}

.encabezado-formulario p {
margin: 0 auto;
max-width: 480px;
font-size: 16px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
}

#formulario-propiedad {
padding: 35px 40px 40px;
}

#formulario-propiedad h3 {
color: #5b1018;
font-size: 20px;
margin: 0 0 20px;
padding-bottom: 10px;
border-bottom: 1px solid #e5dede;
}

.campo-formulario {
display: flex;
flex-direction: column;
gap: 7px;
margin-bottom: 18px;
}

.campo-formulario label {
color: #5b1018;
font-size: 14px;
font-weight: 600;
}

.campo-formulario input,
.campo-formulario select,
.campo-formulario textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid #d8cdcd;
border-radius: 8px;
padding: 12px 13px;
font-family: inherit;
font-size: 15px;
color: #444444;
background-color: #ffffff;
outline: none;
transition: 0.2s;
}

.campo-formulario input:focus,
.campo-formulario select:focus,
.campo-formulario textarea:focus {
border-color: #5b1018;
box-shadow: 0 0 0 2px rgba(91, 16, 24, 0.08);
}

.campo-formulario textarea {
resize: vertical;
min-height: 100px;
}

.fila-formulario {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}

.btn-enviar-whatsapp {
width: 100%;
border: none;
border-radius: 9px;
background-color: #5b1018;
color: #ffffff;
padding: 14px 20px;
margin-top: 10px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: 0.3s;
}

.btn-enviar-whatsapp:hover {
background-color: #a51c2b;
}

/* CELULAR */

@media (max-width: 600px) {

.modal-captacion {
padding: 15px 10px;
}

.formulario-captacion {
margin: 10px auto;
border-radius: 14px;
}

.encabezado-formulario {
padding: 30px 25px 25px;
}

.encabezado-formulario h2 {
font-size: 25px;
}

#formulario-propiedad {
padding: 28px 22px 30px;
}

.fila-formulario {
grid-template-columns: 1fr;
gap: 0;
}

}