/* --- 1. RESET UNIVERSAL (Mata los espacios vacíos) --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Vital para que los paddings no rompan el ancho */
}

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* Evita scroll horizontal indeseado */
}

body {
    font-family: 'Outfit', sans-serif; /* Tu fuente oficial */
    line-height: 1.6;
    color: #333;
}

/* --- 2. CLASES DE UTILIDAD --- */

/* Contenedor Fluido: Ocupa todo el ancho pero deja aire a los lados */
.contenedor {
    width: 95%; /* Ocupa el 95% de la pantalla */
    max-width: 100%; /* Elimina el límite de 1200px */
    margin: 0 auto; /* Centrado */
    padding: 0 20px; /* Un poco de aire interno extra */
}

/* Si quieres secciones con ancho limitado (para lectura), usa esta clase extra */
.contenedor-lectura {
    max-width: 1200px;
    margin: 0 auto;
}

/* Botones Generales */
.boton {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* =========================================
   BANNER COOKIES - TECH STYLE
   ========================================= */
.cookie-tech-container {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 400px;
    max-width: 90%;
    
    /* Estilo Glassmorphism Tech */
    background-color: rgba(21, 35, 58, 0.95); /* Azul Navy con transparencia */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(24, 116, 149, 0.3); /* Borde sutil Cyan */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    
    border-radius: 12px;
    padding: 1.5rem;
    z-index: 9999;
    
    /* Animación de entrada */
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    visibility: hidden;
    font-family: 'Outfit', sans-serif;
}

/* Clase para mostrar el banner */
.cookie-tech-container.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}

.cookie-tech-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 1.2rem;
}

.cookie-icon-box {
    font-size: 1.5rem;
    color: #187495; /* Cyan corporativo */
    background: rgba(24, 116, 149, 0.1);
    padding: 10px;
    border-radius: 8px;
}

.cookie-info {
    flex: 1;
}

.cookie-title {
    margin: 0 0 5px 0;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.cookie-desc {
    margin: 0;
    color: #cbd5e1; /* Gris claro */
    font-size: 0.85rem;
    line-height: 1.5;
}

.cookie-tech-actions {
    display: flex;
    justify-content: flex-end; /* Botones a la derecha */
    align-items: center;
    gap: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
}

.cookie-link {
    color: #94a3b8;
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.3s;
}

.cookie-link:hover {
    color: #187495;
    text-decoration: underline;
}

.btn-tech-accept {
    background-color: #187495;
    color: #ffffff;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(24, 116, 149, 0.3);
}

.btn-tech-accept:hover {
    background-color: #135d78;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .cookie-tech-container {
        left: 50%;
        bottom: 20px;
        transform: translateX(-50%) translateY(20px);
        width: 92%;
    }
    
    .cookie-tech-container.show {
        transform: translateX(-50%) translateY(0);
    }
}


/* --- CONTROL DE LOGO BLOCATOR --- */

/* Regla general para que la imagen gigante nunca rompa el contenedor */
.logo-b-locator {
    max-width: 100%; /* Nunca será más ancha que donde esté metida */
    height: auto;    /* Mantiene la proporción correcta */
    display: block;  /* Evita espacios raros debajo */
}

/* TAMAÑOS ESPECÍFICOS (¡Aquí es donde ajustas!) */

/* Tamaño para el HEADER (Menu de navegación) */
.logo-header {
    width: 180px; /* Ajusta este número si lo quieres más grande o chico */
}

/* Tamaño para el FOOTER (Pie de página) */
.logo-footer {
    width: 220px; /* Usualmente en el footer es un poco más grande */
}

/* Tamaño para el LOGIN CRM */
.logo-login {
    width: 280px; /* El más grande y centrado */
    margin: 0 auto 20px auto; /* Centrado horizontal */
}

/* AJUSTE PARA CELULARES (Opcional) */
@media (max-width: 768px) {
     .logo-header { width: 140px; }
     .logo-footer { width: 180px; }
     .logo-login  { width: 220px; }
}