/* ==========================================================
   ATLAS ESTELAR
   MODELO 2 — OBSERVATORIO VIVO
   CSS COMPLETO CONSOLIDADO
   ========================================================== */

/* 01 — CORES */

:root {
    color-scheme: dark;

    --fundo: #071020;
    --fundo-secao: #0b172b;
    --fundo-cartao: #12213a;
    --fundo-campo: #081326;
    --texto: #f5f1e8;
    --suave: #b5c2d5;
    --dourado: #d9b875;
    --dourado-claro: #f0d6a0;
    --turquesa: #58c8d8;
    --borda: rgba(217, 184, 117, .25);
    --sombra: rgba(0, 0, 0, .3);
    --cabecalho-fundo: rgba(7, 16, 32, .96);
}

body[data-theme="light"] {
    color-scheme: light;

    --fundo: #f6f2e9;
    --fundo-secao: #edf0f3;
    --fundo-cartao: #ffffff;
    --fundo-campo: #f8f9fb;
    --texto: #17243a;
    --suave: #52627a;
    --dourado: #96713a;
    --dourado-claro: #a77a36;
    --turquesa: #087c8b;
    --borda: rgba(150, 113, 58, .28);
    --sombra: rgba(30, 45, 65, .12);
    --cabecalho-fundo: rgba(250, 248, 242, .96);
}

/* 02 — BASE */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    background: var(--fundo);
    color: var(--texto);
    font-family: Georgia, "Times New Roman", serif;
}

button,
input {
    font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--turquesa);
    outline-offset: 3px;
}

/* 03 — CABECALHO */

.cabecalho {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 6%;
    background: var(--cabecalho-fundo);
    border-bottom: 1px solid var(--borda);
}

.marca {
    flex-shrink: 0;
    color: var(--dourado);
    font-size: 25px;
    letter-spacing: 5px;
    text-decoration: none;
}

.marca span {
    display: block;
    text-align: center;
    font-size: 10px;
    letter-spacing: 6px;
}

.navegacao {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 26px;
}

.navegacao a {
    color: var(--suave);
    text-decoration: none;
    font-size: 14px;
    transition: color .2s;
}

.navegacao a:hover {
    color: var(--dourado);
}

.controles-interface {
    display: flex;
    gap: 10px;
}

.controle-interface {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: var(--fundo-cartao);
    color: var(--dourado);
    cursor: pointer;
}

/* 04 — BOTOES */

.botao {
    display: inline-block;
    padding: 16px 28px;
    border-radius: 28px;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    transition: transform .2s;
}

.botao:hover {
    transform: translateY(-2px);
}

.botao-dourado {
    color: #071020;
    background: linear-gradient(
        135deg,
        #f0d69a,
        #cba45e
    );
    font-weight: bold;
    border: none;
    cursor: pointer;
}

.botao-contorno {
    color: var(--dourado);
    border: 1px solid var(--borda);
}

/* 05 — ABERTURA */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 680px;
    padding: 100px 9%;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            ellipse at 80% 45%,
            rgba(55, 105, 150, .25),
            transparent 45%
        ),
        var(--fundo);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .5;
    pointer-events: none;

    background-image:
        radial-gradient(1px 1px at 12% 22%, #fff, transparent),
        radial-gradient(2px 2px at 72% 16%, #fff, transparent),
        radial-gradient(1px 1px at 86% 71%, #fff, transparent),
        radial-gradient(2px 2px at 24% 79%, #f3dbad, transparent),
        radial-gradient(1px 1px at 48% 12%, #fff, transparent);

    background-size: 310px 230px;
}

.hero-conteudo {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.etiqueta {
    margin-bottom: 28px;
    color: var(--dourado);
    letter-spacing: 4px;
    font-size: 12px;
}

h1 {
    font-size: clamp(42px, 5vw, 76px);
    font-weight: normal;
    line-height: 1.15;
}

h1 em {
    display: block;
    margin-top: 14px;
    color: var(--dourado-claro);
    font-weight: normal;
}

.descricao {
    max-width: 530px;
    margin: 30px 0;
    color: var(--suave);
    font-size: 18px;
    line-height: 1.8;
}

/* 06 — BUSSOLA DECORATIVA */

.astro-decoracao {
    position: absolute;
    top: 50%;
    right: 6%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 400px;
    height: 400px;
    opacity: .8;
}

.astro-decoracao::before {
    content: "";
    position: absolute;
    inset: 3%;
    border: 1px solid var(--borda);
    border-radius: 50%;
}

.astro-decoracao::after {
    content: "N";
    position: absolute;
    top: -20px;
    color: var(--dourado);
    font-size: 18px;
}

.orbita {
    position: absolute;
    border: 1px solid var(--borda);
    border-radius: 50%;
}

.orbita-externa {
    width: 100%;
    height: 100%;
}

.orbita-interna {
    width: 72%;
    height: 72%;
    border-style: dashed;
}

.astro-central {
    position: relative;
    display: grid;
    place-items: center;
    width: 220px;
    height: 220px;
    color: var(--dourado);
    font-size: 140px;
    text-shadow: 0 0 30px rgba(217,184,117,.3);
}

/* 07 — SECOES */

.secao {
    padding: 100px 9%;
    text-align: center;
    border-top: 1px solid var(--borda);
    background: var(--fundo-secao);
}

.secao:nth-of-type(odd) {
    background: var(--fundo);
}

.secao h2 {
    margin-bottom: 22px;
    color: var(--dourado);
    font-size: clamp(28px, 3vw, 42px);
    font-weight: normal;
}

.secao p {
    color: var(--suave);
    font-size: 16px;
    line-height: 1.8;
}

.secao .etiqueta {
    color: var(--dourado);
    font-size: 12px;
}

.secao-cabecalho {
    max-width: 750px;
    margin: 0 auto 45px;
}

/* ==========================================================
   08 — OBSERVATORIO VIVO
   REFERENCIA: MODELO 2 APROVADO
   ========================================================== */

.painel-observatorio {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;

    width: 100%;
    max-width: 1180px;

    margin: 45px auto 0;
    padding: 28px;

    border: 1px solid var(--borda);
    border-radius: 22px;

    background: var(--fundo-cartao);
    box-shadow: 0 24px 65px var(--sombra);
}

/* 09 — MAPA CELESTE */

#ceu-visual {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;

    width: 100%;
    height: 470px;
    min-height: 470px;

    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(89,179,202,.3);

    background:
        radial-gradient(
            ellipse at 50% 52%,
            rgba(214,165,91,.15),
            transparent 26%
        ),
        radial-gradient(
            ellipse at 50% 55%,
            rgba(48,116,150,.17),
            transparent 65%
        ),
        linear-gradient(
            160deg,
            #03101e,
            #0b2035 52%,
            #030d1a
        );

    box-shadow:
        inset 0 0 85px rgba(0,0,0,.35),
        0 16px 45px rgba(0,0,0,.15);
}

/* 10 — ESTRELAS DE FUNDO */

#ceu-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .85;

    background-image:
        radial-gradient(1px 1px at 9% 18%, #fff, transparent),
        radial-gradient(2px 2px at 18% 65%, #fff, transparent),
        radial-gradient(1px 1px at 32% 24%, #f4dbac, transparent),
        radial-gradient(2px 2px at 47% 78%, #fff, transparent),
        radial-gradient(1px 1px at 61% 12%, #fff, transparent),
        radial-gradient(2px 2px at 76% 42%, #8cdbef, transparent),
        radial-gradient(1px 1px at 91% 72%, #fff, transparent),
        radial-gradient(2px 2px at 54% 36%, #fff, transparent);

    background-size: 270px 190px;
}

/* 11 — EIXOS DE CARTOGRAFIA */

#ceu-visual::after {
    content: "";
    position: absolute;
    inset: 5%;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent calc(50% - .5px),
            rgba(189,166,119,.18) 50%,
            transparent calc(50% + .5px)
        ),
        linear-gradient(
            0deg,
            transparent calc(50% - .5px),
            rgba(189,166,119,.18) 50%,
            transparent calc(50% + .5px)
        );

    mask-image: radial-gradient(
        ellipse at center,
        #000 5%,
        transparent 70%
    );
}

/* 12 — CENTRO LUMINOSO */

#ceu-visual .ceu-centro {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;

    width: 18px;
    height: 18px;

    border-radius: 50%;
    font-size: 0;

    transform: translate(-50%, -50%);

    background: radial-gradient(
        circle,
        #fff9dc 0%,
        #f0d28c 45%,
        #c18c48 100%
    );

    box-shadow:
        0 0 9px 4px rgba(255,227,160,.75),
        0 0 38px 15px rgba(224,173,91,.35),
        0 0 90px 30px rgba(224,173,91,.12);

    animation: atlas-nucleo 5s ease-in-out infinite;
}

#ceu-visual .ceu-centro::before,
#ceu-visual .ceu-centro::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border: none;
    border-radius: 0;
    pointer-events: none;
}

#ceu-visual .ceu-centro::before {
    width: 95px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(245,211,142,.9),
        transparent
    );

    transform: translate(-50%, -50%);
}

#ceu-visual .ceu-centro::after {
    width: 1px;
    height: 95px;

    background: linear-gradient(
        180deg,
        transparent,
        rgba(245,211,142,.9),
        transparent
    );

    transform: translate(-50%, -50%);
}

/* 13 — ORBITAS CONCENTRICAS */

#ceu-visual .ceu-orbita {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;

    border-radius: 50%;
    pointer-events: none;

    transform:
        translate(-50%, -50%)
        rotate(-17deg)
        scaleY(.48);
}

#ceu-visual .ceu-orbita-1 {
    width: 270px;
    height: 270px;

    border: 1px solid rgba(228,181,107,.58);

    box-shadow:
        0 0 0 23px transparent,
        0 0 0 24px rgba(90,185,209,.28),
        0 0 0 51px transparent,
        0 0 0 52px rgba(90,185,209,.22);
}

#ceu-visual .ceu-orbita-2 {
    width: 450px;
    height: 450px;

    border: 1px solid rgba(89,181,207,.4);

    box-shadow:
        0 0 0 28px transparent,
        0 0 0 29px rgba(89,181,207,.25),
        0 0 0 64px transparent,
        0 0 0 65px rgba(89,181,207,.15);
}

#ceu-visual .ceu-orbita-3 {
    width: 690px;
    height: 690px;

    border: 1px solid rgba(89,181,207,.22);

    box-shadow:
        0 0 0 44px transparent,
        0 0 0 45px rgba(89,181,207,.13);
}

/* 14 — CORPOS CELESTES */

#ceu-visual .astro-ponto {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;

    margin: 0;
    border-radius: 50%;

    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#ceu-visual .astro-ponto-a {
    width: 13px;
    height: 13px;

    background: radial-gradient(
        circle at 30% 25%,
        #fff3d3,
        #d4a466 65%,
        #80583c
    );

    box-shadow: 0 0 13px rgba(226,185,115,.65);

    animation-name: atlas-trajetoria-a;
    animation-duration: 26s;
}

#ceu-visual .astro-ponto-b {
    width: 9px;
    height: 9px;

    background: radial-gradient(
        circle at 30% 25%,
        #d9ffff,
        #59d1e2 60%,
        #256f87
    );

    box-shadow: 0 0 13px rgba(89,209,226,.7);

    animation-name: atlas-trajetoria-b;
    animation-duration: 38s;
}

#ceu-visual .astro-ponto-c {
    width: 11px;
    height: 11px;

    background: radial-gradient(
        circle at 30% 25%,
        #f7d6a4,
        #bd8758 65%,
        #684634
    );

    box-shadow: 0 0 12px rgba(214,156,95,.55);

    animation-name: atlas-trajetoria-c;
    animation-duration: 52s;
}

#ceu-visual .astro-ponto-d {
    top: 21%;
    left: 78%;

    width: 5px;
    height: 5px;

    background: #aeeeff;

    box-shadow:
        0 0 8px #56c8d7,
        0 0 22px rgba(86,200,215,.5);

    animation: atlas-cintilacao 5s ease-in-out infinite;
}

/* 15 — MOVIMENTOS ARTISTICOS */

@keyframes atlas-trajetoria-a {
    0%, 100% {
        transform: translate(-50%, -50%)
                   translate(129px, -39px);
    }

    25% {
        transform: translate(-50%, -50%)
                   translate(39px, 62px);
    }

    50% {
        transform: translate(-50%, -50%)
                   translate(-129px, 39px);
    }

    75% {
        transform: translate(-50%, -50%)
                   translate(-39px, -62px);
    }
}

@keyframes atlas-trajetoria-b {
    0%, 100% {
        transform: translate(-50%, -50%)
                   translate(-215px, 65px);
    }

    25% {
        transform: translate(-50%, -50%)
                   translate(-65px, -104px);
    }

    50% {
        transform: translate(-50%, -50%)
                   translate(215px, -65px);
    }

    75% {
        transform: translate(-50%, -50%)
                   translate(65px, 104px);
    }
}

@keyframes atlas-trajetoria-c {
    0%, 100% {
        transform: translate(-50%, -50%)
                   translate(330px, -100px);
    }

    25% {
        transform: translate(-50%, -50%)
                   translate(100px, 160px);
    }

    50% {
        transform: translate(-50%, -50%)
                   translate(-330px, 100px);
    }

    75% {
        transform: translate(-50%, -50%)
                   translate(-100px, -160px);
    }
}

@keyframes atlas-nucleo {
    0%, 100% {
        opacity: .85;
        filter: brightness(1);
    }

    50% {
        opacity: 1;
        filter: brightness(1.3);
    }
}

@keyframes atlas-cintilacao {
    0%, 100% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }
}

/* 16 — LEGENDA DO CEU */

#ceu-visual .ceu-legenda {
    position: absolute;
    z-index: 8;

    bottom: 14px;
    left: 15px;
    right: 15px;

    color: rgba(177,204,224,.72);
    font-family: Arial, sans-serif;
    font-size: 9px;
    letter-spacing: 1.3px;
    text-align: center;
}

/* ==========================================================
   17 — ATIVACOES REAIS
   ========================================================== */

.observatorio-informacoes {
    width: 100%;
    min-width: 0;
    text-align: left;
}

.observatorio-informacoes h3 {
    margin-bottom: 14px;
    color: var(--dourado);
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: normal;
}

.observatorio-informacoes > p {
    max-width: 760px;
    margin-bottom: 20px;
    color: var(--suave);
}

#lista-ativacoes-gerais {
    display: block;
    width: 100%;
    min-width: 0;
    margin-top: 20px;
}

.estado-aguardando {
    margin-top: 24px;
    padding: 18px;
    border: 1px dashed var(--borda);
    border-radius: 12px;
    color: var(--suave);
}

/* 18 — GRADE DAS ATIVACOES */

#lista-ativacoes-gerais .atlas-grade-ativacoes {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 18px !important;

    width: 100% !important;
    min-width: 0 !important;
}

#lista-ativacoes-gerais .atlas-grade-ativacoes > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 19 — CARTOES */

#lista-ativacoes-gerais article {
    min-width: 0;

    padding: 24px !important;

    border: 1px solid var(--borda) !important;
    border-radius: 16px !important;

    background: var(--fundo-campo) !important;

    box-shadow:
        0 10px 28px rgba(0,0,0,.1) !important;

    transition:
        transform .25s,
        border-color .25s;
}

#lista-ativacoes-gerais article:hover {
    transform: translateY(-3px);
    border-color: var(--turquesa) !important;
}

#lista-ativacoes-gerais article h4 {
    color: var(--dourado) !important;
    font-size: 23px;
    font-weight: normal;
    line-height: 1.3;
}

#lista-ativacoes-gerais article p {
    color: var(--suave);
    overflow-wrap: anywhere;
}

#lista-ativacoes-gerais
.atlas-grade-ativacoes > article:first-child {
    border-color: rgba(217,184,117,.65) !important;

    background:
        linear-gradient(
            135deg,
            rgba(217,184,117,.12),
            transparent 70%
        ),
        var(--fundo-campo) !important;
}

/* ==========================================================
   20 — CAMADAS DA LEITURA
   ========================================================== */

.grade-camadas {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    max-width: 1180px;
    margin: 48px auto 0;
}

.cartao-camada {
    min-height: 235px;
    padding: 28px 22px;

    border: 1px solid var(--borda);
    border-radius: 16px;

    background: var(--fundo-cartao);
    text-align: left;

    box-shadow: 0 14px 40px var(--sombra);
}

.camada-icone {
    display: inline-grid;
    place-items: center;

    width: 52px;
    height: 52px;
    margin-bottom: 22px;

    border: 1px solid var(--borda);
    border-radius: 50%;

    color: var(--turquesa);
    font-size: 27px;
}

.cartao-camada h3 {
    margin-bottom: 12px;
    color: var(--texto);
    font-size: 19px;
    font-weight: normal;
}

.cartao-camada p {
    font-size: 14px;
}

/* ==========================================================
   21 — FORMULARIO
   ========================================================== */

.formulario-atlas {
    display: flex;
    flex-direction: column;
    gap: 15px;

    width: 100%;
    max-width: 560px;

    margin: 45px auto 0;
    padding: 42px;

    border: 1px solid var(--borda);
    border-radius: 16px;

    background: var(--fundo-cartao);
    box-shadow: 0 20px 60px var(--sombra);

    text-align: left;
}

.formulario-atlas label {
    margin-top: 8px;
    color: var(--dourado);
    font-size: 14px;
    letter-spacing: 1px;
}

.formulario-atlas input {
    width: 100%;
    padding: 15px;

    border: 1px solid var(--borda);
    border-radius: 7px;

    background: var(--fundo-campo);
    color: var(--texto);

    font-family: Arial, sans-serif;
    font-size: 16px;
}

.formulario-atlas input:focus {
    border-color: var(--turquesa);
}

.formulario-atlas .botao {
    width: 100%;
    margin-top: 18px;
    font-size: 16px;
}

.formulario-atlas .aviso-formulario {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.6;
}

#mensagem-atlas {
    min-height: 20px;
    text-align: center;
    font-size: 14px;
}

body[data-theme="dark"]
.formulario-atlas input::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* 22 — RODAPE */

footer {
    padding: 40px 20px;
    border-top: 1px solid var(--borda);
    color: var(--suave);
    text-align: center;
    font-size: 12px;
    letter-spacing: 3px;
}

/* ==========================================================
   23 — TEMA CLARO
   ========================================================== */

body[data-theme="light"] .hero::before {
    opacity: .2;
}

body[data-theme="light"] #ceu-visual {
    background:
        radial-gradient(
            ellipse at 50% 52%,
            rgba(214,165,91,.15),
            transparent 26%
        ),
        linear-gradient(
            160deg,
            #091b30,
            #19344c 52%,
            #08172a
        );
}

body[data-theme="light"]
#lista-ativacoes-gerais article {
    background: var(--fundo-campo) !important;
}

body[data-theme="light"]
#lista-ativacoes-gerais
.atlas-grade-ativacoes > article:first-child {
    background:
        linear-gradient(
            135deg,
            rgba(150,113,58,.08),
            transparent 70%
        ),
        var(--fundo-campo) !important;
}

/* ==========================================================
   24 — RESPONSIVIDADE
   ========================================================== */

@media (max-width: 1100px) {
    .astro-decoracao {
        right: -110px;
        opacity: .3;
    }

    .grade-camadas {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .cabecalho {
        flex-wrap: wrap;
        justify-content: center;
    }

    .navegacao {
        order: 3;
        width: 100%;
    }

    .hero {
        min-height: 630px;
        padding: 85px 7%;
    }

    .painel-observatorio {
        grid-template-columns: 1fr;
    }

    #lista-ativacoes-gerais .atlas-grade-ativacoes {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .cabecalho {
        padding: 18px 5%;
    }

    .marca {
        font-size: 22px;
    }

    .navegacao {
        gap: 15px;
    }

    .navegacao a {
        font-size: 12px;
    }

    .hero {
        min-height: 590px;
        padding: 75px 7%;
    }

    .astro-decoracao {
        right: -180px;
        width: 360px;
        height: 360px;
        opacity: .18;
    }

    .descricao {
        font-size: 16px;
    }

    .etiqueta {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .secao {
        padding: 75px 6%;
    }

    .painel-observatorio {
        padding: 15px;
        gap: 24px;
    }

    #ceu-visual {
        height: 330px;
        min-height: 330px;
    }

    #ceu-visual .ceu-orbita-1 {
        width: 150px;
        height: 150px;
    }

    #ceu-visual .ceu-orbita-2 {
        width: 250px;
        height: 250px;
    }

    #ceu-visual .ceu-orbita-3 {
        width: 370px;
        height: 370px;
    }

    #ceu-visual .astro-ponto-a {
        animation-name: atlas-trajetoria-a-mobile;
    }

    #ceu-visual .astro-ponto-b {
        animation-name: atlas-trajetoria-b-mobile;
    }

    #ceu-visual .astro-ponto-c {
        animation-name: atlas-trajetoria-c-mobile;
    }

    #lista-ativacoes-gerais .atlas-grade-ativacoes {
        grid-template-columns: 1fr !important;
    }

    .grade-camadas {
        grid-template-columns: 1fr;
    }

    .cartao-camada {
        min-height: auto;
    }

    .formulario-atlas {
        padding: 26px 20px;
    }
}

/* 25 — ORBITAS NO CELULAR */

@keyframes atlas-trajetoria-a-mobile {
    0%, 100% {
        transform: translate(-50%, -50%)
                   translate(72px, -22px);
    }

    25% {
        transform: translate(-50%, -50%)
                   translate(22px, 35px);
    }

    50% {
        transform: translate(-50%, -50%)
                   translate(-72px, 22px);
    }

    75% {
        transform: translate(-50%, -50%)
                   translate(-22px, -35px);
    }
}

@keyframes atlas-trajetoria-b-mobile {
    0%, 100% {
        transform: translate(-50%, -50%)
                   translate(-120px, 36px);
    }

    25% {
        transform: translate(-50%, -50%)
                   translate(-36px, -58px);
    }

    50% {
        transform: translate(-50%, -50%)
                   translate(120px, -36px);
    }

    75% {
        transform: translate(-50%, -50%)
                   translate(36px, 58px);
    }
}

@keyframes atlas-trajetoria-c-mobile {
    0%, 100% {
        transform: translate(-50%, -50%)
                   translate(177px, -54px);
    }

    25% {
        transform: translate(-50%, -50%)
                   translate(54px, 86px);
    }

    50% {
        transform: translate(-50%, -50%)
                   translate(-177px, 54px);
    }

    75% {
        transform: translate(-50%, -50%)
                   translate(-54px, -86px);
    }
}

/* 26 — ACESSIBILIDADE */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    #ceu-visual .astro-ponto-a {
        transform: translate(-50%, -50%)
                   translate(129px, -39px);
    }

    #ceu-visual .astro-ponto-b {
        transform: translate(-50%, -50%)
                   translate(-215px, 65px);
    }

    #ceu-visual .astro-ponto-c {
        transform: translate(-50%, -50%)
                   translate(330px, -100px);
    }
}

/* FIM — ATLAS ESTELAR / OBSERVATORIO VIVO */

/* ATLAS_CONTRASTE_CONCENTRACAO_V1 */


#atlas-mapa-local .atlas-modelo-hibrido
.atlas-painel .atlas-mapa-secao
div[style*="background"] > span,
#atlas-mapa-local .atlas-modelo-hibrido
.atlas-painel .atlas-mapa-secao
div[style*="background"] > strong {
    color: #f1e8d8;
    opacity: 1;
}