html {
    scroll-behavior: smooth;
}/* =========================================
   IMPORTAR FUENTE MONTSERRAT
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* =========================================
   ESTILOS GENERALES Y PALETA DE COLORES
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif; /* Nueva tipografía limpia */
}

body {
    background-color: #ffffff; /* Fondo blanco para un diseño limpio */
    color: #4c2e23; /* Tu color principal para los textos */
}

/* =========================================
   MENÚ SUPERIOR
   ========================================= */
.menu-superior {
    background-color: #4c2e23; /* Color principal */
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid #ffcf06; /* Detalle pequeño en secundario */
}

.menu-superior a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.menu-superior a:hover {
    color: #ffcf06; /* Destello secundario al pasar el mouse */
}

.logo-texto {
    color: #ffffff;
    letter-spacing: 2px;
    font-size: 1rem;
    font-weight: 700;
}

/* =========================================
   CONTENEDOR DE LA PROPIEDAD
   ========================================= */
.propiedad-detalle {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

/* =========================================
   CARRUSEL CON FLECHAS
   ========================================= */
.carrusel-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}

.carrusel-slide {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 15px;
    -ms-overflow-style: none;  
    scrollbar-width: none;     
}

.carrusel-slide::-webkit-scrollbar {
    display: none; 
}

.carrusel-slide img {
    flex: 0 0 100%;
    scroll-snap-align: center;
    height: 450px;
    object-fit: cover;
    border-radius: 8px; /* Bordes un poco más sutiles */
    box-shadow: 0 4px 10px rgba(76, 46, 35, 0.15); /* Sombra color café muy suave */
}

.btn-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(76, 46, 35, 0.8); /* Botón café semi-transparente */
    color: #ffffff;
    border: none;
    font-size: 24px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-flecha:hover {
    background-color: #ffcf06; /* Flecha amarilla al pasar el mouse */
    color: #4c2e23;
    transform: translateY(-50%) scale(1.05);
}

.btn-flecha.izq { left: 15px; }
.btn-flecha.der { right: 15px; }

/* =========================================
   ENCABEZADO DE PROPIEDAD
   ========================================= */
.etiqueta-venta {
    background-color: #ffcf06; /* Tu color secundario resalta la operación */
    color: #4c2e23;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.cabecera-propiedad h1 {
    font-size: 2.2rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.precio-grande {
    font-size: 2.6rem; /* Lo hacemos bastante más grande */
    color: #4c2e23; /* Mantenemos tu color principal formal */
    font-weight: 800; /* Letra extra gruesa para dar autoridad */
    margin-bottom: 15px;
    display: inline-block; /* Esto hace que el subrayado solo ocupe el tamaño del texto */
    border-bottom: 5px solid #ffcf06; /* Subrayado grueso con tu color amarillo */
    padding-bottom: 5px;
}
/* =========================================
   CUADRÍCULA DE CARACTERÍSTICAS (4 ÍCONOS)
   ========================================= */
.caracteristicas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 40px;
}

@media (max-width: 600px) {
    .caracteristicas-grid { grid-template-columns: repeat(2, 1fr); }
}

.item-icono {
    background-color: #fbfbfb; /* Fondo casi blanco para contraste limpio */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #eaeaea;
}

.item-icono .icono {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
}

.item-icono p {
    font-size: 0.9rem;
    font-weight: 600;
}

/* =========================================
   DESCRIPCIÓN Y AMENIDADES
   ========================================= */
.descripcion-propiedad {
    background-color: #fbfbfb;
    padding: 35px;
    border-radius: 8px;
    margin-bottom: 40px;
    line-height: 1.7;
    border: 1px solid #eaeaea;
}

.descripcion-propiedad h2 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.descripcion-propiedad p {
    margin-bottom: 15px;
}

.titulo-amenidades {
    margin-top: 25px;
    margin-bottom: 15px;
    font-size: 1.2rem;
    border-left: 4px solid #ffcf06; /* Detalle amarillo a la izquierda */
    padding-left: 10px;
}

.lista-amenidades {
    list-style: none;
    padding-left: 0;
}

.lista-amenidades li {
    margin-bottom: 12px;
    font-size: 1rem;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 8px;
}

/* =========================================
   BOTONES DE CONTACTO
   ========================================= */
.acciones-contacto {
    text-align: center;
    padding: 30px 0 60px 0;
}

.acciones-contacto h3 {
    margin-bottom: 25px;
    font-size: 1.3rem;
}

.botones-flex {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-whatsapp-grande, .btn-correo {
    padding: 15px 35px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.btn-whatsapp-grande {
    background-color: #25D366; /* Mantenemos el verde universal de WhatsApp, genera más clics */
    color: white;
}

.btn-correo {
    background-color: #4c2e23; /* Tu color principal */
    color: white;
    border: 2px solid #4c2e23;
}

.btn-whatsapp-grande:hover {
    background-color: #1ebe57;
    transform: translateY(-3px);
}

.btn-correo:hover {
    background-color: #ffffff;
    color: #4c2e23;
    transform: translateY(-3px);
}
/* =========================================
   ESTILOS DEL CATÁLOGO PRINCIPAL (INDEX)
   ========================================= */

.header-index {
    text-align: center;
    padding: 60px 20px;
    background-color: #fbfbfb;
    border-bottom: 1px solid #eaeaea;
}

.header-index h1 {
    font-size: 2.5rem;
    color: #4c2e23;
    margin-bottom: 10px;
    font-weight: 800;
}

.header-index p {
    color: #888888;
    font-size: 1.1rem;
    font-weight: 600;
}

.catalogo-container {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

.grid-propiedades {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.tarjeta {
    background-color: #ffffff;
    border-radius: 8px;
    width: 350px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(76, 46, 35, 0.1); /* Sombra café muy sutil */
    border: 1px solid #eaeaea;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(76, 46, 35, 0.2);
}

.tarjeta img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.info-tarjeta {
    padding: 25px;
}

.info-tarjeta h3 {
    font-size: 1.3rem;
    color: #4c2e23;
    margin-bottom: 10px;
    font-weight: 700;
}

.precio-tarjeta {
    font-size: 1.4rem;
    color: #4c2e23;
    font-weight: 800;
    margin-bottom: 15px;
    border-bottom: 3px solid #ffcf06;
    display: inline-block;
    padding-bottom: 3px;
}

.detalles-tarjeta {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.5;
}

.btn-ver-mas {
    display: block;
    text-align: center;
    background-color: #4c2e23;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 0;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-ver-mas:hover {
    background-color: #ffcf06;
    color: #4c2e23;
}
/* =========================================
   SECCIÓN NOSOTROS Y FOOTER
   ========================================= */

.nosotros-section {
    background-color: #fbfbfb;
    padding: 70px 20px;
    text-align: center;
    border-top: 1px solid #eaeaea;
}

.nosotros-contenido {
    max-width: 800px;
    margin: 0 auto;
}

.nosotros-contenido h2 {
    color: #4c2e23;
    margin-bottom: 25px;
    font-size: 2.2rem;
    font-weight: 800;
}

.nosotros-contenido p {
    color: #666666;
    font-size: 1.1rem;
    line-height: 1.8;
}

.footer-sitio {
    background-color: #4c2e23;
    color: #ffffff;
    text-align: center;
    padding: 40px 20px;
    font-size: 0.9rem;
}

.footer-sitio p {
    margin-bottom: 10px;
}

.footer-sitio a {
    color: #ffcf06; /* Detalle amarillo para enlaces legales */
    text-decoration: none;
    font-weight: 600;
}

.footer-sitio a:hover {
    text-decoration: underline;
}

/* =========================================
   BOTÓN FLOTANTE DE WHATSAPP
   ========================================= */

.whatsapp-flotante {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    background-color: #25D366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 1000; /* Asegura que siempre esté por encima de todo */
    transition: transform 0.3s ease;
}

.whatsapp-flotante img {
    width: 38px;
    height: 38px;
}

.whatsapp-flotante:hover {
    transform: scale(1.1); /* Efecto de latido al pasar el mouse */
}
/* =========================================
   BUSCADOR AVANZADO DESPLEGABLE
   ========================================= */
.buscador-avanzado {
    background-color: #fbfbfb;
    padding: 20px 30px;
    border-radius: 8px;
    max-width: 700px;
    margin: 30px auto 50px auto; /* Centrado y con espacio hacia abajo */
    display: flex;
    gap: 20px;
    justify-content: center;
    border: 1px solid #eaeaea;
    box-shadow: 0 8px 20px rgba(76, 46, 35, 0.08); /* Sombra elegante */
}

.filtro-grupo {
    display: flex;
    flex-direction: column;
    flex: 1; /* Para que ambas cajas midan lo mismo */
}

.filtro-grupo label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #888;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.filtro-grupo select {
    padding: 12px 15px;
    border: 2px solid #eaeaea;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    color: #4c2e23;
    font-weight: 600;
    background-color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none; /* Quita la flecha fea por defecto de algunos navegadores */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%234c2e23%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
}

.filtro-grupo select:focus, .filtro-grupo select:hover {
    outline: none;
    border-color: #ffcf06; /* Se ilumina en tu amarillo corporativo al seleccionar */
}

/* Para que en celular se pongan uno debajo del otro */
@media (max-width: 600px) {
    .buscador-avanzado {
        flex-direction: column;
        padding: 20px;
    }
}

/* La clase hidden sigue siendo necesaria para ocultar tarjetas */
.tarjeta {
    transition: all 0.4s ease;
}

.hidden {
    display: none;
}/* =========================================
   SECCIÓN DE CAPTACIÓN (VENDEDORES)
   ========================================= */
.captacion-section {
    background-color: #4c2e23; /* Tu color principal de fondo */
    color: #ffffff;
    text-align: center;
    padding: 60px 20px;
    /* Esto le da un pequeño margen arriba para separarlo del catálogo */
    margin-top: 40px; 
}

.captacion-contenido {
    max-width: 800px;
    margin: 0 auto;
}

.captacion-contenido h2 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #ffcf06; /* Título en tu amarillo corporativo para resaltar */
}

.captacion-contenido p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 35px;
    color: #eaeaea;
}

.btn-captacion {
    display: inline-block;
    background-color: #ffcf06; /* Botón amarillo que llama la atención */
    color: #4c2e23;
    text-decoration: none;
    padding: 15px 35px;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-captacion:hover {
    background-color: #ffffff; /* Se vuelve blanco al pasar el mouse */
    transform: translateY(-3px);
}
/* =========================================
   FORMULARIO DE CONTACTO (CRM)
   ========================================= */
.contacto-formulario-section {
    background-color: #ffffff;
    padding: 80px 20px;
    border-top: 1px solid #eaeaea;
}

.contenedor-formulario {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fbfbfb;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(76, 46, 35, 0.05);
    border: 1px solid #eaeaea;
}

.texto-formulario {
    text-align: center;
    margin-bottom: 40px;
}

.texto-formulario h2 {
    color: #4c2e23;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.texto-formulario p {
    color: #666;
    font-size: 1.1rem;
}

.formulario-crm {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fila-form {
    display: flex;
    gap: 20px;
}

.grupo-input {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.grupo-input label {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #4c2e23;
}

.grupo-input input, 
.grupo-input select, 
.grupo-input textarea {
    padding: 12px 15px;
    border: 1px solid #cccccc;
    border-radius: 6px;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease;
    background-color: #ffffff;
}

/* Efecto cuando el cliente da clic para escribir */
.grupo-input input:focus, 
.grupo-input select:focus, 
.grupo-input textarea:focus {
    outline: none;
    border-color: #4c2e23;
    box-shadow: 0 0 0 2px rgba(76, 46, 35, 0.1);
}

.btn-enviar-form {
    background-color: #4c2e23;
    color: #ffffff;
    border: none;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-enviar-form:hover {
    background-color: #ffcf06;
    color: #4c2e23;
}

/* Adaptación para celulares */
@media (max-width: 768px) {
    .fila-form {
        flex-direction: column;
        gap: 20px;
    }
}
/* =========================================
   HERO BANNER (ENCABEZADO IMPACTANTE)
   ========================================= */
.hero-banner {
    width: 100%;
    height: 80vh; /* Ocupa el 80% de la altura de la pantalla */
    background-image: url('imagenes/hero-valle.webp'); /* Asegúrate de que el nombre coincida */
    background-size: cover;
    background-position: center;
    background-attachment: scroll; /* Para que la imagen se mueva con el scroll */
    position: relative;
}

.hero-overlay {
    width: 100%;
    height: 100%;
    background: rgba(76, 46, 35, 0.4); /* Capa café semitransparente para que el texto resalte */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-textos {
    color: #ffffff;
    max-width: 800px;
    padding: 0 20px;
}

.hero-textos h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}

.hero-textos p {
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 35px;
}

.hero-botones {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn-hero-primario {
    background-color: #ffcf06;
    color: #4c2e23;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-hero-secundario {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    padding: 13px 30px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-hero-primario:hover {
    background-color: #ffffff;
    transform: translateY(-3px);
}

.btn-hero-secundario:hover {
    background-color: rgba(255,255,255,0.2);
}

/* Ajuste para celulares */
@media (max-width: 768px) {
    .hero-banner { height: 60vh; }
    .hero-textos h1 { font-size: 2.2rem; }
    .hero-textos p { font-size: 1.1rem; }
    .hero-botones { flex-direction: column; }
}
/* =========================================
   PÁGINAS LEGALES
   ========================================= */
.contenedor-texto-legal {
    max-width: 800px;
    margin: 80px auto;
    padding: 0 20px;
    color: #4c2e23;
    line-height: 1.8;
}

.contenedor-texto-legal h1 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.contenedor-texto-legal h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 15px;
    color: #666;
}
/* =========================================
   AJUSTE PERFECTO PARA CARRUSEL MÓVIL
   ========================================= */
.carrusel-slide {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* El 'imán' que obliga a la foto a encajar */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Da muchísima fluidez al deslizar en iPhone */
}

/* Oculta la barra de desplazamiento (scrollbar) debajo de las fotos */
.carrusel-slide::-webkit-scrollbar {
    display: none;
}

.carrusel-slide img {
    flex: 0 0 100%; /* OBLIGA a cada foto a medir exactamente el 100% del contenedor */
    width: 100%;
    height: 450px; /* Altura estándar en computadora */
    object-fit: cover; /* Evita que la foto se deforme o se apachurre */
    scroll-snap-align: start; /* Punto exacto de anclaje del imán */
}

/* Ajuste específico para la pantalla del celular */
@media (max-width: 768px) {
    .carrusel-slide img {
        height: 300px; /* Un poco más bajitas en celular para que el cliente pueda ver el título y el precio sin bajar más */
    }
}