body {
    background-color: #f8fafc;
    color: #1e293b;
    overflow-x: hidden;
}

input[type=range].solar-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    background: linear-gradient(90deg, #16a34a 0%, #ffb703 100%);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}

input[type=range].solar-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0a192f;
    border: 4px solid #ffb703;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

input[type=range].solar-slider::-webkit-slider-thumb:hover {
    transform: scale(1.12);
    box-shadow: 0 0 15px rgba(255, 183, 3, 0.8);
}

input[type=range].solar-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0a192f;
    border: 4px solid #ffb703;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.15s ease;
}

#usinas-map {
    height: 560px;
    width: 100%;
    position: relative;
    z-index: 10;
    background-color: #050b18;
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.8), transparent 60%),
        radial-gradient(1px 1px at 35% 72%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(1.5px 1.5px at 58% 28%, rgba(255,255,255,0.7), transparent 60%),
        radial-gradient(1px 1px at 78% 62%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(1px 1px at 90% 12%, rgba(255,255,255,0.8), transparent 60%);
}

.fs-pin {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}

.fs-pin svg {
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
    transform-origin: 50% 100%;
    transition: transform 0.15s ease;
}

.fs-pin:hover svg {
    transform: scale(1.18);
}

#usinas-map .maplibregl-popup-content {
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
    font-family: 'Inter', sans-serif;
}

@media (max-width: 1023px) {
    #usinas-map {
        height: 430px;
    }
}

#usinas-map {
    background-color: #030712;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.18) 0%, rgba(3, 7, 18, 0) 55%),
        radial-gradient(1px 1px at 8% 14%, rgba(255,255,255,0.9), transparent 60%),
        radial-gradient(1px 1px at 22% 82%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(1.5px 1.5px at 31% 36%, rgba(255,255,255,0.8), transparent 60%),
        radial-gradient(1px 1px at 47% 9%, rgba(255,255,255,0.7), transparent 60%),
        radial-gradient(1px 1px at 63% 91%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(1.5px 1.5px at 71% 22%, rgba(255,255,255,0.9), transparent 60%),
        radial-gradient(1px 1px at 84% 67%, rgba(255,255,255,0.7), transparent 60%),
        radial-gradient(1px 1px at 93% 38%, rgba(255,255,255,0.8), transparent 60%),
        radial-gradient(1px 1px at 4% 58%, rgba(255,255,255,0.6), transparent 60%),
        radial-gradient(1px 1px at 56% 64%, rgba(255,255,255,0.5), transparent 60%);
}

.fs-flag { display: inline-block; vertical-align: -1px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(10, 25, 47, 0.15); flex-shrink: 0; }
.map-sidebar-list .fs-flag { margin-right: 4px; }

.sidebar-item-active { background: #fff7e0; box-shadow: inset 3px 0 0 #ffb703; }
.sidebar-item-active > div > span:first-child { background: #ffb703 !important; }

/* Popup da usina */
#usinas-map .fs-popup .maplibregl-popup-content {
    padding: 0;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45);
    font-family: 'Inter', sans-serif;
}
#usinas-map .fs-popup .maplibregl-popup-close-button {
    position: absolute; border: 0; cursor: pointer;
    top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 999px;
    background: rgba(10, 25, 47, 0.75); color: #fff; font-size: 16px; line-height: 24px; z-index: 2;
}
.fs-pop { width: 260px; }
.fs-pop-img { height: 128px; background: #0a192f; }
.fs-pop-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-pop-body { padding: 12px 14px 14px; border-top: 3px solid #ffb703; }
.fs-pop-it .fs-pop-body { border-top-color: #22c55e; }
.fs-pop-badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #0369a1; background: #e0f2fe; padding: 2px 8px; border-radius: 999px; }
.fs-pop-title { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; font-size: 15px; line-height: 1.25; color: #0a192f; margin: 7px 0 3px; }
.fs-pop-local { font-size: 12px; color: #475569; margin: 0 0 12px; }
.fs-pop-local i { color: #dc2626; margin-right: 3px; }
.fs-pop-actions { display: flex; gap: 6px; }
.fs-pop-btn { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; padding: 8px 10px; border-radius: 9px; border: 1px solid #e2e8f0; background: #f8fafc; color: #0a192f; cursor: pointer; }
.fs-pop-btn i { flex-shrink: 0; }
/* Botão "Aproximar" compacto (só o ícone) quando divide espaço com "Ver fotos" */
.fs-pop-btn-icon { flex: 0 0 36px; padding: 8px 0; font-size: 13px; }
/* Selo Fotovoltaika sobre a foto do popup (usinas italianas) */
.fs-pop-img { position: relative; }
.fs-pop-seal { position: absolute; left: 10px; bottom: 8px; }
.fs-pop-seal .partner-seal img { height: 22px; }
.fs-pop-btn:hover { background: #f1f5f9; }
.fs-pop-btn-main { background: #0a192f; border-color: #0a192f; color: #ffb703; }
.fs-pop-btn-main:hover { background: #13284a; }

/* Pinos das usinas (com o logo) */
#usinas-map { --pin-w: 38px; }
.fs-marker { line-height: 0; }
.fs-marker.is-selected { z-index: 5; }
.fs-pin2 {
    position: relative; display: block;
    width: var(--pin-w); height: calc(var(--pin-w) * 1.25);
    padding: 0; border: 0; background: none; cursor: pointer;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
    transform-origin: 50% 100%;
    transition: transform 0.18s ease, width 0.2s ease, height 0.2s ease;
}
.fs-pin2 svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.fs-pin2-logo {
    position: absolute; left: 13%; top: 7.2%; width: 74%; aspect-ratio: 1 / 1;
    border-radius: 999px; background: #ffffff; padding: 5%; box-sizing: border-box;
}
.fs-pin2-logo img { width: 100%; height: 100%; display: block; border-radius: 999px; }
.fs-pin2:hover { transform: scale(1.12); }
.fs-pin2-pulse {
    position: absolute; left: 50%; bottom: -5px; width: 22px; height: 10px; margin-left: -11px;
    border-radius: 50%; border: 2px solid rgba(255, 223, 0, 0.9);
    animation: fs-pin-pulse 2.2s ease-out infinite; pointer-events: none;
}
.fs-marker:not(.is-selected) .fs-pin2-pulse { opacity: 0.0; animation: none; }
@keyframes fs-pin-pulse {
    0% { transform: scale(0.4); opacity: 0.9; }
    100% { transform: scale(2.2); opacity: 0; }
}
.fs-marker.is-selected .fs-pin2 { transform: scale(1.28); filter: drop-shadow(0 0 10px rgba(255, 223, 0, 0.75)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
.fs-pin2:focus-visible { outline: 2px solid #ffdf00; outline-offset: 2px; border-radius: 8px; }

/* Etiqueta ao passar o mouse */
#usinas-map .fs-tooltip .maplibregl-popup-content {
    padding: 6px 10px; border-radius: 999px; background: rgba(10, 25, 47, 0.92); color: #fff;
    font: 700 12px 'Inter', sans-serif; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); pointer-events: none;
}
#usinas-map .fs-tooltip .maplibregl-popup-tip { display: none; }
.fs-tooltip-inner { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Controles do mapa */
#usinas-map .maplibregl-ctrl-group { border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
#usinas-map .maplibregl-ctrl-attrib { font-size: 10px; }

/* Legenda */
.map-legend {
    position: absolute; left: 12px; bottom: 12px; z-index: 20;
    display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center;
    padding: 7px 12px; border-radius: 12px;
    background: rgba(10, 25, 47, 0.82); backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0; font: 600 11px 'Inter', sans-serif; pointer-events: none;
}
.map-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.map-legend-dot { width: 9px; height: 9px; border-radius: 999px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15), 0 0 10px currentColor; }
.map-legend-line { width: 18px; border-top: 2px dashed #ffdf00; }
@media (max-width: 480px) { .map-legend-arc { display: none; } }

/* Carregamento */
#map-loading { transition: opacity 0.6s ease; }
#map-loading.map-loading-out { opacity: 0; pointer-events: none; }
.map-spinner {
    width: 42px; height: 42px; border-radius: 999px;
    border: 3px solid rgba(255, 183, 3, 0.2); border-top-color: #ffb703;
    animation: map-spin 0.9s linear infinite;
}
@keyframes map-spin { to { transform: rotate(360deg); } }

.map-sidebar-container {
    display: flex;
    flex-direction: column;
    height: 560px;
    overflow: hidden;
    background-color: #ffffff;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
}

@media (max-width: 1023px) {
    .map-sidebar-container {
        height: 380px;
    }
}

.map-sidebar-header {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background-color: #0a192f;
    color: #ffffff;
    padding: 14px 16px;
    border-bottom: 2px solid #ffb703;
}

.map-sidebar-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-top: 6px;
    padding-bottom: 6px;
}

@keyframes pulse-ring {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.whatsapp-pulse {
    animation: pulse-ring 2s infinite;
}

.hero-pattern {
    background-color: #0a192f;
    background-image: 
        radial-gradient(at 15% 20%, rgba(22, 163, 74, 0.18) 0px, transparent 50%),
        radial-gradient(at 85% 30%, rgba(255, 183, 3, 0.18) 0px, transparent 55%),
        linear-gradient(rgba(10, 25, 47, 0.92), rgba(6, 16, 32, 0.96)),
        url('https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
}

.lang-switch {
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #cbd5e1;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.lang-btn:hover { color: #ffffff; }
.lang-btn[aria-pressed="true"] {
    background: #ffb703;
    color: #0a192f;
}
.lang-btn:focus-visible {
    outline: 2px solid #ffdf00;
    outline-offset: 2px;
}
.lang-flag {
    display: inline-flex;
    width: 20px;
    height: 14px;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.lang-flag svg { display: block; width: 100%; height: 100%; }
.lang-toggle-mobile {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 183, 3, 0.6);
    color: #ffb703;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}
@media (min-width: 640px) { .lang-toggle-mobile { display: none; } }
.lang-toggle-mobile:focus-visible {
    outline: 2px solid #ffdf00;
    outline-offset: 2px;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ===== Selo Fotovoltaika (usinas italianas) ===== */
/* Só a logo, sem fundo; a sombra garante leitura sobre qualquer foto */
.partner-seal {
    display: inline-block;
    line-height: 0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
.partner-seal img {
    display: block;
    height: 26px;
    width: auto;
}
.partner-seal--lg img { height: 38px; }