/* HEADERR */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: #f4f7f6;
        }
        #baguetteBox-overlay {
            background-color: rgba(0,0,0,0.85);
        }
        .nav-link-desktop {
            position: relative;
            color: #4B5563; /* text-gray-600 */
            text-decoration: none;
            font-weight: 500;
            padding: 0.25rem 0.5rem; /* py-1 px-2 */
            transition: color 0.2s ease-in-out;
            display: inline-flex; /* Añadido para alinear el ícono chevron */
            align-items: center;
            /* ¡NUEVO! Añadido para que el <button> se vea igual que el <a> */
            background-color: transparent;
            border: none;
            cursor: pointer;
            font-family: inherit; /* Hereda la fuente del body */
            font-size: inherit; /* Hereda el tamaño de fuente */
        }
        .nav-link-desktop::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background-color: #3B82F6; /* blue-500 */
            transition: width 0.3s ease;
        }
        .nav-link-desktop:hover {
            color: #1D4ED8; /* blue-700 */
        }
        .nav-link-desktop:hover::after,
        .nav-link-desktop.active::after {
            width: 50%;
        }
        .nav-link-desktop.active {
            color: #2563EB; /* blue-600 */
            font-weight: 600;
        }
        .nav-link-mobile {
            display: flex;
            align-items: center;
            padding: 0.75rem; /* p-3 */
            border-radius: 0.375rem; /* rounded-md */
            transition: all 0.2s ease-in-out;
            color: #374151; /* text-gray-700 */
            border-left: 4px solid transparent;
            width: 100%; /* Asegura que ocupe todo el ancho */
        }
        .nav-link-mobile:hover {
            background-color: #F3F4F6; /* bg-gray-100 */
        }
        .nav-link-mobile.active {
            background-color: #EFF6FF; /* bg-blue-50 */
            color: #2563EB; /* text-blue-600 */
            font-weight: 500;
            border-left-color: #3B82F6; /* blue-500 */
        }

        /* --- ESTILOS PARA ÍCONOS SOCIALES --- */
        .social-icon-btn {
            width: 40px; /* w-10 */
            height: 40px; /* h-10 */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 9999px; /* rounded-full */
            color: white; /* Color del SVG */
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); /* shadow-md */
        }
        .social-icon-btn:hover {
            transform: translateY(-2px); /* Pequeño lift al hover */
            box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06); /* shadow-lg */
        }
        .social-icon-facebook {
            background-color: #1877F2; /* Facebook Blue */
        }
        .social-icon-instagram {
            /* Instagram Gradient */
            background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
        }
        .social-icon-tiktok {
            background-color: #000; /* TikTok Black */
        }
        
        
        
        
        
        
/* FOTTERRR */

        /* Botón "Volver Arriba"  */
        .back-to-top-btn {
            position: fixed;
            bottom: 2rem; /* 32px */
            right: 2rem; /* 32px */
            background-color: #0ea5e9; /* Azul similar a la captura */
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 50;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
            transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
        }
        .back-to-top-btn.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .back-to-top-btn:hover {
            background-color: #0c87b8; /* Azul un poco más oscuro */
        }
 
 
 
 
 
/* PAGINA DE INICIO*/

.hero-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Detrás del contenido */
}
.hero-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    /* Animación Ken Burns (zoom) + Fade (fundido) */
    animation-name: kenBurnsZoom, fadeInOut;
    animation-duration: 20s, 14s; /* Duración total de cada slide */
    animation-iteration-count: infinite, infinite;
    animation-timing-function: linear, ease-in-out;
}

.hero-slide:nth-child(1) { animation-delay: 0s, 0s; } /* Inicia de inmediato */
.hero-slide:nth-child(2) { animation-delay: 0s, 5s; } /* Empieza fade-in a los 5s */
.hero-slide:nth-child(3) { animation-delay: 0s, 10s; } /* Empieza fade-in a los 10s (Ajustado para 3 imágenes) */

@keyframes kenBurnsZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); } 
}
@keyframes fadeInOut {
    0%   { opacity: 0; }
    10%  { opacity: 1; } /* Fade-in */
    40%  { opacity: 1; } /* Se mantiene visible */
    50%  { opacity: 0; } /* Fade-out */
    100% { opacity: 0; } /* Permanece oculto */
}
.hero-content-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 0; /* Ajustado para que los botones con px-4 funcionen */
    /* Un gradiente más oscuro, como en tu imagen de referencia */
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 100%);
}

/* --- Estilos para el Carrusel Infinito (Marquesina) --- */
.infinite-scroller {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    /* Máscara para un fade-out suave en los bordes */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.scroller-track {
    display: flex;
    width: max-content;
    white-space: nowrap;
    /* === CAMBIO DE VELOCIDAD AQUÍ === */
    animation: scroll 30s linear infinite; /* <-- Ajustado de 40s a 30s (más rápido) */
    animation-delay: -15s; /* <-- Ajustado de -20s a -15s (mitad de la duración) */
}
/* Pausar en hover */
.scroller-track:hover {
    animation-play-state: paused;
}
.scroller-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem; /* py-3 px-5 */
    margin: 0 0.625rem; /* mx-2.5 */
    background-color: #EFF6FF; /* bg-blue-50 */
    border: 1px solid #DBEAFE; /* border border-blue-100 */
    border-radius: 9999px; /* rounded-full */
    font-weight: 500; /* font-medium */
    color: #1E3A8A; /* text-blue-900 */
    cursor: default; /* El cursor normal, no es un link */
    transition: all 0.2s ease-in-out;
}
.scroller-item:hover {
    background-color: #DBEAFE; /* hover:bg-blue-100 */
    transform: scale(1.05);
}
.scroller-item i {
    margin-right: 0.5rem; /* mr-2 */
    color: #2563EB; /* text-blue-600 */
    width: 20px; /* w-5 */
    height: 20px; /* h-5 */
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Movemos el 50% de la pista (que es la longitud del contenido original) */
        transform: translateX(-50%);
    }
}







/* PAGINA DE GUIAAA */

.hero-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Detrás del contenido */
}
.hero-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation-name: kenBurnsZoom, fadeInOut;
    animation-duration: 20s, 14s;
    animation-iteration-count: infinite, infinite;
    animation-timing-function: linear;
}
.hero-slide:first-child { animation-delay: 0s, 7s; }
.hero-slide:last-child { animation-delay: 0s, 0s; }
@keyframes kenBurnsZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); } 
}
@keyframes fadeInOut {
    0% { opacity: 0; }
    10% { opacity: 1; } 
    40% { opacity: 1; } 
    50% { opacity: 0; } 
    100% { opacity: 0; } 
}
.hero-content-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4));
}
select.custom-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.5rem; /* pr-10 */
}
.custom-select-wrapper {
    position: relative;
    width: 100%;
}
.custom-select-arrow {
    position: absolute;
    right: 0.75rem; /* right-3 */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Para que se pueda clickear "a través" */
    color: #9CA3AF; /* text-gray-400 */
}
/*
========================================
--- COMPONENTE: Panel de Filtros Móvil (guia.php) ---
========================================
*/
#filter-overlay {
    transition: opacity 0.3s ease-in-out;
}
#filter-overlay.is-open {
    display: block;
    opacity: 1;
}
#filter-panel {
    transition: transform 0.3s ease-in-out;
}
#filter-panel.is-open {
    transform: translateY(0);
}

/* Evita el scroll del body cuando el panel está abierto */
body.filter-panel-open {
    overflow: hidden;
}

/*
En pantallas de escritorio (md: 768px y más),
ocultamos el botón de filtros y el panel/overlay.
El HTML de `guia.php` ya oculta/muestra los
filtros de escritorio con `hidden md:block`.
*/
@media (min-width: 768px) {
    #open-filter-modal,
    #filter-overlay,
    #filter-panel {
        display: none !important;
    }

    body.filter-panel-open {
        overflow: auto;
    }
}

/*
========================================
--- ANIMACIÓN: Fade-in para Tarjetas (guia.php) ---
========================================
*/
@keyframes fadeIn {
    from {
        opacity: 0;
        /* Opcional: un leve movimiento */
        transform: translateY(10px); 
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Esta es la clase que aplicaremos con JS */
.business-card-new {
    /* Duración y tipo de animación */
    animation: fadeIn 0.5s ease-out forwards;
}


/*




/*
================================================
--- COMPONENTE: Panel de Filtros Alquileres (alquileres.php) ---
================================================
*/
#alquileres-filter-overlay {
    transition: opacity 0.3s ease-in-out;
}
#alquileres-filter-overlay.is-open {
    display: block;
    opacity: 1;
}
#alquileres-filter-panel {
    transition: transform 0.3s ease-in-out;
}
#alquileres-filter-panel.is-open {
    transform: translateY(0);
}

/* * En pantallas de escritorio (md:), ocultamos el botón 
 * y el panel de alquileres. El HTML ya se encarga de 
 * mostrar los filtros de escritorio.
 */
@media (min-width: 768px) {
    #open-alquileres-modal,
    #alquileres-filter-overlay,
    #alquileres-filter-panel {
        display: none !important;
    }
}


/* --- Estilos Swiper (alquiler_detalle.php) --- */
.swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    background-color: #ffffff !important; /* Blanco puro */
    opacity: 0.7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6); /* Sombra para contraste */
    transition: all 0.3s ease;
}
.swiper-pagination-bullet-active {
    background-color: #2563eb !important; /* Azul activo */
    opacity: 1 !important;
    transform: scale(1.3);
}
/* Ajustamos la posición de los puntos para que no se superpongan con el texto nuevo */
.swiper-pagination {
    bottom: 10px !important;
    text-align: center; /* Centrados */
    width: 100%;
}

/*
========================================
--- Arreglo de Colisión (alquiler_detalle) ---
========================================
Ocultar "Volver Arriba" SÓLO en móvil en la página 
de detalle de alquiler, porque choca con la barra de contacto fija.
*/
@media (max-width: 1023px) { /* 'lg' breakpoint (1024px) */
    body.page-alquiler_detalle #back-to-top {
        display: none !important;
    }
}



/*
========================================
--- Página: Farmacias (farmacias.php) ---
========================================
*/
    .tab-button {
        position: relative;
        color: #64748b;
        background: transparent;
    }
    .tab-button.active {
        color: #0f172a;
        background-color: #ffffff;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
    .tab-content.active { display: block; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }


/*
========================================
--- Componente: Hero Subtítulo (Contacto) ---
========================================
*/
.hero-subtitle-bg {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo negro al 50% */
    padding: 0.75rem 1.25rem; /* 12px 20px */
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px); /* Efecto "glass" */
    display: inline-block; /* Evita que ocupe todo el ancho */
}