/* Raio de atendimento (partials/shared/coverage-area.ejs) */
 .sobre {
     background-image: url("/uploads/aboutPreview/regiao.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     color: white;
     padding: 70px 20px;
     min-height: 650px;
     display: flex;
     flex-wrap: wrap;
     gap: 50px;
     align-items: center;
     justify-content: center;
 }

 .img-area-aten {
     position: relative;
     width: 620px;
     aspect-ratio: 1000 / 881;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .img-area-aten img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 .sobre div {
     max-width: 500px;
 }

 /* O mapa não segue o limite de 500px do texto */
 .sobre .img-area-aten {
     max-width: 100%;
 }

 .sobre .cm-note {
     border-left: 4px solid #ffd500;
     padding-left: 12px;
 }

 .sobre .cm-note strong {
     color: #ffd500;
 }

 .sobre button {
     background: #ffd500;
     border: none;
     padding: 12px 20px;
     font-weight: bold;
     border-radius: 5px;
     cursor: pointer;
     margin-top: 15px;
 }

 /* Mapa interativo (coverage-map-svg.ejs, gerado por scripts/build-coverage-map.mjs) */
 .coverage-map {
     width: 100%;
     height: 100%;
     overflow: visible;
     stroke-linejoin: round;
 }

 .coverage-map path {
     transition: fill 0.15s ease;
     cursor: pointer;
 }

 /* O Chrome foca o <svg> ao clicar em municípios não focáveis e desenha um contorno retangular */
 .coverage-map:focus,
 .coverage-map path:focus {
     outline: none;
 }

 .cm-outside {
     fill: #b3b3b3;
     stroke: #5b6670;
     stroke-width: 1;
 }

 /* Fora do raio: apagado; volta ao normal no hover */
 .cm-outside path {
     opacity: 0.40;
     transition: fill 0.15s ease, opacity 0.15s ease;
 }

 .cm-outside path:hover,
 .cm-outside path.is-active {
     opacity: 1;
 }

 .cm-outside path:hover,
 .cm-outside path.is-active {
     fill: #8f979e;
 }

 .cm-state-label {
     fill: rgba(255, 255, 255, 0.85);
     font-size: 52px;
     font-weight: 700;
     pointer-events: none;
 }

 /* Sombra escura + contorno amarelo da área atendida (cópias via <use>) */
 .cm-shadow,
 .cm-outline {
     pointer-events: none;
 }

 .cm-shadow {
     fill: #0d1b24;
     stroke: #0d1b24;
     stroke-width: 6;
 }

 .cm-outline {
     fill: #fff;
     stroke: #f5a800;
     stroke-width: 9;
 }

 .cm-served {
     fill: #fff;
     stroke: #0d1b24;
     stroke-width: 1.2;
 }

 .cm-served path:hover,
 .cm-served path:focus-visible,
 .cm-served path.is-active {
     fill: #ffd500;
 }

 /* Natal (sede) sempre marcado; o seletor com > não atinge as cópias via <use> do contorno/sombra */
 .cm-served > g > path.is-home {
     fill: #ffd500;
 }

 .cm-natal {
     pointer-events: none;
 }

 /* Cone de "lupa" ligando o ponto de Natal ao ícone (efeito de ampliação) */
 .cm-logo-cone {
     fill: rgba(255, 213, 0, 0.22);
     stroke: #ffd500;
     stroke-width: 1.5;
     stroke-linejoin: round;
 }

 .cm-logo circle {
     fill: #fff;
     stroke: #ffd500;
     stroke-width: 2;
     filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
 }

 .cm-natal-dot {
     fill: #0d1b24;
     stroke: #fff;
     stroke-width: 3;
 }

 .cm-natal-halo {
     fill: #ffd500;
     stroke: #0d1b24;
     stroke-width: 2;
 }

 /* Duas ondas defasadas para o pulso ficar contínuo e mais visível */
 .cm-natal-pulse {
     fill: rgba(255, 213, 0, 0.55);
     stroke: #ffd500;
     stroke-width: 3;
     transform-box: fill-box;
     transform-origin: center;
     animation: cm-pulse 2s ease-out infinite;
 }

 .cm-natal-pulse--late {
     animation-delay: 1s;
 }

 /* Entrada da "lupa" ao aparecer na tela: o ícone cresce a partir do ponto
    (.cm-ready/.cm-revealed são adicionadas pelo coverageMap.js) */
 .cm-ready:not(.cm-revealed) .cm-logo-zoom,
 .cm-ready:not(.cm-revealed) .cm-logo-cone {
     opacity: 0;
 }

 .cm-revealed .cm-logo-zoom {
     animation: cm-zoom-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
 }

 .cm-revealed .cm-logo-cone {
     animation: cm-fade-in 0.5s ease 0.35s both;
 }

 @keyframes cm-zoom-in {
     from { transform: translate(var(--cm-from-x), var(--cm-from-y)) scale(0.15); opacity: 0; }
     to { transform: none; opacity: 1; }
 }

 @keyframes cm-fade-in {
     from { opacity: 0; }
     to { opacity: 1; }
 }

 @keyframes cm-pulse {
     from { transform: scale(1); opacity: 0.95; }
     to { transform: scale(3.6); opacity: 0; }
 }

 @media (prefers-reduced-motion: reduce) {
     .cm-natal-pulse { animation: none; }
     .cm-revealed .cm-logo-zoom,
     .cm-revealed .cm-logo-cone { animation: none; }
 }

 .cm-tooltip {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 5;
     max-width: none !important;
     padding: 8px 12px;
     border-radius: 6px;
     background: #0d1b24;
     color: #fff;
     font-size: 14px;
     line-height: 1.3;
     white-space: nowrap;
     pointer-events: none;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
     transform: translate(-50%, calc(-100% - 14px));
 }

 .cm-tooltip strong {
     display: block;
     font-size: 15px;
 }

 .cm-tooltip span {
     display: block;
     color: #ffd500;
     font-size: 12px;
     font-weight: 600;
 }

 .cm-tooltip[hidden] {
     display: none;
 }

 /* Passeio automático (coverageMap.js): tooltip desliza e a cor troca em fade */
 .cm-touring .cm-tooltip {
     transition: left 0.7s cubic-bezier(0.65, 0, 0.35, 1), top 0.7s cubic-bezier(0.65, 0, 0.35, 1);
 }

 .cm-touring .cm-served path {
     transition: fill 0.7s ease;
 }

 .cm-tooltip--swap > * {
     animation: cm-tip-swap 0.7s ease;
 }

 @keyframes cm-tip-swap {
     0%, 40% { opacity: 0; transform: translateY(4px); }
     100% { opacity: 1; transform: none; }
 }

 @media (prefers-reduced-motion: reduce) {
     .cm-touring .cm-tooltip,
     .cm-touring .cm-served path {
         transition: none;
     }

     .cm-tooltip--swap > * {
         animation: none;
     }
 }

@media (max-width: 768px) {
     /* Título acima do mapa: o bloco de texto "some" (display: contents) e seus filhos
        viram itens da coluna, permitindo subir o h2 com order */
     .sobre {
         padding: 50px 20px;
         flex-direction: column;
         flex-wrap: nowrap;
         align-items: stretch;
         gap: 0;
     }

     .sobre > div:not(.img-area-aten) {
         display: contents;
     }

     .sobre h2 {
         order: -1;
         margin: 0 0 20px;
     }

     .sobre .img-area-aten {
         margin-bottom: 24px;
     }

     .sobre button {
         align-self: flex-start;
     }

     /* Mapa ocupa toda a largura; o recorte da área atendida é aplicado pelo coverageMap.js */
     .img-area-aten {
         width: 100%;
         aspect-ratio: auto;
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .coverage-map {
         height: auto;
         overflow: hidden;
     }
}