.hero-360 {
    display: grid;
    grid-template-columns: 1fr minmax(400px, .9fr);
    gap: 6vw;
    align-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 77% 48%, rgba(255, 204, 0, .15), transparent 25%), linear-gradient(120deg, rgba(8, 10, 9, .96), rgba(8, 10, 9, .55)), url("../img/fundos/solucoes.png") center/cover
}

.central-360 {
    position: relative;
    width: min(43vw, 560px);
    aspect-ratio: 1;
    margin: auto
}

.anel {
    position: absolute;
    inset: 9%;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    animation: girar-360 24s linear infinite
}

.anel-2 {
    inset: 25%;
    border-color: rgba(255, 204, 0, .42);
    animation-direction: reverse;
    animation-duration: 17s
}

.nucleo-360 {
    position: absolute;
    z-index: 3;
    inset: 36%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffcc00;
    color: #080a09;
    text-align: center;
    box-shadow: 0 0 70px rgba(255, 204, 0, .25)
}

.nucleo-360 small {
    margin-bottom: -17px;
    font: 500 .46rem DM Mono, monospace
}

.nucleo-360 strong {
    font-size: clamp(1.1rem, 2.2vw, 1.7rem);
    line-height: .8;
    letter-spacing: -.07em
}

.central-360 button {
    position: absolute;
    z-index: 4;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 9px;
    background: #121612;
    color: #f3f3ee;
    font: 600 .56rem/1.2 DM Mono, monospace;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    animation: flutuar-360 5s ease-in-out infinite
}

.central-360 button:hover {
    border-color: #ffcc00;
    color: #ffcc00
}

.central-360 button:nth-of-type(1) {
    left: 0;
    top: 18%
}

.central-360 button:nth-of-type(2) {
    right: 2%;
    top: 15%;
    animation-delay: -.8s
}

.central-360 button:nth-of-type(3) {
    right: -3%;
    top: 46%;
    animation-delay: -1.6s
}

.central-360 button:nth-of-type(4) {
    right: 7%;
    bottom: 15%;
    animation-delay: -2.4s
}

.central-360 button:nth-of-type(5) {
    left: 9%;
    bottom: 10%;
    animation-delay: -3.2s
}

.central-360 button:nth-of-type(6) {
    left: -3%;
    top: 48%;
    animation-delay: -4s
}

.introducao-servico strong {
    color: #ffcc00
}

.cabecalho-360 {
    display: grid;
    grid-template-columns: 1fr minmax(270px, .45fr);
    gap: 5vw;
    align-items: end
}

.cabecalho-360 .rotulo {
    grid-column: 1/-1
}

.cabecalho-360 h2 {
    margin-bottom: 0
}

.cabecalho-360>p:last-child {
    padding-bottom: 10px;
    color: #aeb3ac;
    line-height: 1.7
}

.painel-servicos-360 {
    border-top: 1px solid rgba(255, 255, 255, .15)
}

.navegacao-servicos {
    display: flex;
    gap: 8px;
    margin-top: 48px;
    overflow: auto
}

.navegacao-servicos button,
.abas-ciclo button {
    flex: none;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: transparent;
    color: #9da39c;
    font: 500 .6rem DM Mono, monospace;
    text-transform: uppercase;
    cursor: pointer
}

.navegacao-servicos button.ativo,
.abas-ciclo button.ativo {
    border-color: #ffcc00;
    background: #ffcc00;
    color: #080a09
}

.experiencia-servico {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 0;
    margin-top: 22px;
    border: 1px solid rgba(255, 255, 255, .15)
}

.quadro-servico {
    min-height: 390px;
    padding: clamp(25px, 4vw, 55px)
}

.quadro-acao {
    position: relative;
    overflow: hidden;
    background: #151914
}

.quadro-acao>span {
    display: block;
    color: #ffcc00;
    font: 500 .65rem DM Mono, monospace
}

.quadro-servico h3 {
    margin: 20px 0;
    font-size: clamp(1.7rem, 3vw, 3rem);
    letter-spacing: -.07em;
    line-height: .95
}

.quadro-servico>p:not(.rotulo) {
    max-width: 510px;
    color: #aeb3ac;
    line-height: 1.65
}

.quadro-impacto {
    background: #eff0e9;
    color: #080a09
}

.quadro-impacto .rotulo {
    color: #75600c
}

.quadro-impacto ul {
    display: grid;
    gap: 11px;
    margin-top: 35px
}

.quadro-impacto li {
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(8, 10, 9, .14);
    font-size: .86rem
}

.medidor-servico {
    position: absolute;
    left: clamp(25px, 4vw, 55px);
    right: clamp(25px, 4vw, 55px);
    bottom: 35px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    color: #9ca39b;
    font: 500 .55rem DM Mono, monospace
}

.medidor-servico i {
    grid-column: 1/-1;
    height: 7px;
    overflow: hidden;
    background: #d8d9d1
}

.medidor-servico i b {
    display: block;
    width: var(--nivel);
    height: 100%;
    background: #ffcc00;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s ease
}

.experiencia-servico.visivel .medidor-servico i b {
    transform: scaleX(1)
}

.medidor-servico strong {
    color: #080a09
}

.visual-mini {
    position: absolute;
    right: 8%;
    bottom: 24%;
    display: flex;
    gap: 9px;
    align-items: end;
    height: 110px
}

.visual-mini i {
    width: 38px;
    background: linear-gradient(#ffcc00, rgba(255, 204, 0, .1));
    animation: subir-visual 1s both
}

.visual-mini i:nth-child(1) {
    height: 42%
}

.visual-mini i:nth-child(2) {
    height: 78%;
    animation-delay: .15s
}

.visual-mini i:nth-child(3) {
    height: 100%;
    animation-delay: .3s
}

.visual-mini b {
    position: absolute;
    top: -22px;
    right: 0;
    width: max-content;
    color: #ffcc00;
    font: 500 .52rem DM Mono, monospace
}

.operacao-360 {
    background: #11170f
}

.ciclos-360 {
    position: relative;
    margin-top: 55px;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: #0c100c
}

.abas-ciclo {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.rota-ciclo {
    display: flex;
    gap: 8px;
    margin: 36px 0
}

.rota-ciclo span {
    flex: 1;
    height: 3px;
    background: #343a33;
    transition: .5s
}

.ciclos-360[data-ciclo="30"] .rota-ciclo span:nth-child(1),
.ciclos-360[data-ciclo="60"] .rota-ciclo span:nth-child(-n+2),
.ciclos-360[data-ciclo="90"] .rota-ciclo span {
    background: #ffcc00
}

.ciclos-360 article {
    max-width: 720px
}

.ciclos-360 article small {
    color: #ffcc00;
    font: 500 .58rem DM Mono, monospace
}

.ciclos-360 article h3 {
    margin: 13px 0;
    font-size: clamp(1.5rem, 3vw, 2.6rem);
    letter-spacing: -.06em
}

.ciclos-360 article p {
    color: #aeb3ac;
    line-height: 1.65
}

.ciclos-360 ul {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 24px
}

.ciclos-360 li {
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .15);
    color: #d8ddd5;
    font-size: .72rem
}

.matriz-equipe {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.matriz-equipe article {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: #11150f
}

.matriz-equipe b,
.matriz-equipe span {
    display: block
}

.matriz-equipe b {
    color: #ffcc00;
    font: 500 .62rem DM Mono, monospace;
    text-transform: uppercase
}

.matriz-equipe span {
    margin-top: 7px;
    color: #aeb3ac;
    font-size: .8rem
}

.cursor-equipe {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffcc00;
    box-shadow: 0 0 0 8px rgba(255, 204, 0, .12);
    animation: percorrer-equipe 7s ease-in-out infinite
}

.diagnostico-360 {
    border-top: 1px solid rgba(255, 255, 255, .15)
}

.mapa-resultados {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 55px;
    overflow: auto
}

.mapa-resultados article {
    min-width: 190px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: #11150f
}

.mapa-resultados span,
.mapa-resultados b {
    display: block
}

.mapa-resultados span {
    color: #ffcc00;
    font: 500 .55rem DM Mono, monospace;
    text-transform: uppercase
}

.mapa-resultados b {
    margin-top: 15px;
    font-size: .9rem;
    line-height: 1.3
}

.mapa-resultados>i {
    width: 28px;
    height: 1px;
    flex: none;
    background: #ffcc00
}

.entrada-360 {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1)
}

.entrada-360.visivel {
    opacity: 1;
    transform: none
}

@keyframes girar-360 {
    to {
        transform: rotate(360deg)
    }
}

@keyframes flutuar-360 {
    50% {
        transform: translateY(-8px)
    }
}

@keyframes subir-visual {
    from {
        transform: scaleY(.1);
        opacity: 0
    }
}

@keyframes percorrer-equipe {

    0%,
    100% {
        left: 8%;
        top: 10%
    }

    25% {
        left: 78%;
        top: 10%
    }

    55% {
        left: 78%;
        top: 77%
    }

    75% {
        left: 8%;
        top: 77%
    }
}

@media(max-width:1000px) {
    .hero-360 {
        grid-template-columns: 1fr
    }

    .central-360 {
        width: min(100%, 590px);
        margin-top: 25px
    }

    .cabecalho-360 {
        grid-template-columns: 1fr
    }

    .experiencia-servico {
        grid-template-columns: 1fr
    }

    .matriz-equipe {
        margin-top: 35px
    }
}

@media(max-width:650px) {
    .central-360 {
        height: 380px
    }

    .central-360 button {
        font-size: .45rem
    }

    .nucleo-360 {
        inset: 34%
    }

    .experiencia-servico {
        margin-top: 14px
    }

    .quadro-servico {
        min-height: 350px
    }

    .visual-mini {
        right: 10%;
        bottom: 18%
    }

    .semana-editorial {
        grid-template-columns: 1fr
    }

    .matriz-equipe {
        grid-template-columns: 1fr
    }

    .mapa-resultados {
        margin-left: -24px;
        margin-right: -24px;
        padding: 0 24px
    }
}

@media(prefers-reduced-motion:reduce) {

    .central-360 *,
    .cursor-equipe,
    .visual-mini i {
        animation: none
    }

    .entrada-360 {
        opacity: 1;
        transform: none
    }
}

.planos-360 {
    background: #11170f;
    border-top: 1px solid rgba(255, 204, 0, .23);
    border-bottom: 1px solid rgba(255, 204, 0, .23)
}

.comparador-planos {
    margin-top: 55px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: #0c100c
}

.topo-plano {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: #aab0a8;
    font: 500 .58rem DM Mono, monospace;
    letter-spacing: .08em;
    text-transform: uppercase
}

.topo-plano button {
    border: 0;
    background: transparent;
    color: #ffcc00;
    font: 500 .56rem DM Mono, monospace;
    cursor: pointer
}

.topo-plano i {
    font-style: normal
}

.cartoes-planos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 18px
}

.plano {
    position: relative;
    padding: clamp(25px, 4vw, 45px);
    border: 1px solid rgba(255, 255, 255, .14);
    background: #121712
}

.plano h3 {
    margin: 15px 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -.08em;
    line-height: .85
}

.plano .descricao-plano {
    min-height: 72px;
    color: #aab0a8;
    line-height: 1.6
}

.preco-plano {
    margin: 28px 0
}

.preco-plano small,
.preco-plano span {
    display: block;
    color: #8e958d;
    font-size: .63rem
}

.preco-plano strong {
    display: block;
    margin: 5px 0;
    color: #ffcc00;
    font-size: clamp(2rem, 4vw, 3.6rem);
    letter-spacing: -.08em
}

.plano .botao {
    display: flex;
    justify-content: center;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .2)
}

.plano ul {
    display: grid;
    gap: 10px;
    margin-top: 28px
}

.plano li {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: #c7ccc4;
    font-size: .8rem;
    line-height: 1.45
}

.plano li:before {
    content: "✓";
    margin-right: 9px;
    color: #76d694
}

.plano-operacao {
    border-color: rgba(255, 204, 0, .6);
    background: linear-gradient(145deg, rgba(255, 204, 0, .1), #121712 45%)
}

.selo-plano {
    position: absolute;
    right: 18px;
    top: 18px;
    padding: 7px 9px;
    background: #ffcc00;
    color: #080a09;
    font: 600 .5rem DM Mono, monospace;
    letter-spacing: .06em
}

.tabela-planos {
    margin: 0 18px 18px;
    border: 1px solid rgba(255, 255, 255, .12)
}

.linha-tabela {
    display: grid;
    grid-template-columns: 1.1fr .75fr .95fr;
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.linha-tabela:last-child {
    border: 0
}

.linha-tabela>* {
    padding: 14px;
    border-right: 1px solid rgba(255, 255, 255, .1);
    color: #b4bbb1;
    font-size: .72rem;
    line-height: 1.35
}

.linha-tabela>*:last-child {
    border: 0
}

.linha-tabela b {
    color: #f3f3ee;
    font-weight: 500
}

.cabecalho-tabela {
    background: #181e17
}

.cabecalho-tabela>* {
    color: #ffcc00;
    font: 500 .57rem DM Mono, monospace;
    text-transform: uppercase
}

.nota-planos {
    padding: 0 18px 20px;
    color: #7f867e;
    font-size: .65rem;
    line-height: 1.5
}

@media(max-width:700px) {
    .topo-plano {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px
    }

    .cartoes-planos {
        grid-template-columns: 1fr
    }

    .linha-tabela {
        grid-template-columns: 1fr 1fr
    }

    .linha-tabela>*:nth-child(2) {
        display: none
    }

    .cabecalho-tabela>*:nth-child(2) {
        display: none
    }
}

.quadro-impacto {
    position: relative
}

.linha-tempo-ciclo {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 34px 0
}

.linha-tempo-ciclo>i {
    position: absolute;
    z-index: 0;
    left: 3%;
    right: 3%;
    top: 18px;
    height: 2px;
    background: linear-gradient(90deg, #ffcc00 0 33%, #536052 33%)
}

.linha-tempo-ciclo span {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    color: #8e958d;
    font: 500 .55rem DM Mono, monospace;
    text-transform: uppercase
}

.linha-tempo-ciclo b {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #242a23;
    color: #959c94
}

.ciclos-360[data-ciclo="30"] .linha-tempo-ciclo span:nth-of-type(1) b,
.ciclos-360[data-ciclo="60"] .linha-tempo-ciclo span:nth-of-type(-n+2) b,
.ciclos-360[data-ciclo="90"] .linha-tempo-ciclo span b {
    background: #ffcc00;
    color: #080a09
}

.ciclos-360[data-ciclo="60"] .linha-tempo-ciclo>i {
    background: linear-gradient(90deg, #ffcc00 0 66%, #536052 66%)
}

.ciclos-360[data-ciclo="90"] .linha-tempo-ciclo>i {
    background: #ffcc00
}

.conteudo-ciclo {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 40px
}

.conteudo-ciclo>article {
    max-width: none
}

.conteudo-ciclo aside {
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: #151a14
}

.conteudo-ciclo aside>p {
    color: #ffcc00;
    font: 500 .56rem DM Mono, monospace;
    text-transform: uppercase
}

.conteudo-ciclo aside ul {
    display: grid;
    margin-top: 18px
}

.conteudo-ciclo aside li {
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding: 8px 0
}

.evidencia-ciclo {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 22px;
    color: #aab0a8;
    font: 500 .52rem DM Mono, monospace
}

.evidencia-ciclo>b {
    color: #ffcc00
}

.evidencia-ciclo>i {
    grid-column: 1/-1;
    height: 7px;
    overflow: hidden;
    background: #30362f
}

.evidencia-ciclo em {
    display: block;
    width: var(--progresso);
    height: 100%;
    background: linear-gradient(90deg, #76d694, #ffcc00);
    transition: width .8s ease
}

.continuidade-equipe {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 24px !important;
    color: #c7ccc4 !important;
    font: 500 .6rem DM Mono, monospace !important;
    text-transform: uppercase
}

.continuidade-equipe i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #76d694;
    box-shadow: 0 0 0 6px rgba(118, 214, 148, .12);
    animation: pulso-status 1.8s ease-in-out infinite
}

.sala-operacao {
    position: relative;
    min-height: 510px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 24px;
    background: radial-gradient(circle at center, rgba(255, 204, 0, .14), transparent 25%), repeating-radial-gradient(circle at center, transparent 0 19%, rgba(255, 255, 255, .05) 19.2% 19.5%);
    overflow: hidden
}

.centro-operacao {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: #ffcc00;
    color: #080a09;
    transform: translate(-50%, -50%);
    text-align: center;
    box-shadow: 0 0 0 16px rgba(255, 204, 0, .07)
}

.centro-operacao small {
    font: 600 .48rem DM Mono, monospace
}

.centro-operacao strong {
    font-size: 1.1rem;
    line-height: .9;
    letter-spacing: -.05em
}

.papel {
    position: absolute;
    z-index: 3;
    min-width: 135px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 9px;
    background: #151a14;
    animation: respirar-papel 4.5s ease-in-out infinite
}

.papel b,
.papel span,
.papel small {
    display: block
}

.papel b {
    color: #ffcc00;
    font: 500 .48rem DM Mono, monospace
}

.papel span {
    margin-top: 7px;
    font-size: .75rem;
    font-weight: 700
}

.papel small {
    margin-top: 3px;
    color: #929991;
    font-size: .5rem
}

.papel-estrategia {
    left: 8%;
    top: 11%
}

.papel-criacao {
    right: 7%;
    top: 12%;
    animation-delay: -.8s
}

.papel-performance {
    right: 4%;
    top: 56%;
    animation-delay: -1.6s
}

.papel-tech {
    left: 34%;
    bottom: 5%;
    animation-delay: -2.4s
}

.papel-negocios {
    left: 5%;
    top: 58%;
    animation-delay: -3.2s
}

.pulso-equipe {
    position: absolute;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffcc00;
    box-shadow: 0 0 14px #ffcc00
}

.pulso-1 {
    animation: orbitar-equipe-a 6s linear infinite
}

.pulso-2 {
    animation: orbitar-equipe-b 7s linear infinite
}

.pulso-3 {
    animation: orbitar-equipe-c 8s linear infinite
}

.seletor-contrato {
    display: flex;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px
}

.seletor-contrato button {
    padding: 8px 12px !important;
    border-radius: 5px !important;
    color: #999f98 !important
}

.seletor-contrato button.ativo {
    background: #ffcc00 !important;
    color: #080a09 !important
}

.comparativo-acordeao {
    margin: 0 18px 18px;
    border: 1px solid rgba(255, 255, 255, .12)
}

.comparativo-acordeao>p {
    padding: 15px 18px;
    color: #8d948c;
    font: 500 .57rem DM Mono, monospace;
    text-transform: uppercase
}

.comparativo-acordeao details {
    border-top: 1px solid rgba(255, 255, 255, .1);
    background: #111611
}

.comparativo-acordeao summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 17px 18px;
    cursor: pointer;
    list-style: none;
    font-size: .82rem;
    font-weight: 700
}

.comparativo-acordeao summary::-webkit-details-marker {
    display: none
}

.comparativo-acordeao summary i {
    color: #ffcc00;
    font-size: 1.2rem;
    font-style: normal;
    transition: transform .25s
}

.comparativo-acordeao details[open] summary i {
    transform: rotate(45deg)
}

.comparativo-acordeao details>div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 18px 18px;
    animation: abrir-escopo .35s ease
}

.comparativo-acordeao details p {
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .1);
    color: #aeb4ac;
    font-size: .76rem;
    line-height: 1.6
}

.comparativo-acordeao details p b {
    display: block;
    margin-bottom: 7px;
    color: #ffcc00;
    font: 500 .56rem DM Mono, monospace;
    text-transform: uppercase
}

.valor-estrutura {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    margin-top: 50px;
    border: 1px solid rgba(255, 204, 0, .35)
}

.numero-estrutura {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 5vw, 60px);
    background: #ffcc00;
    color: #080a09
}

.numero-estrutura small {
    font: 600 .55rem DM Mono, monospace;
    letter-spacing: .08em
}

.numero-estrutura strong {
    margin: 12px 0 5px;
    font-size: clamp(2.8rem, 6vw, 6rem);
    line-height: .8;
    letter-spacing: -.1em
}

.numero-estrutura span {
    font-size: .72rem
}

.explicacao-estrutura {
    display: grid;
    align-content: center;
    gap: 18px;
    padding: clamp(28px, 5vw, 60px);
    background: #121712
}

.explicacao-estrutura p {
    color: #bdc3ba;
    line-height: 1.7
}

.mapa-resultados article {
    transition: transform .3s, border-color .3s
}

.mapa-resultados article:hover {
    transform: translateY(-7px);
    border-color: #ffcc00
}

.ciclos-360.trocando .conteudo-ciclo article {
    animation: entrar-ciclo .62s cubic-bezier(.2, .8, .2, 1)
}

.ciclos-360.trocando .conteudo-ciclo aside {
    animation: entrar-ciclo .62s .09s cubic-bezier(.2, .8, .2, 1) both
}

.ciclos-360.trocando .linha-tempo-ciclo b {
    animation: marcar-etapa .52s ease
}

.comparador-planos.atualizando .preco-plano strong {
    animation: trocar-preco .62s cubic-bezier(.2, .8, .2, 1)
}

.comparador-planos.atualizando .plano {
    animation: responder-plano .7s cubic-bezier(.2, .8, .2, 1)
}

.comparador-planos.atualizando .plano:nth-child(2) {
    animation-delay: .08s
}

.seletor-contrato button {
    position: relative;
    overflow: hidden
}

.seletor-contrato button:after {
    content: "";
    position: absolute;
    inset: auto 12% 3px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transition: transform .35s
}

.seletor-contrato button.ativo:after {
    transform: scaleX(1)
}

@keyframes pulso-status {
    50% {
        box-shadow: 0 0 0 11px rgba(118, 214, 148, 0)
    }
}

@keyframes respirar-papel {
    50% {
        transform: translateY(-7px);
        border-color: rgba(255, 204, 0, .45)
    }
}

@keyframes orbitar-equipe-a {
    0% {
        left: 12%;
        top: 18%
    }

    45% {
        left: 48%;
        top: 48%
    }

    100% {
        left: 77%;
        top: 18%;
        opacity: .2
    }
}

@keyframes orbitar-equipe-b {
    0% {
        right: 12%;
        top: 62%
    }

    45% {
        right: 48%;
        top: 48%
    }

    100% {
        right: 40%;
        bottom: 12%;
        opacity: .2
    }
}

@keyframes orbitar-equipe-c {
    0% {
        left: 12%;
        top: 64%
    }

    50% {
        left: 48%;
        top: 48%
    }

    100% {
        left: 52%;
        bottom: 8%;
        opacity: .2
    }
}

@keyframes abrir-escopo {
    from {
        opacity: 0;
        transform: translateY(-8px)
    }
}

@keyframes entrar-ciclo {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(5px)
    }

    to {
        opacity: 1;
        transform: none;
        filter: none
    }
}

@keyframes marcar-etapa {
    50% {
        transform: scale(1.16);
        box-shadow: 0 0 0 10px rgba(255, 204, 0, .1)
    }
}

@keyframes trocar-preco {
    0% {
        opacity: .15;
        transform: translateY(18px) scale(.92)
    }

    65% {
        color: #ffcc00
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes responder-plano {
    0% {
        transform: translateY(10px);
        border-color: rgba(255, 204, 0, .7)
    }

    100% {
        transform: none
    }
}

@media(max-width:900px) {

    .conteudo-ciclo,
    .valor-estrutura {
        grid-template-columns: 1fr
    }

    .sala-operacao {
        margin-top: 35px
    }

    .comparativo-acordeao details>div {
        grid-template-columns: 1fr
    }
}

@media(max-width:600px) {
    .linha-tempo-ciclo span {
        font-size: .45rem
    }

    .conteudo-ciclo {
        gap: 22px
    }

    .sala-operacao {
        min-height: 570px
    }

    .papel {
        min-width: 120px
    }

    .papel-tech {
        left: 27%
    }

    .seletor-contrato {
        width: 100%;
        margin-top: 4px
    }

    .seletor-contrato button {
        flex: 1
    }

    .comparativo-acordeao {
        margin: 0 10px 15px
    }
}

@media(prefers-reduced-motion:reduce) {

    .papel,
    .pulso-equipe,
    .continuidade-equipe i,
    .ciclos-360.trocando *,
    .comparador-planos.atualizando * {
        animation: none
    }
}

/* Experiência fluida das seis frentes */
.navegacao-servicos {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    padding: 0 6px;
    overflow: visible
}

.navegacao-servicos:before {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    top: 19px;
    height: 1px;
    background: rgba(255, 255, 255, .14)
}

.navegacao-servicos button {
    position: relative;
    display: grid;
    justify-items: start;
    gap: 12px;
    min-width: 0;
    padding: 0 10px 15px;
    border: 0;
    background: transparent;
    color: #737a73;
    text-align: left;
    transition: color .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1)
}

.navegacao-servicos button:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 14px;
    left: 10px;
    width: 11px;
    height: 11px;
    border: 3px solid #080a09;
    border-radius: 50%;
    background: #515851;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
    transition: background .45s, box-shadow .45s, transform .45s
}

.navegacao-servicos button:after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    background: #ffcc00;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1)
}

.navegacao-servicos button small {
    position: relative;
    z-index: 2;
    padding-left: 20px;
    color: #777e77;
    font: 500 .5rem DM Mono, monospace;
    transition: color .45s
}

.navegacao-servicos button span {
    font: 600 .58rem/1.35 DM Mono, monospace;
    text-transform: uppercase
}

.navegacao-servicos button:hover {
    color: #d5d8d2;
    transform: translateY(-2px)
}

.navegacao-servicos button.ativo {
    border: 0;
    background: transparent;
    color: #f3f3ee;
    transform: translateY(-3px)
}

.navegacao-servicos button.ativo:before {
    background: #ffcc00;
    box-shadow: 0 0 0 6px rgba(255, 204, 0, .1), 0 0 20px rgba(255, 204, 0, .28);
    transform: scale(1.08)
}

.navegacao-servicos button.ativo:after {
    transform: scaleX(1)
}

.navegacao-servicos button.ativo small {
    color: #ffcc00
}

.experiencia-servico {
    overflow: hidden;
    transition: opacity .28s ease, transform .55s cubic-bezier(.2, .8, .2, 1), border-color .5s
}

.experiencia-servico.saindo {
    opacity: 0;
    transform: translateY(10px) scale(.992)
}

.experiencia-servico.entrando {
    animation: painel-frente-entrando .65s cubic-bezier(.2, .8, .2, 1)
}

.quadro-servico {
    min-height: 500px
}

.quadro-acao {
    display: flex;
    flex-direction: column
}

.quadro-impacto {
    display: flex;
    flex-direction: column;
    isolation: isolate
}

.quadro-impacto h3 {
    max-width: 680px
}

.quadro-impacto ul {
    position: relative;
    z-index: 2;
    margin: 28px 0 30px
}

.quadro-impacto li {
    color: #4e554e
}

.medidor-servico {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 2;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(8, 10, 9, .13);
    color: #626a62
}

.fluxo-frente {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: auto;
    padding-top: 42px
}

.fluxo-frente>i {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 58px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 204, 0, .25), #ffcc00, rgba(255, 204, 0, .25))
}

.fluxo-frente article {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 28px;
    padding: 0 0 15px;
    background: #151914
}

.fluxo-frente article:before {
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    width: 12px;
    height: 12px;
    border: 4px solid #151914;
    border-radius: 50%;
    background: #ffcc00;
    box-shadow: 0 0 0 1px rgba(255, 204, 0, .45)
}

.fluxo-frente small {
    padding-left: 22px;
    color: #ffcc00;
    font: 500 .5rem DM Mono, monospace
}

.fluxo-frente b {
    font-size: clamp(.68rem, 1.1vw, .85rem);
    font-weight: 650
}

.experiencia-servico.entrando .fluxo-frente article {
    animation: etapa-frente .7s both
}

.experiencia-servico.entrando .fluxo-frente article:nth-of-type(2) {
    animation-delay: .1s
}

.experiencia-servico.entrando .fluxo-frente article:nth-of-type(3) {
    animation-delay: .2s
}

/* CTA com decisão e agenda sem sair da página */
.cta-360-final {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 520px;
    margin-bottom: 110px;
    padding: clamp(42px, 7vw, 84px);
    border-color: rgba(255, 204, 0, .45);
    background: linear-gradient(90deg, rgba(8, 10, 9, .98) 0%, rgba(8, 10, 9, .88) 46%, rgba(8, 10, 9, .32) 100%), url("../img/cta-marketing-360-empresaria.webp") 68% center/cover no-repeat
}

.cta-360-final:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 204, 0, .06), transparent 40%);
    pointer-events: none
}

.cta-360-conteudo {
    position: relative;
    z-index: 2;
    max-width: 720px
}

.cta-360-conteudo>.rotulo,
.agenda-red-360 .rotulo {
    max-width: none;
    color: #ffcc00;
    font: 500 .62rem/1.3 DM Mono, monospace;
    letter-spacing: .12em;
    text-transform: uppercase
}

.cta-360-conteudo h2 {
    margin: 18px 0 22px;
    font-size: clamp(2.5rem, 5vw, 5.5rem);
    font-weight: 800;
    letter-spacing: -.075em;
    line-height: .88;
    text-transform: uppercase
}

.cta-360-conteudo h2 span {
    color: #ffcc00
}

.cta-360-conteudo>p:not(.rotulo) {
    max-width: 640px;
    color: #c2c7c0;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    font-weight: 500;
    line-height: 1.65
}

.cta-360-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px
}

.cta-360-acoes .botao {
    border: 1px solid rgba(255, 255, 255, .25);
    cursor: pointer
}

.cta-360-acoes .secundario {
    background: rgba(8, 10, 9, .68);
    color: #f3f3ee;
    backdrop-filter: blur(8px)
}

.cta-360-acoes .secundario:hover {
    border-color: #ffcc00;
    color: #ffcc00
}

.agenda-red-360 {
    position: relative;
    z-index: 3;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(24px);
    transition: max-height .8s cubic-bezier(.2, .8, .2, 1), opacity .4s, transform .7s, margin-top .7s;
    background: #f4f4ef;
    color: #080a09
}

.agenda-red-360.aberta {
    max-height: 780px;
    margin-top: 50px;
    opacity: 1;
    transform: none
}

.agenda-red-360>div {
    position: relative;
    padding: 24px 70px 20px 24px;
    border-bottom: 1px solid #d6d8d1
}

.agenda-red-360 h3 {
    margin-top: 5px;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    letter-spacing: -.06em
}

.agenda-red-360 button {
    position: absolute;
    top: 22px;
    right: 24px;
    width: 40px;
    height: 40px;
    border: 1px solid #bfc2ba;
    border-radius: 50%;
    background: transparent;
    font-size: 1.5rem;
    cursor: pointer;
    transition: .25s
}

.agenda-red-360 button:hover {
    border-color: #080a09;
    transform: rotate(90deg)
}

.agenda-red-360 iframe {
    width: 100%;
    height: 680px;
    border: 0;
    background: #fff
}

@keyframes painel-frente-entrando {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.992)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes etapa-frente {
    from {
        opacity: 0;
        transform: translateX(-12px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media(max-width:900px) {
    .navegacao-servicos {
        display: flex;
        gap: 0;
        overflow-x: auto;
        padding-bottom: 8px;
        scroll-snap-type: x proximity
    }

    .navegacao-servicos:before {
        left: 20px;
        right: 20px
    }

    .navegacao-servicos button {
        min-width: 150px;
        scroll-snap-align: start
    }

    .quadro-servico {
        min-height: 460px
    }

    .cta-360-final {
        background-position: 62% center
    }

    .cta-360-final:after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(8, 10, 9, .25);
        pointer-events: none
    }
}

@media(max-width:650px) {
    .experiencia-servico {
        grid-template-columns: 1fr
    }

    .quadro-servico {
        min-height: auto
    }

    .quadro-acao {
        min-height: 500px
    }

    .quadro-impacto {
        min-height: 520px
    }

    .fluxo-frente {
        margin-top: 60px
    }

    .cta-360-final {
        width: calc(100% - 28px);
        padding: 34px 22px;
        background-position: 67% center
    }

    .cta-360-acoes {
        display: grid
    }

    .cta-360-acoes .botao {
        justify-content: space-between;
        width: 100%
    }

    .agenda-red-360.aberta {
        max-height: 820px;
        margin-top: 36px
    }

    .agenda-red-360 iframe {
        height: 720px
    }
}

@media(prefers-reduced-motion:reduce) {

    .experiencia-servico,
    .experiencia-servico *,
    .navegacao-servicos button,
    .agenda-red-360 {
        animation: none !important;
        transition: none !important
    }
}

/* Correção final: abas legíveis e agenda em modal */
.navegacao-servicos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    overflow: visible
}

.navegacao-servicos:before {
    display: none
}

.navegacao-servicos button {
    display: flex;
    min-width: 0;
    min-height: 92px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 14px 17px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: #101410;
    color: #858c84;
    transition: color .4s ease, border-color .4s ease, background .4s ease, transform .4s cubic-bezier(.2, .8, .2, 1)
}

.navegacao-servicos button:before {
    top: 15px;
    right: 14px;
    left: auto;
    width: 8px;
    height: 8px;
    border: 0;
    background: #555d55;
    box-shadow: none
}

.navegacao-servicos button:after {
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px
}

.navegacao-servicos button small {
    padding: 0;
    color: #697069;
    font-size: .48rem
}

.navegacao-servicos button span {
    display: block;
    max-width: 100%;
    font-size: clamp(.48rem, .63vw, .6rem);
    line-height: 1.35;
    overflow-wrap: normal;
    word-break: normal
}

.navegacao-servicos button:hover {
    border-color: rgba(255, 204, 0, .35);
    background: #151a14
}

.navegacao-servicos button.ativo {
    border-color: rgba(255, 204, 0, .48);
    background: linear-gradient(135deg, rgba(255, 204, 0, .12), #111511);
    color: #f3f3ee
}

.navegacao-servicos button.ativo:before {
    background: #ffcc00;
    box-shadow: 0 0 0 5px rgba(255, 204, 0, .1), 0 0 18px rgba(255, 204, 0, .25);
    transform: none
}

.modal-red-360 .cabecalho-agenda .rotulo {
    color: #ffcc00;
    font: 500 .55rem/1.3 DM Mono, monospace;
    letter-spacing: .1em;
    text-transform: uppercase
}

.modal-red-360 .fechar-modal {
    display: grid;
    place-items: center;
    color: #f3f3ee;
    font-size: 1.4rem
}

.modal-red-360 .quadro-agenda {
    background: #f5f5f2
}

@media(max-width:1050px) {
    .navegacao-servicos {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:650px) {
    .navegacao-servicos {
        display: flex;
        gap: 9px;
        overflow-x: auto;
        padding: 0 0 10px;
        scroll-snap-type: x mandatory
    }

    .navegacao-servicos button {
        flex: 0 0 168px;
        min-width: 168px;
        scroll-snap-align: start
    }
}