/* ===================================================================
   GERADOR DE CURRICULO — landing publica (/curriculo)
   DAGOBERTO STYLE — "editorial premium" (docs/design.md).
   Tudo escopado em .cvl-* (nao depende de Tailwind: nao precisa rebuild).

   Acentos com papel semantico:
     teal/mint = a marca e o "aprovado"   |  amber = o filtro ATS (o robo)
     violet    = a Dori (IA que reescreve)|  sky   = o arquivo que sai (PDF/DOCX)
     rose      = a vaga (uma versao pra cada)
   =================================================================== */

/* ================================================================= */
/* VARIAVEIS                                                         */
/* ================================================================= */
:root {
    --cvl-ink: #0a1620;          /* tinta - fundo escuro do hero */
    --cvl-ink-2: #10283a;
    --cvl-teal: #14b8a6;         /* marca */
    --cvl-teal-deep: #0d9488;
    --cvl-mint: #5eead4;
    --cvl-amber: #f59e0b;        /* o filtro ATS */
    --cvl-amber-soft: #fcd34d;
    --cvl-amber-deep: #b45309;
    --cvl-violet: #8b5cf6;       /* a Dori */
    --cvl-violet-deep: #6d28d9;
    --cvl-sky: #38bdf8;          /* o arquivo (PDF/DOCX/link) */
    --cvl-sky-deep: #0284c7;
    --cvl-rose: #fb7185;         /* a vaga */
    --cvl-rose-deep: #be123c;
    --cvl-papel: #fbfcfd;        /* a folha do curriculo */
    --cvl-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* ================================================================= */
/* BASE                                                              */
/* ================================================================= */
.cvl-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.cvl-sec { padding: 5rem 0; }
.cvl-sec--bg { background: var(--bg); }
.cvl-sec--surface { background: var(--surface); }

.cvl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cvl-teal-deep);
    margin-bottom: 1rem;
}
[data-theme="dark"] .cvl-eyebrow { color: var(--cvl-mint); }
.cvl-eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: .5;
}
.cvl-eyebrow--amber { color: var(--cvl-amber-deep); }
[data-theme="dark"] .cvl-eyebrow--amber { color: var(--cvl-amber-soft); }
.cvl-eyebrow--violet { color: var(--cvl-violet-deep); }
[data-theme="dark"] .cvl-eyebrow--violet { color: #c4b5fd; }
.cvl-eyebrow--sky { color: var(--cvl-sky-deep); }
[data-theme="dark"] .cvl-eyebrow--sky { color: var(--cvl-sky); }

.cvl-h2 {
    font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -.025em;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1rem;
    text-wrap: balance;
}
.cvl-lead {
    font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
    line-height: 1.65;
    color: var(--muted);
    max-width: 42rem;
    margin: 0 0 3rem;
    text-wrap: pretty;
}
.cvl-lead--tight { margin-bottom: 1.75rem; }
.cvl-center { text-align: center; }
.cvl-center .cvl-lead { margin-left: auto; margin-right: auto; }
.cvl-center .cvl-eyebrow { justify-content: center; }

/* Serifa do sistema = o mundo do papel/documento. Custo de rede zero. */
.cvl-serif {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 600;
}

/* ================================================================= */
/* REVELACAO NO SCROLL (so aplica quando o JS esta vivo)             */
/* ================================================================= */
.cvl-js .cvl-rv {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--rv-delay, 0s);
}
.cvl-js .cvl-rv.is-in { opacity: 1; transform: none; }

/* ================================================================= */
/* BOTOES                                                            */
/* ================================================================= */
.cvl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    min-height: 3rem;
    padding: 1rem 1.75rem;
    border-radius: 999px;
    font-size: 1.0625rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease, background .2s ease, color .2s ease;
    will-change: transform;
}
.cvl-btn svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.cvl-btn--primary {
    background: linear-gradient(135deg, var(--cvl-mint), var(--cvl-teal) 55%, var(--cvl-teal-deep));
    color: #04211e;
    box-shadow: 0 10px 30px -8px rgba(20, 184, 166, .65), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.cvl-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(20, 184, 166, .75), inset 0 1px 0 rgba(255, 255, 255, .45); }
.cvl-btn--ghost {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
    backdrop-filter: blur(8px);
}
.cvl-btn--ghost:hover { background: rgba(255, 255, 255, .13); transform: translateY(-2px); }
.cvl-btn--solid {
    background: var(--primary);
    color: var(--primary-contrast);
    box-shadow: 0 12px 28px -10px rgba(13, 148, 136, .7);
}
.cvl-btn--solid:hover { transform: translateY(-2px); }
.cvl-btn--linha {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
.cvl-btn--linha:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--primary); }

/* ================================================================= */
/* HERO                                                              */
/* ================================================================= */
.cvl-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(58rem 38rem at 84% 6%, rgba(56, 189, 248, .26), transparent 60%),
        radial-gradient(46rem 32rem at 6% 94%, rgba(20, 184, 166, .30), transparent 62%),
        radial-gradient(36rem 24rem at 46% -12%, rgba(245, 158, 11, .16), transparent 60%),
        linear-gradient(160deg, var(--cvl-ink-2), var(--cvl-ink) 55%, #050e14);
    color: #fff;
    padding: 4.5rem 0 5rem;
}
/* granulado: tira o "chapado" do gradiente */
.cvl-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--cvl-grain);
    opacity: .28;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
}
/* malha de 64px com mascara radial: profundidade sem imagem */
.cvl-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(46rem 30rem at 28% 42%, #000, transparent 75%);
    -webkit-mask-image: radial-gradient(46rem 30rem at 28% 42%, #000, transparent 75%);
    pointer-events: none;
    z-index: -1;
}
.cvl-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 3rem;
    align-items: center;
}
.cvl-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    color: #d7fff7;
    background: rgba(20, 184, 166, .14);
    border: 1px solid rgba(94, 234, 212, .3);
    backdrop-filter: blur(6px);
}
.cvl-badge svg { width: 1.05rem; height: 1.05rem; }

/* teto menor que o do livro-curso: com o menu lateral comendo 382px, 4.25rem
   quebrava "Um curriculo que" em duas linhas antes do <br> intencional. */
.cvl-hero h1 {
    font-size: clamp(2.25rem, 1.3rem + 3.4vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    font-weight: 700;
    margin: 1.5rem 0 1.25rem;
    text-wrap: balance;
}
.cvl-grad {
    background: linear-gradient(100deg, var(--cvl-mint), var(--cvl-sky) 55%, #a5b4fc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cvl-hero__sub {
    font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
    max-width: 34rem;
    margin: 0 0 2rem;
    text-wrap: pretty;
}
.cvl-hero__sub strong { color: #fff; font-weight: 700; }
.cvl-hero__acoes { display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; }
.cvl-hero__nota { margin-top: 1.25rem; font-size: .875rem; color: rgba(255, 255, 255, .55); }

.cvl-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.cvl-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
}
.cvl-pill i {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: var(--cvl-mint);
    box-shadow: 0 0 0 3px rgba(94, 234, 212, .18);
}
.cvl-pill--amber i { background: var(--cvl-amber-soft); box-shadow: 0 0 0 3px rgba(252, 211, 77, .18); }
.cvl-pill--violet i { background: var(--cvl-violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, .22); }
.cvl-pill--sky i { background: var(--cvl-sky); box-shadow: 0 0 0 3px rgba(56, 189, 248, .2); }
.cvl-pill--rose i { background: var(--cvl-rose); box-shadow: 0 0 0 3px rgba(251, 113, 133, .2); }

/* ================================================================= */
/* HERO — O PALCO: a folha lida pelo robo, com a nota subindo        */
/* ================================================================= */
/* Largura FIXA de propósito: a composição é absoluta e não reflui — abaixo de
   1280px o hero vira uma coluna só (ver responsivo) em vez de espremer o palco. */
.cvl-stage {
    position: relative;
    width: 24rem;
    height: 26.5rem;
    margin-left: auto;
}

/* --- as abas de versao (uma por vaga) --- */
.cvl-abas {
    position: absolute;
    left: 1.5rem;
    top: 0;
    display: flex;
    gap: .25rem;
    z-index: 3;
}
.cvl-aba {
    padding: .35rem .7rem .5rem;
    border-radius: .5rem .5rem 0 0;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .62);
    /* opaca de proposito: a aba inativa encosta na folha BRANCA e, translucida,
       virava um borrao claro com o texto sumindo. */
    background: rgba(9, 22, 32, .88);
    border: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 0;
    backdrop-filter: blur(6px);
    white-space: nowrap;
}
.cvl-aba--on {
    color: #06231f;
    background: linear-gradient(135deg, var(--cvl-mint), var(--cvl-teal));
    border-color: transparent;
}

/* --- a folha A4 --- */
.cvl-folha {
    position: absolute;
    left: 1.5rem;
    top: 1.6rem;
    z-index: 2;
    width: 16.5rem;
    height: 23rem;
    overflow: hidden;
    padding: 1.1rem 1.15rem;
    border-radius: .25rem .25rem .4rem .4rem;
    background: var(--cvl-papel);
    box-shadow: 0 34px 64px -22px rgba(0, 0, 0, .85), 0 2px 0 rgba(255, 255, 255, .5) inset;
    animation: cvlFlutua 7s ease-in-out infinite;
}
/* a barra de varredura do ATS descendo a folha */
.cvl-scan {
    position: absolute;
    left: 0;
    right: 0;
    top: -12%;
    height: 12%;
    background: linear-gradient(180deg, transparent, rgba(245, 158, 11, .28), transparent);
    border-bottom: 1px solid rgba(245, 158, 11, .55);
    animation: cvlScan 4.5s cubic-bezier(.5, 0, .5, 1) infinite;
    pointer-events: none;
}
.cvl-folha__topo {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding-bottom: .7rem;
    border-bottom: 2px solid #0f766e;
}
.cvl-foto {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    background: linear-gradient(140deg, #cbd5e1, #94a3b8);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8);
    position: relative;
    overflow: hidden;
}
.cvl-foto::before { /* cabeca */
    content: "";
    position: absolute;
    left: 50%;
    top: .45rem;
    width: .85rem;
    height: .85rem;
    border-radius: 999px;
    background: #f1f5f9;
    transform: translateX(-50%);
}
.cvl-foto::after { /* ombros */
    content: "";
    position: absolute;
    left: 50%;
    bottom: -.5rem;
    width: 1.7rem;
    height: 1.1rem;
    border-radius: 999px 999px 0 0;
    background: #f1f5f9;
    transform: translateX(-50%);
}
.cvl-folha__id { display: flex; flex-direction: column; gap: .3rem; flex: 1; min-width: 0; }
.cvl-folha__id b { display: block; height: .5rem; width: 74%; border-radius: 2px; background: #1e293b; }
.cvl-folha__id i { display: block; height: .3rem; width: 52%; border-radius: 2px; background: #0d9488; }

.cvl-folha__corpo { display: flex; flex-direction: column; gap: .78rem; margin-top: .85rem; }
.cvl-bloco { display: flex; flex-direction: column; gap: .28rem; }
.cvl-bloco__tit {
    display: block;
    height: .32rem;
    width: 42%;
    border-radius: 2px;
    background: var(--c, #0d9488);
    margin-bottom: .18rem;
}
.cvl-bloco span:not(.cvl-bloco__tit) {
    display: block;
    height: .26rem;
    border-radius: 2px;
    background: #cbd5e1;
}
.cvl-bloco span:nth-child(3) { width: 92%; }
.cvl-bloco span:nth-child(4) { width: 78%; }
.cvl-bloco span:nth-child(5) { width: 86%; }

/* --- o medidor da nota ATS --- */
.cvl-medidor {
    position: absolute;
    right: 0;
    top: 6rem;  /* abaixo das abas de versao, senao o cartao as cobre */
    z-index: 4;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .95rem .7rem .7rem;
    border-radius: 1rem;
    background: rgba(9, 22, 32, .72);
    border: 1px solid rgba(94, 234, 212, .28);
    box-shadow: 0 24px 44px -18px rgba(0, 0, 0, .8);
    backdrop-filter: blur(10px);
    animation: cvlFlutua 7s ease-in-out .8s infinite;
}
.cvl-medidor__anel { position: relative; width: 3.1rem; height: 3.1rem; flex-shrink: 0; }
.cvl-medidor__anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cvl-medidor__anel circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.cvl-medidor__trilho { stroke: rgba(255, 255, 255, .14); }
.cvl-medidor__arco {
    stroke: url(#cvlGradAnel);
    stroke-dasharray: 113;
    stroke-dashoffset: 113;
    animation: cvlEnche 2.6s cubic-bezier(.16, 1, .3, 1) .4s forwards;
}
.cvl-medidor__anel b {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9375rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--cvl-mint);
    font-variant-numeric: tabular-nums;
}
.cvl-medidor__txt { display: flex; flex-direction: column; line-height: 1.25; }
.cvl-medidor__txt strong { font-size: .8125rem; font-weight: 700; color: #fff; white-space: nowrap; }
.cvl-medidor__txt span { font-size: .6875rem; color: rgba(255, 255, 255, .6); white-space: nowrap; }

/* --- os arquivos que saem --- */
.cvl-saidas {
    position: absolute;
    left: 0;
    bottom: .5rem;
    z-index: 4;
    display: flex;
    gap: .4rem;
    padding: .55rem .6rem;
    border-radius: .9rem;
    background: rgba(9, 22, 32, .72);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 20px 38px -16px rgba(0, 0, 0, .8);
    backdrop-filter: blur(10px);
    animation: cvlFlutua 7s ease-in-out 1.6s infinite;
}
.cvl-saida {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .6rem;
    border-radius: .55rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: color-mix(in srgb, var(--c) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.cvl-saida svg { width: .8rem; height: .8rem; }

@keyframes cvlFlutua {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
@keyframes cvlScan {
    0%       { top: -14%; opacity: 0; }
    12%      { opacity: 1; }
    88%      { opacity: 1; }
    100%     { top: 102%; opacity: 0; }
}
@keyframes cvlEnche {
    to { stroke-dashoffset: 12; }  /* ~89% do anel */
}

/* ================================================================= */
/* FAIXA DE FATOS                                                    */
/* ================================================================= */
.cvl-faixa { background: var(--surface); border-bottom: 1px solid var(--border); }
.cvl-faixa__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    padding: 2.5rem 0;
}
.cvl-fato { display: flex; flex-direction: column; gap: .25rem; }
.cvl-fato b {
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--c, var(--primary));
    font-variant-numeric: tabular-nums;
}
.cvl-fato span { font-size: .9375rem; line-height: 1.45; color: var(--muted); text-wrap: pretty; }

/* ================================================================= */
/* A NOTA ATS (a secao-estrela)                                      */
/* ================================================================= */
.cvl-ats {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
}
.cvl-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .875rem; }
.cvl-lista li { display: flex; gap: .75rem; align-items: flex-start; color: var(--text-2); line-height: 1.55; }
.cvl-lista svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: .15rem; color: var(--primary); }
.cvl-lista b { color: var(--text); }

/* o cartao que imita a barra de nota do produto */
.cvl-placar {
    padding: 1.75rem;
    border-radius: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}
.cvl-sec--surface .cvl-placar { background: var(--bg); }
.cvl-placar__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}
.cvl-placar__topo strong { font-size: 1.0625rem; font-weight: 700; color: var(--text); }
.cvl-placar__nota {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--cvl-teal-deep);
    font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .cvl-placar__nota { color: var(--cvl-mint); }
.cvl-medida {
    height: .6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 20%, transparent);
    overflow: hidden;
}
.cvl-medida i {
    display: block;
    height: 100%;
    width: var(--w, 70%);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cvl-amber), var(--cvl-teal) 70%, var(--cvl-mint));
}
.cvl-js .cvl-rv .cvl-medida i { width: 0; transition: width 1.3s cubic-bezier(.16, 1, .3, 1) .25s; }
.cvl-js .cvl-rv.is-in .cvl-medida i { width: var(--w, 70%); }

.cvl-placar__legenda { margin: .625rem 0 1.25rem; font-size: .875rem; color: var(--muted); }
.cvl-sugestoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.cvl-sugestao {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .625rem .75rem;
    border-radius: .75rem;
    font-size: .9375rem;
    line-height: 1.35;
    color: var(--text-2);
    background: color-mix(in srgb, var(--c) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 26%, transparent);
}
.cvl-sugestao svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; color: var(--c); }
.cvl-sugestao--ok { text-decoration: none; }
.cvl-placar__pe {
    margin: 1.25rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--muted);
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
}

/* ================================================================= */
/* COMO FUNCIONA (4 passos)                                          */
/* ================================================================= */
.cvl-passos {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem;
}
.cvl-passos::before { /* trilho que liga os passos */
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 1.5rem;
    height: 2px;
    background: linear-gradient(90deg, var(--cvl-teal), var(--cvl-violet) 40%, var(--cvl-amber) 70%, var(--cvl-sky));
    opacity: .3;
}
.cvl-passo { position: relative; }
.cvl-passo__n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    font-size: 1.125rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 60%, #000));
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--c) 90%, transparent);
    margin-bottom: 1rem;
}
.cvl-passo h3 { font-size: 1.0625rem; font-weight: 700; color: var(--text); margin: 0 0 .375rem; }
.cvl-passo p { font-size: .9375rem; line-height: 1.55; color: var(--muted); margin: 0; text-wrap: pretty; }

/* ================================================================= */
/* OS 3 MODELOS (miniaturas em CSS)                                  */
/* ================================================================= */
.cvl-temas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.cvl-tema {
    padding: 1.25rem;
    border-radius: 1.25rem;
    background: var(--bg);
    border: 1px solid var(--border);
    transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease, border-color .2s ease;
}
.cvl-sec--bg .cvl-tema { background: var(--surface); }
.cvl-tema:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.cvl-tema h3 { font-size: 1.0625rem; font-weight: 700; color: var(--text); margin: 1rem 0 .3rem; }
.cvl-tema p { font-size: .875rem; line-height: 1.5; color: var(--muted); margin: 0; text-wrap: pretty; }

/* a miniatura da folha */
.cvl-mini {
    position: relative;
    aspect-ratio: 1 / 1.3;
    max-width: 13.5rem;   /* senao a folha estica e o miolo fica boiando no vazio */
    margin: 0 auto;
    overflow: hidden;
    border-radius: .5rem;
    background: var(--cvl-papel);
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow);
    padding: .85rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    /* os grupos se espalham pela altura da folha: sem miolo boiando no vazio */
    justify-content: space-between;
}
/* regra por classe (nao por `span`): o proprio grupo tambem e um <span> */
.cvl-mini__h,
.cvl-mini__sub,
.cvl-mini__set span { display: block; height: .22rem; border-radius: 2px; background: #cbd5e1; }
.cvl-mini__h { height: .42rem; background: #1e293b; }
.cvl-mini__sub { height: .26rem; width: 55%; background: #0d9488; }
.cvl-mini__set { display: flex; flex-direction: column; gap: .22rem; }
.cvl-mini__set span:nth-child(2) { width: 88%; }
.cvl-mini__set span:nth-child(3) { width: 66%; }

/* classico: cabecalho a esquerda + linha de acento no topo */
.cvl-mini--classico::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: .25rem;
    background: #0d9488;
}
/* moderno: faixa escura no topo */
.cvl-mini--moderno { padding-top: 3.25rem; }
.cvl-mini--moderno::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2.6rem;
    background: #2c3e50;
}
.cvl-mini--moderno .cvl-mini__h { background: #334155; }
/* minimalista: sem cor, muito respiro */
.cvl-mini--minimalista { gap: .9rem; }
.cvl-mini--minimalista .cvl-mini__h { background: #334155; width: 62%; }
.cvl-mini--minimalista .cvl-mini__sub { background: #94a3b8; width: 38%; }

/* ================================================================= */
/* CARDS DE VANTAGEM                                                 */
/* ================================================================= */
.cvl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.cvl-card {
    padding: 1.5rem;
    border-radius: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease, border-color .2s ease;
}
.cvl-sec--surface .cvl-card { background: var(--bg); }
.cvl-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--c) 45%, var(--border));
}
.cvl-card__ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .875rem;
    margin-bottom: 1rem;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
}
.cvl-card__ic svg { width: 1.375rem; height: 1.375rem; }
.cvl-card h3 { font-size: 1.0625rem; font-weight: 700; color: var(--text); margin: 0 0 .4rem; }
.cvl-card p { font-size: .9375rem; line-height: 1.6; color: var(--muted); margin: 0; text-wrap: pretty; }

/* ================================================================= */
/* CTA FINAL                                                         */
/* ================================================================= */
.cvl-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-align: center;
    padding: 5rem 0;
    color: #fff;
    background:
        radial-gradient(44rem 30rem at 20% 10%, rgba(20, 184, 166, .30), transparent 62%),
        radial-gradient(40rem 28rem at 82% 92%, rgba(56, 189, 248, .24), transparent 62%),
        linear-gradient(160deg, var(--cvl-ink-2), var(--cvl-ink) 60%, #050e14);
}
.cvl-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--cvl-grain);
    opacity: .26;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
}
.cvl-cta h2 {
    font-size: clamp(1.875rem, 1.2rem + 2.6vw, 2.875rem);
    line-height: 1.1;
    letter-spacing: -.03em;
    font-weight: 700;
    margin: 0 0 1rem;
    text-wrap: balance;
}
.cvl-cta p {
    max-width: 38rem;
    margin: 0 auto 2rem;
    font-size: clamp(1rem, .95rem + .35vw, 1.125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
    text-wrap: pretty;
}

/* ================================================================= */
/* FAQ (details/summary — abre sem JS)                               */
/* ================================================================= */
.cvl-faq { display: flex; flex-direction: column; gap: .75rem; max-width: 46rem; margin: 0 auto; }
.cvl-faq details {
    border-radius: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cvl-sec--surface .cvl-faq details { background: var(--bg); }
.cvl-faq details[open] { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: var(--shadow-md); }
.cvl-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
    cursor: pointer;
    list-style: none;
}
.cvl-faq summary::-webkit-details-marker { display: none; }
.cvl-faq__mais {
    position: relative;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.cvl-faq__mais::before,
.cvl-faq__mais::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: .7rem;
    height: 2px;
    border-radius: 2px;
    background: var(--primary);
    transform: translate(-50%, -50%);
    transition: transform .2s ease, opacity .2s ease;
}
.cvl-faq__mais::after { transform: translate(-50%, -50%) rotate(90deg); }
.cvl-faq details[open] .cvl-faq__mais::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }
.cvl-faq__resp {
    padding: 0 1.25rem 1.25rem;
    color: var(--text-2);
    line-height: 1.65;
    animation: cvlAbre .28s cubic-bezier(.16, 1, .3, 1);
}
.cvl-faq__resp p { margin: 0 0 .75rem; text-wrap: pretty; }
.cvl-faq__resp p:last-child { margin-bottom: 0; }
.cvl-faq__resp a { color: var(--primary); font-weight: 600; }
/* primeira linha da resposta, com peso de manchete */
.cvl-faq__punch { font-size: 1.0625rem; color: var(--text); }
.cvl-faq__chips { display: flex; flex-wrap: wrap; gap: .4375rem; margin: 0 0 .875rem; }
.cvl-faq__chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3125rem .625rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-2);
    background: color-mix(in srgb, var(--c) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.cvl-faq__chip::before {
    content: "";
    width: .4375rem;
    height: .4375rem;
    border-radius: 999px;
    background: var(--c);
    flex-shrink: 0;
}
.cvl-faq__honesto {
    padding: .75rem .875rem;
    border-radius: .875rem;
    border-left: 3px solid var(--cvl-amber);
    background: color-mix(in srgb, var(--cvl-amber) 8%, transparent);
    color: var(--text-2);
}
.cvl-faq__honesto--bom {
    border-left-color: var(--cvl-teal);
    background: color-mix(in srgb, var(--cvl-teal) 8%, transparent);
}
@keyframes cvlAbre {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ================================================================= */
/* CTA GRUDADO NO MOBILE                                             */
/* ================================================================= */
.cvl-sticky {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(12px);
    transform: translateY(110%);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
    display: none;
}
.cvl-sticky.is-in { transform: none; }
.cvl-sticky .cvl-btn { width: 100%; padding: .875rem 1.25rem; font-size: 1rem; }

/* ================================================================= */
/* RESPONSIVO                                                        */
/* ================================================================= */
/* 1280px: o menu lateral come 382px, entao abaixo disso a coluna da direita nao
   comporta mais o palco de 24rem — hero vira uma coluna so. */
@media (max-width: 1280px) {
    .cvl-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .cvl-stage { margin-left: 0; }
}
@media (max-width: 1100px) {
    .cvl-ats { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
    .cvl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .cvl-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
    .cvl-passos::before { display: none; }
    .cvl-faixa__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
    .cvl-temas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
    .cvl-tema { padding: 1rem; }
}
@media (max-width: 640px) {
    .cvl-sec { padding: 3.5rem 0; }
    .cvl-cta { padding: 3.5rem 0; }
    .cvl-hero { padding: 3rem 0 3.5rem; }
    .cvl-cards { grid-template-columns: 1fr; }
    .cvl-temas { grid-template-columns: 1fr; gap: 1.25rem; }
    .cvl-faixa__grid { grid-template-columns: 1fr; gap: 1.25rem; padding: 2rem 0; }
    .cvl-fato { flex-direction: row; align-items: baseline; gap: .75rem; }
    .cvl-fato b { flex-shrink: 0; white-space: nowrap; }
    .cvl-btn { font-size: .9375rem; padding: .9375rem 1.25rem; }
    .cvl-hero__acoes .cvl-btn { width: 100%; }
    .cvl-cta .cvl-btn { width: 100%; }
    .cvl-placar { padding: 1.25rem; }
    /* o palco mantem a composicao do desktop e so encolhe junto (sem quebrar) */
    .cvl-stage { transform: scale(.78); transform-origin: top left; margin-bottom: -6rem; }
    .cvl-sticky { display: block; }
}
@media (max-width: 400px) {
    .cvl-stage { transform: scale(.66); margin-bottom: -9.2rem; }
}

/* ================================================================= */
/* MOVIMENTO REDUZIDO                                                */
/* ================================================================= */
@media (prefers-reduced-motion: reduce) {
    .cvl-folha,
    .cvl-medidor,
    .cvl-saidas { animation: none; }
    .cvl-scan { animation: none; top: 38%; opacity: .55; }
    .cvl-medidor__arco { animation: none; stroke-dashoffset: 12; }  /* deixa a nota cheia */
    .cvl-js .cvl-rv { opacity: 1; transform: none; transition: none; }
    .cvl-js .cvl-rv .cvl-medida i,
    .cvl-js .cvl-rv.is-in .cvl-medida i { width: var(--w, 70%); transition: none; }
    .cvl-faq__resp { animation: none; }
    .cvl-btn:hover, .cvl-card:hover, .cvl-tema:hover { transform: none; }
}