:root {
    --verde-oscuro: #1b4332;
    --verde-medio: #2d6a4f;
    --verde-claro: #d8f3dc;
    --verde-fondo-top: #e8f5e9; /* Un verde ultra suave para el degradado */
    --verde-fondo-bot: #c8e6c9; 
    --negro: #081c15;
    --blanco: #ffffff;
    --fuente-moderna: 'Lexend', 'Cocomat Pro', sans-serif; /* Si tenés Cocomat local, la lee primero */
}

body {
    font-family: var(--fuente-moderna);
    margin: 0;
    padding: 20px 15px;
    /* Un fondo con degradado moderno que simula naturaleza sin molestar la lectura */
    background: linear-gradient(135deg, var(--verde-fondo-top) 0%, var(--verde-fondo-bot) 100%);
    background-attachment: fixed; /* Hace que el fondo se quede quieto al scrollear */
    color: var(--negro);
}

/* El Contenedor Principal para centrar la app en pantallas grandes */
.app-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- NUEVOS ESTILOS PARA DOMAR EL LOGO Y EL ENCABEZADO --- */

.header-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 35px;
    flex-wrap: wrap; /* Para que en celus el título baje */
    
    /* Efecto Vidrio Esmerilado (Glassmorphism) Pro */
    background: rgba(255, 255, 255, 0.6); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}

/* El estilo que arregla el logo explotado */
.brand-logo {
    width: 90px;  /* Tamaño controlado y fijo */
    height: 90px;
    
    border-radius: 50%; /* Lo hace un círculo perfecto */
    object-fit: cover; /* Evita que la imagen se estire feo */
    
    /* Quitamos el borde negro tosco por uno más sutil orgánico */
    border: 3px solid var(--verde-oscuro);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Ajuste sutil para el título grande */
.header-container h1 {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -1.5px;
    margin: 0;
}

/* Ajuste responsive para celulares */
@media (max-width: 600px) {
    .header-container {
        flex-direction: column; /* En celu, logo arriba, texto abajo */
        text-align: center;
        gap: 10px;
    }
    
    .brand-logo {
        width: 70px; /* Un toque más chico en celu */
        height: 70px;
    }
    
    .header-container h1 {
        font-size: 1.8rem;
    }
}
/* --- CONTENEDOR DEL MAPA ESTILO PREMIUM --- */

.map-container {
    background: rgba(255, 255, 255, 0.5); /* Fondo semi-transparente estilo vidrio */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    border-radius: 20px; /* Bordes bien redondeados modernos */
    border: 1px solid rgba(255, 255, 255, 0.4); /* Borde sutil brillante */
    overflow: hidden; /* Esto obliga al mapa a respetar las esquinas redondeadas */
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Sombra suave para darle profundidad */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 30px;
}

/* Efecto cuando pasás el mouse o interactuás */
.map-container:hover {
    transform: translateY(-2px); /* Se levanta un poquito */
    box-shadow: 0 15px 35px rgba(45, 106, 79, 0.1); /* Sombra un toque más verde y profunda */
}

/* El título que está arriba del mapa */
.map-container p {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--verde-oscuro);
    padding: 18px 20px;
    margin: 0;
    background: rgba(255, 255, 255, 0.3); /* Separa sutilmente el título del mapa */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Ajustes directos sobre el recuadro de Google (el iframe) */
.map-container iframe {
    border: none !important; /* Chau a cualquier borde gris feo del navegador */
    display: block;
    width: 100%;
    /* En celulares el mapa se adapta y no queda gigante incómodo */
    height: 400px; 
}

/* Ajuste específico para pantallas chicas (Celulares) */
@media (max-width: 600px) {
    .map-container iframe {
        height: 320px; /* Un toque más bajo en celu para que sea más fácil scrollear la página con el dedo */
    }
}

/* Caja de Introducción Corregida */
.intro-box {
    background-color: var(--verde-oscuro);
    color: var(--verde-claro);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(27, 67, 50, 0.2);
    
    margin-bottom: 30px; /* <--- ESTA LÍNEA SEPARA LA INTRO DEL MAPA */
}

/* --- NUEVOS AJUSTES DE ESPACIADO --- */

/* Esta caja envuelve el buscador y los botones, y ahora empuja a las tarjetas hacia abajo */
.search-filter-container {
    margin-bottom: 40px; /* Le da una separación hermosa antes de que arranquen las tarjetas */
}

/* Esto le da aire exclusivo a los botones de filtro respecto de la barra de búsqueda */
.filter-buttons {
    margin-top: 20px; 
}

/* Buscador Estilo Cápsula */
#buscador {
    width: 100%;
    padding: 16px 24px;
    box-sizing: border-box;
    border: 2px solid rgba(45, 106, 79, 0.3);
    border-radius: 30px;
    font-size: 1rem;
    font-family: var(--fuente-moderna);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: 0.3s;
}

#buscador:focus {
    border-color: var(--verde-medio);
    box-shadow: 0 4px 15px rgba(45, 106, 79, 0.2);
    outline: none;
}

/* Botones de Filtro Modernos */
.btn-filter {
    background: rgba(255, 255, 255, 0.7);
    color: var(--verde-oscuro);
    border: 1px solid rgba(27, 67, 50, 0.2);
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    font-family: var(--fuente-moderna);
    transition: all 0.3s ease;
}

.btn-filter.active, .btn-filter:hover {
    background: var(--verde-medio);
    color: white;
    transform: translateY(-2px); /* Efecto que flota al pasar el mouse */
    box-shadow: 0 4px 10px rgba(45, 106, 79, 0.3);
}

/* Tarjetas Estilo "Premium" (Adiós a los bordes negros toscos) */
.card {
    background: var(--blanco);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: none; /* Quitamos el borde duro */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); /* Sombra suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px); /* Se levanta un poquito al tocarla */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background-color: #ffffff;
    border-bottom: 1px solid #f0f0f0;
}

.org-logo {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e0e0e0;
}

.card-header h3 {
    font-weight: 700;
    font-size: 1.05rem;
}

.info-link {
    color: var(--verde-medio);
    text-decoration: none;
    font-weight: 700;
}

/* Separadores de Categoría con Onda */
.categoria-label {
    display: block;
    color: var(--verde-oscuro);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 40px 0 20px;
    letter-spacing: 0.5px;
    border-left: 5px solid var(--verde-medio);
    padding-left: 10px;
}

/* Botón Cafecito animado */
.btn-cafecito {
    background: #ff813f;
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    transition: 0.2s;
}

.btn-cafecito:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 129, 63, 0.4);
}

/* Estilos que ya tenías y se mantienen impecables */
.grid-org { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }
.img-container { width: 100%; background: #fcfcfc; }
.org-img { width: 100%; height: auto; display: block; object-fit: contain; }
.card-body { padding: 20px; flex: 1; }
.info-p { margin: 8px 0; font-size: 0.95rem; opacity: 0.9; }
.map-container { padding: 0; overflow: hidden; border-radius: 15px; border: none; box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.map-container iframe { border: none; display: block; }
.footer-box { background: var(--negro); color: white; padding: 40px 20px; margin-top: 60px; border-radius: 15px; text-align: center; }

/* --- ESTILOS PARA ICONOS Y LINKS DINÁMICOS --- */

/* Estilo general para los iconos que acompañan texto plano (como el reloj) */
.info-p i {
    color: var(--verde-medio);
    margin-right: 8px;
    width: 18px; /* Hace que todos los iconos ocupen el mismo ancho y queden alineados */
    text-align: center;
}

/* Enlace de Geolocalización (El Pin del mapa) */
.geo-link {
    color: var(--negro);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.geo-link i {
    color: #e63946; /* Color rojo clásico de marcador de mapa */
}

.geo-link:hover {
    color: var(--verde-medio);
    text-decoration: underline;
}

/* --- ENLACES LIMPIOS QUE REACCIONAN AL HOVER --- */

/* Estilo base para Instagram (ahora empieza en negro/oscuro) */
.instagram-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--negro); /* Negro base del proyecto */
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* El icono de Instagram en gris sutil para que no distraiga de entrada */
.instagram-link i {
    color: #555; 
    transition: color 0.2s;
}

/* Al pasar el cursor, se transforma y se pinta con su color original */
.instagram-link:hover {
    color: #e1306c; /* Color Insta */
    transform: translateY(-1px);
}
.instagram-link:hover i {
    color: #e1306c;
}


/* Estilo base para WhatsApp (también empieza corporativo pero sobrio) */
.whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--negro);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Icono de WhatsApp en gris sutil al inicio */
.whatsapp-link i {
    color: #555;
    transition: color 0.2s;
}

/* Al pasar el cursor, estalla el verde oficial */
.whatsapp-link:hover {
    color: #25d366; /* Verde WhatsApp */
    text-decoration: underline;
}
.whatsapp-link:hover i {
    color: #25d366;
}


/* --- ESTILOS EXCLUSIVOS PARA EL FOOTER Y SUS REDES --- */

.footer-brand {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* Contenedor que alinea los iconos al centro */
.footer-socials {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
}

/* El círculo base para cada icono */
.footer-icon {
    width: 45px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.1); /* Fondo gris traslúcido por defecto */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Animación física: se levantan un poquito al pasar el mouse */
.footer-icon:hover {
    transform: translateY(-4px);
    color: white;
}

/* Colores oficiales de cada marca al hacer Hover */
.icon-instagram:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285ae5 90%);
    box-shadow: 0 4px 15px rgba(214, 36, 159, 0.5);
}

.icon-whatsapp:hover {
    background-color: #25d366;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.5);
}

.icon-tiktok:hover {
    background-color: #000000;
    /* Efecto de glitch clásico de TikTok con sombras de color */
    box-shadow: -2px -2px 0 #00f2fe, 2px 2px 0 #fe0979, 0 4px 15px rgba(0,0,0,0.4); 
}

.icon-facebook:hover {
    background-color: #1877f2;
    box-shadow: 0 4px 15px rgba(24, 119, 242, 0.5);
}