/* ==========================================================
   CENTURION
   PAGES — planos (home), recursos, como-funciona, pagamento
   ========================================================== */

/* ==========================================================
   PAGE HERO — cabecalho curto das subpaginas
   ========================================================== */

.page-hero{
    position:relative;
    padding:calc(var(--navbar-height) + var(--space-3xl)) 0 var(--space-3xl);
    background:var(--gradient-hero);
    border-bottom:1px solid var(--color-border);
    overflow:hidden;
}

.page-hero__title{
    font-family:var(--font-heading);
    font-size:clamp(2rem,4vw,3rem);
    font-weight:var(--fw-medium);
    line-height:1.1;
    letter-spacing:.02em;
}

.page-hero__text{
    max-width:640px;
    margin-top:var(--space-lg);
    color:var(--color-text-secondary);
    font-size:var(--font-size-lg);
    line-height:1.7;
}

.breadcrumb{
    display:inline-flex;
    gap:var(--space-sm);
    margin-bottom:var(--space-lg);
    font-size:var(--font-size-sm);
    color:var(--color-text-muted);
}

.breadcrumb a{ color:var(--color-gold); }

/* ==========================================================
   PLANOS
   ========================================================== */

.planos{
    position:relative;
    padding:var(--space-4xl) 0;
    background:var(--color-bg-secondary);
    border-top:1px solid var(--color-border);
    overflow:hidden;
}

.planos__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--space-xl);
    max-width:1080px;
    margin:var(--space-2xl) auto 0;
}

.plano{
    position:relative;
    display:flex;
    flex-direction:column;
    padding:var(--space-2xl);
    background:var(--color-bg-card);
    border:1px solid var(--color-border);
    border-radius:var(--radius-xl);
    text-align:left;
}

.plano--destaque{
    border-color:rgba(200,164,90,.55);
    box-shadow:0 0 60px rgba(200,164,90,.12);
}

.plano__selo{
    position:absolute;
    top:-14px;
    right:var(--space-lg);
    padding:6px 14px;
    border-radius:var(--radius-pill);
    background:var(--gradient-gold);
    color:#141008;
    font-family:var(--font-heading);
    font-size:.7rem;
    font-weight:var(--fw-bold);
    letter-spacing:.14em;
    text-transform:uppercase;
}

.plano__nome{
    font-family:var(--font-heading);
    font-size:var(--font-size-sm);
    letter-spacing:.25em;
    text-transform:uppercase;
    color:var(--color-text-muted);
}

.plano__preco{
    margin-top:var(--space-md);
    font-family:var(--font-heading);
    font-size:2.75rem;
    font-weight:var(--fw-medium);
    color:var(--color-gold);
    line-height:1;
}

.plano__periodo{
    margin-top:6px;
    color:var(--color-text-muted);
    font-size:var(--font-size-sm);
}

.plano__descricao{
    margin:var(--space-lg) 0;
    color:var(--color-text-secondary);
    line-height:1.6;
    flex:1;
}

.plano .button{ width:100%; }

.planos__incluso{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--space-sm) var(--space-xl);
    max-width:900px;
    margin:var(--space-2xl) auto 0;
    padding:0;
    list-style:none;
    color:var(--color-text-secondary);
    font-size:var(--font-size-sm);
}

.planos__incluso li::before{
    content:"✓";
    margin-right:8px;
    color:var(--color-gold);
    font-weight:var(--fw-bold);
}

.planos__nota{
    margin-top:var(--space-xl);
    color:var(--color-text-muted);
    font-size:var(--font-size-sm);
}

/* ==========================================================
   NUMEROS — faixa de contagens do catalogo
   ========================================================== */

.numeros{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:var(--space-xl);
    margin-top:var(--space-2xl);
}

.numero{
    padding:var(--space-lg);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    background:var(--color-bg-card);
    text-align:center;
}

.numero__valor{
    display:block;
    font-family:var(--font-heading);
    font-size:2.5rem;
    color:var(--color-gold);
    line-height:1;
}

.numero__rotulo{
    display:block;
    margin-top:var(--space-sm);
    font-size:var(--font-size-sm);
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--color-text-muted);
}

/* ==========================================================
   CATALOGO (recursos.html)
   ========================================================== */

.catalogo{ padding:var(--space-4xl) 0; }

.catalogo__nav{
    position:sticky;
    top:var(--navbar-height);
    z-index:5;
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-sm);
    padding:var(--space-md) 0;
    background:rgba(9,9,9,.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--color-border);
}

.catalogo__nav a{
    padding:8px 16px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-pill);
    font-family:var(--font-heading);
    font-size:.8rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--color-text-secondary);
}

.catalogo__nav a:hover{
    border-color:var(--color-gold);
    color:var(--color-gold);
}

.catalogo__busca{
    width:100%;
    max-width:420px;
    margin-left:auto;
    height:40px;
    padding:0 var(--space-md);
    background:rgba(255,255,255,.04);
    border:1px solid var(--color-border-light);
    border-radius:var(--radius-md);
    color:var(--color-text);
    font-family:var(--font-body);
}

.catalogo__busca:focus{
    outline:none;
    border-color:var(--color-gold);
}

.categoria{ padding-top:var(--space-3xl); }

.categoria__head{
    display:flex;
    align-items:baseline;
    gap:var(--space-md);
    margin-bottom:var(--space-md);
}

.categoria__titulo{
    font-family:var(--font-heading);
    font-size:var(--font-size-2xl);
    font-weight:var(--fw-medium);
}

.categoria__contagem{
    color:var(--color-gold);
    font-family:var(--font-heading);
    letter-spacing:.1em;
}

.categoria__texto{
    max-width:720px;
    margin-bottom:var(--space-xl);
    color:var(--color-text-secondary);
    line-height:1.7;
}

.blocos{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-md);
}

.bloco{
    padding:var(--space-md) var(--space-lg);
    background:var(--color-bg-card);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    transition:var(--transition-fast);
}

.bloco:hover{ border-color:rgba(200,164,90,.4); }

.bloco[hidden]{ display:none; }

.bloco__nome{
    font-weight:var(--fw-medium);
    line-height:1.4;
}

.bloco__meta{
    display:flex;
    gap:var(--space-md);
    margin-top:6px;
    font-size:var(--font-size-xs);
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--color-text-muted);
}

.bloco__meta .gold{ color:var(--color-gold); }

.catalogo__vazio{
    display:none;
    padding:var(--space-xl) 0;
    color:var(--color-text-muted);
}

.catalogo__vazio.is-visible{ display:block; }

.execucao-lista{
    columns:2;
    column-gap:var(--space-2xl);
    margin:0;
    padding:0;
    list-style:none;
}

.execucao-lista li{
    break-inside:avoid;
    padding:10px 0;
    border-bottom:1px solid var(--color-border);
    color:var(--color-text-secondary);
}

/* ==========================================================
   COMO FUNCIONA — passos numerados
   ========================================================== */

.passos{
    display:grid;
    gap:var(--space-lg);
    max-width:880px;
    margin:var(--space-2xl) auto 0;
    counter-reset:passo;
}

.passo{
    display:grid;
    grid-template-columns:64px 1fr;
    gap:var(--space-lg);
    padding:var(--space-xl);
    background:var(--color-bg-card);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
}

.passo::before{
    counter-increment:passo;
    content:counter(passo,decimal-leading-zero);
    font-family:var(--font-heading);
    font-size:2rem;
    color:var(--color-gold);
    line-height:1;
}

.passo h3{
    font-family:var(--font-heading);
    font-size:var(--font-size-xl);
    font-weight:var(--fw-medium);
    margin-bottom:var(--space-sm);
}

.passo p{
    color:var(--color-text-secondary);
    line-height:1.7;
}

.passo p + p{ margin-top:var(--space-sm); }

.passo__nota{
    margin-top:var(--space-md);
    padding:var(--space-sm) var(--space-md);
    border-left:2px solid var(--color-gold);
    background:rgba(200,164,90,.06);
    font-size:var(--font-size-sm);
    color:var(--color-text-secondary);
}

/* Cards de texto simples (garantias do executor) */

.card__list{
    margin:0;
    padding:0;
    list-style:none;
    color:var(--color-text-secondary);
    line-height:1.7;
}

.card__list li::before{
    content:"—";
    margin-right:8px;
    color:var(--color-gold);
}

/* ==========================================================
   PAGAMENTO (mock PIX)
   ========================================================== */

.pagamento{ padding:var(--space-4xl) 0; }

.pagamento__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 380px;
    gap:var(--space-2xl);
    align-items:start;
}

.resumo{
    position:sticky;
    top:calc(var(--navbar-height) + var(--space-lg));
    padding:var(--space-xl);
    background:var(--color-bg-card);
    border:1px solid rgba(200,164,90,.35);
    border-radius:var(--radius-xl);
}

.resumo__titulo{
    font-family:var(--font-heading);
    font-size:var(--font-size-sm);
    letter-spacing:.25em;
    text-transform:uppercase;
    color:var(--color-text-muted);
}

.resumo__linha{
    display:flex;
    justify-content:space-between;
    padding:var(--space-md) 0;
    border-bottom:1px solid var(--color-border);
}

.resumo__linha strong{ color:var(--color-text); }

.resumo__total{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding-top:var(--space-lg);
    font-family:var(--font-heading);
}

.resumo__total .valor{
    font-size:2rem;
    color:var(--color-gold);
}

.resumo__troca{
    display:block;
    margin-top:var(--space-md);
    font-size:var(--font-size-sm);
    color:var(--color-gold);
}

/* Ponte entre as moedas: mais destacada que a troca de plano, porque quem
   está no país errado não completa a compra sem ela. */
.resumo__moeda{
    margin-top:var(--space-lg);
    padding-top:var(--space-lg);
    border-top:1px solid var(--color-border);
    font-size:var(--font-size-sm);
}

.resumo__moeda a{
    color:var(--color-text-secondary);
    border-bottom:1px solid rgba(200,164,90,.4);
    padding-bottom:2px;
    transition:var(--transition-fast);
}

.resumo__moeda a:hover{
    color:var(--color-gold);
    border-bottom-color:var(--color-gold);
}

.pix{
    padding:var(--space-xl);
    background:var(--color-bg-card);
    border:1px solid var(--color-border);
    border-radius:var(--radius-xl);
}

.pix + .pix{ margin-top:var(--space-lg); }

.pix__titulo{
    display:flex;
    align-items:center;
    gap:var(--space-md);
    font-family:var(--font-heading);
    font-size:var(--font-size-xl);
    font-weight:var(--fw-medium);
    margin-bottom:var(--space-lg);
}

.pix__badge{
    padding:4px 10px;
    border-radius:var(--radius-sm);
    background:rgba(0,200,83,.12);
    border:1px solid rgba(0,200,83,.35);
    color:var(--color-buy);
    font-size:.7rem;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.pix__dados{
    display:grid;
    gap:var(--space-md);
    margin:0;
}

.pix__dados div{
    display:grid;
    grid-template-columns:160px 1fr auto;
    gap:var(--space-md);
    align-items:center;
    padding:var(--space-md);
    background:rgba(255,255,255,.03);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
}

.pix__dados dt{
    font-size:var(--font-size-xs);
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--color-text-muted);
}

.pix__dados dd{
    margin:0;
    font-family:var(--font-heading);
    font-size:var(--font-size-lg);
    color:var(--color-text);
    overflow-wrap:anywhere;
}

.copiar{
    height:36px;
    padding:0 var(--space-md);
    border:1px solid var(--color-border-light);
    border-radius:var(--radius-sm);
    background:transparent;
    color:var(--color-gold);
    font-family:var(--font-heading);
    font-size:.75rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    cursor:pointer;
    transition:var(--transition-fast);
}

.copiar:hover{ border-color:var(--color-gold); }

.copiar.is-copied{
    background:var(--color-gold);
    color:#141008;
}

.pix__passos{
    margin:0;
    padding-left:1.2em;
    color:var(--color-text-secondary);
    line-height:1.8;
}

.pix__aviso{
    margin-top:var(--space-lg);
    padding:var(--space-md);
    border-left:2px solid var(--color-gold);
    background:rgba(200,164,90,.06);
    font-size:var(--font-size-sm);
    color:var(--color-text-secondary);
}

.campo{
    display:grid;
    gap:6px;
    margin-bottom:var(--space-md);
}

.campo label{
    font-size:var(--font-size-xs);
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--color-text-muted);
}

.campo input{
    height:48px;
    padding:0 var(--space-md);
    background:rgba(255,255,255,.04);
    border:1px solid var(--color-border-light);
    border-radius:var(--radius-md);
    color:var(--color-text);
    font-family:var(--font-body);
}

.campo input:focus{
    outline:none;
    border-color:var(--color-gold);
    box-shadow:0 0 0 3px rgba(200,164,90,.15);
}

.pagamento__ok{
    display:none;
    margin-top:var(--space-lg);
    color:var(--color-gold);
    font-family:var(--font-heading);
}

.pagamento__ok.is-visible{ display:block; }

/* ==========================================================
   LEGAL — termos e privacidade
   ========================================================== */

.legal{
    max-width:820px;
    margin-inline:auto;
    color:var(--color-text-secondary);
    line-height:1.75;
}

.legal h2{
    margin:var(--space-2xl) 0 var(--space-md);
    font-family:var(--font-heading);
    font-size:var(--font-size-xl);
    font-weight:var(--fw-medium);
    color:var(--color-text);
}

.legal h2:first-child{ margin-top:0; }

.legal p + p{ margin-top:var(--space-md); }

.legal ul{
    margin:var(--space-md) 0;
    padding-left:1.4em;
}

.legal li + li{ margin-top:var(--space-sm); }

.legal a{ color:var(--color-gold); }

.legal strong{ color:var(--color-text); }

.legal table{
    width:100%;
    margin:var(--space-md) 0;
    border-collapse:collapse;
    font-size:var(--font-size-sm);
}

.legal th,
.legal td{
    padding:var(--space-sm) var(--space-md);
    border:1px solid var(--color-border);
    text-align:left;
    vertical-align:top;
}

.legal th{
    background:var(--color-bg-card);
    color:var(--color-text);
    font-family:var(--font-heading);
    font-weight:var(--fw-medium);
    letter-spacing:.06em;
    text-transform:uppercase;
    font-size:var(--font-size-xs);
}

.legal__nota{
    margin-top:var(--space-2xl);
    padding-top:var(--space-lg);
    border-top:1px solid var(--color-border);
    color:var(--color-text-muted);
}

/* ==========================================================
   LANG — seletor PT / EN no menu
   ========================================================== */

.lang{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-right:var(--space-sm);
    font-family:var(--font-heading);
    font-size:.75rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--color-text-muted);
}

.lang a{ color:var(--color-text-muted); }

.lang a:hover{ color:var(--color-gold); }

.lang .is-active{ color:var(--color-gold); }

/* ==========================================================
   FOOTER — dados da empresa
   ========================================================== */

.footer__info{
    padding-bottom:var(--space-lg);
    margin-bottom:var(--space-lg);
    border-bottom:1px solid var(--color-border);
    text-align:center;
    font-size:var(--font-size-sm);
    line-height:1.7;
    color:var(--color-text-muted);
}

.footer__info p{
    max-width:none;
    margin-inline:auto;
}

.nb{ white-space:nowrap; }

.footer__info strong{ color:var(--color-text-secondary); }

.footer__info a{ color:var(--color-gold); }

/* ==========================================================
   OBRIGADO — retorno do pagamento
   ========================================================== */

.obrigado{
    position:relative;
    padding:calc(var(--navbar-height) + var(--space-3xl)) 0 var(--space-4xl);
    text-align:center;
    background:var(--gradient-hero);
    overflow:hidden;
}

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

.obrigado__selo{
    display:flex;
    align-items:center;
    justify-content:center;
    width:88px;
    height:88px;
    margin:0 auto var(--space-xl);
    border-radius:50%;
    border:1px solid rgba(200,164,90,.45);
    background:rgba(200,164,90,.08);
    color:var(--color-gold);
    box-shadow:0 0 60px rgba(200,164,90,.18);
}

.obrigado__selo svg{ width:44px; height:44px; }

.obrigado__texto{
    max-width:640px;
    margin:var(--space-lg) auto 0;
    font-size:var(--font-size-lg);
    line-height:1.7;
    color:var(--color-text-secondary);
}

.obrigado .passos{ text-align:left; }

.obrigado .passo a{ color:var(--color-gold); }

.obrigado__acoes{
    display:flex;
    gap:var(--space-md);
    justify-content:center;
    flex-wrap:wrap;
    margin-top:var(--space-2xl);
}

.obrigado__nota{
    max-width:560px;
    margin:var(--space-xl) auto 0;
    font-size:var(--font-size-sm);
    color:var(--color-text-muted);
}

.obrigado__nota a{ color:var(--color-gold); }

@media (max-width:640px){
    .obrigado__acoes .button{ width:100%; }
}

/* ==========================================================
   WHATSAPP — botão flutuante de contato
   ========================================================== */

.whatsapp{
    position:fixed;
    right:var(--space-lg);
    bottom:var(--space-lg);
    z-index:calc(var(--z-navbar) + 2);
    display:flex;
    align-items:center;
    gap:12px;
    height:62px;
    padding:0 24px 0 20px;
    border-radius:var(--radius-pill);
    background:var(--gradient-gold);
    border:1px solid rgba(230,203,145,.5);
    box-shadow:0 12px 32px rgba(0,0,0,.5), 0 0 28px rgba(200,164,90,.25);
    color:#141008;
    font-family:var(--font-heading);
    font-size:.85rem;
    font-weight:var(--fw-semibold);
    letter-spacing:.1em;
    text-transform:uppercase;
    white-space:nowrap;
    transition:var(--transition-fast);
}

.whatsapp:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 44px rgba(200,164,90,.4);
}

.whatsapp svg{
    width:26px;
    height:26px;
    flex-shrink:0;
    fill:currentColor;
}

/* Sobe quando o aviso de cookies está aberto, para não sobrepor os botões. */
body.tem-aviso .whatsapp{
    bottom:calc(var(--space-lg) + 150px);
}

@media (max-width:640px){
    .whatsapp{
        right:var(--space-md);
        bottom:var(--space-md);
        height:58px;
        padding:0;
        width:58px;
        justify-content:center;
    }
    .whatsapp__texto{ display:none; }
    body.tem-aviso .whatsapp{ bottom:calc(var(--space-md) + 250px); }
}

/* ==========================================================
   COOKIES — aviso de opt-in (analytics.js)
   ========================================================== */

.cookies{
    position:fixed;
    left:50%;
    bottom:var(--space-lg);
    z-index:calc(var(--z-navbar) + 1);
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:var(--space-lg);
    width:min(100% - 32px, 760px);
    padding:var(--space-md) var(--space-lg);
    background:rgba(20,20,20,.96);
    border:1px solid rgba(200,164,90,.4);
    border-radius:var(--radius-lg);
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    backdrop-filter:blur(12px);
    animation:cookies-sobe .35s ease-out;
}

@keyframes cookies-sobe{
    from{ opacity:0; transform:translate(-50%, 16px); }
    to{ opacity:1; transform:translate(-50%, 0); }
}

.cookies__texto{
    flex:1;
    margin:0;
    font-size:var(--font-size-sm);
    line-height:1.6;
    color:var(--color-text-secondary);
}

.cookies__texto a{ color:var(--color-gold); }

.cookies__acoes{
    display:flex;
    gap:var(--space-sm);
    flex-shrink:0;
}

.cookies .button--ghost{ display:inline-flex; }

@media (max-width:640px){
    .cookies{
        flex-direction:column;
        align-items:stretch;
        bottom:var(--space-md);
    }
    .cookies__acoes .button{ flex:1; }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:1024px){
    .numeros{ grid-template-columns:repeat(2,1fr); }
    .blocos{ grid-template-columns:repeat(2,1fr); }
    .pagamento__grid{ grid-template-columns:1fr; }
    .resumo{ position:static; order:-1; }
}

@media (max-width:1024px){
    .planos__grid{ gap:var(--space-md); }
    .plano{ padding:var(--space-xl); }
}

@media (max-width:768px){
    .planos__grid{ grid-template-columns:1fr; }
    .blocos{ grid-template-columns:1fr; }
    .execucao-lista{ columns:1; }
    .passo{ grid-template-columns:1fr; }
    .pix__dados div{ grid-template-columns:1fr; }
    .catalogo__busca{ margin-left:0; }
}

@media (max-width:480px){
    .numeros{ grid-template-columns:1fr; }
}