/* Archivo: /css/front_estilos.css */

/* Centralización de variables de diseño global */
:root {
    --azul-grafito: #353945; 
    --dorado-cobre: #cba37b; 
    --beige-fondo: #ebe6df;  
    --blanco: #ffffff;
    --texto-oscuro: #2b2b2b;
    --texto-chocolate: #5c3a21;
    --fuente-principal: 'Arial', sans-serif;
}

body, html {
    background-color: var(--blanco);
    color: var(--texto-oscuro);
    font-family: var(--fuente-principal);
    margin: 0;
    padding: 0;
    scroll-behavior: smooth; 
}

/* =========================================
   CORRECCIÓN DE ANCLAJES (MENÚ FIJO)
   ========================================= */
#contenedor-buscador-listado,
#contenedorconocenos,
#contenedorcontactanos,
#piedepagina {
    scroll-margin-top: 100px; 
}

/* =========================================
   CLASES REUTILIZABLES (FRONTEND)
   ========================================= */
.texto-dorado { color: var(--dorado-cobre); }
.texto-chocolate { color: var(--texto-chocolate); }
.texto-oscuro { color: var(--texto-oscuro); }
.fondo-azul { background-color: var(--azul-grafito); }
.fondo-blanco { background-color: var(--blanco); }
.fondo-beige-suave { background-color: var(--beige-fondo); }
.modulo-espaciado { padding-top: 2rem; padding-bottom: 2rem; }

/* =========================================
   MÓDULO: CARRUSEL ORBIT (FIX MOBILE-FIRST)
   ========================================= */
.orbit {
    margin-top: 0 !important; 
    position: relative; 
}

.orbit-container {
    height: auto !important; 
    min-height: 250px !important;
}

/* Forzamos visibilidad en celulares para evitar que Foundation las oculte */
.orbit-image, .img-carrusel-front {
    width: 100% !important;
    height: 250px !important; 
    min-height: 250px !important;
    object-fit: cover !important; 
    display: block !important; 
    background-color: #f1f5f9; 
}

/* Escalado proporcional nativo para Tablets y Monitores */
@media print, screen and (min-width: 40em) {
    .orbit-image, .img-carrusel-front {
        height: 50vh !important;
        min-height: 450px !important;
        max-height: 650px !important;
    }
}

/* =========================================
   MÓDULO: FILTROS AVANZADOS (BUSCADOR)
   ========================================= */
.panel-filtros-contenedor {
    background-color: var(--blanco);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.separador-filtros { margin: 1.5rem 0; }

.accordion-filtros { background: transparent; border: none; }
.titulo-acordeon-filtro { background: transparent !important; padding: 0.5rem 0; font-weight: bold; color: var(--dorado-cobre) !important; font-size: 1rem; border: none; }
.contenido-acordeon-filtro { padding: 1rem 0 0 0; border: none; background: transparent; }
.amenidades-scroll { max-height: 220px; overflow-y: auto; padding-right: 10px; }
.label-filtro-checkbox { font-size: 0.9rem; margin-bottom: 8px; display: block; color: var(--texto-oscuro); }
.icono-amenidad-filtro { width: 16px; height: 16px; vertical-align: middle; margin-right: 6px; }

/* =========================================
   UX MEJORADO: SECCIÓN CONÓCENOS
   ========================================= */
.imagen-destacada {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    margin-bottom: 2rem; 
}
@media print, screen and (min-width: 64em) {
    .imagen-destacada { margin-bottom: 0; }
}

.caja-valores {
    background-color: var(--blanco);
    padding: 2rem;
    border-radius: 12px;
    height: 100%; 
    border-left: 5px solid var(--dorado-cobre); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    transition: box-shadow 0.3s ease;
    margin-bottom: 1.5rem;
}
.caja-valores:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08); }
.caja-valores p { font-size: 1rem; line-height: 1.6; margin-bottom: 0; }
.linea-confianza { background-color: var(--dorado-cobre); width: 60px; height: 2px; border: none; margin-bottom: 2rem; display: inline-block; }
.bloque-texto-conocenos { padding-top: 0; }

/* =========================================
   MÓDULO: SECCIÓN CONTACTO
   ========================================= */
.fondo-dorado-contacto { background-color: var(--dorado-cobre); color: var(--texto-oscuro); overflow: hidden; position: relative; }
.bloque-texto-contacto { padding: 5rem 2rem; }
.subtitulo-contacto { font-weight: 400; letter-spacing: 8px; margin-bottom: 1.5rem; font-size: 1rem; }
.titulo-contacto { font-weight: 400; font-size: 2.2rem; line-height: 1.3; margin-bottom: 2rem; }
.texto-contacto { font-size: 1.2rem; line-height: 1.6; margin-bottom: 3.5rem; color: #333333; }

.boton-grafito { background-color: var(--azul-grafito); color: var(--blanco); letter-spacing: 4px; padding: 1.2rem 3rem; border: none; transition: background-color 0.3s ease; }
.boton-grafito:hover, .boton-grafito:focus { background-color: #1a1c23; color: var(--blanco); }

.celda-imagen-estirada { padding: 0; margin: 0; background-image: url('../imagenes/imagenContacto.png'); background-size: cover; background-position: center center; background-repeat: no-repeat; min-height: 400px; max-height: 100%; }
.icono-whatsapp { color: inherit; font-size: 1.2rem; vertical-align: middle; margin-right: 8px; }
.btn-whatsapp:hover .icono-whatsapp { transition: color 0.3s ease; }

/* =========================================
   MÓDULO: PIE DE PÁGINA
   ========================================= */
.fondo-pie-pagina { background-color: var(--azul-grafito); color: var(--blanco); padding: 3rem 2rem; }
.logo-pie { max-width: 250px; height: auto; }
.texto-pie-pagina { font-size: 0.95rem; color: #e0e0e0; padding-top: 1.5rem; }
.texto-pie-pagina p { margin-bottom: 0; }

/* =========================================
   MÓDULO: TARJETAS DE PROPIEDADES (GRID)
   ========================================= */
.tarjeta-propiedad { background-color: var(--blanco); border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; height: 100%; overflow: hidden; cursor: pointer; margin-bottom: 1.5rem; }
.tarjeta-propiedad:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.12); }
.img-tarjeta-wrapper { position: relative; height: 220px; overflow: hidden; }
.img-tarjeta { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; background-color: #f1f5f9; }
.tarjeta-propiedad:hover .img-tarjeta { transform: scale(1.05); }

.badge-operacion { position: absolute; top: 15px; left: 15px; padding: 5px 12px; border-radius: 20px; color: var(--blanco); font-weight: bold; font-size: 0.8rem; text-transform: uppercase; }
.badge-operacion.renta { background-color: var(--azul-grafito); }
.badge-operacion.venta { background-color: var(--dorado-cobre); }

.badge-tipo { position: absolute; top: 15px; right: 15px; background-color: rgba(53, 57, 69, 0.85); color: var(--blanco); padding: 5px 12px; border-radius: 4px; font-size: 0.8rem; }
.badge-fotos { position: absolute; bottom: 15px; right: 15px; background-color: rgba(0,0,0,0.7); color: var(--blanco); padding: 4px 10px; border-radius: 4px; font-size: 0.8rem; }

.cuerpo-tarjeta { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.precio-tarjeta { color: var(--azul-grafito); font-size: 1.6rem; font-weight: bold; margin-bottom: 0.5rem; }
.titulo-tarjeta { font-size: 1.05rem; color: var(--texto-oscuro); margin-bottom: 0.8rem; font-weight: 600; line-height: 1.3; }
.ubicacion-tarjeta { color: #718096; font-size: 0.85rem; margin-bottom: 1rem; flex-grow: 1; }

.pie-tarjeta { border-top: 1px solid #edf2f7; padding-top: 15px; display: flex; justify-content: space-between; color: #718096; font-size: 0.9rem; }
.pie-tarjeta i { color: var(--dorado-cobre); margin-right: 5px; }

/* =========================================
   BOTÓN DE CIERRE REVEAL NATIVO Y MODAL FIX
   ========================================= */
.reveal-overlay { z-index: 999999 !important; }
.reveal { z-index: 1000000 !important; }

.reveal .close-button {
    position: absolute !important; 
    top: 10px !important; right: 15px !important;
    font-size: 2.2rem !important; color: var(--azul-grafito) !important;
    background-color: var(--blanco) !important; border-radius: 50% !important; 
    width: 45px !important; height: 45px !important; line-height: 42px !important;
    text-align: center !important; box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    z-index: 100000 !important; border: none !important; padding: 0 !important; margin: 0 !important;
    transition: color 0.2s ease, background-color 0.2s ease !important; transform: none !important;
}
.reveal .close-button:hover, .reveal .close-button:focus { color: var(--dorado-cobre) !important; background-color: #f9f9f9 !important; outline: none !important; }

/* =========================================
   UX MEJORADO: SECCIÓN CONTACTO EN MODAL
   ========================================= */
.modal-footer-contacto { background-color: var(--beige-fondo); margin: 2rem -1rem -1rem -1rem; padding: 3rem 1.5rem; border-top: 1px solid #eaeaea; }
.tarjeta-opcion-contacto { background-color: var(--blanco); padding: 2.5rem 1.5rem; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); height: 100%; transition: transform 0.3s ease, box-shadow 0.3s ease; border-top: 4px solid var(--dorado-cobre); display: flex; flex-direction: column; }
.tarjeta-opcion-contacto:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); }
.tarjeta-opcion-contacto .subtitulo-tarjeta { font-size: 0.95rem; margin-bottom: 2rem; color: var(--texto-chocolate); flex-grow: 1; }

/* =========================================
   INTERACCIONES CLICKEABLES
   ========================================= */
.figura-clicable { cursor: pointer; transition: opacity 0.3s ease; }
.figura-clicable:hover { opacity: 0.9; }

/* =========================================
   UX MEJORADO: INDICADOR DE ZOOM EN FOTO PRINCIPAL
   ========================================= */
.wrapper-visor-principal { cursor: zoom-in; position: relative; border-radius: 8px; margin-bottom: 1rem; }
.indicador-zoom { position: absolute; bottom: 15px; right: 15px; background-color: rgba(53, 57, 69, 0.85); color: var(--blanco); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: background-color 0.3s ease, transform 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.wrapper-visor-principal:hover .indicador-zoom { background-color: var(--dorado-cobre); transform: scale(1.1); }

/* =========================================
   UX MEJORADO: DETALLES DE PROPIEDAD
   ========================================= */
.detalle-contenedor-principal { padding-top: 1rem; }
.detalle-mapa-wrapper { margin-bottom: 1.5rem; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border: 1px solid #eaeaea; }
.detalle-badges-wrapper { margin-bottom: 1rem; }
.badge-folio { background-color: #e2e8f0; color: #4a5568; padding: 5px 12px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; }
.detalle-btn-compartir { margin-bottom: 1.5rem; }
.detalle-caracteristicas-grid { margin-bottom: 1.5rem; }
.detalle-icono-wrapper { margin-bottom: 4px; display: inline-block; }
.detalle-tecnicos-caja { margin-bottom: 1.5rem; padding: 10px; border-radius: 8px; border: 1px solid #eaeaea; background-color: var(--blanco); }
.detalle-tecnico-item { margin-bottom: 5px; }
.detalle-descripcion-texto { max-height: 200px; overflow-y: auto; white-space: pre-wrap; }
.detalle-amenidad-item { margin-bottom: 0.5rem; }

/* =========================================
   UX MEJORADO: GALERÍA Y SCROLL PATRÓN ZILLOW
   ========================================= */
.contenedor-miniaturas-scroll { 
    display: flex; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 1rem; -webkit-overflow-scrolling: touch; 
    scrollbar-width: thin; scrollbar-color: var(--dorado-cobre) var(--beige-fondo);
}
.contenedor-miniaturas-scroll::-webkit-scrollbar { height: 8px; }
.contenedor-miniaturas-scroll::-webkit-scrollbar-track { background: var(--beige-fondo); border-radius: 4px; }
.contenedor-miniaturas-scroll::-webkit-scrollbar-thumb { background-color: var(--dorado-cobre); border-radius: 4px; }

.galeria-miniaturas-grid { margin-bottom: 1.5rem; transition: all 0.3s ease; }
.miniatura-contenedor-relativo { position: relative; width: 100%; height: 100%; cursor: pointer; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.miniatura-galeria { width: 100%; height: 70px; object-fit: cover; display: block; transition: transform 0.3s ease; border-radius: 4px; }
@media print, screen and (min-width: 40em) { .miniatura-galeria { height: 90px; } }
.miniatura-contenedor-relativo:hover .miniatura-galeria { transform: scale(1.1); }

/* Capa oscura (Overlay) de más fotos */
.miniatura-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(30, 35, 45, 0.7); display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; z-index: 2; }
.miniatura-contenedor-relativo:hover .miniatura-overlay { background-color: rgba(30, 35, 45, 0.5); }
.miniatura-overlay-texto { color: var(--blanco); font-weight: bold; text-align: center; line-height: 1.1; font-size: 1.1rem; pointer-events: none; }
.miniatura-overlay-texto svg { margin-bottom: 4px; }
.hint-scroll-fotos { font-size: 0.8rem; color: var(--texto-oscuro); margin-top: -0.5rem; margin-bottom: 1rem; opacity: 0.7; }

/* =========================================
   SKELETON LOADERS (ESTADO DE CARGA UX AJAX)
   ========================================= */
.skeleton-box {
    background-color: #e2e8f0;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    width: 100%;
}
.skeleton-box::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0));
    animation: shimmerSkeleton 1.5s infinite;
}
@keyframes shimmerSkeleton {
    100% { transform: translateX(100%); }
}

.skeleton-img { width: 100%; height: 220px; background-color: #cbd5e1; margin-bottom: 1rem; border-radius: 12px; }
.skeleton-text-lg { height: 24px; margin-bottom: 0.8rem; width: 80%; }
.skeleton-text-md { height: 16px; margin-bottom: 1rem; width: 100%; }
.skeleton-text-sm { height: 16px; width: 40%; }