/* =====================================================================
   CutView - site vitrine
   Escuro, dourado, cinematografico. Sem framework, sem build.
   ===================================================================== */

:root {
    --preto:       #08080A;
    --preto-2:     #0E0E11;
    --superficie:  #15151A;
    --superficie-2:#1C1C22;
    --borda:       #26262E;
    --borda-forte: #3A3A46;

    --texto:       #F4F2EE;
    --texto-suave: #A8A49B;
    --texto-fraco: #78746C;

    --ouro:        #E3B341;
    --ouro-claro:  #F2CD6B;
    --ouro-escuro: #A87C1E;

    --raio:     14px;
    --raio-lg:  22px;
    --sombra:   0 30px 60px -25px rgba(0, 0, 0, .8);

    --fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --display: "Playfair Display", Georgia, "Times New Roman", serif;

    color-scheme: dark;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--preto);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -.025em; font-weight: 600; }

a { color: var(--ouro); text-decoration: none; }
a:hover { color: var(--ouro-claro); }

img { max-width: 100%; display: block; }

::selection { background: rgba(227, 179, 65, .25); }

:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .wrap { padding: 0 32px; } }

/* --- navegacao -------------------------------------------------------- */
.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    padding: 16px 0;
    transition: background-color .4s ease, backdrop-filter .4s ease, border-color .4s ease;
    border-bottom: 1px solid transparent;
}
.nav.is-solid {
    background: rgba(8, 8, 10, .82);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom-color: var(--borda);
}
.nav__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--texto); }
.marca svg { color: var(--ouro); }
.marca span { font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.marca b { font-weight: 700; }

.nav__links { display: none; gap: 28px; }
@media (min-width: 880px) { .nav__links { display: flex; } }
.nav__links a { color: var(--texto-suave); font-size: 14.5px; }
.nav__links a:hover { color: var(--texto); }

/* --- botoes ----------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 26px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .18s cubic-bezier(.2,.7,.3,1), background-color .25s, box-shadow .25s, color .25s;
    text-align: center;
}
.btn--ouro {
    background: linear-gradient(135deg, var(--ouro-claro), var(--ouro));
    color: #16120A;
    box-shadow: 0 10px 30px -12px rgba(227, 179, 65, .7);
}
.btn--ouro:hover { transform: translateY(-2px); color: #16120A; box-shadow: 0 16px 40px -12px rgba(227, 179, 65, .85); }

.btn--linha { border-color: var(--borda-forte); color: var(--texto); }
.btn--linha:hover { border-color: var(--ouro); color: var(--ouro); transform: translateY(-2px); }

.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--bloco { width: 100%; }

/* =====================================================================
   HERO conduzido pela rolagem
   ===================================================================== */
.hero { position: relative; height: 420vh; }

.hero__palco {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: grid;
    place-items: center;
}

#cena { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* veu que garante leitura do texto sobre a cena */
.hero__veu {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 45%, rgba(8,8,10,.15), rgba(8,8,10,.86) 78%),
        linear-gradient(180deg, rgba(8,8,10,.75), transparent 28%, transparent 62%, rgba(8,8,10,.92));
    pointer-events: none;
}

.hero__texto {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 880px;
    padding: 0 22px;
    text-align: center;
}

.banda {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(880px, calc(100vw - 44px));
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1), visibility .55s;
}
.banda.is-on { opacity: 1; visibility: visible; }

.banda__linha {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ouro);
    margin-bottom: 18px;
}

.banda h1, .banda h2 {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(30px, 7.4vw, 66px);
    line-height: 1.06;
    letter-spacing: -.02em;
    text-shadow: 0 2px 40px rgba(0,0,0,.85);
}
.banda h1 em, .banda h2 em { font-style: italic; color: var(--ouro); }

.banda p {
    margin: 20px auto 0;
    max-width: 540px;
    font-size: clamp(15px, 2.4vw, 18.5px);
    color: var(--texto-suave);
    text-shadow: 0 2px 24px rgba(0,0,0,.9);
}

.banda__acao { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* pista de rolagem */
.hero__dica {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--texto-fraco);
    transition: opacity .4s ease;
}
.hero__dica i {
    width: 1px;
    height: 34px;
    background: linear-gradient(180deg, var(--ouro), transparent);
    animation: descer 2.2s ease-in-out infinite;
}
@keyframes descer {
    0%, 100% { transform: scaleY(.4); opacity: .3; transform-origin: top; }
    50%      { transform: scaleY(1);  opacity: 1;  transform-origin: top; }
}

/* =====================================================================
   SECOES
   ===================================================================== */
.secao { position: relative; padding: 104px 0; }
.secao--linha { border-top: 1px solid var(--borda); }

.secao__chapeu {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ouro);
    margin-bottom: 18px;
}

.secao__titulo {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(27px, 4.6vw, 46px);
    max-width: 18ch;
    line-height: 1.1;
}
.secao__titulo em { font-style: italic; color: var(--ouro); }

.secao__lead {
    margin: 20px 0 0;
    max-width: 58ch;
    font-size: 17px;
    color: var(--texto-suave);
}

.centro { text-align: center; }
.centro .secao__titulo { margin-left: auto; margin-right: auto; }
.centro .secao__lead { margin-left: auto; margin-right: auto; }

/* revelacao na rolagem */
.revela { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.revela.is-on { opacity: 1; transform: none; }

/* --- antes e depois --------------------------------------------------- */
.prova {
    position: relative;
    margin: 52px auto 0;
    max-width: 760px;
    border-radius: var(--raio-lg);
    overflow: hidden;
    border: 1px solid var(--borda);
    box-shadow: var(--sombra);
    background: var(--superficie);
}
.prova__quadros { position: relative; aspect-ratio: 4 / 3; }
.prova__quadro { position: absolute; inset: 0; display: grid; place-items: center; }
.prova__quadro canvas { width: 100%; height: 100%; }
.prova__depois { clip-path: inset(0 0 0 50%); transition: clip-path .1s linear; }

.prova__alca {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--ouro);
    transform: translateX(-1px);
    pointer-events: none;
    box-shadow: 0 0 22px rgba(227,179,65,.75);
}
.prova__alca::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--ouro);
    background: rgba(8,8,10,.75);
    backdrop-filter: blur(4px);
}

.prova__slider {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: ew-resize;
    margin: 0;
}

.prova__marca {
    position: absolute;
    bottom: 14px;
    padding: 6px 13px;
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--texto-suave);
    background: rgba(8,8,10,.72);
    border: 1px solid var(--borda);
    border-radius: 999px;
    backdrop-filter: blur(6px);
}
.prova__marca--a { left: 14px; }
.prova__marca--b { right: 14px; color: var(--ouro); border-color: rgba(227,179,65,.4); }

.prova__nota { margin: 16px auto 0; max-width: 60ch; text-align: center; font-size: 13.5px; color: var(--texto-fraco); }

/* --- passos ----------------------------------------------------------- */
.passos { display: grid; gap: 22px; margin-top: 56px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .passos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .passos { grid-template-columns: repeat(4, 1fr); } }

.passo {
    position: relative;
    padding: 28px 24px 30px;
    background: linear-gradient(180deg, var(--superficie), var(--preto-2));
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    transition: border-color .35s, transform .35s cubic-bezier(.2,.7,.3,1);
}
.passo:hover { border-color: var(--borda-forte); transform: translateY(-4px); }
.passo__n {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 18px;
    font-family: var(--display);
    font-size: 19px;
    color: var(--ouro);
    border: 1px solid rgba(227,179,65,.35);
    border-radius: 50%;
    background: rgba(227,179,65,.07);
}
.passo h3 { font-size: 17.5px; margin-bottom: 9px; }
.passo p { margin: 0; font-size: 14.5px; color: var(--texto-suave); }

/* --- beneficios ------------------------------------------------------- */
.ganhos { display: grid; gap: 20px; margin-top: 56px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .ganhos { grid-template-columns: repeat(3, 1fr); } }

.ganho {
    padding: 30px 26px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    background: var(--superficie);
}
.ganho__icone { color: var(--ouro); margin-bottom: 18px; }
.ganho h3 { font-size: 17.5px; margin-bottom: 10px; }
.ganho p { margin: 0; font-size: 14.5px; color: var(--texto-suave); }

/* --- numeros ---------------------------------------------------------- */
.numeros { display: grid; gap: 18px; margin-top: 48px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .numeros { grid-template-columns: repeat(4, 1fr); } }

.numero { padding: 26px 20px; text-align: center; border: 1px solid var(--borda); border-radius: var(--raio-lg); background: var(--preto-2); }
.numero b { display: block; font-family: var(--display); font-size: clamp(30px, 5vw, 42px); color: var(--ouro); line-height: 1; }
.numero span { display: block; margin-top: 10px; font-size: 13.5px; color: var(--texto-suave); }

/* --- planos ----------------------------------------------------------- */
.planos { display: grid; gap: 20px; margin-top: 56px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .planos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .planos { grid-template-columns: repeat(4, 1fr); } }

.plano {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 26px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    background: var(--superficie);
    transition: border-color .35s, transform .35s cubic-bezier(.2,.7,.3,1);
}
.plano:hover { border-color: var(--borda-forte); transform: translateY(-4px); }

.plano--destaque {
    border-color: rgba(227,179,65,.55);
    background: linear-gradient(180deg, rgba(227,179,65,.09), var(--superficie) 42%);
    box-shadow: 0 24px 60px -30px rgba(227,179,65,.55);
}
.plano__selo {
    position: absolute;
    top: -12px;
    left: 26px;
    padding: 5px 13px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #16120A;
    background: var(--ouro);
    border-radius: 999px;
}

.plano h3 { font-size: 18px; margin-bottom: 6px; }
.plano__sub { font-size: 13.5px; color: var(--texto-fraco); margin: 0 0 22px; }

.plano__preco { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.plano__preco b { font-family: var(--display); font-size: 38px; line-height: 1; }
.plano__preco span { font-size: 14px; color: var(--texto-fraco); }
.plano__img { font-size: 13.5px; color: var(--ouro); margin: 0 0 22px; }

.plano ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.plano li { display: flex; gap: 10px; font-size: 14.5px; color: var(--texto-suave); }
.plano li svg { flex: none; margin-top: 4px; color: var(--ouro); }
.plano .btn { margin-top: auto; }

.planos__nota { margin: 26px auto 0; max-width: 62ch; text-align: center; font-size: 13.5px; color: var(--texto-fraco); }

/* --- perguntas -------------------------------------------------------- */
.faq { max-width: 780px; margin: 52px auto 0; }
.faq details {
    border-bottom: 1px solid var(--borda);
    padding: 22px 0;
}
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font-size: 16.5px;
    font-weight: 560;
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    flex: none;
    font-size: 22px;
    color: var(--ouro);
    transition: transform .3s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 14px 0 0; font-size: 15px; color: var(--texto-suave); max-width: 66ch; }

/* --- chamada final ---------------------------------------------------- */
.final { position: relative; overflow: hidden; padding: 116px 0; text-align: center; }
.final::before {
    content: "";
    position: absolute;
    top: -40%;
    left: 50%;
    width: min(900px, 130vw);
    height: 560px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(227,179,65,.16), transparent 68%);
    pointer-events: none;
}
.final__conteudo { position: relative; }
.final h2 { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 5.6vw, 54px); }
.final h2 em { font-style: italic; color: var(--ouro); }
.final p { margin: 20px auto 34px; max-width: 52ch; font-size: 17px; color: var(--texto-suave); }
.final__acoes { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.final__nota { margin-top: 26px; font-size: 13px; color: var(--texto-fraco); }

/* --- rodape ----------------------------------------------------------- */
.rodape { border-top: 1px solid var(--borda); padding: 46px 0 40px; }
.rodape__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.rodape p { margin: 0; font-size: 13.5px; color: var(--texto-fraco); }
.rodape nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13.5px; }
.rodape nav a { color: var(--texto-suave); }

/* --- linha decorativa que se desenha ---------------------------------- */
.risco { display: block; width: 100%; height: 2px; margin: 0; overflow: visible; }
.risco path { stroke: var(--ouro); stroke-width: 1.4; fill: none; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.risco.is-on path { transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.3,1); stroke-dashoffset: 0; }

/* --- quem prefere menos movimento ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .revela { opacity: 1; transform: none; }
    .hero { height: auto; }
    .hero__palco { position: relative; height: auto; min-height: 100vh; padding: 130px 0 90px; }
    .banda { position: relative; left: auto; top: auto; transform: none; opacity: 1; visibility: visible; width: 100%; }
    .banda + .banda { margin-top: 64px; }
    .hero__dica { display: none; }
}