:root { --vermelho-marca: #cc0000; --preto-marca: #111111; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; }
body { background-color: #f4f4f4; color: #333; }
header { background-color: var(--preto-marca); color: white; padding: 15px 5%; display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 24px; font-weight: 900; font-style: italic; }
.logo span { color: var(--vermelho-marca); }
nav ul { list-style: none; display: flex; gap: 20px; }
nav a { color: white; text-decoration: none; font-weight: 700; text-transform: uppercase; }
nav a:hover { color: var(--vermelho-marca); }
.swiper { width: 100%; height: 60vh; background: #000; }
.swiper-slide { text-align: center; background: #fff; display: flex; justify-content: center; align-items: center; color: white; font-size: 2rem; font-weight: bold; }
.container { padding: 60px 5%; max-width: 1200px; margin: auto; }
footer { background: var(--preto-marca); color: white; text-align: center; padding: 40px 5%; }
.contact-info { display: flex; justify-content: space-around; margin-bottom: 20px; flex-wrap: wrap; }
/* ========================================================================= */
    /* CSS DO MAPA DO BRASIL E PINOS LOGÍSTICOS                                  */
    /* ========================================================================= */
    .mapa-container {
        position: relative;
        max-width: 600px;
        width: 100%;
        aspect-ratio: 1 / 1; /* Mantém a caixa sempre quadrada, impedindo amontoamento */
        min-height: 400px;   /* Altura de segurança */
        margin: 40px auto 0;
    }
    .mapa-bg {
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0.15; /* Deixa o mapa suave no fundo */
        position: absolute;
        top: 0;
        left: 0;
    }
    
    /* O Marcador de Mapa (Pino) */
    .pin-estado {
        position: absolute;
        transform: translate(-50%, -100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        transition: transform 0.3s, z-index 0.3s;
        z-index: 5;
    }
    .pin-estado:hover {
        transform: translate(-50%, -105%) scale(1.15);
        z-index: 10;
    }
    .pin-gota {
        width: 45px;
        height: 45px;
        background: #cc0000;
        border-radius: 50% 50% 50% 0;
        transform: rotate(-45deg);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
        border: 2px solid white;
    }
    
    /* A Logo dentro do pino */
    .pin-gota img {
        width: 30px;
        height: 30px;
        transform: rotate(45deg); /* Desfaz a rotação da gota */
        border-radius: 50%;
        object-fit: cover;
        background: white;
        padding: 3px;
    }
    
    /* Texto abaixo do pino */
    .pin-label {
        background: #111;
        color: white;
        padding: 4px 10px;
        font-size: 0.8rem;
        font-weight: 900;
        border-radius: 15px;
        margin-top: 5px;
        white-space: nowrap;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    /* Destaque para a Sede */
    .pin-sede .pin-gota { background: #111; border-color: #cc0000; }
    .pin-sede .pin-label { background: #cc0000; }