/* 1. Ajustes generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* =========================================
   REGLAS GENERALES DEL CUERPO
========================================= */
body {
    /* Agregamos este espacio arriba para que tu contenido no se esconda detrás de la barra flotante */
    padding-top: 80px; 
    margin: 0;
    font-family: sans-serif; /* (Mantén tu fuente actual si tienes una) */
}

/* =========================================
   FLECHA FUTURISTA (HOLOGRAMA DE 4 NIVELES)
========================================= */
.contenedor-flecha-holograma {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* Animación de levitación infinita */
    animation: flotar-neon 2s infinite ease-in-out;
    /* Transición para cuando desaparezca al hacer scroll */
    transition: opacity 0.5s ease, visibility 0.5s ease; 
}

/* Base geométrica y brillo para todas las flechas */
.flecha-neon {
    display: block;
    border-bottom: 3px solid #34d399; /* Verde esmeralda brillante */
    border-right: 3px solid #34d399;
    transform: rotate(45deg); /* Gira el cuadrado para formar una 'V' */
    filter: drop-shadow(0px 0px 8px rgba(52, 211, 153, 0.9));
}

/* Flecha 1 (La principal, arriba del todo) */
.contenedor-flecha-holograma span:nth-child(1) {
    width: 22px;
    height: 22px;
    opacity: 1;
}

/* Flecha 2 (Un poco más grande y ligeramente transparente) */
.flecha-2 {
    width: 28px;
    height: 28px;
    opacity: 0.6;
    margin-top: -12px; /* Superposición para juntarlas */
}

/* Flecha 3 (Más grande y más transparente) */
.flecha-3 {
    width: 34px;
    height: 34px;
    opacity: 0.3;
    margin-top: -16px;
}

/* Flecha 4 (La más grande, apenas visible, efecto de estela) */
.flecha-4 {
    width: 40px;
    height: 40px;
    opacity: 0.1;
    margin-top: -20px;
}

/* Animación matemática de la levitación */
@keyframes flotar-neon {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 12px); }
}
/* =========================================
   ESTILO DEL TEXTO "DESLIZA" (NEÓN MENTA)
========================================= */
.texto-desliza {
    color: #bcffce !important; 
    display: block !important; 
    text-align: center !important; 
    font-size: 2rem !important;
    font-weight: 700 !important;
    font-family: Arial, sans-serif !important;
    
    /* El padding-left compensa el letter-spacing para un centrado perfecto */
    letter-spacing: 4px !important; 
    padding-left: 4px !important; 
    
    text-transform: uppercase !important; 
    margin-bottom: 8px !important; 
    width: auto !important; /* Libera al texto de restricciones de tamaño */
    height: auto !important;
    
    /* Brillo de neón */
    text-shadow: 0px 0px 8px rgba(188, 255, 206, 0.9) !important;
    animation: pulso-texto 2s infinite alternate ease-in-out !important;
}

/* =========================================
   CORRECCIÓN: TAMAÑO DE LA FLECHA 1
========================================= */
.flecha-1 {
    width: 22px !important;
    height: 22px !important;
    opacity: 1 !important;
}
/* Hacemos que el brillo del texto palpite con el nuevo tono menta */
@keyframes pulso-texto {
    0% { 
        opacity: 0.6; 
        text-shadow: 0px 0px 4px rgba(188, 255, 206, 0.4); 
    }
    100% { 
        opacity: 1; 
        text-shadow: 0px 0px 12px rgba(188, 255, 206, 1); 
    }
}

/* =========================================
   DISEÑO DE LA BARRA DE NAVEGACIÓN (CORREGIDA)
========================================= */
.navbar {
    /* 1. Solución definitiva: 'fixed' la ancla a la pantalla sin importar nada más */
    position: fixed;
    top: 0;
    left: 0;
    
    /* 2. Aseguramos que cubra de lado a lado */
    width: 100%;
    
    /* 3. Una capa altísima para estar sobre los 96 frames de tu animación */
    z-index: 999999; 
    
    /* 4. Fondo blanco obligatorio para que los textos sean legibles sobre la animación */
    background-color: #ffffff; 
    
    /* Mantenemos tus estilos de alineación intactos */
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Restamos el padding de los lados para evitar que se desborde el 100% del ancho */
    padding: 15px 5%;
    box-sizing: border-box; 
    
    /* Tu sombra elegante */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}
.logo {
    font-size: 1.5rem;
    color: #1a1a1a;
}

.logo strong {
    color: #0d9488; /* Verde esmeralda */
}

.menu {
    list-style: none;
    display: flex;
    gap: 30px;
}

.menu a {
    text-decoration: none;
    color: #555;
    font-weight: 500;
}

.menu a:hover {
    color: #0d9488;
}

/* Botones genéricos */
.btn-principal {
    background-color: #0d9488;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 30px; /* Bordes muy redondeados como en la imagen */
    font-weight: bold;
    cursor: pointer;
}

/* 3. Sección Principal (Hero) con imagen de fondo */
.hero {
    position: relative;
    height: 80vh;
    /* Usamos una imagen de muestra de una casa moderna */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 0 50px;
}

.hero-contenido {
    max-width: 600px;
    color: white;
}

.etiqueta {
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin: 15px 0;
}

.hero .resaltado {
    color: #34d399; /* Un verde más claro para resaltar en fondo oscuro */
}

.hero p {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

/* 4. Buscador flotante */
.buscador {
    display: flex;
    background: white;
    padding: 0px;
    border-radius: 50px;
    width: 100%;
    max-width: 500px;
}

.buscador input {
    flex: 1;
    border: none;
    padding: 10px 20px;
    outline: none;
    border-radius: 50px;
    font-size: 1rem;
}

.btn-buscar {
    background-color: #0d9488;
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
}

/* =========================================
   5. TARJETA FLOTANTE PREMIUM (EFECTO CRISTAL MODERNO)
========================================= */
.tarjeta-flotante {
    position: absolute;
    top: 20%; /* Ajuste vertical relativo */
    right: 5%; /* Separación del borde derecho */
    width: 320px;
    padding: 30px;
    z-index: 10;
    
    /* Efecto Cristal (Glassmorphism) */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Soporte para Safari */
    
    /* Borde iluminado, curvas modernas y sombra suave */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
    
    /* Animación de levitación constante */
    animation: levitacion 4s ease-in-out infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* Efecto al pasar el cursor (ratón) sobre la tarjeta */
.tarjeta-flotante:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 45px 0 rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
    animation-play-state: paused; /* Pausa la levitación al leer */
}

/* Estilos de texto adaptados al cristal */
.tarjeta-flotante p {
    color: #ffffff;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.8); /* Asegura que se lea sobre fondos claros */
    margin-bottom: 12px;
    font-size: 1.05rem;
    line-height: 1.4;
}

/* El precio ahora usa texto degradado moderno */
.tarjeta-flotante .precio-flotante {
    font-size: 1.8rem;
    font-weight: 900;
    margin-top: 20px;
    
    /* Texto con gradiente Esmeralda */
    background: linear-gradient(90deg, #34d399, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none; /* Quitamos la sombra para que el degradado brille */
}

/* Definición de la animación de levitación (Innovación) */
@keyframes levitacion {
    0% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

/* =========================================
   VENTANAS INTERACTIVAS (SCROLLYTELLING - CÍRCULOS)
========================================= */
.ventana-scroll {
    position: absolute;
    z-index: 20;
    opacity: 0; /* Inician invisibles */
    pointer-events: none; /* Evita que estorben el scroll */
    
    /* Efecto de subida suave */
    transform: translateY(30px); 
    transition: opacity 0.6s ease, transform 0.6s ease;
    
    /* Efecto Cristal (Glassmorphism) */
    background: rgba(15, 23, 42, 0.4); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(188, 255, 206, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    
    /* MAGIA DEL CÍRCULO PERFECTO */
    border-radius: 50%; 
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra horizontalmente */
    text-align: center;
    padding: 20px; /* Reducimos el relleno para aprovechar el círculo */
}

/* Tipografía de las ventanas ajustada al círculo */
.ventana-scroll h3 {
    margin: 0;
    font-size: 1.25rem; /* Un poco más pequeño para encajar bien */
    color: #bcffce; /* Tu color menta neón */
    text-shadow: 0 0 10px rgba(188, 255, 206, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ventana-scroll p {
    margin: 8px 0 0 0;
    font-size: 1rem;
    color: white;
    font-weight: 300;
    letter-spacing: 1px;
}

/* Posiciones y tamaños exactos en la pantalla (Computadora) */
/* Al tener el mismo width y height, garantizamos que sea redondo */
.ventana-1 { top: 10%; left: 50%; margin-left: -125px; width: 250px; height: 250px; } /* Centro */
.ventana-2 { top: 45%; left: 5%; width: 230px; height: 230px; } /* Izquierda */
.ventana-3 { top: 45%; right: 5%; width: 230px; height: 230px; } /* Derecha */

/* Clase mágica que JavaScript usará para hacerlas aparecer */
.ventana-visible {
    opacity: 1;
    transform: translateY(0); 
}

/* Adaptación para Celulares */
@media (max-width: 768px) {
    .ventana-scroll {
        /* En celulares hacemos los círculos más pequeños (200x200) */
        width: 200px !important;
        height: 200px !important;
        left: 50% !important;
        right: auto !important;
        margin-left: -100px !important; /* Lo centramos exactamente (mitad de 200) */
        padding: 10px !important;
    }
    
    /* En celular, las 3 ventanas salen centradas pero a diferentes alturas */
    .ventana-1 { top: 15%; }
    .ventana-2 { top: 40%; }
    .ventana-3 { top: 65%; }
}
/* Adaptación para Celulares */
@media (max-width: 768px) {
    .ventana-scroll {
        width: 85% !important;
        left: 50% !important;
        right: auto !important;
        margin-left: -42.5% !important; /* Centrado en celular */
        padding: 20px !important;
    }
    
    /* En celular, las 3 ventanas salen centradas pero a diferentes alturas */
    .ventana-1 { top: 15%; }
    .ventana-2 { top: 40%; }
    .ventana-3 { top: 65%; }
}

/* 6. Sección Quiénes Somos */
.quienes-somos {
    padding: 80px 50px;
    background-color: white;
}

.quienes-somos-contenedor {
    max-width: 1200px;
    margin: 0 auto;
    display: flex; /* Esto coloca las columnas una al lado de la otra */
    gap: 60px; /* Espacio entre la columna izquierda y derecha */
    align-items: center;
}

.columna-texto {
    flex: 1; /* Ocupa el 50% del espacio */
}

.etiqueta-seccion {
    color: #0d9488;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

.columna-texto h2 {
    font-size: 2.5rem;
    color: #1a1a1a;
    margin-bottom: 20px;
    line-height: 1.2;
}

.columna-texto p {
    color: #666;
    line-height: 1.6;
    font-size: 1.1rem;
}

.columna-estadisticas {
    flex: 1; /* Ocupa el otro 50% del espacio */
}

.titulo-secundario {
    font-size: 2rem;
    color: #1a1a1a;
    margin-bottom: 30px;
    line-height: 1.2;
}

.resaltado-texto {
    color: #0d9488; /* Nuestro verde esmeralda en lugar del morado original */
}

/* Diseño de los números de estadísticas */
.cuadricula-numeros {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas del mismo tamaño */
    gap: 15px;
    text-align: center;
    border-top: 1px solid #eaeaea; /* La línea gris sutil que los separa arriba */
    padding-top: 30px;
}

.dato h3 {
    font-size: 1.8rem;
    color: #1a1a1a;
    margin-bottom: 5px;
}

.dato p {
    font-size: 0.85rem;
    color: #666;
}

/* --- ESTILOS COMPARTIDOS --- */
.contenedor-principal {
    max-width: 100%;
    margin: 0 auto;
    padding: 60px 20px;
}

.cabecera-seccion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.cabecera-seccion h2 {
    font-size: 2.2rem;
    color: #1a1a1a;
    line-height: 1.2;
    margin-top: 10px;
}

.etiqueta-morada-clara {
    color: #7c3aed; /* Morado original */
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Botones con estilo de la imagen */
.btn-borde {
    border: 1px solid #e5e7eb;
    background: white;
    padding: 10px 20px;
    border-radius: 30px;
    color: #4b5563;
    font-weight: 600;
    cursor: pointer;
}

.btn-morado-solido {
    background-color: #7c3aed;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
}

/* --- SECCIÓN OUR SOLUTIONS --- */
.insignia-confianza {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #f9fafb;
    padding: 15px 25px;
    border-radius: 15px;
}

.icono-escudo {
    font-size: 24px;
    color: #7c3aed;
}

.insignia-confianza p {
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.4;
}

/* La cuadrícula asimétrica */
.rejilla-soluciones {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr; /* Tamaños exactos de la imagen */
    gap: 20px;
}

.tarjeta {
    border-radius: 20px;
    overflow: hidden;
}

/* Tarjeta 1 */
.tarjeta-destacada {
    background-image: url('PARTE\ 3.jpg');
    background-size: cover;
    background-position: center;
    min-height: 400px;
    padding: 20px;
}

.etiqueta-morada-oscura {
    background-color: rgba(124, 58, 237, 0.9);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    display: inline-block;
}

/* Tarjeta 2 */
.tarjeta-info {
    background-color: #faf5ff; /* Fondo morado muy suave */
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.icono-casa {
    background: white;
    padding: 15px;
    border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.tarjeta-info h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
}

.tarjeta-info p {
    color: #6b7280;
    margin-bottom: 25px;
    line-height: 1.5;
}

/* Tarjeta 3 */
.tarjeta-interior {
    background: white;
    border: 1px solid #f3f4f6;
}

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

.interior-detalles {
    padding: 25px;
}

.interior-detalles h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.precio-base {
    color: #6b7280;
    margin-bottom: 20px;
}

/* --- SECCIÓN TRUSTED LOCATIONS --- */
.rejilla-ubicaciones {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas iguales */
    gap: 20px;
}

.tarjeta-ciudad {
    background: white;
    border-radius: 20px;
    overflow: hidden;
}

.tarjeta-ciudad img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 20px;
}

.ciudad-detalles {
    padding: 20px 10px;
}

.ciudad-detalles h4 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #111827;
}

.pais {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.precio-morado {
    color: #7c3aed;
    font-weight: 600;
    font-size: 0.95rem;
}

/* --- ACTUALIZACIÓN DE COLOR PARA LOS TÍTULOS --- */
/* Seleccionamos todos los títulos de nuestras secciones y tarjetas */
.cabecera-seccion h2,
.columna-texto h2,
.titulo-secundario,
.tarjeta-info h3,
.interior-detalles h3,
.dato h3,
.ciudad-detalles h4 {
    color: #0d9488; /* Aplicamos el color verde esmeralda solicitado */
}

/* --- ACTUALIZACIÓN DE ELEMENTOS MORADOS A ESMERALDA --- */

/* 1. Cambia el color del texto de "OUR SOLUTIONS" y "TRUSTED LOCATIONS" */
.etiqueta-morada-clara {
    color: #0d9488;
}

/* 2. Cambia el color de fondo del botón "View Details" */
.btn-morado-solido {
    background-color: #0d9488;
}

/* 3. Cambia el color de fondo de la etiqueta "Featured Property" */
.etiqueta-morada-oscura {
    background-color: #0d9488;
}

/* =========================================
   DISEÑO DE BARRA DE NAVEGACIÓN (GLOBAL / ORDENADOR)
========================================= */
.navbar {
    display: flex !important;
    /* CORRECCIÓN CLAVE: Usamos center para alinear todo al medio */
    justify-content: center !important; 
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    padding: 15px 50px !important; /* Tus medidas originales */
    background-color: white !important;
    border-bottom: 1px solid #eaeaea !important; /* Tu línea sutil */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Estilos del Logo (Tus nuevos ajustes) */
.logo-img {
    height: 50px !important;
    width: 50px !important;
    border-radius: 50% !important; 
    object-fit: cover !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Sección Derecha: Asesor y Botón */
.nav-derecha {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
}

/* Organización del texto del asesor */
.info-asesor {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centrado para coherencia visual */
    text-align: center !important;
}

.asesor-titulo {
    font-size: 0.65rem !important;
    color: #6b7280 !important; 
    font-weight: bold !important;
    letter-spacing: 1px !important;
    margin-bottom: 2px !important;
}

.asesor-contacto {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #374151 !important; 
    font-weight: bold !important;
    font-size: 0.9rem !important;
}

/* Tu estilo exacto para el botón verde */
.btn-contacto {
    background-color: #0d9488 !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 6px !important; 
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    box-shadow: 0 4px 6px rgba(13, 148, 136, 0.2) !important; 
    transition: background-color 0.3s !important;
}

.btn-contacto:hover {
    background-color: #0b7a70 !important;
}


/* =========================================
   DISEÑO CENTRADO PARA TABLETS Y CELULARES
========================================= */
@media (max-width: 992px) {
    .navbar {
        flex-direction: column !important; /* Obliga a que se apilen hacia abajo */
        gap: 20px !important; 
        padding: 20px 15px !important;
    }

    .nav-derecha {
        flex-direction: column !important; /* El asesor queda arriba del botón */
        width: 100% !important;
    }
}

/* =========================================
   DISEÑO DEL CATÁLOGO Y TARJETAS (GRID)
========================================= */

/* 1. Organización en cuadrícula (3 columnas automáticas) */
.rejilla-proyectos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    width: 100%;
}

/* 2. Diseño de cada tarjeta individual */
.tarjeta-proyecto {
    background: white;
    border-radius: 15px;
    overflow: hidden; /* Evita que la foto se salga de los bordes redondeados */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto al pasar el mouse por encima de la tarjeta */
.tarjeta-proyecto:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* 3. Control estricto del tamaño de las imágenes */
.imagen-contenedor {
    position: relative;
    height: 250px; /* Esta es la altura fija que evita que la foto sea gigante */
    width: 100%;
    background-color: #f3f4f6;
}

.imagen-contenedor img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen elegantemente para llenar el espacio */
}

/* 4. Estilo de las etiquetas (Lote, Disponibles, Agotados) */
.badge {
    position: absolute;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    z-index: 10;
}

.badge-blanco {
    top: 15px;
    left: 15px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #1f2937;
    border: 1px solid #e5e7eb;
}

.badge-esmeralda {
    top: 15px;
    right: 15px;
    background-color: #0d9488;
    color: white;
}

.badge-rojo {
    top: 15px;
    right: 15px;
    background-color: #ef4444; /* Rojo para los proyectos agotados */
    color: white;
}

/* 5. Estilo de los textos y el botón dentro de la tarjeta */
.info-proyecto {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Empuja el botón siempre hacia abajo */
}

.precio-proyecto {
    color: #0d9488;
    font-size: 1.5rem;
    margin-bottom: 8px;
    font-weight: bold;
}

.info-proyecto h4 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: #1a1a1a;
}

.detalles-extra {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.btn-tarjeta {
    margin-top: 20px;
    width: 100%;
    background: linear-gradient(to right, #0d9488, #0f766e); /* Degradado verde */
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.3s;
}

.btn-tarjeta:hover {
    opacity: 0.9; /* Se aclara ligeramente al pasar el mouse */
}

/* =========================================
   BARRA LATERAL DE FILTROS (MODERNA)
========================================= */

/* 1. Contenedor principal de los filtros */
.panel-filtros {
    width: 300px; /* Un tamaño ideal para que no se vea apretado */
    background-color: white;
    padding: 30px 25px;
    border-radius: 15px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.06); /* Sombra muy suave y moderna */
    flex-shrink: 0; /* Evita que la cuadrícula lo aplaste */
    
    /* ¡El truco moderno! Mantiene el panel fijo en pantalla al bajar */
    position: sticky;
    top: 20px; 
}

/* 2. Título principal del panel */
.titulo-filtros {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 2px solid #f3f4f6;
    padding-bottom: 15px;
}

.grupo-filtro {
    margin-bottom: 25px;
}

.grupo-filtro label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 10px;
    color: #374151;
}

/* 3. Estilos de los campos (Buscador y Ciudades) */
.grupo-filtro input[type="text"],
.grupo-filtro select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    font-size: 0.95rem;
    color: #1a1a1a;
    background-color: #f9fafb;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Efecto al hacer clic en el buscador o selector (Brillo esmeralda) */
.grupo-filtro input[type="text"]:focus,
.grupo-filtro select:focus {
    border-color: #0d9488;
    background-color: white;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

/* 4. Estilos para las opciones de círculo (Todos / Lote) */
.opcion-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: #4b5563;
    cursor: pointer;
}

.opcion-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #0d9488; /* Tiñe el círculo de verde esmeralda */
    cursor: pointer;
}

/* 5. Estilos de la barra de precio móvil */
.slider-precio {
    width: 100%;
    height: 6px;
    border-radius: 5px;
    outline: none;
    accent-color: #0d9488; /* Tiñe la barra de verde esmeralda */
    cursor: pointer;
    margin-top: 5px;
}

.valores-precio {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 15px;
    font-weight: 500;
}

/* 6. Estilo moderno para el botón final */
.btn-limpiar {
    width: 100%;
    padding: 12px;
    background-color: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-weight: bold;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-limpiar:hover {
    background-color: #f3f4f6;
    color: #1a1a1a;
    border-color: #d1d5db;
}

/* =========================================
   CORRECCIÓN: ESTRUCTURA DE DOS COLUMNAS
========================================= */

/* Esta regla coloca los filtros y las tarjetas uno al lado del otro */
.layout-catalogo {
    display: flex;
    gap: 30px; /* Crea una separación limpia de 30px entre el panel y las fotos */
    align-items: flex-start; /* Evita que el panel se estire innecesariamente */
    position: relative;
}

/* Le damos prioridad de capa al panel de filtros para que no se mezcle */
.panel-filtros {
    z-index: 100;
}

/* Opcional: Si también quieres que el título gigante sobre la foto cambie de color, 
quita las barras y asteriscos de la siguiente línea: */
/* .hero h1 { color: #0d9488; } */


/* =========================================
   PIE DE PÁGINA (FOOTER)
========================================= */
.pie-pagina {
    background-color: #0f172a; /* Azul noche muy oscuro */
    color: white;
    margin-top: 60px; /* Crea un espacio para que no pegue con las tarjetas */
    padding-top: 60px;
}

.footer-cuadricula {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-columna h3 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: white;
}

.footer-texto, .footer-etiqueta {
    color: #94a3b8; /* Gris azulado claro */
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.icono-casa-footer {
    background: linear-gradient(to right, #10b981, #0d9488);
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 1.2rem;
}

/* Enlaces y listas */
.footer-enlaces, .footer-contacto {
    list-style: none;
}

.footer-enlaces li {
    margin-bottom: 12px;
}

.footer-enlaces a, .footer-contacto a, .footer-legales a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

/* Efecto hover color esmeralda */
.footer-enlaces a:hover, .footer-contacto a:hover, .footer-legales a:hover {
    color: #10b981; 
}

/* Detalles de contacto */
.footer-contacto li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.footer-contacto a {
    color: white; /* Resalta el teléfono, correo y ubicación en blanco */
}

.badge-mapa {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-left: 8px;
    transition: background-color 0.3s;
}

.footer-contacto a:hover .badge-mapa {
    background-color: rgba(16, 185, 129, 0.2);
}

/* Redes Sociales */
.footer-redes {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.footer-redes a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #1e293b; /* Gris oscuro para el cuadro de la red */
    border-radius: 8px;
    transition: background-color 0.3s;
}

.footer-redes img {
    width: 20px;
    height: 20px;
}

.footer-redes a:hover {
    background-color: #0d9488; /* Se vuelve verde al pasar el ratón */
}

.footer-horario p {
    color: white;
    font-size: 0.9rem;
    margin-top: 5px;
}

/* Parte inferior (Copyright) */
.footer-inferior {
    border-top: 1px solid #1e293b;
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Evita que se rompa en celulares */
    gap: 15px;
}

.footer-inferior p {
    color: #94a3b8;
    font-size: 0.85rem;
}

.footer-legales {
    display: flex;
    gap: 20px;
}

/* =========================================
   ESTILOS SEO/UI: HERO LOTES TUNJA
   Diseño Mobile-First y Carga Ligera
========================================= */

#inicio {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Contenedor principal con fondo oscuro para legibilidad */
.hero {
    position: relative;
    /* Reemplaza la URL con una imagen de lotes comprimida en formato WebP para SEO */
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url('ruta-a-tu-imagen-lote.webp') center center/cover no-repeat;
    min-height: 80vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 8%;
    color: #ffffff;
    flex-wrap: wrap;
    gap: 30px;
}

/* Sección de texto (H1 y P) */
.hero-contenido {
    flex: 1 1 500px;
    max-width: 650px;
}

.etiqueta {
    background-color: #f39c12; /* Naranja para llamar la atención */
    color: #fff;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: inline-block;
    margin-bottom: 15px;
}

.hero-contenido h1 {
    font-size: 3rem;
    line-height: 1.2;
    margin: 0 0 20px 0;
}

.resaltado {
    color: #f39c12;
}

.hero-contenido p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #e0e0e0;
}

/* Buscador optimizado para clics */
.buscador {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 500px;
}

.buscador input {
    flex: 1;
    padding: 15px 20px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    outline: none;
}

.btn-buscar {
    padding: 15px 30px;
    background-color: #27ae60; /* Verde conversión */
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

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

/* Tarjeta flotante de precios */
.tarjeta-flotante {
    background-color: rgba(255, 255, 255, 0.95);
    color: #333333;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    flex: 0 1 300px;
    border-top: 4px solid #27ae60;
}

.tarjeta-flotante p {
    margin: 10px 0;
    font-size: 1rem;
}

.precio-flotante {
    font-size: 1.5rem !important;
    color: #27ae60;
    font-weight: 800;
    margin-top: 15px !important;
}

/* =========================================
   MEDIA QUERIES (Crucial para el algoritmo)
========================================= */
@media (max-width: 900px) {
    .hero {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 60px 5%;
    }
    
    .hero-contenido h1 {
        font-size: 2.2rem;
    }
    
    .buscador {
        margin: 0 auto;
        flex-direction: column;
    }
    
    .tarjeta-flotante {
        width: 100%;
        max-width: 400px;
        margin: 20px auto 0;
    }
}

/* =========================================
   SECCIÓN PRINCIPAL (HERO) CON IMAGEN DE FONDO
========================================= */
.hero {
    position: relative;
    height: 80vh; /* Ocupa el 80% de la altura de la pantalla */
    
    /* MAGIA AQUÍ: Primero ponemos un filtro oscuro (0.6 de opacidad) y luego la imagen */
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(TUNJA\ .jpeg);
    
    background-size: cover; /* Obliga a la imagen a cubrir todo el espacio sin deformarse */
    background-position: center; /* Centra la imagen perfectamente */
    background-repeat: no-repeat; /* Evita que la imagen se multiplique como un mosaico */
    
    display: flex;
    align-items: center;
    padding: 0 50px;
}

/* =========================================
   ESTILOS DE LA TARJETA DEL LOTE
========================================= */

.tarjeta-interior {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden; /* Evita que la imagen se salga de los bordes curvos */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 350px;
    display: flex;
    flex-direction: column;
}

.tarjeta-interior:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Control de la imagen superior */
.img-lote {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* Contenedor de los textos - Aquí está la magia del espaciado */
.interior-detalles {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Separa los elementos uniformemente */
}

.interior-detalles h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #2c3e50;
    line-height: 1.3;
}

.interior-detalles .precio {
    margin: 0;
    font-size: 1rem;
    color: #7f8c8d;
}

/* Destaque del precio */
.interior-detalles .precio strong {
    color: #27ae60;
    font-size: 1.2rem;
    font-weight: bold;
}

/* Botón orientado a la conversión */
.btn-verde-conversion {
    margin-top: 8px; /* Un poco más de distancia del precio */
    padding: 12px 20px;
    background-color: #27ae60;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    align-self: flex-start; /* Evita que el botón se estire de lado a lado */
}

.btn-verde-conversion:hover {
    background-color: #219653;
}

/* =========================================
   ESTILOS DE LA REJILLA DE PROYECTOS
========================================= */

.ubicaciones {
    padding: 80px 5%;
    background-color: #f9fbfc; /* Un fondo muy sutil para destacar las tarjetas */
}

.rejilla-ubicaciones {
    display: grid;
    /* Crea columnas automáticas adaptables (Mobile-First) */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* Tarjeta individual */
.tarjeta-proyecto {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.tarjeta-proyecto:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}

/* Contenedor de la Imagen y las Etiquetas Flotantes */
.imagen-contenedor {
    position: relative;
    width: 100%;
    height: 220px;
}

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

/* Estilos de las Etiquetas (Badges) */
.badge {
    position: absolute;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Posición arriba a la izquierda para "Lote" */
.badge-blanco {
    top: 15px;
    left: 15px;
    background-color: rgba(255, 255, 255, 0.95);
    color: #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Posición arriba a la derecha para Estado del proyecto */
.badge-esmeralda {
    top: 15px;
    right: 15px;
    background-color: #27ae60;
    color: white;
}

.badge-rojo {
    top: 15px;
    right: 15px;
    background-color: #e74c3c;
    color: white;
}

/* Información del proyecto (Textos inferiores) */
.info-proyecto {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Separa uniformemente los textos */
}

.precio-proyecto {
    color: #27ae60;
    font-size: 1.4rem;
    margin: 0;
    font-weight: 800;
}

.info-proyecto h4 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.3;
}

.detalles-extra {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

/* Botón de la tarjeta */
.btn-tarjeta {
    margin-top: 10px;
    padding: 10px 0;
    background-color: transparent;
    color: #1a5c54;
    border: 2px solid #1a5c54;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.btn-tarjeta:hover {
    background-color: #1a5c54;
    color: white;
}

/* =========================================
   DISEÑO DE LA PÁGINA DE DETALLES
========================================= */

/* Divide la pantalla en 2 columnas: izquierda grande, derecha pequeña */
.layout-detalle {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: start; /* Importante para que el formulario se quede pegado */
}

/* --- Caja de Información Izquierda --- */
.caja-foto-detalle {
    position: relative;
    height: 450px;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}

.caja-foto-detalle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.caja-info-blanca {
    background-color: white;
    padding: 40px;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    margin-bottom: 40px;
}

.etiquetas-detalle {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.etiqueta-lote {
    background-color: #d1fae5;
    color: #047857;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.85rem;
}

.etiqueta-estado {
    background-color: #0d9488;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.85rem;
}

.titulo-detalle {
    font-size: 2.5rem;
    color: #0f172a;
    margin-bottom: 15px;
}

.ubicacion-detalle {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.btn-mapa-detalle {
    background-color: #ecfdf5;
    color: #047857;
    padding: 8px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
    transition: background-color 0.3s;
}

.btn-mapa-detalle:hover {
    background-color: #d1fae5;
}

.precio-detalle {
    font-size: 3rem;
    font-weight: bold;
    color: #0d9488;
    margin-bottom: 30px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 30px;
}

.cuadricula-iconos-detalle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 40px;
}

.item-icono {
    background-color: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item-icono strong {
    font-size: 1.5rem;
    color: #0f172a;
    margin-top: 5px;
}

.seccion-texto-detalle h2 {
    font-size: 1.5rem;
    color: #0f172a;
    margin-bottom: 15px;
}

.seccion-texto-detalle p {
    color: #475569;
    line-height: 1.7;
    margin-bottom: 30px;
}

.lista-caracteristicas-detalle {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.lista-caracteristicas-detalle li {
    background-color: #f8fafc;
    padding: 12px 15px;
    border-radius: 8px;
    color: #475569;
    font-weight: 500;
}

/* --- Formulario Lado Derecho (Sticky) --- */
.formulario-lateral {
    position: sticky;
    top: 20px; /* Se queda fijo al bajar */
}

.caja-formulario-blanca {
    background-color: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.caja-formulario-blanca h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.caja-formulario-blanca p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 25px;
}

.formulario-contacto-detalle label {
    display: block;
    font-weight: bold;
    color: #334155;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.formulario-contacto-detalle input, 
.formulario-contacto-detalle textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    margin-bottom: 15px;
    outline: none;
    font-family: inherit;
    transition: 0.3s;
}

.formulario-contacto-detalle input:focus, 
.formulario-contacto-detalle textarea:focus {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
}

.btn-enviar-detalle {
    width: 100%;
    background-color: #0d9488;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}

.btn-enviar-detalle:hover {
    background-color: #0f766e;
}

/* Diseño Responsive para Celulares */
@media (max-width: 900px) {
    .layout-detalle {
        grid-template-columns: 1fr; /* Pone el formulario debajo de las fotos en móviles */
    }
    .formulario-lateral {
        position: relative;
        top: 0;
    }
}

/* =========================================
   CORRECCIÓN: ETIQUETA FLOTANTE MODERNA
========================================= */
.etiqueta-flotante-moderna {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #0d9488; /* Tu verde esmeralda característico */
    color: white;
    padding: 6px 18px; /* Espacio interno para que no quede apretada */
    border-radius: 30px; /* Bordes totalmente redondeados (estilo píldora) */
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 1px; /* Separación elegante entre las letras */
    z-index: 10;
    
    /* LA MAGIA: Obliga al elemento a encogerse al tamaño del texto */
    width: max-content; 
    
    /* Sombra suave para darle volumen sobre la foto */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); 
}

/* =========================================
  /* =========================================
   DISEÑO MÓVIL UNIVERSAL (RESPONSIVE)
   Esto se activa solo en pantallas pequeñas (celulares y tablets)
========================================= */

@media (max-width: 768px) {
    
    /* --- 1. AJUSTES GENERALES Y NAVEGACIÓN --- */
    .navbar {
        flex-direction: column;
        padding: 15px;
        gap: 15px;
    }
    .menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .nav-derecha {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }

    /* --- 2. PÁGINA DE INICIO (index.html) --- */
    
    /* El fondo de la foto principal (Hero) */
    .hero {
        height: auto !important; /* Permite que crezca según el contenido */
        padding: 60px 20px !important; /* Reduce los espacios a los lados */
        flex-direction: column !important; /* Apila el texto hacia abajo */
        justify-content: center;
        text-align: center;
    }

    /* Cajas flotantes dentro del Hero (Ej: Listos para construir) */
    .hero div {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        margin-top: 30px !important;
        transform: none !important;
    }

    /* Forzar 1 sola columna en las secciones de información debajo del Hero */
    #nosotros, #servicio, .grid, [class*="grid-cols-"] {
        display: flex !important;
        flex-direction: column !important; /* Una cosa debajo de la otra */
        padding: 30px 15px !important;
        gap: 40px !important; /* Espacio limpio entre cada bloque */
    }

    /* Ajuste de textos para celulares */
    h1 { font-size: 2.2rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.8rem !important; line-height: 1.3 !important; }
    p { font-size: 1rem !important; }


    /* --- 3. CATÁLOGO DE PROPIEDADES (propiedades.html) --- */
    .layout-catalogo {
        flex-direction: column;
    }
    .panel-filtros {
        width: 100%;
        position: relative;
        top: 0;
        margin-bottom: 30px;
    }
    .rejilla-proyectos {
        grid-template-columns: 1fr; /* Muestra 1 tarjeta por fila */
    }

    /* --- 4. PÁGINA DE DETALLES (detalle.html) --- */
    .layout-detalle {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .formulario-lateral {
        position: relative;
        top: 0;
    }
    .caja-foto-detalle {
        height: 250px;
    }
    .caja-info-blanca, .caja-formulario-blanca {
        padding: 20px;
    }
    .titulo-detalle { font-size: 1.8rem; }
    .precio-detalle { font-size: 2.2rem; }
    .cuadricula-iconos-detalle, .lista-caracteristicas-detalle {
        grid-template-columns: 1fr;
    }

    /* --- 5. PIE DE PÁGINA (Footer) --- */
    .footer-cuadricula {
        grid-template-columns: 1fr; /* Todo en una columna */
        text-align: center; /* Centramos el texto para que se vea ordenado */
    }
    .footer-logo {
        justify-content: center;
    }
    .footer-redes {
        justify-content: center;
    }
    .footer-inferior {
        flex-direction: column;
        text-align: center;
    }

    

    /* =========================================
       AJUSTES FINALES: BUSCADOR Y TARJETA MÓVIL
       (No afecta la estructura que ya arreglamos)
    ========================================= */
    
    /* =========================================
       3. TARJETAS DE PROYECTOS (SOLUCIÓN DEFINITIVA)
    ========================================= */
    
    /* 1. DOMAR LA IMAGEN: Evitamos que crezca y aplaste los textos */
    .rejilla-ubicaciones .tarjeta-proyecto .imagen-contenedor {
        height: 220px !important; /* Mantiene la foto a un tamaño fijo */
        width: 100% !important;
        display: block !important;
        position: relative !important;
    }

    .rejilla-ubicaciones .tarjeta-proyecto .imagen-contenedor img {
        height: 100% !important; /* Anula el "height: auto" global que rompía el diseño */
        width: 100% !important;
        object-fit: cover !important;
    }

    /* 2. ESTRUCTURA DE LA TARJETA Y ALINEACIÓN */
    .rejilla-ubicaciones .tarjeta-proyecto {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Quita el centrado global de la tarjeta */
        height: auto !important;
    }

    .rejilla-ubicaciones .tarjeta-proyecto .info-proyecto {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Alinea todo el bloque a la izquierda */
        padding: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. RESCATE DE TEXTOS OCULTOS Y ALINEACIÓN IZQUIERDA */
    .rejilla-ubicaciones .tarjeta-proyecto .info-proyecto h3,
    .rejilla-ubicaciones .tarjeta-proyecto .info-proyecto h4,
    .rejilla-ubicaciones .tarjeta-proyecto .info-proyecto p {
        display: block !important; /* Fuerza a que aparezcan si estaban ocultos */
        text-align: left !important; /* Vence al centrado global */
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* 4. ESTILOS FINALES DE TIPOGRAFÍA */
    .rejilla-ubicaciones .tarjeta-proyecto .precio-proyecto {
        font-size: 1.5rem !important;
        color: #0d9488 !important; /* Tu verde esmeralda */
        font-weight: 800 !important;
        margin-bottom: 8px !important;
        line-height: 1.2 !important;
    }

    .rejilla-ubicaciones .tarjeta-proyecto h4 {
        font-size: 1.2rem !important;
        color: #1a1a1a !important;
        margin-bottom: 12px !important;
        line-height: 1.2 !important;
    }

    .rejilla-ubicaciones .tarjeta-proyecto .detalles-extra {
        font-size: 0.95rem !important;
        color: #6b7280 !important;
        margin-bottom: 6px !important;
    }

    /* 5. BOTÓN */
    .rejilla-ubicaciones .tarjeta-proyecto .btn-tarjeta {
        width: 100% !important;
        margin-top: 15px !important;
        padding: 12px !important;
        border-radius: 8px !important;
        text-align: center !important; /* El texto del botón sí debe ir centrado */
    }

    /* =========================================
   DISEÑO MÓVIL UNIVERSAL (RESPONSIVE)
   Esto se activa solo en pantallas pequeñas (celulares y tablets)
========================================= */

@media (max-width: 768px) {
    
    /* --- 1. AJUSTES DE NAVEGACIÓN (SOLO MÓVIL) --- */
    
    /* LA MAGIA: Ocultamos el menú de PC para que no estorbe en el celular */
    #menu-principal, #menu-toggle {
        display: none !important;
    }

    /* Barra de navegación estilo App (Logo a la izquierda, contacto a la derecha) */
    .navbar {
        display: flex !important;
        flex-direction: row !important; 
        justify-content: space-between !important; 
        align-items: center !important;
        padding: 10px 15px !important;
        background-color: white !important;
    }

    .logo-img {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .nav-derecha {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: auto !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        gap: 12px !important;
    }

    .info-asesor {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    .asesor-titulo {
        font-size: 0.55rem !important;
        letter-spacing: 0.5px !important;
    }

    .asesor-tel {
        font-size: 0.8rem !important;
    }

    .btn-contacto {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }

    /* ... DEJA EL RESTO DE TU CÓDIGO MÓVIL INTACTO DEBAJO DE ESTO (.hero, .tarjeta-proyecto, etc.) ... */
}

/* =========================================
       AJUSTE COMPACTO PARA LA TARJETA FLOTANTE (MÓVILES)
    ========================================= */
    .hero .tarjeta-flotante {
        padding: 18px !important; /* Espacio interior equilibrado */
        width: 90% !important; /* Tarjeta ligeramente más estrecha que la pantalla */
        
        /* LA MAGIA: Prohibimos que se estire y ajustamos la altura al texto */
        height: auto !important; 
        flex: none !important; 
        
        margin: 15px auto 30px auto !important; /* Espacio limpio arriba y abajo */
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    /* Achicamos la letra y quitamos espacios entre líneas */
    .hero .tarjeta-flotante p {
        font-size: 0.85rem !important; 
        margin-bottom: 4px !important; 
        line-height: 1.3 !important;
    }

    /* Ajustamos el tamaño del precio para que resalte sin ocupar mucho espacio */
    .hero .tarjeta-flotante .precio-flotante {
        font-size: 1.25rem !important;
        margin-top: 8px !important;
        margin-bottom: 0 !important;
    }






/* ... aquí arriba está todo tu código de las imágenes (línea 1646, etc.) ... */
/* } <- Aquí cierra tu último @media query */
/* =========================================
/* =========================================
   TARJETA FLOTANTE PREMIUM (Efecto Cristal)
========================================= */
.tarjeta-flotante {
    position: absolute;
    top: 20%;
    right: 5%;
    width: 320px;
    padding: 30px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    animation: levitacion 4s ease-in-out infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.tarjeta-flotante:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 45px 0 rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.25);
    animation-play-state: paused;
}

.tarjeta-flotante p {
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    margin-bottom: 12px;
    font-size: 1.05rem;
}

.tarjeta-flotante .precio-flotante {
    font-size: 1.8rem;
    font-weight: 900;
    margin-top: 20px;
    background: linear-gradient(90deg, #34d399, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}
/* Contenedor principal que da la altura para hacer scroll (4 pantallas de alto) */
#animacion-construccion {
    height: 400vh !important;
    position: relative !important;
    background-color: #0f172a !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 80px 0 !important;
    padding: 0 !important;
}

/* Caja que se queda fija (sticky) mientras haces scroll en los 400vh */
#animacion-construccion .sticky-contenedor {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 80px !important; /* Se coloca debajo de tu barra de navegación */
    height: calc(100vh - 80px) !important;
    height: calc(100dvh - 80px) !important;
    width: 100% !important;
    display: block !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Contenedor interno e imagen con ajuste responsivo perfecto */
#animacion-construccion .video-scroll-contenedor,
#imagen-secuencia {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important; /* Fuerza a cubrir toda la pantalla sin dejar espacios negros */
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================
   2. MENÚ RESPONSIVO (TABLETS Y MÓVILES)
========================================= */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: #1a1a1a;
    transition: 0.3s;
}

@media (max-width: 992px) {
    .menu-toggle { 
        display: flex; 
    }
    
    .menu, .nav-derecha {
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
        background-color: #ffffff;
        position: absolute;
        top: 100%;
        left: 0;
        padding: 20px 0;
        box-shadow: 0 10px 10px rgba(0,0,0,0.1);
    }
    
    .menu.activo, .nav-derecha.activo { 
        display: flex; 
    }
    
    .navbar { 
        flex-wrap: wrap; 
        padding: 15px 20px; 
    }
}

/* =========================================
   3. DISEÑO MÓVIL ESTILO APP (SOLUCIÓN DEFINITIVA)
========================================= */
@media (max-width: 768px) {
    .hero {
        /* Restamos los 80px de la barra de navegación para un ajuste perfecto */
        height: calc(100vh - 80px) !important;
        /* dvh asegura que se vea bien incluso si el navegador móvil muestra sus propias barras de herramientas */
        height: calc(100dvh - 80px) !important; 
        min-height: auto !important;
        /* Quitamos el padding para que la imagen llegue hasta los bordes */
        padding: 0 !important; 
    }
}

    /* Romper las cajas a 1 sola columna vertical */
    #nosotros, #servicio, .hero,
    .quienes-somos-contenedor, .cuadricula-numeros,
    .cabecera-seccion, .rejilla-soluciones, .rejilla-ubicaciones,
    .hero-contenido {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Ajustar márgenes generales para que respire */
    #inicio, #nosotros, #servicio, .ubicaciones {
        padding: 40px 20px !important;
    }

    /* Ajustes del Hero y Textos */
    .hero {
        height: auto !important;
        min-height: auto !important;
        padding: 20px !important;
    }

    .hero h1 { 
        font-size: 2.2rem !important; 
    }
    
    h1, h2, h3, p { 
        text-align: center !important; 
        word-wrap: break-word !important; 
    }

    /* La tarjeta flotante del inicio ahora baja y se centra */
    .tarjeta-flotante {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        margin-top: 30px !important;
        transform: none !important;
    }

    /* Evitar que elementos internos se salgan de la pantalla */
    .columna-texto, .columna-estadisticas, .dato,
    .tarjeta, .tarjeta-interior, .tarjeta-proyecto,
    .titular, .insignia-confianza {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }
    
    img { 
        max-width: 100% !important; 
        height: auto !important; 
    }
}

/* 5. Tarjeta flotante decorativa */
.tarjeta-flotante {
    position: absolute;
    top: 50px;
    right: 50px;
    background: #FFFFFF40; /* Blanco semi-transparente para el efecto cristal */
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* =========================================
   DISEÑO DE LA ANIMACIÓN (GLOBAL PARA ORDENADORES)
========================================= */
#animacion-construccion {
    height: 400vh; /* Obliga a la página a tener espacio para el scroll */
    position: relative;
    background-color: #0f172a;
    display: block;
    width: 100%;
}

#animacion-construccion .sticky-contenedor {
    position: sticky;
    position: -webkit-sticky;
    top: 80px; /* Debajo de la barra de navegación */
    height: calc(100vh - 80px);
    width: 100%;
    overflow: hidden;
    display: block;
}

/* EL ESLABÓN PERDIDO: Forzamos a la caja intermedia a ocupar el 100% */
.video-scroll-contenedor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Regla de la imagen nativa */
#imagen-secuencia {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    
    /* Efecto Cover: Rellena la pantalla ancha sin deformarse */
    object-fit: cover; 
    object-position: center center;
}

/* =========================================
   ESPACIADO ENTRE ANIMACIÓN Y SECCIÓN HERO
========================================= */
#animacion-construccion {
    margin-bottom: 40px !important;
}

/* =========================================
   CARRUSEL DE IMÁGENES EN TARJETAS
========================================= */
.carrusel-contenedor {
    position: relative;
    overflow: hidden; /* Magia: Oculta las fotos que están fuera de la caja */
}

.carrusel-pista {
    display: flex;
    transition: transform 0.4s ease-in-out; /* Hace que el deslizamiento sea suave */
    width: 100%;
    height: 100%;
}

.carrusel-pista img {
    min-width: 100%; /* Obliga a cada foto a medir el 100% de la caja */
    height: 100%;
    object-fit: cover;
}

/* Diseño de los botones de flechas */
.carrusel-btn {
    position: absolute;
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4); /* Fondo gris transparente */
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 50%;
    font-size: 16px;
    z-index: 10;
    transition: background-color 0.3s;
}

.carrusel-btn:hover {
    background-color: #0d9488; /* Se tiñen de tu verde esmeralda al pasar el ratón */
}

/* Ubicación exacta de cada flecha */
.btn-prev {
    left: 10px;
}

.btn-next {
    right: 10px;
}

/* =========================================
   CARRUSEL EN LA PÁGINA DE DETALLES (TAMAÑO GRANDE)
========================================= */
/* Cuando el carrusel está en la vista detallada, lo hacemos mucho más alto */
.layout-detalle .carrusel-contenedor {
    height: 450px !important; /* Altura majestuosa para computadoras */
    border-radius: 15px !important; /* Bordes suaves y modernos */
    margin-bottom: 25px !important; /* Espacio limpio antes del título */
    width: 100% !important;
}

/* Nos aseguramos de que las fotos internas llenen este nuevo tamaño grande */
.layout-detalle .carrusel-contenedor .carrusel-pista img {
    border-radius: 15px !important; 
    object-fit: cover !important;
}

/* Ajuste proporcional exclusivo para celulares en la página de detalles */
@media (max-width: 768px) {
    .layout-detalle .carrusel-contenedor {
        height: 300px !important; /* Altura ideal para la pantalla del móvil */
    }
}
/* =========================================
   ESTILOS DE TESTIMONIOS (TIPO FACEBOOK)
========================================= */
/* Fondo oficial de Facebook */
.testimonios-fb {
    background-color: #f0f2f5; 
    padding: 80px 5%;
}

.rejilla-fb {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

/* Diseño de la tarjeta FB */
.tarjeta-fb {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    padding: 15px;
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif; /* Tipografía estándar de FB */
}

/* Cabecera del post */
.cabecera-fb {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    position: relative;
}

.foto-perfil-fb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
    border: 1px solid #e4e6eb;
}

.info-autor-fb {
    display: flex;
    flex-direction: column;
}

.info-autor-fb h4 {
    margin: 0;
    font-size: 0.95rem;
    color: #050505; /* Negro Facebook */
    font-weight: 600;
}

.info-autor-fb span {
    font-size: 0.8rem;
    color: #65676b; /* Gris Facebook para fechas */
    margin-top: 2px;
}

/* Logo pequeño en la esquina */
.logo-fb-esquina {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0;
    top: 0;
}

/* Contenido del comentario */
.contenido-fb p {
    font-size: 0.95rem;
    color: #050505;
    line-height: 1.4;
    margin: 0 0 15px 0;
    text-align: left !important; /* Forza alineación izquierda */
}

/* Barra inferior de likes y comentarios */
.interaccion-fb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ced0d4; /* Línea divisoria FB */
    padding-top: 10px;
    font-size: 0.9rem;
    color: #65676b;
}

/* =========================================
   CORRECCIONES EXTRAS PARA COMENTARIOS FB
   (Añadir al final de tu archivo CSS)
========================================= */

/* 1. Corrección global para todas las burbujas */
.burbuja-comentario,
.burbuja-respuesta {
    /* Asegura que palabras muy largas (como enlaces) se rompan 
       y no se salgan de la burbuja */
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* 2. Ajustes específicos para móviles muy pequeños (menos de 480px) */
@media (max-width: 480px) {
    .comentario-fb {
        /* Reduce el espacio entre foto y burbuja en móviles */
        gap: 5px; 
    }

    .foto-comentario-fb {
        /* Reduce un poco la foto en móviles pequeños */
        width: 28px;
        height: 28px;
    }

    .burbuja-comentario {
        /* En móviles pequeños, reducimos el max-width para 
           asegurar que quepa junto a la foto sin desbordar */
        max-width: calc(100% - 35px) !important; 
    }

    /* Ajustes para las respuestas del asesor en móvil */
    .respuesta-asesor-fb {
        margin-left: 10px; /* Reduce la indentación */
        padding-left: 8px;
    }

    .foto-respuesta-asesor-fb {
        width: 20px;
        height: 20px;
    }
}
/* =========================================
   CORRECCIÓN DEFINITIVA: NAVBAR MÓVIL CON OCULTAMIENTO AL DESLIZAR
========================================= */
@media (max-width: 992px) {
    
    /* Barra de navegación principal fija con transición suave */
    .navbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 9999 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background-color: #ffffff !important;
        transition: transform 0.3s ease-in-out !important; /* Transición fluida */
    }

    /* Clase que se activará mediante JavaScript para esconder la barra */
    .navbar.nav-oculto {
        transform: translateY(-100%) !important;
    }

    /* Espacio superior exacto para que el contenido no quede oculto */
    .contenedor-principal, .layout-detalle {
        margin-top: 20px !important;
    }
}




/* =========================================
   CLASE PARA OCULTAR PROYECTOS EN LA BÚSQUEDA
========================================= */
.oculto-por-busqueda {
    display: none !important; /* Desaparece la tarjeta si no coincide con la búsqueda */
}


/* =========================================
   DISEÑO DEL FOOTER (PIE DE PÁGINA)
========================================= */
.footer-principal {
    background-color: #0f172a; /* Fondo azul/gris oscuro */
    color: #ffffff;
    padding-top: 60px;
    font-family: Arial, sans-serif;
}

.footer-contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

/* Columna 1: Marca */
.footer-marca {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.icono-marca-footer {
    width: 40px;
    height: 40px;
    background: linear-gradient(to bottom right, #10b981, #0d9488);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.titulo-marca-footer {
    font-size: 1.25rem;
    font-weight: 700;
}

.texto-gris {
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* Títulos de columnas */
.titulo-columna-footer {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 20px 0;
}

/* Columna 2: Enlaces Rápidos */
.lista-enlaces {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lista-enlaces a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.lista-enlaces a:hover {
    color: #34d399; /* Tu color esmeralda brillante */
}

/* Columna 3: Contacto */
.lista-contacto {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.lista-contacto li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.icono-esmeralda {
    color: #34d399;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-contacto-item {
    display: flex;
    flex-direction: column;
}

.texto-blanco-hover {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    margin-top: 2px;
    transition: color 0.3s ease;
}

.texto-blanco-hover:hover {
    color: #34d399;
}

/* Botón pequeñito de "Ver Mapa" */
.badge-mapa {
    font-size: 0.7rem;
    background-color: rgba(16, 185, 129, 0.1);
    color: #34d399;
    padding: 2px 6px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 4px;
    margin-left: 8px;
}

.flex-centro {
    display: flex;
    align-items: center;
}

/* Columna 4: Redes Sociales */
.contenedor-redes {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.icono-red-social {
    width: 40px;
    height: 40px;
    background-color: #1e293b;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

.icono-red-social img {
    width: 20px;
    height: 20px;
}

.icono-red-social:hover {
    background-color: #059669; /* Se tiñe de verde al pasar el mouse */
}

.footer-horarios p {
    margin: 5px 0;
    font-size: 0.9rem;
}

/* Barra Legal Inferior */
.footer-legal {
    border-top: 1px solid #1e293b;
    padding: 25px 0;
}

.legal-contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.legal-contenedor p {
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 0;
}

.enlaces-legales {
    display: flex;
    gap: 20px;
}

.enlaces-legales a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.enlaces-legales a:hover {
    color: #34d399;
}

/* =========================================
   HILO DE COMENTARIOS TIPO FACEBOOK
========================================= */
.seccion-comentarios-fb {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.comentario-fb {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.foto-comentario-fb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 2px;
}

/* Diseño de la burbuja gris típica de FB */
.burbuja-comentario {
    background-color: #f0f2f5;
    border-radius: 18px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    max-width: 90%;
}

.nombre-comentario {
    font-size: 0.85rem;
    font-weight: 700;
    color: #050505;
    margin-bottom: 2px;
}

.texto-comentario {
    font-size: 0.9rem;
    color: #050505;
    line-height: 1.3;
}

/* Hacer que el texto de comentarios parezca un enlace/botón */
.btn-toggle-comentarios {
    cursor: pointer;
    transition: text-decoration 0.2s;
}

.btn-toggle-comentarios:hover {
    text-decoration: underline; /* Lo subraya al pasar el ratón, igual que FB */
}

.rejilla-fb {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 20px !important;
    margin-top: 40px !important;
    
    /* =========================================
       LA CORRECCIÓN: Evita que las tarjetas se estiren
       ========================================= */
    align-items: start !important; 
}

/* =========================================
   ESTILOS PARA RESPUESTAS DEL ASESOR EN FB
========================================= */

/* Contenedor para alinear la burbuja original y la respuesta */
.contenedor-burbujas-fb {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espacio entre el comentario del usuario y la respuesta */
    max-width: 90%;
}

.respuesta-asesor-fb {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-left: 20px; /* Indentación para mostrar que es una respuesta */
    padding-left: 10px;
    border-left: 2px solid rgba(13, 148, 136, 0.3); /* Línea esmeralda sutil a la izquierda */
}

/* =========================================
   FOTO DE RESPUESTA DEL ASESOR (CÍRCULO PERFECTO)
========================================= */
.foto-respuesta-asesor-fb {
    width: 24px !important; /* Más pequeña que la del usuario */
    height: 24px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin-top: 2px !important;
    
    /* EL ESCUDO: Evita que el texto largo deforme o estire la imagen */
    flex-shrink: 0 !important; 
    display: block !important;
}
/* Burbuja de respuesta (Ligeramente diferente color) */
.burbuja-respuesta {
    background-color: #e7f3f3; /* Un verde agua muy tenue */
    border-radius: 18px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
}

.nombre-respuesta {
    font-size: 0.8rem;
    font-weight: 700;
    color: #050505;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.verificado-fb {
    color: #0d9488; /* Tu color esmeralda */
    font-size: 0.7rem;
}

.texto-respuesta {
    font-size: 0.85rem;
    color: #050505;
    line-height: 1.4;
}

/* Estilo para el enlace de WhatsApp */
.enlace-wp-comentario {
    color: #0d9488 !important; /* Esmeralda */
    font-weight: 700;
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

.enlace-wp-comentario:hover {
    text-decoration: underline !important;
}

/* =========================================
   BOTÓN DE RETROCESO (ESPECÍFICO PARA MÓVILES)
========================================= */

/* Por defecto (en computadoras y tablets grandes), la flecha está oculta */
.btn-volver-movil {
    display: none; 
}

/* Solo cuando la pantalla sea pequeña (Móviles: 768px o menos), mostramos la flecha */
@media (max-width: 768px) {
    .btn-volver-movil {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #0d9488; /* Tu color verde esmeralda para que resalte */
        cursor: pointer;
        margin-right: 15px; /* Da un poco de espacio entre la flecha y tu logo */
        padding: 5px;
    }
}


/* =========================================
   CORRECCIÓN DEFINITIVA: TARJETAS EN MÓVILES
========================================= */
@media (max-width: 768px) {
    /* 1. Arreglar la tarjeta para que se apile bien y no se centre a la fuerza */
    .rejilla-proyectos .tarjeta-proyecto,
    .tarjeta-proyecto {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Quita el centrado forzado */
        background-color: #ffffff !important;
        overflow: hidden !important;
        height: auto !important;
    }

    /* 2. Proteger la imagen para que el texto no se le monte encima */
    .tarjeta-proyecto .imagen-contenedor {
        width: 100% !important;
        height: 220px !important; /* Altura fija en móvil */
        display: block !important;
        position: relative !important;
    }

    .tarjeta-proyecto .imagen-contenedor img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 3. Ordenar la caja de información a la izquierda */
    .tarjeta-proyecto .info-proyecto {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        margin-top: 0 !important;
    }

    /* 4. ¡SALVAR LOS TEXTOS DEL CENTRADO GLOBAL! */
    .tarjeta-proyecto .info-proyecto h3,
    .tarjeta-proyecto .info-proyecto h4,
    .tarjeta-proyecto .info-proyecto p {
        text-align: left !important; /* Obligamos a la izquierda */
        width: 100% !important;
        justify-content: flex-start !important;
    }

    /* Ajustes exactos para que respiren los textos */
    .tarjeta-proyecto .info-proyecto h3.precio-proyecto {
        margin-top: 0 !important;
        margin-bottom: 5px !important;
        font-size: 1.5rem !important;
        color: #0d9488 !important; /* Verde esmeralda */
    }

    .tarjeta-proyecto .info-proyecto h4 {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        color: #1a1a1a !important;
    }

    /* 5. Asegurar que el botón sea fácil de tocar */
    .tarjeta-proyecto .info-proyecto a {
        width: 100% !important;
        display: block !important;
        text-decoration: none !important;
        margin-top: 10px !important;
    }

    .tarjeta-proyecto .info-proyecto .btn-tarjeta {
        width: 100% !important;
        text-align: center !important; /* El texto del botón SÍ va centrado */
        padding: 12px !important;
        background-color: #0d9488 !important;
        color: #ffffff !important;
        border-radius: 8px !important;
    }
}
/* =========================================
   PROTECCIÓN MÓVIL: TARJETAS DE FACEBOOK
========================================= */
@media (max-width: 768px) {
    
    /* 1. Forzar una sola columna para que las tarjetas no se aplasten */
    .rejilla-fb {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
    }

    /* 2. Mantener la tarjeta ocupando todo el ancho de la pantalla */
    .tarjeta-fb {
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 3. BLINDAJE DE LA CABECERA: Foto y nombre siempre uno al lado del otro */
    .tarjeta-fb .cabecera-fb {
        display: flex !important;
        flex-direction: row !important; /* Obliga a que sea una fila */
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .tarjeta-fb .foto-perfil-fb {
        margin-right: 12px !important;
        flex-shrink: 0 !important; /* Evita que la foto se encoja o deforme */
    }

    /* 4. BLINDAJE DE TEXTOS: Nombres y comentarios estrictamente a la izquierda */
    .tarjeta-fb .info-autor-fb,
    .tarjeta-fb .info-autor-fb h4,
    .tarjeta-fb .info-autor-fb span,
    .tarjeta-fb .contenido-fb p {
        text-align: left !important;
        align-items: flex-start !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* 5. BLINDAJE DE INTERACCIÓN: Likes a la izquierda, comentarios a la derecha */
    .tarjeta-fb .interaccion-fb {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
}
/* =========================================
   AJUSTES MÓVILES PARA EL FOOTER (Centrado)
========================================= */
@media (max-width: 768px) {
    /* 1. Centramos el texto general del contenedor */
    .footer-contenedor {
        text-align: center;
    }

    /* 2. Centramos la marca (logo y texto descriptivo si lo hay) */
    .footer-marca {
        justify-content: center;
        flex-direction: column;
    }

    /* 3. Centramos la lista de "Enlaces Rápidos" */
    .lista-enlaces {
        align-items: center;
    }

    /* 4. Centramos los elementos de "Contacto" (Ícono + Texto) */
    .lista-contacto li {
        justify-content: center; /* Centra el grupo horizontalmente */
    }
    
    .info-contacto-item {
        align-items: center; /* Centra el título y el valor del contacto */
    }

    /* 5. Centramos los íconos de Redes Sociales en "Síguenos" */
    .contenedor-redes {
        justify-content: center;
    }

    /* 6. Centramos la barra legal del fondo y la apilamos hacia abajo */
    .legal-contenedor {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 15px;
    }

    .enlaces-legales {
        justify-content: center;
        flex-wrap: wrap; /* Permite que los enlaces bajen si no caben */
    }
}

/* =========================================
   REEMPLAZO GENERAL Y MEJORA DEL LOGO (INMOBILIARIA)
========================================= */
.foto-respuesta-asesor-fb {
    /* 1. Reemplazamos la imagen globalmente por tu logo */
    content: url("LOGO.jpg"); 
    
    /* 2. Definimos el tamaño estándar para respuestas en Facebook */
    width: 32px; 
    height: 32px;
    
    /* 3. Convertimos la imagen en un círculo perfecto */
    border-radius: 50%; 
    
    /* 4. Aseguramos que el logo no se recorte ni se estire */
    object-fit: contain; 
    object-position: center;
    
    /* 5. Agregamos un fondo blanco y un borde sutil para que resalte */
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 2px; /* Espacio para que las letras no toquen el borde */
}

/* =========================================
   DISEÑO DE CÍRCULOS PERFECTOS (MÓVILES)
========================================= */
@media (max-width: 768px) {
    .ventana-scroll {
        /* 1. Mantenemos el ancho y alto exactamente iguales */
        width: 280px !important;
        height: 280px !important;
        
        /* 2. Centramos el elemento horizontalmente en la pantalla del celular */
        left: 50% !important;
        right: auto !important;
        margin-left: -140px !important; /* La mitad exacta de 280px para que quede en el medio */
        
        /* 3. Acomodamos el texto justo en el centro del círculo */
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px !important;
        
        /* 4. LA MAGIA: 50% de redondeo transforma el cuadrado en un círculo perfecto */
        border-radius: 50% !important;
    }
}

/* =========================================
   ANIMACIÓN FLOTANTE PARA LA TARJETA (MÓVILES)
========================================= */

/* =========================================
   ANIMACIÓN FLOTANTE PARA LA TARJETA (MÓVILES)
========================================= */

/* 1. Definimos la secuencia de movimiento (Keyframes) */
/* =========================================
   ANIMACIÓN FLOTANTE PARA LA TARJETA (MÓVILES)
========================================= */

/* 1. Definimos el movimiento (Asegúrate de que esto esté AFUERA de cualquier @media) */
/* =========================================
   ANIMACIÓN FLOTANTE (COMPATIBILIDAD MÓVIL TOTAL)
========================================= */

/* 1. Animación especial para navegadores móviles (Safari/iOS) */
@-webkit-keyframes flotar-suave {
    0% { -webkit-transform: translateY(0px); }
    50% { -webkit-transform: translateY(-12px); }
    100% { -webkit-transform: translateY(0px); }
}

/* 2. Animación estándar para los demás navegadores */
@keyframes flotar-suave {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/* 3. Aplicamos la animación asegurando que funcione en celular */
@media (max-width: 768px) {
    .tarjeta-flotante {
        position: relative !important; /* Necesario para que el transform funcione correctamente */
        
        /* Forzamos al móvil a usar su procesador gráfico para esta tarjeta */
        will-change: transform; 
        
        /* Aplicamos la animación con el prefijo móvil y el estándar */
        -webkit-animation: flotar-suave 3s ease-in-out infinite !important;
        animation: flotar-suave 3s ease-in-out infinite !important;
    }
}