/* =====================================================================
   Consig Tech Promotora — design v3
   Direção: editorial fintech. Seções escuras e creme alternadas,
   tipografia grande (Satoshi) com destaques em serif itálico
   (Instrument Serif), layout em bento e faixas em movimento.
   Performance: um único CSS, sem @import, sem backdrop-filter;
   todas as animações usam só transform/opacity.
   ===================================================================== */

/* ---------- Fontes ---------- */
@font-face{
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Variable.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: "Instrument Serif";
    src: url("../fonts/InstrumentSerif-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ---------- Tokens ---------- */
:root{
    --tinta: #06110A;
    --tinta-2: #0C1A12;
    --tinta-3: #13261B;
    --creme: #F1EFE7;
    --papel: #FAF9F5;
    --branco: #FFFFFF;

    --verde: #29B740;
    --verde-escuro: #137A26;
    --menta: #8BEA98;

    --texto: #0B1510;
    --texto-suave: #4A554E;
    --claro: #EDF2EA;
    --claro-suave: rgba(237, 242, 234, 0.7);

    --linha-escura: rgba(237, 242, 234, 0.1);
    --linha-clara: rgba(11, 21, 16, 0.09);

    --sans: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --secao-y: clamp(72px, 10vw, 128px);
    --gutter: 20px;
}

@media (min-width: 768px){
    :root{ --gutter: 32px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }

html{
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 92px; /* altura do header fixo + folga */
}

body{
    margin: 0;
    min-height: 100vh;
    background: var(--tinta);
    color: var(--texto);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, p, ul, figure{ margin: 0; }
ul{ padding: 0; list-style: none; }
img, picture, svg{ display: block; max-width: 100%; }
img{ height: auto; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3{ text-wrap: balance; }
p{ text-wrap: pretty; }

::selection{ background: var(--menta); color: var(--tinta); }

:focus-visible{
    outline: 3px solid var(--menta);
    outline-offset: 3px;
    border-radius: 10px;
}

.claro :focus-visible,
.papel :focus-visible{ outline-color: var(--verde-escuro); }

html.travado{ overflow: hidden; }

.container{
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.pular{
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 200;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--menta);
    color: var(--tinta);
    font-weight: 700;
}

.pular:focus{ top: 16px; }

/* ---------- Temas de seção ---------- */
.escuro{ background: var(--tinta); color: var(--claro); }
.claro{ background: var(--creme); color: var(--texto); }
.papel{ background: var(--papel); color: var(--texto); }

/* ---------- Tipografia de seção ---------- */
em{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
    padding-right: 0.04em;
}

.claro em, .papel em{ color: var(--verde-escuro); }
.escuro em, .hero em, .rodape em{ color: var(--menta); }

.rotulo{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--verde-escuro);
}

.rotulo::before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.escuro .rotulo, .rodape .rotulo{ color: var(--menta); }

.secao-topo{ margin-bottom: clamp(40px, 5vw, 64px); }

.secao-topo h2,
.sobre h2,
.duvidas h2{
    font-size: clamp(2.25rem, 1.3rem + 3.8vw, 4.5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.secao-topo-linha{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
}

.secao-topo-linha h2{ max-width: 16ch; }

.secao-descricao{
    max-width: 38ch;
    font-size: 17px;
    line-height: 1.6;
    color: var(--texto-suave);
}

/* ---------- Botões ---------- */
.botao{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.2s var(--ease), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.botao:hover{ transform: translateY(-2px); }
.botao svg{ flex-shrink: 0; }

.botao-verde{ background: var(--verde); color: var(--tinta); }
.botao-verde:hover{ background: var(--menta); }

.botao-contorno{ border-color: rgba(237, 242, 234, 0.28); color: var(--claro); }
.botao-contorno:hover{ background: rgba(237, 242, 234, 0.08); border-color: rgba(237, 242, 234, 0.5); }

.botao-escuro{ background: var(--tinta); color: var(--claro); }
.botao-escuro:hover{ background: var(--tinta-3); }

.botao-grande{ min-height: 56px; padding: 0 28px; font-size: 16px; }
.botao-pequeno{ padding: 0 18px; font-size: 14px; }

.botao-icone{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--linha-escura);
    color: var(--claro);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.botao-icone:hover{ background: rgba(237, 242, 234, 0.08); border-color: rgba(237, 242, 234, 0.3); }

/* ---------- Header ---------- */
.topo{
    position: fixed; /* acompanha a rolagem */
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--tinta);
    border-bottom: 1px solid var(--linha-escura);
}

.topo-barra{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1240px;
    height: 76px;
    margin-inline: auto;
    padding-inline: var(--gutter);
    color: var(--claro);
}

.topo-logo{ display: flex; align-items: center; border-radius: 12px; }
.topo-logo img{ width: 52px; height: 52px; }

.topo-nav{ display: flex; gap: 2px; }

.topo-nav a{
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    color: var(--claro-suave);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.topo-nav a:hover{ color: var(--claro); background: rgba(237, 242, 234, 0.07); }

.topo-acoes{ display: flex; align-items: center; gap: 8px; }

.menu-botao{
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    border: 1px solid var(--linha-escura);
    border-radius: 50%;
    background: transparent;
}

.menu-botao span{
    position: absolute;
    top: calc(50% - 1px);
    left: 13px;
    right: 13px;
    height: 2px;
    border-radius: 2px;
    background: var(--claro);
    transition: transform 0.3s var(--ease);
}

.menu-botao span:first-child{ transform: translateY(-4px); }
.menu-botao span:last-child{ transform: translateY(4px); }

.menu-aberto .menu-botao span:first-child{ transform: rotate(45deg); }
.menu-aberto .menu-botao span:last-child{ transform: rotate(-45deg); }

.menu-mobile{
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 110px var(--gutter) 32px;
    background: var(--tinta);
    color: var(--claro);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
}

.menu-mobile nav{ display: flex; flex-direction: column; }

.menu-mobile nav a{
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--linha-escura);
    font-size: clamp(1.75rem, 1.2rem + 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.menu-mobile nav a em{ font-size: 18px; color: var(--menta); }

.menu-mobile-acoes{ display: grid; gap: 10px; }
.menu-mobile-acoes .botao{ min-height: 56px; }

.menu-aberto .menu-mobile{
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

@media (max-width: 960px){
    .topo-nav{ display: none; }
    .topo-acoes > .botao-icone{ display: none; }
    .menu-botao{ display: inline-flex; }
    .menu-mobile{ display: flex; }
}

@media (max-width: 380px){
    .topo-acoes .botao-pequeno span{ display: none; }
    .topo-acoes .botao-pequeno{ width: 44px; padding: 0; }
}

/* ---------- Hero ---------- */
.hero{
    position: relative;
    overflow: hidden;
    padding-top: clamp(112px, 14vw, 150px);
    background:
        radial-gradient(55% 60% at 85% 15%, rgba(41, 183, 64, 0.2), transparent 70%),
        radial-gradient(40% 50% at 0% 100%, rgba(139, 234, 152, 0.08), transparent 70%),
        var(--tinta);
    color: var(--claro);
}

.hero-grid{
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: clamp(40px, 5vw, 72px);
    padding-bottom: clamp(56px, 7vw, 96px);
}

.hero-texto{ display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }

/* Entrada do topo: começa assim que a página aparece, sem esperar o
   JavaScript (se o celular estiver lento, o texto não fica escondido). */
@keyframes hero-entrada{
    from{ opacity: 0; translate: 0 18px; }
    to{ opacity: 1; translate: none; }
}
.hero-entrada{ animation: hero-entrada 0.7s var(--ease) both; }
.hero-entrada-2{ animation-delay: 0.15s; }

@media (prefers-reduced-motion: reduce){
    .hero-entrada{ animation: none; }
}

.selo{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--linha-escura);
    background: rgba(237, 242, 234, 0.04);
    font-size: 13px;
    font-weight: 600;
    color: var(--claro-suave);
}

.selo-ponto{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--verde);
    box-shadow: 0 0 0 4px rgba(41, 183, 64, 0.22);
}

.hero h1{
    font-size: clamp(2.75rem, 1.4rem + 5.4vw, 6rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.hero-sub{
    max-width: 50ch;
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1875rem);
    line-height: 1.6;
    color: var(--claro-suave);
}

.hero-ctas{ display: flex; flex-wrap: wrap; gap: 12px; }

.hero-provas{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--claro-suave);
}

.hero-provas li{ display: inline-flex; align-items: center; gap: 8px; }
.hero-provas svg{ color: var(--verde); }

.hero-visual{ position: relative; }

.hero-foto{
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: 36px;
    overflow: hidden;
    border: 1px solid var(--linha-escura);
    background: var(--tinta-3);
}

.hero-foto img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 40%;
}

.flutuante{
    position: absolute;
    z-index: 2;
    border-radius: 24px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
    animation: flutuar 7s ease-in-out infinite;
}

.flutuante-campanha{
    left: -56px;
    bottom: 36px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 300px;
    padding: 22px;
    background: var(--papel);
    color: var(--texto);
    transition: box-shadow 0.3s ease;
}

.flutuante-campanha strong{ font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; }
.flutuante-campanha > span:not(.etiqueta):not(.flutuante-cta){ color: var(--texto-suave); font-size: 15px; }

.etiqueta{
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--verde);
    color: var(--tinta);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.flutuante-cta{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-weight: 700;
    color: var(--verde-escuro);
}

.flutuante-cta svg{ transition: transform 0.25s var(--ease); }
.flutuante-campanha:hover .flutuante-cta svg{ transform: translate(3px, -3px); }

.flutuante-numero{
    top: 40px;
    right: -28px;
    display: flex;
    flex-direction: column;
    padding: 18px 22px;
    background: var(--verde);
    color: var(--tinta);
    animation-delay: -3.5s;
}

.flutuante-numero strong{ font-size: 34px; line-height: 1; letter-spacing: -0.04em; }
.flutuante-numero span{ font-size: 13px; font-weight: 600; }

@keyframes flutuar{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
}

/* Faixa em movimento */
.faixa{
    overflow: hidden;
    border-top: 1px solid var(--linha-escura);
    padding: 22px 0;
}

.faixa-trilho{
    display: flex;
    align-items: center;
    width: max-content;
    animation: deslizar 45s linear infinite;
}

.faixa-trilho span{
    margin-right: 36px;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
    line-height: 1.1;
    white-space: nowrap;
    color: var(--claro);
}

.faixa-trilho svg{
    width: 22px;
    height: 22px;
    margin-right: 36px;
    color: var(--verde);
    flex-shrink: 0;
}

@keyframes deslizar{
    to{ transform: translateX(-50%); }
}

.pausado .faixa-trilho,
.pausado .logos-trilho{ animation-play-state: paused; }

@media (max-width: 900px){
    .hero-grid{ grid-template-columns: 1fr; }
    .hero-foto{ aspect-ratio: 4 / 3.4; border-radius: 28px; }
    .flutuante-campanha{
        position: relative;
        left: auto;
        bottom: auto;
        width: auto;
        margin: -72px 16px 0;
        animation: none;
    }
    .flutuante-numero{ top: 16px; right: 16px; padding: 14px 16px; border-radius: 18px; }
    .flutuante-numero strong{ font-size: 26px; }
}

@media (max-width: 560px){
    .hero-ctas{ width: 100%; }
    .hero-ctas .botao{ flex: 1 1 100%; }
}

/* ---------- Hero com vídeo de fundo ---------- */
.escuro .secao-descricao{ color: var(--claro-suave); }

.hero-com-video{
    display: flex;
    flex-direction: column;
    min-height: min(100svh, 940px);
}

.hero-video-fundo{
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Véu escuro: garante leitura do texto sobre o vídeo */
.hero-video-veu{
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(6, 17, 10, 0.75) 0%, rgba(6, 17, 10, 0) 22%),
        linear-gradient(to top, rgba(6, 17, 10, 0.95) 0%, rgba(6, 17, 10, 0) 32%),
        linear-gradient(90deg, rgba(6, 17, 10, 0.92) 0%, rgba(6, 17, 10, 0.72) 36%, rgba(6, 17, 10, 0.18) 70%, rgba(6, 17, 10, 0.3) 100%);
}

.hero-com-video .hero-grid{
    position: relative;
    z-index: 1;
    flex: 1;
}

/* Sem a foto, o texto ocupa o topo e os cards viram uma barra
   ancorada embaixo, alinhada com o conteúdo. */
.hero-com-video .hero-grid{
    grid-template-columns: 1fr;
    align-content: center;
    gap: clamp(40px, 6vw, 72px);
    padding-bottom: 64px;
}

.hero-com-video .hero-texto{ max-width: 760px; gap: 22px; }
.hero-com-video{ padding-top: clamp(104px, 11vw, 128px); }
.hero-com-video h1{ font-size: clamp(2.75rem, 1.4rem + 4.6vw, 5.25rem); }

.hero-com-video .hero-visual{
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.hero-com-video .flutuante{
    position: relative;
    inset: auto;
    animation: none;
}

.hero-com-video .flutuante-campanha{
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "tag titulo cta"
        "tag texto  cta";
    align-items: center;
    column-gap: 20px;
    row-gap: 2px;
    width: auto;
    max-width: 640px;
    padding: 18px 24px;
    border-radius: 22px;
}

.hero-com-video .flutuante-campanha .etiqueta{ grid-area: tag; align-self: center; }
.hero-com-video .flutuante-campanha strong{ grid-area: titulo; font-size: 19px; }
.hero-com-video .flutuante-campanha > span:not(.etiqueta):not(.flutuante-cta){ grid-area: texto; font-size: 14px; }

.hero-com-video .flutuante-cta{
    grid-area: cta;
    margin: 0;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--verde);
    color: var(--tinta);
    white-space: nowrap;
}

.hero-com-video .flutuante-numero{
    order: 0;
    justify-content: center;
    margin: 0;
    padding: 18px 24px;
    border-radius: 22px;
    background: rgba(6, 17, 10, 0.6);
    border: 1px solid rgba(237, 242, 234, 0.18);
    color: var(--claro);
}

.hero-com-video .flutuante-numero span{ color: var(--claro-suave); }

@media (max-width: 900px){
    .hero-video-veu{
        background:
            linear-gradient(to bottom, rgba(6, 17, 10, 0.85) 0%, rgba(6, 17, 10, 0.72) 45%, rgba(6, 17, 10, 0.92) 100%);
    }
    .hero-com-video .hero-visual{ flex-direction: column; padding-right: 0; }
    .hero-com-video .flutuante-campanha{
        grid-template-columns: 1fr;
        grid-template-areas: "tag" "titulo" "texto" "cta";
        row-gap: 8px;
        max-width: none;
        margin: 0;
    }
    .hero-com-video .flutuante-campanha .etiqueta{ justify-self: start; }
    .hero-com-video .flutuante-cta{ justify-self: start; margin-top: 6px; }
    .hero-com-video .flutuante-numero{ display: none; }
    .hero-com-video{ min-height: 0; }
}

/* ---------- Atendimento / garota-propaganda ---------- */
.atendimento{ padding-block: var(--secao-y); }

.atendimento-grid{
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: clamp(40px, 6vw, 96px);
}

.atendimento-foto{ position: relative; }

.atendimento-foto picture{
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 36px;
    background: var(--creme);
    box-shadow: 0 40px 80px -40px rgba(11, 21, 16, 0.45);
}

.atendimento-foto img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 40%;
}

.atendimento-selo{
    position: absolute;
    left: -20px;
    bottom: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--verde);
    color: var(--tinta);
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 20px 40px -16px rgba(11, 21, 16, 0.45);
}

.atendimento-texto{ display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.atendimento-texto .rotulo{ margin-bottom: -8px; }

.atendimento-texto h2{
    font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.25rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.atendimento-texto > p:not(.rotulo){ max-width: 48ch; font-size: 18px; line-height: 1.65; color: var(--texto-suave); }

.atendimento-lista{ display: flex; flex-direction: column; gap: 12px; }
.atendimento-lista li{ display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; }

.atendimento-lista svg{
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 50%;
    background: var(--verde);
    color: var(--tinta);
}

@media (max-width: 900px){
    .atendimento-grid{ grid-template-columns: 1fr; }
    .atendimento-foto picture{ aspect-ratio: 4 / 4.2; border-radius: 28px; }
    .atendimento-selo{ left: 16px; bottom: 16px; }
}

@media (max-width: 560px){
    .atendimento-texto .botao{ width: 100%; }
}

/* ---------- Números ---------- */
.numeros{ padding-block: var(--secao-y); }

.bento-numeros{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.numero{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    min-height: 210px;
    padding: 28px;
    border-radius: 28px;
    border: 1px solid var(--linha-escura);
    background: var(--tinta-2);
}

.numero-icone{ margin-bottom: auto; color: var(--menta); }

.numero strong{
    font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
}

.numero span{ font-size: 16px; color: var(--claro-suave); }

.numero-grande{
    grid-column: span 2;
    grid-row: span 2;
    min-height: 436px;
    background:
        radial-gradient(70% 70% at 100% 0%, rgba(41, 183, 64, 0.28), transparent 70%),
        var(--tinta-2);
}

.numero-grande strong{ font-size: clamp(4rem, 2rem + 8vw, 9.5rem); }
.numero-grande span{ font-size: 20px; }

.numero-verde{ grid-column: span 2; background: var(--verde); border-color: transparent; color: var(--tinta); }
.numero-verde .numero-icone{ color: var(--tinta); }
.numero-verde span{ color: rgba(6, 17, 10, 0.78); }

@media (max-width: 860px){
    .bento-numeros{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .numero-grande{ grid-row: auto; min-height: 280px; }
    .numero{ min-height: 180px; padding: 22px; }
}

/* ---------- Serviços ---------- */
.servicos{ padding-block: var(--secao-y); }

/* Os cards ficam abertos em leque, como cartas na mão: cada um com uma
   inclinação (--r) e uma altura (--y). Ao passar o mouse, a carta endireita
   e sobe; ao clicar, vira e mostra o verso. */
.bento-servicos{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding-block: 24px 40px;
}

.servico{
    --r: 0deg;
    --y: 0px;
    position: relative;
    cursor: pointer;
    /* A carta funciona como botão: sem seleção de texto nem cursor de
       digitação piscando ao clicar (inclusive com a navegação por cursor, F7) */
    -webkit-user-select: none;
    user-select: none;
    caret-color: transparent;
    -webkit-tap-highlight-color: transparent;
    transform: translateY(var(--y)) rotate(var(--r));
    transform-origin: 50% 100%;
    transition: transform 0.5s var(--ease);
}

.servico-a{ --r: -5deg; --y: 30px; }
.servico-b{ --r: -1.8deg; --y: 6px; }
.servico-c{ --r: 1.8deg; --y: 6px; }
.servico-d{ --r: 5deg; --y: 30px; }

.servico:hover,
.servico:focus-within,
.servico.virado{ --r: 0deg; --y: -12px; z-index: 2; }

/* Frente e verso empilhados na mesma célula: o card fica com a altura da
   face mais alta e nada pula. Cada face gira sozinha, com a perspectiva no
   próprio transform — sem preserve-3d, que no Chrome às vezes some com a
   face e deixa o card em branco. A troca de "visibility" no meio do giro
   garante que a face certa apareça mesmo se o backface-visibility falhar. */
.servico-virar{
    display: grid;
    height: 100%;
}

.servico-face{
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 14px 20px;
    border-radius: 28px;
    border: 1px solid var(--linha-clara);
    background: var(--branco);
    box-shadow: 0 24px 50px -30px rgba(11, 21, 16, 0.35);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: perspective(1600px) rotateY(0deg);
    will-change: transform;
    transition:
        transform 0.7s cubic-bezier(0.45, 0, 0.25, 1),
        visibility 0s linear 0.35s,
        box-shadow 0.35s var(--ease);
}

.servico:hover .servico-face{ box-shadow: 0 40px 70px -30px rgba(11, 21, 16, 0.5); }

.servico.virado .servico-frente{ transform: perspective(1600px) rotateY(180deg); visibility: hidden; }
.servico.virado .servico-verso{ transform: perspective(1600px) rotateY(0deg); visibility: visible; }

.servico img{
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: 20px;
    background: var(--creme);
}

.servico-num{
    position: absolute;
    top: 26px;
    left: 26px;
    z-index: 1;
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--papel);
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    color: var(--verde-escuro);
}

.servico-texto{ display: flex; flex-direction: column; gap: 8px; padding-inline: 6px; }

.servico h3{
    font-size: 21px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.servico p{ font-size: 15px; line-height: 1.55; color: var(--texto-suave); }

.servico-botao{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    min-height: 44px;
    margin: auto 6px 0;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--creme);
    color: var(--texto);
    font-size: 15px;
    font-weight: 700;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.servico-botao svg,
.servico-voltar svg{ transition: transform 0.45s var(--ease); }

.servico:hover .servico-botao{ background: var(--verde-escuro); color: var(--branco); }
.servico:hover .servico-botao svg{ transform: rotate(180deg); }

/* Cores de cada carta */
.servico-a .servico-frente{ background: var(--tinta); border-color: transparent; color: var(--claro); }
.servico-a .servico-frente p{ color: var(--claro-suave); }
.servico-a .servico-botao{ background: var(--verde); color: var(--tinta); }
.servico-a:hover .servico-botao{ background: var(--menta); color: var(--tinta); }

.servico-c .servico-frente{ background: var(--menta); border-color: transparent; color: var(--tinta); }
.servico-c .servico-frente p{ color: rgba(6, 17, 10, 0.75); }
.servico-c .servico-botao{ background: rgba(6, 17, 10, 0.1); }

.servico-d .servico-frente{ background: var(--verde); border-color: transparent; color: var(--tinta); }
.servico-d .servico-frente p{ color: rgba(6, 17, 10, 0.78); }
.servico-d .servico-botao{ background: var(--tinta); color: var(--claro); }

.servico-c:hover .servico-botao,
.servico-d:hover .servico-botao{ background: var(--tinta-3); color: var(--claro); }

/* Verso */
.servico-verso{
    transform: perspective(1600px) rotateY(-180deg);
    visibility: hidden;
    gap: 12px;
    padding: 22px;
    background:
        radial-gradient(90% 60% at 100% 0%, rgba(41, 183, 64, 0.3), transparent 70%),
        var(--tinta);
    border-color: transparent;
    color: var(--claro);
}

.servico-verso .servico-num{
    position: static;
    align-self: flex-start;
    margin-bottom: 4px;
    background: rgba(237, 242, 234, 0.1);
    color: var(--menta);
}

.servico .servico-rotulo{
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--menta);
}

.servico-verso p:not(.servico-rotulo){ font-size: 14px; color: var(--claro-suave); }

.servico-verso-acoes{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
}

.servico-contato{
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--verde);
    color: var(--tinta);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}

.servico-contato:hover{ background: var(--menta); }

.servico-voltar{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(237, 242, 234, 0.2);
    border-radius: 50%;
    background: transparent;
    color: var(--claro);
    transition: background-color 0.2s ease;
}

.servico:hover .servico-voltar{ background: rgba(237, 242, 234, 0.1); }
.servico:hover .servico-voltar svg{ transform: rotate(-180deg); }

/* O verso da carta escura é verde, para contrastar */
.servico-a .servico-verso{ background: var(--verde); color: var(--tinta); }
.servico-a .servico-verso p:not(.servico-rotulo){ color: rgba(6, 17, 10, 0.8); }
.servico-a .servico-rotulo,
.servico-a .servico-verso .servico-num{ color: var(--tinta); }
.servico-a .servico-verso .servico-num{ background: rgba(6, 17, 10, 0.1); }
.servico-a .servico-contato{ background: var(--tinta); color: var(--claro); }
.servico-a .servico-contato:hover{ background: var(--tinta-3); }
.servico-a .servico-voltar{ border-color: rgba(6, 17, 10, 0.25); color: var(--tinta); }
.servico-a:hover .servico-voltar{ background: rgba(6, 17, 10, 0.08); }

/* Tablet: 2 × 2, leque mais discreto */
@media (max-width: 1024px){
    .bento-servicos{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-block: 16px 24px; }
    .servico-a, .servico-c{ --r: -2deg; --y: 0px; }
    .servico-b, .servico-d{ --r: 2deg; --y: 0px; }
}

/* Celular: as cartas viram um carrossel de arrastar para o lado */
@media (max-width: 620px){
    .bento-servicos{
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 80%;
        gap: 16px;
        margin-inline: calc(-1 * var(--gutter));
        padding: 20px var(--gutter) 28px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }
    .bento-servicos::-webkit-scrollbar{ display: none; }
    /* No carrossel as cartas 2–4 ficam fora da tela (na lateral), então a
       animação de entrada nunca dispararia e elas ficariam invisíveis até
       arrastar. Aqui elas já aparecem prontas. */
    .js .bento-servicos > .entrar-esquerda,
    .js .bento-servicos > .entrar-direita{ opacity: 1; translate: none; }
    .servico{ scroll-snap-align: center; }
    .servico-a, .servico-c{ --r: -1.5deg; }
    .servico-b, .servico-d{ --r: 1.5deg; }
    .servico:hover, .servico:focus-within, .servico.virado{ --y: 0px; }
}

/* Sem giros nem inclinações para quem pediu menos movimento */
@media (prefers-reduced-motion: reduce){
    .servico, .servico-face{ transition: none; }
}

/* ---------- Parceiros ---------- */
/* Faixa escura: título à esquerda e, à direita, os logos em blocos brancos
   deslizando sem parar (vai até a borda da tela). */
.parceiros{
    --sangria: max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter)));
    padding-block: clamp(64px, 8vw, 104px);
    overflow-x: clip;
}

.parceiros-grid{
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

.parceiros-texto{ display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.parceiros-texto .rotulo{ margin-bottom: 0; }

.parceiros-texto h2{
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

/* Faixa de logos em movimento (duas cópias iguais: -50% fecha o loop).
   A máscara apaga as pontas suavemente. */
.logos{
    overflow: hidden;
    margin-right: calc(-1 * var(--sangria));
    padding-block: 12px 26px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 120px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 120px), transparent);
}

.logos-trilho{
    display: flex;
    width: max-content;
    animation: deslizar 40s linear infinite;
}

.logos:hover .logos-trilho,
.pausado .logos-trilho{ animation-play-state: paused; }

.logos-grupo{
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logos-grupo li{
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: clamp(168px, 16vw, 208px);
    height: clamp(104px, 10vw, 128px);
    margin-right: 16px;
    padding: 20px;
    border-radius: 22px;
    background: var(--branco);
    box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.6);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.logos-grupo li:nth-child(even){ transform: translateY(14px); }

.logos-grupo li:hover{
    transform: translateY(-6px);
    box-shadow: 0 0 0 2px var(--menta), 0 28px 50px -24px rgba(41, 183, 64, 0.6);
}

.logos-grupo img{
    width: auto;
    height: calc(var(--h) * 0.85);
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 900px){
    .parceiros-grid{ grid-template-columns: minmax(0, 1fr); }
    .logos{
        margin-left: calc(-1 * var(--gutter));
        -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    }
}

@media (max-width: 560px){
    .logos-grupo li{ width: 156px; height: 100px; padding: 16px; }
    .logos-grupo li:nth-child(even){ transform: translateY(10px); }
}

/* Sem movimento: mostra os logos parados, quebrando linha */
@media (prefers-reduced-motion: reduce){
    .logos{ margin-right: 0; -webkit-mask-image: none; mask-image: none; }
    .logos-trilho{ width: auto; animation: none; }
    .logos-grupo{ flex-wrap: wrap; flex-shrink: 1; gap: 16px; }
    .logos-grupo li{ margin-right: 0; }
    .logos-grupo li:nth-child(even){ transform: none; }
    .logos-grupo[aria-hidden="true"]{ display: none; }
}

/* ---------- Sobre ---------- */
/* A ilustração do foguete foi feita para ficar colada no canto inferior
   direito: o painel estrelado é cortado à direita e embaixo e se emenda
   com a seção escura da Missão logo abaixo. */
.sobre{
    position: relative;
    overflow: hidden;
    padding-block: var(--secao-y);
}

.sobre-conteudo{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: min(560px, 48%);
}

.sobre h2{ font-size: clamp(2.75rem, 1.4rem + 5vw, 5.75rem); line-height: 0.98; }

.sobre-texto{ display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.sobre-texto p{ font-size: 18px; line-height: 1.7; color: var(--texto-suave); }

.sobre-selos{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.sobre-selos span{
    display: flex;
    flex-direction: column;
    padding: 16px 22px;
    border-radius: 22px;
    border: 1px solid var(--linha-clara);
    background: var(--branco);
    font-size: 14px;
    color: var(--texto-suave);
}

.sobre-selos strong{
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--texto);
}

.sobre-imagem{
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(52vw, 942px);
    max-width: none;
}

@media (max-width: 860px){
    .sobre{ padding-bottom: 0; }
    .sobre-conteudo{ max-width: none; }
    .sobre-texto p{ font-size: 17px; }
    .sobre-imagem{
        position: static;
        width: 100%;
        max-width: 620px;
        margin: 48px 0 0 auto;
    }
}

/* ---------- Missão ---------- */
.missao{
    position: relative;
    overflow: hidden;
    padding-block: var(--secao-y);
    background:
        radial-gradient(50% 50% at 100% 0%, rgba(41, 183, 64, 0.14), transparent 70%),
        var(--tinta);
}

.missao > .container{ position: relative; z-index: 1; }

/* Foguete desenhado em traço fino, no fundo */
.missao-foguete{
    position: absolute;
    top: clamp(-80px, -5.5vw, -32px);
    right: -3%;
    z-index: 0;
    width: min(700px, 58vw);
    height: auto;
    pointer-events: none;
    stroke: var(--menta);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.missao-foguete path,
.missao-foguete circle,
.missao-foguete ellipse{ vector-effect: non-scaling-stroke; }

.foguete-corpo{ opacity: 0.42; animation: foguete-voo 7s ease-in-out infinite; }
.foguete-rastro{ opacity: 0.3; stroke-width: 2.4; }
.foguete-planeta{ opacity: 0.16; }
.foguete-chama{ stroke: var(--verde); animation: foguete-chama 0.9s ease-in-out infinite; }
.foguete-estrelas{ fill: var(--menta); stroke: none; opacity: 0.4; animation: foguete-brilho 4s ease-in-out infinite; }

@keyframes foguete-voo{
    0%, 100%{ transform: translate(0, 0); }
    50%{ transform: translate(8px, -12px); }
}

@keyframes foguete-chama{
    0%, 100%{ opacity: 1; }
    50%{ opacity: 0.35; }
}

@keyframes foguete-brilho{
    0%, 100%{ opacity: 0.4; }
    50%{ opacity: 0.15; }
}

.pausado .foguete-corpo,
.pausado .foguete-chama,
.pausado .foguete-estrelas{ animation-play-state: paused; }

@media (max-width: 960px){
    .missao-foguete{ top: -36px; right: -6%; width: min(360px, 78vw); opacity: 0.7; }
}

.missao-topo{
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
    gap: 40px 64px;
}

.missao-frase{
    font-size: clamp(1.5rem, 1rem + 1.9vw, 2.5rem);
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: -0.025em;
}

.missao-foto img{ width: 100%; border-radius: 28px; }

/* Linha do tempo dos pilares: uma bolinha percorre a linha e, ao chegar
   em cada ponto, acende o pilar (classe .ativo, controlada no site.js).
   --passo vai de 0 a 3 e define onde a bolinha está. */
.pilares{
    --passo: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: clamp(56px, 7vw, 96px);
}

/* A linha vai do centro do 1º ponto ao centro do último:
   coluna = (100% - 3 × 24px) / 4 → início em metade da coluna,
   comprimento de 3 colunas + 3 espaços. */
.pilares-trilha{
    position: absolute;
    top: 27px;
    left: calc(12.5% - 9px);
    width: calc(75% + 18px);
    height: 2px;
    border-radius: 2px;
    background: var(--linha-escura);
}

.pilares-progresso{
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--menta), var(--verde));
    transform-origin: left center;
    transform: scaleX(calc(var(--passo) / 3));
    transition: transform 2.2s cubic-bezier(0.45, 0, 0.25, 1);
}

.pilares-bolinha{
    position: absolute;
    top: 50%;
    left: calc(var(--passo) * 100% / 3);
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: var(--menta);
    box-shadow: 0 0 0 6px rgba(139, 234, 152, 0.18), 0 0 18px 4px rgba(139, 234, 152, 0.55);
    transition: left 2.2s cubic-bezier(0.45, 0, 0.25, 1), opacity 0.3s ease;
}

.pilares.sumindo .pilares-bolinha{ opacity: 0; }
.pilares.reiniciando .pilares-progresso,
.pilares.reiniciando .pilares-bolinha{ transition: none; }

.pilar{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.pilar-no{
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(237, 242, 234, 0.18);
    background: var(--tinta);
    color: var(--menta);
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.4s var(--ease);
}

.pilar.passado .pilar-no{ border-color: rgba(139, 234, 152, 0.55); }

.pilar.ativo .pilar-no{
    background: var(--verde);
    border-color: var(--verde);
    color: var(--tinta);
    transform: scale(1.12);
    box-shadow: 0 0 0 8px rgba(41, 183, 64, 0.16), 0 10px 30px -6px rgba(41, 183, 64, 0.6);
}

.pilar-caixa{
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    width: 100%;
    padding: 24px;
    border-radius: 22px;
    border: 1px solid var(--linha-escura);
    background: rgba(237, 242, 234, 0.02);
    transition: border-color 0.4s ease, background-color 0.4s ease, transform 0.4s var(--ease);
}

.pilar.ativo .pilar-caixa{
    border-color: rgba(139, 234, 152, 0.4);
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(41, 183, 64, 0.16), transparent 70%),
        var(--tinta-2);
    transform: translateY(-4px);
}

.pilar h3{ font-size: 20px; font-weight: 700; letter-spacing: -0.015em; transition: color 0.4s ease; }
.pilar.ativo h3{ color: var(--menta); }
.pilar p{ font-size: 15px; line-height: 1.6; color: var(--claro-suave); }

@media (max-width: 960px){
    .missao-topo{ grid-template-columns: 1fr; }
    .missao-foto{ max-width: 560px; }
    .pilares{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
    .pilares-trilha{ display: none; }
}

@media (max-width: 560px){
    .pilares{ grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- Feedbacks ---------- */
.feedbacks{ padding-block: var(--secao-y); }

.feedbacks-grid{
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(40px, 6vw, 88px);
}

.feedbacks-texto{ display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.feedbacks-texto .rotulo{ margin-bottom: -6px; }

.feedbacks-texto h2{
    font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.feedbacks-sub{ max-width: 42ch; font-size: 17px; line-height: 1.6; color: var(--texto-suave); }

.feedbacks-estrelas{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--branco);
    border: 1px solid var(--linha-clara);
    font-size: 14px;
    font-weight: 500;
    color: var(--texto-suave);
}

.estrelas{ display: inline-flex; gap: 2px; color: #F5B301; }

/* Palco escuro com os prints empilhados como cartas: o atual na frente,
   os vizinhos inclinados atrás. A posição de cada um vem do data-pos
   (0 = frente, 1 = direita, -1 = esquerda, 2 = escondido atrás),
   que o site.js atualiza. */
.feedbacks-palco{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: clamp(28px, 4vw, 44px) clamp(16px, 3vw, 32px) 24px;
    border-radius: 36px;
    overflow: hidden;
    background:
        radial-gradient(60% 50% at 50% 30%, rgba(41, 183, 64, 0.35), transparent 70%),
        radial-gradient(80% 60% at 100% 100%, rgba(139, 234, 152, 0.12), transparent 70%),
        var(--tinta);
    color: var(--claro);
}

.feedbacks-pilha{
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    caret-color: transparent;
    height: clamp(400px, 40vw, 520px);
    touch-action: pan-y;
}

.feedbacks-pilha img{
    --x: 0%;
    --s: 1;
    --r: 0deg;
    position: absolute;
    top: 0;
    left: 50%;
    width: auto;
    height: 100%;
    border-radius: 24px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
    transform: translateX(-50%) translateX(var(--x)) scale(var(--s)) rotate(var(--r));
    transition: transform 0.6s var(--ease), opacity 0.6s ease, filter 0.6s ease;
    cursor: pointer;
    user-select: none;
    -webkit-user-drag: none;
}

.feedbacks-pilha img[data-pos="0"]{ z-index: 3; cursor: default; }
.feedbacks-pilha img[data-pos="1"]{ --x: 60%; --s: 0.82; --r: 6deg; z-index: 2; opacity: 0.6; filter: saturate(0.6); }
.feedbacks-pilha img[data-pos="-1"]{ --x: -60%; --s: 0.82; --r: -6deg; z-index: 2; opacity: 0.6; filter: saturate(0.6); }
.feedbacks-pilha img[data-pos="2"]{ --s: 0.7; z-index: 1; opacity: 0; }
.feedbacks-pilha img[data-pos="1"]:hover,
.feedbacks-pilha img[data-pos="-1"]:hover{ opacity: 0.85; }

.feedbacks-barra{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--linha-escura);
}

.feedbacks-legenda{ display: flex; flex-direction: column; gap: 2px; font-size: 16px; }

.feedbacks-contador{
    font-family: var(--serif);
    font-style: italic;
    font-size: 18px;
    color: var(--menta);
}

.setas{ display: flex; gap: 10px; }

.seta{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(237, 242, 234, 0.25);
    background: transparent;
    color: var(--claro);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.seta:hover{ background: var(--verde); border-color: var(--verde); color: var(--tinta); }

@media (max-width: 960px){
    .feedbacks-grid{ grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px){
    .feedbacks-pilha{ height: 380px; }
    .feedbacks-pilha img[data-pos="1"]{ --x: 52%; }
    .feedbacks-pilha img[data-pos="-1"]{ --x: -52%; }
    .seta{ width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce){
    .feedbacks-pilha img{ transition: none; }
}

/* ---------- Dúvidas ---------- */
.duvidas{ padding-bottom: var(--secao-y); }

.duvidas-bloco{
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 40px;
    padding: clamp(32px, 6vw, 80px);
    border-radius: 40px;
    overflow: hidden;
    background:
        radial-gradient(60% 80% at 100% 100%, rgba(139, 234, 152, 0.6), transparent 70%),
        var(--verde);
    color: var(--tinta);
}

.duvidas .rotulo,
.duvidas em{ color: var(--tinta); }

.duvidas-texto{ display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.duvidas-texto .rotulo{ margin-bottom: 0; }
.duvidas-texto > p:not(.rotulo){ font-size: 18px; color: rgba(6, 17, 10, 0.8); }

.duvidas-foto{
    width: 100%;
    max-width: 400px;
    justify-self: end;
    border-radius: 24px;
    box-shadow: 0 30px 60px -24px rgba(6, 17, 10, 0.5);
    transform: rotate(3deg);
    transition: transform 0.4s var(--ease);
}

.duvidas-bloco:hover .duvidas-foto{ transform: rotate(0deg) scale(1.02); }

@media (max-width: 860px){
    .duvidas-bloco{ grid-template-columns: 1fr; border-radius: 32px; }
    .duvidas-foto{ justify-self: start; max-width: 320px; }
}

@media (max-width: 560px){
    .duvidas-texto .botao{ width: 100%; white-space: normal; text-align: center; }
}

/* ---------- Rodapé ---------- */
.rodape{
    padding-top: var(--secao-y);
    background:
        radial-gradient(50% 40% at 0% 0%, rgba(41, 183, 64, 0.12), transparent 70%),
        var(--tinta);
    color: var(--claro);
    overflow: hidden;
}

.rodape-cta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--linha-escura);
}

.rodape-cta h2{
    font-size: clamp(2.75rem, 1.4rem + 5vw, 5.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}

.rodape-colunas{
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.4fr;
    gap: 40px 48px;
    padding-block: 56px;
}

.rodape-marca img{ width: 96px; height: 96px; margin-bottom: 16px; }
.rodape-marca p{ max-width: 26ch; color: var(--claro-suave); }

.rodape h3{
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(237, 242, 234, 0.5);
}

.rodape nav{ display: flex; flex-direction: column; align-items: flex-start; }

.rodape nav a,
.rodape-contatos a{
    padding: 6px 0;
    color: var(--claro-suave);
    transition: color 0.2s ease;
}

.rodape nav a:hover,
.rodape-contatos a:hover{ color: var(--menta); }

.rodape-contatos{ display: flex; flex-direction: column; gap: 6px; }
.rodape-contatos li{ display: flex; align-items: flex-start; gap: 12px; }
.rodape-contatos svg{ flex-shrink: 0; margin-top: 8px; color: var(--menta); }

.rodape-sociais{ display: flex; gap: 10px; margin-top: 20px; }

.rodape-marca-gigante{
    margin: 8px 0 0;
    padding-bottom: 0.12em;
    text-align: center;
    font-size: clamp(3.5rem, 15.5vw, 15.5rem);
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -0.055em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(237, 242, 234, 0.2);
    user-select: none;
}

.rodape-legal{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 32px;
    padding: 24px 0 32px;
    border-top: 1px solid var(--linha-escura);
    font-size: 13px;
    color: rgba(237, 242, 234, 0.55);
}

@media (max-width: 860px){
    .rodape-colunas{ grid-template-columns: 1fr 1fr; }
    .rodape-marca{ grid-column: 1 / -1; }
}

@media (max-width: 560px){
    .rodape-colunas{ grid-template-columns: 1fr; }
    .rodape-cta .botao{ width: 100%; }
    .rodape-legal{ flex-direction: column; padding-bottom: 96px; }
}

/* ---------- WhatsApp flutuante ---------- */
.whatsapp-flutuante{
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    color: var(--branco);
    box-shadow: 0 14px 30px -8px rgba(6, 17, 10, 0.5);
    transition: transform 0.25s var(--ease);
}

.whatsapp-flutuante:hover{ transform: translateY(-3px) scale(1.05); }

.menu-aberto .whatsapp-flutuante{ display: none; }

/* ---------- Banner de cookies ---------- */
.cookie-consent-banner{
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 16px 24px;
    max-width: 760px;
    margin-inline: auto;
    padding: 16px 16px 16px 24px;
    border-radius: 24px;
    border: 1px solid var(--linha-escura);
    background: var(--tinta-2);
    color: var(--claro);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(100% + 24px));
    transition: transform 0.5s var(--ease), opacity 0.5s ease, visibility 0s linear 0.5s;
}

.cookie-consent-banner.show{
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: transform 0.5s var(--ease), opacity 0.5s ease;
}

.cookie-consent-banner p{ font-size: 14px; line-height: 1.5; color: var(--claro-suave); }
.cookie-consent-banner a{ color: var(--menta); text-decoration: underline; }
.cookie-consent-banner .botao{ flex-shrink: 0; }

@media (max-width: 640px){
    .cookie-consent-banner{ flex-direction: column; align-items: stretch; padding: 20px; right: 12px; left: 12px; bottom: 12px; }
}

/* ---------- Páginas internas (FAQ / Política) ---------- */
.pagina-hero{
    padding: clamp(140px, 16vw, 190px) 0 clamp(56px, 7vw, 88px);
    background:
        radial-gradient(55% 70% at 85% 0%, rgba(41, 183, 64, 0.2), transparent 70%),
        var(--tinta);
    color: var(--claro);
}

.pagina-hero h1{
    font-size: clamp(2.75rem, 1.4rem + 5.4vw, 6rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.pagina-hero p:not(.rotulo){ max-width: 56ch; margin-top: 20px; font-size: 18px; color: var(--claro-suave); }

.pagina-conteudo{ padding-block: clamp(48px, 7vw, 96px) var(--secao-y); }

/* FAQ */
.faq-busca{
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 560px;
    margin-top: 32px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid rgba(237, 242, 234, 0.18);
    background: rgba(237, 242, 234, 0.06);
    color: var(--claro-suave);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.faq-busca:focus-within{ border-color: var(--menta); background: rgba(237, 242, 234, 0.1); }

.faq-busca input{
    flex: 1;
    min-width: 0;
    height: 56px;
    border: 0;
    background: transparent;
    color: var(--claro);
    font: inherit;
    font-size: 16px;
    outline: none;
}

.faq-busca input::placeholder{ color: rgba(237, 242, 234, 0.5); }

.pagina-hero .faq-busca-status{
    min-height: 24px;
    margin-top: 12px;
    padding-left: 20px;
    font-size: 15px;
    color: var(--claro-suave);
}

.faq-ver{
    padding: 0;
    border: 0;
    background: none;
    color: var(--menta);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.faq-item mark{
    padding: 0 2px;
    border-radius: 4px;
    background: rgba(139, 234, 152, 0.55);
    color: inherit;
}

.faq-grid{
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: start;
    gap: clamp(32px, 5vw, 72px);
}

/* Lateral fixa: categorias + cartão de contato */
.faq-lateral{
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-categorias{ display: flex; flex-direction: column; gap: 6px; }

.faq-cat{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 0 12px 0 18px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: var(--texto-suave);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.faq-cat em{
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(11, 21, 16, 0.06);
    color: inherit;
    font-family: var(--sans);
    font-style: normal;
    font-size: 13px;
    font-weight: 700;
}

.faq-cat:hover{ background: var(--branco); color: var(--texto); }

.faq-cat.ativo{ background: var(--tinta); color: var(--claro); }
.faq-cat.ativo em{ background: var(--verde); color: var(--tinta); }

.faq-contato{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 28px 24px;
    border-radius: 26px;
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(41, 183, 64, 0.35), transparent 70%),
        var(--tinta);
    color: var(--claro);
}

.faq-contato .rotulo{ margin-bottom: 0; color: var(--menta); }
.faq-contato h2{ font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.faq-contato em{ color: var(--menta); }
.faq-contato p:not(.rotulo){ font-size: 15px; line-height: 1.55; color: var(--claro-suave); }
.faq-contato .botao{ margin-top: 6px; }

/* Lista */
.faq-lista{ display: flex; flex-direction: column; gap: 48px; }

.faq-grupo{ display: flex; flex-direction: column; gap: 10px; }
.faq-grupo[hidden], .faq-item[hidden]{ display: none; }

.faq-grupo-titulo{
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.faq-grupo-titulo span{
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--verde-escuro);
}

.faq-item{
    border-radius: 20px;
    border: 1px solid var(--linha-clara);
    background: var(--branco);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-item:hover{ border-color: rgba(11, 21, 16, 0.2); }

.faq-item.aberto{
    border-color: rgba(41, 183, 64, 0.45);
    box-shadow: 0 20px 40px -28px rgba(11, 21, 16, 0.35);
}

.faq-item h3{ margin: 0; }

.faq-pergunta{
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 20px 20px 20px 24px;
    border: 0;
    background: transparent;
    color: var(--texto);
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-align: left;
    cursor: pointer;
}

/* Ícone "+" que vira "−" ao abrir */
.faq-icone{
    position: relative;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--creme);
    transition: background-color 0.25s ease, transform 0.35s var(--ease);
}

.faq-icone::before,
.faq-icone::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    margin: -1px 0 0 -7px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.35s var(--ease);
}

.faq-icone::after{ transform: rotate(90deg); }

.faq-pergunta:hover .faq-icone{ background: #E3E0D5; }
.faq-item.aberto .faq-icone{ background: var(--verde); transform: rotate(180deg); }
.faq-item.aberto .faq-icone::after{ transform: rotate(0deg); }

/* Resposta abre suavemente (0fr → 1fr) */
.faq-resposta{
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.35s var(--ease), visibility 0s linear 0.35s;
}

.faq-resposta > div{ overflow: hidden; }

.faq-resposta p{
    padding: 0 72px 22px 24px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--texto-suave);
}

.faq-item.aberto .faq-resposta{
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.35s var(--ease);
}

.faq-vazio{
    padding: 32px;
    border-radius: 20px;
    border: 1px dashed rgba(11, 21, 16, 0.2);
    font-size: 16px;
    color: var(--texto-suave);
    text-align: center;
}

.faq-vazio a{ color: var(--verde-escuro); font-weight: 700; text-decoration: underline; }

@media (max-width: 900px){
    .faq-grid{ grid-template-columns: minmax(0, 1fr); }
    .faq-lateral{ position: static; display: contents; }
    /* Categorias viram uma fileira de botões que rola para o lado */
    .faq-categorias{
        flex-direction: row;
        margin-inline: calc(-1 * var(--gutter));
        padding-inline: var(--gutter);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .faq-categorias::-webkit-scrollbar{ display: none; }
    .faq-cat{ flex: none; min-height: 44px; border-color: var(--linha-clara); background: var(--branco); }
    .faq-contato{ order: 2; }
    .faq-lista{ order: 1; gap: 36px; }
}

@media (max-width: 560px){
    .faq-pergunta{ padding: 18px 16px 18px 18px; font-size: 16px; }
    .faq-resposta p{ padding: 0 18px 20px; }
}

@media (prefers-reduced-motion: reduce){
    .faq-resposta, .faq-icone, .faq-icone::before, .faq-icone::after{ transition: none; }
}

/* Política de privacidade */
.politica-container{ max-width: 820px; }
.politica-container h1{ display: none; }

.politica-container h2{
    margin: 48px 0 14px;
    font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
    letter-spacing: -0.02em;
}

.politica-container p,
.politica-container ul{ margin-bottom: 16px; font-size: 17px; line-height: 1.75; color: var(--texto-suave); }

.politica-container ul{ padding-left: 22px; list-style: disc; }
.politica-container li{ margin-bottom: 8px; }
.politica-container strong{ color: var(--texto); }
.politica-container a{ color: var(--verde-escuro); text-decoration: underline; }

/* ---------- Entrada ao rolar ---------- */
.js .revelar{
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.js .revelar.visivel{ opacity: 1; transform: none; }

/* Imagens entram deslizando pela lateral.
   Usa a propriedade "translate" (separada de "transform"), então não
   interfere com hover, rotação ou flutuação que o elemento já tenha. */
.js .entrar-esquerda,
.js .entrar-direita{
    opacity: 0;
    transition:
        opacity 0.9s var(--ease),
        translate 1.1s var(--ease);
}

.js .entrar-esquerda{ translate: calc(-1 * var(--deslize)) 0; }
.js .entrar-direita{ translate: var(--deslize) 0; }

.js .entrar-esquerda.visivel,
.js .entrar-direita.visivel{
    opacity: 1;
    translate: 0 0;
}

:root{ --deslize: clamp(48px, 9vw, 140px); }

/* Evita rolagem lateral enquanto as imagens estão fora do lugar */
main{ overflow-x: clip; }

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

    *, *::before, *::after{
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .faixa-trilho, .logos-trilho, .flutuante, .foguete-corpo, .foguete-chama, .foguete-estrelas{ animation: none !important; }
    .js .revelar{ opacity: 1; transform: none; }
    .js .entrar-esquerda, .js .entrar-direita{ opacity: 1; translate: none; }
}