/* ==========================================================
   PÁGINA PÚBLICA DE PREÇOS
   Reaproveita os tokens de cor já definidos em inicio.css
   (--ink, --orange, --muted, --line, --green) para ficar visualmente
   consistente com o restante do site público (index.html) — não usa
   as variáveis de perfil.css/meu-plano.css, que pertencem à área
   logada.
========================================================== */

/* Cabeçalho: alinha os links do menu superior ao tamanho usado nas
   demais páginas (index.html usa Poppins 15px/500 no desktop; a
   inicio.css sozinha deixa 14px). O menu já é ocultado abaixo de
   821px pela inicio.css, então só o desktop precisa de ajuste. */
.site-header .auth-menu a{ font-family:'Poppins',sans-serif; font-size:15px; font-weight:500; }

.precos-hero{ padding:96px 0 20px; text-align:center; background:var(--warm); }
.precos-hero .section-label{ justify-content:center; }
.precos-hero h1{ font-size:clamp(36px,4.4vw,52px); line-height:1.15; letter-spacing:-.03em; margin:18px auto 14px; max-width:760px; }
.precos-hero>p{ color:var(--muted); font-size:17px; line-height:1.6; max-width:620px; margin:0 auto; }

.precos-secao{ padding:56px 0 90px; }

.precos-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    align-items:stretch;
    max-width:1080px;
    margin:0 auto;
}

/* Cards no mesmo padrão do dashboard do admin: elevados ("suspensos"),
   sombra profunda, filete laranja no topo e leve subida no hover.
   O ::before segue o arredondamento do topo (sem overflow:hidden, para
   não cortar o selo "Mais popular" que fica acima do card). */
.plano-card{
    position:relative;
    display:flex; flex-direction:column;
    background:#fff;
    border:1px solid var(--am-border,#eef1f6);
    border-radius:18px;
    padding:30px 26px;
    box-shadow:0 20px 44px -16px rgba(15,23,42,.24),
               0 8px 18px -8px rgba(15,23,42,.12),
               0 1px 2px rgba(15,23,42,.04);
    transition:transform .18s ease, box-shadow .18s ease;
}

.plano-card::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:4px;
    border-radius:18px 18px 0 0;
    background:linear-gradient(90deg,#ff6b00,#fb923c);
}

.plano-card:hover{
    transform:translateY(-4px);
    box-shadow:0 30px 60px -18px rgba(15,23,42,.30),
               0 14px 28px -10px rgba(15,23,42,.16);
}

.plano-card.plano-destaque{
    border-color:var(--orange);
    box-shadow:0 26px 54px -16px rgba(255,101,0,.28),
               0 10px 24px -10px rgba(15,23,42,.14);
    transform:translateY(-6px);
}

.plano-card.plano-destaque:hover{
    transform:translateY(-10px);
    box-shadow:0 34px 68px -18px rgba(255,101,0,.32),
               0 16px 32px -12px rgba(15,23,42,.18);
}

.plano-card.plano-atual{ border-color:var(--green); }

.plano-selo{
    position:absolute; top:-13px; left:50%; translate:-50% 0;
    background:var(--orange); color:#fff;
    font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
    padding:6px 16px; border-radius:999px; white-space:nowrap;
}

.plano-selo.plano-selo-atual{ background:var(--green); }

.plano-card h2{ font-size:22px; margin:6px 0 2px; }

.plano-preco{ margin:10px 0 4px; }
.plano-preco strong{ font:800 34px/1 "Manrope"; color:var(--ink); }
.plano-preco span{ font-size:15px; color:var(--muted); }

/* Modalidades MENSAL / ANUAL no card (planos pagos) */
.plano-precos{ display:grid; gap:12px; margin:10px 0 2px; }
.plano-modalidade{
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px 14px;
}
.plano-modalidade .plano-preco{ margin:2px 0 4px; }
.plano-modalidade .plano-preco strong{ font-size:26px; }
.plano-modalidade-rotulo{
    display:block; font-size:11px; font-weight:800; letter-spacing:.06em;
    text-transform:uppercase; color:var(--muted);
}
.plano-modalidade small{ display:block; font-size:12px; line-height:1.4; color:var(--muted); }
.plano-modalidade .plano-economia{ margin-top:3px; font-weight:700; color:var(--green); }
/* Equivalente mensal do plano anual — em evidência (não é cobrança,
   só referência de comparação com o mensal). */
.plano-equivalente{
    display:inline-block;
    margin:4px 0 6px;
    padding:4px 10px;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--orange);
    font-size:14px; font-weight:700; color:var(--orange-dark); line-height:1.2;
}
.plano-equivalente strong{ font-size:17px; font-weight:800; }
.plano-modalidade-anual{
    border-color:var(--orange);
    background:var(--warm);
    position:relative;
}
.plano-selo-anual{
    display:inline-block; margin-bottom:6px;
    background:var(--orange); color:#fff;
    font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
    padding:3px 10px; border-radius:999px;
}
.plano-modalidade-anual .plano-preco strong{ color:var(--orange-dark); }

.plano-lista{ list-style:none; margin:20px 0 24px; padding:0; display:grid; gap:11px; flex:1; }
.plano-lista li{ display:flex; align-items:flex-start; gap:10px; font-size:15px; color:#33465e; line-height:1.45; }
.plano-lista li i{ margin-top:3px; font-size:14px; }
.plano-lista li.disponivel i{ color:var(--green); }
.plano-lista li.indisponivel{ color:#a2adba; }
.plano-lista li.indisponivel i{ color:#c3cbd4; }

.plano-card .btn{ width:100%; border-radius:10px; padding:14px 20px; }
.plano-card .plano-nota{ margin-top:10px; text-align:center; font-size:13px; color:var(--muted); }

.precos-rodape-nota{ text-align:center; color:var(--muted); font-size:14px; margin-top:38px; }
.precos-rodape-nota i{ color:var(--orange); margin-right:6px; }

.precos-carregando, .precos-erro{ text-align:center; color:var(--muted); padding:40px 0; }
.precos-erro{ color:#b91c1c; }

@media(max-width:980px){
    .precos-grid{ grid-template-columns:1fr; max-width:420px; }
    .plano-card.plano-destaque{ transform:none; }
}

@media(max-width:560px){
    .precos-hero{ padding:76px 0 16px; }
    .precos-secao{ padding:40px 0 60px; }
    .plano-card{ padding:24px 20px; }
}


/* ==========================================================
   COMO FUNCIONA — fluxo de uso
========================================================== */

.precos-fluxo{ padding:0 0 8px; text-align:center; }
.precos-fluxo .section-label{ justify-content:center; font-size:13px; }
.precos-fluxo h2{
    font-size:clamp(30px,3.6vw,42px); line-height:1.2; letter-spacing:-.02em;
    margin:14px auto 8px; max-width:680px;
}
.precos-fluxo-sub{ color:var(--muted); font-size:17px; line-height:1.6; margin:0 auto 26px; }

.fluxo-passos{
    list-style:none; margin:0 auto; padding:0;
    display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:10px;
    max-width:900px;
}
.fluxo-passos li{
    flex:1 1 148px; min-width:128px;
    display:flex; flex-direction:column; align-items:center; gap:9px;
    background:#fff; border:1px solid var(--line); border-radius:14px;
    padding:18px 12px; position:relative;
}
.fluxo-passos li i{
    width:38px; height:38px; display:grid; place-items:center;
    border-radius:10px; background:var(--warm); color:var(--orange); font-size:15px;
}
.fluxo-passos li span{ font-weight:700; font-size:15px; color:var(--ink); }
.fluxo-passos li:not(:last-child)::after{
    content:"\f054"; font-family:"Font Awesome 6 Free"; font-weight:900;
    color:#c3cbd4; font-size:12px;
    position:absolute; right:-11px; top:50%; translate:0 -50%;
}

/* O que cada plano cobre nesse caminho (posicionamento por plano). */
.fluxo-planos{
    list-style:none; margin:24px auto 0; padding:0;
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
    max-width:900px; text-align:left;
}
.fluxo-planos li{
    background:#fff; border:1px solid var(--line); border-radius:12px;
    padding:14px 16px;
}
.fluxo-planos strong{
    display:block; font-size:14px; color:var(--orange-dark);
    text-transform:uppercase; letter-spacing:.03em; margin-bottom:6px;
}
.fluxo-planos span{ font-size:15px; line-height:1.6; color:#33465e; }


/* ==========================================================
   MÓDULOS DO PRODUTO
========================================================== */

.precos-modulos{ padding:48px 0 46px; }

.modulos-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
    max-width:1080px;
    margin:0 auto;
}

.modulo-card{
    position:relative;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--am-border,#eef1f6);
    border-radius:18px;
    padding:26px 24px;
    display:flex; flex-direction:column; gap:10px;
    box-shadow:0 20px 44px -16px rgba(15,23,42,.24),
               0 8px 18px -8px rgba(15,23,42,.12),
               0 1px 2px rgba(15,23,42,.04);
    transition:transform .18s ease, box-shadow .18s ease;
}

.modulo-card::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:4px;
    background:linear-gradient(90deg,#ff6b00,#fb923c);
}

.modulo-card:hover{
    transform:translateY(-4px);
    box-shadow:0 30px 60px -18px rgba(15,23,42,.30),
               0 14px 28px -10px rgba(15,23,42,.16);
}

.modulo-icone{
    width:44px; height:44px; display:grid; place-items:center;
    border-radius:12px; background:var(--warm); color:var(--orange); font-size:17px;
}

.modulo-card h3{ font-size:17px; margin:2px 0 0; letter-spacing:-.01em; line-height:1.3; }
.modulo-card p{ font-size:15px; line-height:1.6; color:#33465e; margin:0; }

.modulo-lista{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.modulo-lista li{
    font-size:13px; color:#33465e;
    background:var(--warm); border:1px solid var(--line);
    border-radius:999px; padding:4px 10px;
}

.modulo-etapas{
    display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:2px;
}
.modulo-etapas span{
    font-size:12.5px; font-weight:600; color:var(--ink);
    background:var(--warm); border:1px solid var(--line);
    border-radius:999px; padding:4px 9px;
}
.modulo-etapas i{ color:#c3cbd4; font-size:9px; }

.modulo-tag{
    margin-top:auto; align-self:flex-start;
    font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
    color:var(--green); background:rgba(15,159,98,.09);
    border-radius:999px; padding:5px 11px;
}
.modulo-tag.tag-pago{ color:var(--orange-dark); background:rgba(255,101,0,.09); }


/* ==========================================================
   RESPONSABILIDADE — bloco de apoio à decisão
========================================================== */

.precos-responsabilidade{ padding:0 0 90px; }

.responsabilidade-bloco{
    max-width:820px; margin:0 auto;
    background:var(--warm);
    border:1px solid var(--line);
    border-radius:18px;
    padding:32px 34px;
}
.responsabilidade-bloco h2{
    font-size:22px; letter-spacing:-.01em; line-height:1.3;
    margin:0 0 12px; color:var(--ink);
}
.responsabilidade-bloco p{
    font-size:15px; line-height:1.7; color:#4a586b; margin:0 0 12px;
}
.responsabilidade-bloco p:last-child{ margin-bottom:0; }
.responsabilidade-nota{ font-weight:600; color:var(--ink); }


@media(max-width:980px){
    .modulos-grid{ grid-template-columns:1fr; max-width:460px; }
    .fluxo-planos{ grid-template-columns:1fr; max-width:420px; }
}

@media(max-width:560px){
    .precos-modulos{ padding:34px 0 32px; }
    .precos-responsabilidade{ padding:0 0 56px; }
    .responsabilidade-bloco{ padding:24px 22px; }
    .fluxo-passos li{ flex-basis:calc(50% - 5px); }
    /* Em 2 colunas que quebram de linha, o conector entre os passos
       deixa de fazer sentido visual — esconde. */
    .fluxo-passos li::after{ display:none; }
}