/* Base compartilhada do site — identidade visual oficial da Menuvem
   Fonte da verdade: ~/menuvempb-instagram/assets/marca/identidade-visual.md
   Usada por todas as páginas no visual novo; cada página carrega depois o seu CSS próprio. */
:root {
    --roxo-profundo: #4B0FA5;
    --roxo: #7418E4;
    --roxo-medio: #5A13BB;
    --roxo-noite: #3A0B82;
    --amarelo: #FFC700;
    --lavanda: #F6F5FA;
    --branco: #FFFFFF;
    --tinta: #2B2340;
    --texto: #4E4866;
    --texto-suave: #6B6585;
    --lilas: #E4DAFB;
    --lilas-suave: #C9B8F2;
    --borda: #E6E1F3;

    --fonte-titulo: 'Bricolage Grotesque', system-ui, sans-serif;
    --fonte-texto: 'IBM Plex Sans', system-ui, sans-serif;
    --largura: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
    margin: 0;
    font-family: var(--fonte-texto);
    color: var(--tinta);
    background: var(--lavanda);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.container { max-width: var(--largura); margin: 0 auto; padding: 0 24px; }

/* ---------- Componentes ---------- */
.pilula {
    display: inline-block;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--roxo-profundo);
    background: var(--amarelo);
    padding: 7px 14px;
    border-radius: 999px;
    text-transform: uppercase;
}
.sobretitulo {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--roxo);
}
.titulo-secao {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--roxo-profundo);
}
.realce {
    background: linear-gradient(transparent 62%, rgba(255, 199, 0, .55) 62%, rgba(255, 199, 0, .55) 92%, transparent 92%) no-repeat 0 0 / 0% 100%;
    transition: background-size 1s cubic-bezier(.2, .8, .2, 1) .25s;
    padding: 0 2px;
}
.visivel .realce, .realce.visivel { background-size: 100% 100%; }
.suporte .realce { background: none; color: var(--amarelo); padding: 0; }
.pilula-viva { display: inline-flex; align-items: center; gap: 8px; }
.pilula-viva .ponto { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--roxo-profundo); }
.pilula-viva .ponto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--roxo-profundo); animation: onda 2s ease-out infinite; }
@keyframes onda { from { transform: scale(1); opacity: .6; } to { transform: scale(2.8); opacity: 0; } }
.cabeca-secao { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.cabeca-secao.centro { align-items: center; text-align: center; margin: 0 auto; }
.cabeca-secao p { margin: 0; font-size: 17px; color: var(--texto); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 17px;
    text-decoration: none;
    padding: 15px 26px;
    border-radius: 14px;
    border: 2px solid transparent;
    transition: transform .15s ease, background-color .15s ease;
    cursor: pointer;
}
.btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .25s cubic-bezier(.2, .8, .2, 1), background-color .2s ease, box-shadow .25s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .seta { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.btn:hover .seta { transform: translateX(4px); }
.btn:focus-visible, .ver-tudo:focus-visible, .botao-menu:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }
/* faixa de brilho que passa pelo botão a cada poucos segundos */
.btn-brilho::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
    transform: skewX(-20deg);
    animation: brilho 4.5s ease-in-out infinite;
    z-index: -1;
}
@keyframes brilho { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.btn-amarelo { background: var(--amarelo); color: var(--roxo-profundo); }
.btn-amarelo { box-shadow: 0 8px 22px rgba(255, 199, 0, .28); }
.btn-amarelo:hover { background: #FFD233; box-shadow: 0 12px 30px rgba(255, 199, 0, .45); }
.btn-roxo { background: var(--roxo); color: var(--branco); box-shadow: 0 8px 22px rgba(116, 24, 228, .25); }
.btn-roxo:hover { background: var(--roxo-profundo); box-shadow: 0 12px 30px rgba(116, 24, 228, .35); }
.btn-contorno-claro { color: var(--branco); border-color: rgba(255, 255, 255, .55); }
.btn-contorno-claro:hover { background: rgba(255, 255, 255, .08); }
.btn-contorno { color: var(--roxo-profundo); border-color: var(--roxo-profundo); background: transparent; }
.btn-contorno:hover { background: var(--lavanda); }

/* Link pra uma página dedicada ("Comparar os planos", "Ver todas as dúvidas"):
   pílula com borda e seta num círculo amarelo, pra não passar por texto comum */
.link-seta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 20px;
    border: 2px solid var(--roxo);
    border-radius: 999px;
    background: var(--branco);
    color: var(--roxo-profundo);
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(116, 24, 228, .12);
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.link-seta-icone {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--amarelo);
    color: var(--roxo-profundo);
    animation: chamar-seta 3.2s ease-in-out infinite;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
/* empurrãozinho periódico na direção da seta */
@keyframes chamar-seta { 0%, 78%, 100% { transform: translateX(0); } 86% { transform: translateX(5px); } 93% { transform: translateX(-1px); } }
@keyframes chamar-seta-baixo { 0%, 78%, 100% { transform: translateY(0); } 86% { transform: translateY(5px); } 93% { transform: translateY(-1px); } }
.link-seta-baixo .link-seta-icone { animation-name: chamar-seta-baixo; }
.link-seta:hover { background: var(--roxo); color: var(--branco); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(116, 24, 228, .28); }
.link-seta:hover .link-seta-icone { animation: none; transform: translateX(4px) scale(1.06); }
.link-seta-baixo:hover .link-seta-icone { transform: translateY(3px) scale(1.06); }
.link-seta:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }

.circulo { position: absolute; border-radius: 50%; background: var(--roxo-medio); pointer-events: none; }

section { position: relative; }
.secao { padding: 96px 0; }

/* ---------- Cabeçalho ---------- */
.topo {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--roxo-profundo);
    transition: box-shadow .2s ease;
}
.topo.rolou { box-shadow: 0 8px 24px rgba(20, 4, 60, .25); }
.topo .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 76px;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca img { height: 46px; width: auto; }
.marca .pilula { font-size: 12px; padding: 4px 9px; }
.menu { display: flex; align-items: center; gap: 4px; }
.menu a:not(.btn) {
    color: var(--branco);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    padding: 12px 14px;
    border-radius: 10px;
}
.menu a:not(.btn):hover { background: rgba(255, 255, 255, .08); }
.menu .entrar { color: var(--lilas); }
.menu .btn { font-size: 15px; padding: 11px 18px; border-radius: 12px; margin-left: 8px; }
.botao-menu {
    display: none;
    background: none;
    border: 0;
    color: var(--branco);
    width: 44px;
    height: 44px;
    border-radius: 10px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}


/* Título com marcador amarelo e entrada escalonada (abertura da home e topo das páginas) */
.marcador {
    color: var(--amarelo);
    background: linear-gradient(var(--amarelo), var(--amarelo)) no-repeat 0 96% / 0% 0.1em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding-bottom: 0.06em;
    animation: sublinhar .9s cubic-bezier(.2, .8, .2, 1) 1s forwards;
}
@keyframes sublinhar { to { background-size: 100% 0.1em; } }
.entrada { opacity: 0; transform: translateY(18px); animation: entrar .8s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i, 0) * 110ms + 100ms); }
@keyframes entrar { to { opacity: 1; transform: none; } }

/* ---------- Topo das páginas internas ---------- */
.pagina-topo { background: var(--roxo-profundo); overflow: hidden; padding: 72px 0 128px; }
.pagina-topo .circulo { width: 520px; height: 520px; top: -260px; right: -140px; }
.pagina-topo .container { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.pagina-topo h1 {
    margin: 0;
    max-width: 860px;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: clamp(34px, 4.6vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--branco);
}
.pagina-topo p { margin: 0; max-width: 640px; font-size: 18px; line-height: 1.55; color: var(--lilas); }
/* conteúdo que sobe por cima da faixa roxa do topo */
.sobe-no-topo { margin-top: -96px; position: relative; }
.menu a[aria-current="page"] { background: rgba(255, 255, 255, .12); }

/* ---------- Planos ---------- */
.planos { background: var(--lavanda); overflow: hidden; }
.planos::before {
    content: "";
    position: absolute;
    width: 720px;
    height: 720px;
    left: 50%;
    top: 160px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(116, 24, 228, .10) 0%, rgba(116, 24, 228, 0) 65%);
    pointer-events: none;
}
.planos .container { position: relative; display: flex; flex-direction: column; gap: 56px; }
.planos-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.plano {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: 24px;
    padding: 32px 30px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    box-shadow: 0 1px 2px rgba(43, 35, 64, .04);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
.plano:hover { transform: translateY(-6px); border-color: #CDBDF3; box-shadow: 0 24px 48px rgba(75, 15, 165, .14); }
.plano-topo { display: flex; gap: 14px; align-items: flex-start; min-height: 104px; }
.plano-icone {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lavanda);
    color: var(--roxo);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.plano:hover .plano-icone { transform: rotate(-6deg) scale(1.06); }
.plano-nome h3 { margin: 0; font-family: var(--fonte-titulo); font-weight: 800; font-size: 23px; line-height: 1.15; color: var(--roxo-profundo); }
.plano-nome p { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--texto-suave); }
.preco { display: flex; align-items: flex-start; gap: 4px; color: var(--roxo-profundo); padding-top: 4px; }
.preco .moeda { font-family: var(--fonte-titulo); font-weight: 800; font-size: 20px; margin-top: 8px; }
.preco strong { font-family: var(--fonte-titulo); font-weight: 800; font-size: 60px; line-height: 1; letter-spacing: -0.02em; }
.preco .mes { font-size: 16px; color: var(--texto-suave); align-self: flex-end; margin-bottom: 6px; }
.gratis {
    margin: -6px 0 0;
    align-self: flex-start;
    font-size: 13px;
    font-weight: 600;
    color: #6A4A00;
    background: #FFF4CC;
    padding: 5px 10px;
    border-radius: 8px;
}
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--texto); }
.lista li { display: flex; gap: 10px; align-items: flex-start; }
.lista li::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--roxo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.plano .lista { flex: 1 1 auto; }
.plano .btn { width: 100%; font-size: 17px; padding: 16px 20px; }

/* "Ver tudo que inclui": abre a comparação nos três cartões ao mesmo tempo */
.ver-tudo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: -4px;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: var(--lavanda);
    color: var(--roxo);
    font-family: var(--fonte-texto);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.ver-tudo:hover { background: #ECE6FA; color: var(--roxo-profundo); }
.ver-tudo svg { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.ver-tudo[aria-expanded="true"] svg { transform: rotate(180deg); }

.plano-completo {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
    opacity: 0;
}
.plano-completo[hidden] { display: none; }
.plano.comparando .lista { display: none; }
.planos-grade.tem-aberto { align-items: start; }
.plano-completo.aberto { grid-template-rows: 1fr; opacity: 1; }
.plano-completo > div { overflow: hidden; min-height: 0; }
.grupo { padding-top: 14px; border-top: 1px dashed var(--borda); margin-top: 4px; }
.grupo h4 { margin: 0 0 8px; font-family: var(--fonte-titulo); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.grupo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.grupo li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--texto); min-height: 20px; }
.grupo li::before {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--roxo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.grupo li.nao { color: #A9A3BD; text-decoration: line-through; text-decoration-color: rgba(169, 163, 189, .6); }
.grupo li.nao::before { background: #E9E6F2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9A3BD' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center / 11px no-repeat; }
.grupo li .novo {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 6px;
    background: #FFF4CC;
    color: #6A4A00;
}

/* Plano em destaque */
.plano.destaque {
    background: var(--roxo-profundo);
    border-color: var(--roxo-profundo);
    box-shadow: 0 28px 56px rgba(75, 15, 165, .30);
    transform: translateY(-12px);
}
.plano.destaque:hover { transform: translateY(-18px); box-shadow: 0 36px 64px rgba(75, 15, 165, .38); }
.plano.destaque::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 26px;
    padding: 2px;
    background: conic-gradient(from var(--giro, 0deg), transparent 0 70%, var(--amarelo) 85%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: girar-borda 5s linear infinite;
    pointer-events: none;
}
@property --giro { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes girar-borda { to { --giro: 360deg; } }
.plano.destaque a.selo { text-decoration: none; }
.plano.destaque .selo {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 12px;
    padding: 7px 14px;
    box-shadow: 0 6px 18px rgba(255, 199, 0, .45);
    animation: pulsar-selo 2.6s ease-in-out infinite;
    z-index: 1;
}
@keyframes pulsar-selo {
    0%, 100% { box-shadow: 0 6px 18px rgba(255, 199, 0, .45); }
    50% { box-shadow: 0 6px 28px rgba(255, 199, 0, .8); }
}
.plano.destaque .plano-icone { background: rgba(255, 255, 255, .12); color: var(--amarelo); }
.plano.destaque .plano-nome h3,
.plano.destaque .preco { color: var(--branco); }
.plano.destaque .plano-nome p,
.plano.destaque .preco .mes { color: var(--lilas-suave); }
.plano.destaque .gratis { background: var(--amarelo); color: var(--roxo-profundo); }
/* Dica ("i") do selo de 30 dias grátis: abre no hover, no foco e no toque */
.gratis { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.dica {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin: -2px -4px -2px 0; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: inherit;
    cursor: help; opacity: .75; transition: opacity .2s ease, background .2s ease;
}
.dica:hover, .dica:focus-visible { opacity: 1; background: rgba(75, 15, 165, .1); }
.dica:focus-visible { outline: 2px solid var(--roxo); outline-offset: 1px; }
.dica-balao {
    position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 5;
    width: max-content; max-width: 250px;
    padding: 10px 12px; border-radius: 10px;
    background: var(--roxo-profundo); color: var(--branco);
    font-size: 13px; font-weight: 500; line-height: 1.45;
    box-shadow: 0 12px 28px rgba(43, 35, 64, .22);
    opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.dica-balao::after {
    content: ""; position: absolute; top: 100%; left: 18px;
    border: 6px solid transparent; border-top-color: var(--roxo-profundo);
}
.gratis:hover .dica-balao, .dica:focus + .dica-balao { opacity: 1; visibility: visible; transform: none; }
.plano.destaque .dica-balao { background: var(--branco); color: var(--roxo-profundo); }
.plano.destaque .dica-balao::after { border-top-color: var(--branco); }
.plano.destaque .lista,
.plano.destaque .grupo li { color: var(--lilas); }
.plano.destaque .lista li::before,
.plano.destaque .grupo li::before { background-color: var(--amarelo); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B0FA5' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }
.plano.destaque .grupo { border-top-color: rgba(255, 255, 255, .16); }
.plano.destaque .grupo h4 { color: var(--lilas-suave); }
.plano.destaque .grupo li.nao { color: rgba(228, 218, 251, .45); text-decoration-color: rgba(228, 218, 251, .35); }
.plano.destaque .grupo li.nao::before { background: rgba(255, 255, 255, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9B8F2' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center / 11px no-repeat; }
.plano.destaque .grupo li .novo { background: var(--amarelo); color: var(--roxo-profundo); }
.plano.destaque .ver-tudo { background: rgba(255, 255, 255, .1); color: var(--branco); }
.plano.destaque .ver-tudo:hover { background: rgba(255, 255, 255, .18); }

.incluso {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: 18px;
    padding: 22px 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.incluso div { display: flex; flex-direction: column; gap: 4px; flex: 1 1 420px; }
.incluso strong { font-family: var(--fonte-titulo); font-weight: 800; font-size: 17px; color: var(--roxo-profundo); }
.incluso div > span { font-size: 15px; color: var(--texto); }

/* ---------- Dúvidas ---------- */
.duvidas { background: var(--branco); }
.duvidas .container { max-width: 880px; display: flex; flex-direction: column; gap: 36px; }
.perguntas { display: flex; flex-direction: column; gap: 12px; }
.perguntas details { background: var(--lavanda); border: 1px solid transparent; border-radius: 16px; padding: 18px 24px; transition: border-color .25s ease, background-color .25s ease; }
.perguntas details:hover { border-color: var(--borda); }
.perguntas details[open] { background: var(--branco); border-color: #CDBDF3; box-shadow: 0 12px 30px rgba(75, 15, 165, .08); }
.perguntas .resposta { overflow: hidden; }
.perguntas summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 19px;
    color: var(--roxo-profundo);
    padding: 4px 0;
}
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; font-size: 26px; line-height: 1; color: var(--roxo); transition: transform .2s ease; }
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--texto); }
.duvidas .link-seta { align-self: center; }

/* ---------- Chamada final ---------- */
.chamada { background: var(--roxo); overflow: hidden; }
.chamada .circulo { width: 420px; height: 420px; top: -160px; right: -120px; }
.chamada .container { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.chamada h2 {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--branco);
    max-width: 820px;
}
.chamada p { margin: 0; font-size: 18px; color: #EDE4FD; max-width: 600px; }
.chamada .acoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--roxo-noite); color: var(--lilas-suave); }
.rodape .container { padding-top: 64px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 40px; }
.rodape-grade { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.rodape-marca { display: flex; flex-direction: column; gap: 14px; }
.rodape-marca img { height: 56px; width: auto; align-self: flex-start; }
.rodape-marca p { margin: 0; font-size: 14px; line-height: 1.55; max-width: 300px; }
.rodape nav { display: flex; flex-direction: column; gap: 2px; }
.rodape h4 { margin: 0 0 6px; font-family: var(--fonte-titulo); font-weight: 800; font-size: 15px; color: var(--branco); }
.rodape nav a { color: var(--lilas); text-decoration: none; font-size: 15px; padding: 6px 0; }
.rodape nav a:hover { color: var(--branco); }
.rodape-base {
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding-top: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #B8A6E6;
}

/* ---------- Revelar ao rolar ---------- */
.revelar { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--atraso, 0ms); }
.revelar.visivel { opacity: 1; transform: none; }
.plano.destaque.revelar.visivel { transform: translateY(-12px); }

/* ---------- Barra de CTA no celular ---------- */
.barra-cta {
    display: none;
    position: fixed;
    left: 12px;
    right: 88px;
    bottom: 16px;
    z-index: 40;
    transform: translateY(140%);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.barra-cta.mostrar { transform: none; }
.barra-cta .btn { width: 100%; padding: 15px 16px; font-size: 16px; box-shadow: 0 12px 30px rgba(20, 4, 60, .35); }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
    .menu a:not(.btn) { padding: 12px 10px; }
    .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    .botao-menu { display: inline-flex; }
    .menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 8px 16px 20px;
        background: var(--roxo-profundo);
        box-shadow: 0 16px 24px rgba(20, 4, 60, .3);
    }
    .menu.aberto { display: flex; }
    .menu .btn { margin: 8px 0 0; }
    .menu .entrar { font-size: 14px; color: var(--lilas-suave); opacity: .8; }
    .planos-grade { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; width: 100%; gap: 32px; }
    .plano.destaque, .plano.destaque.revelar.visivel { transform: none; }
    .plano.destaque { order: -1; }
    .plano-topo { min-height: 0; }
}

@media (max-width: 640px) {
    .secao { padding: 64px 0; }
    .container { padding-left: 16px; padding-right: 16px; }
    .marca img { height: 40px; }
    .rodape-grade { grid-template-columns: minmax(0, 1fr); }
    .plano { padding: 26px 22px; }
    .incluso { padding: 20px; }
    .perguntas summary { font-size: 17px; }
    .chamada .acoes .btn { width: 100%; }
    .barra-cta { display: block; }
    .link-seta { white-space: normal; font-size: 15px; }
    .preco strong { font-size: 52px; }
    .pagina-topo { padding: 48px 0 112px; }
    .pagina-topo p { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn-brilho::after, .plano.destaque::after, .plano.destaque .selo, .pilula-viva .ponto::after, .link-seta-icone { animation: none; }
    .entrada { animation: none; opacity: 1; transform: none; }
    .marcador { animation: none; background-size: 100% 0.1em; }
    .realce { transition: none; background-size: 100% 100%; }
    .revelar { opacity: 1; transform: none; transition: none; }
}

/* Item em realce nos planos ("Toda novidade da plataforma") */
.lista li.realce-item,
.grupo li.realce-item {
    margin: 2px -8px 0;
    padding: 8px 10px;
    border-radius: 12px;
    background: #FFF4CC;
    color: var(--roxo-profundo);
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px rgba(255, 199, 0, .9);
}
.lista li.realce-item::before,
.grupo li.realce-item::before {
    background-color: var(--amarelo);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234B0FA5'%3E%3Cpath d='M12 2l2.6 6.6L21 11l-6.4 2.4L12 20l-2.6-6.6L3 11l6.4-2.4z'/%3E%3C/svg%3E");
    animation: brilhar-realce 2.4s ease-in-out infinite;
}
.grupo li.realce-item .novo { background: var(--roxo-profundo); color: var(--amarelo); }
.plano.destaque .lista li.realce-item, .plano.destaque .grupo li.realce-item { color: var(--roxo-profundo); }
@keyframes brilhar-realce { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.15) rotate(20deg); } }
@media (prefers-reduced-motion: reduce) { .lista li.realce-item::before, .grupo li.realce-item::before { animation: none; } }

/* Promoção sazonal (Mês Black): aplicada pelo initPromo() */
.plano.em-promo::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 27px;
    padding: 3px;
    background: conic-gradient(from var(--giro, 0deg), transparent 0 55%, #111 66%, #FF7A00 82%, #FFB066 88%, transparent 96%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: girar-borda 4s linear infinite;
    pointer-events: none;
}
.plano.em-promo { box-shadow: 0 0 22px rgba(255, 122, 0, .18); }
@media (prefers-reduced-motion: reduce) { .plano.em-promo::before { animation: none; } }
.promo-linha { display: flex; align-items: center; gap: 10px; margin-bottom: -10px; }
.promo-selo {
    font-family: var(--fonte-titulo); font-weight: 800; font-size: 13px; letter-spacing: .02em;
    color: var(--amarelo); background: #14072E; padding: 5px 10px; border-radius: 8px;
}
.promo-linha s { font-size: 16px; font-weight: 600; color: var(--texto-suave); }
.preco .centavos { font-size: .45em; letter-spacing: 0; vertical-align: top; margin-left: 1px; }
.promo-selo { position: relative; cursor: help; }
.promo-selo { animation: pulso-neon 2.2s ease-in-out infinite; }
@keyframes pulso-neon {
    0%, 100% { box-shadow: 0 0 4px rgba(255, 122, 0, .35), 0 0 10px rgba(255, 122, 0, .2); }
    50% { box-shadow: 0 0 8px rgba(255, 140, 20, .9), 0 0 20px rgba(255, 122, 0, .55), 0 0 32px rgba(255, 122, 0, .3); }
}
@media (prefers-reduced-motion: reduce) { .promo-selo { animation: none; box-shadow: 0 0 8px rgba(255, 122, 0, .5); } }
.promo-selo::after {
    content: attr(data-dica);
    position: absolute; left: 0; bottom: calc(100% + 8px);
    width: max-content; max-width: 220px;
    padding: 8px 12px; border-radius: 10px;
    background: #14072E; color: #fff;
    font-family: var(--fonte-texto); font-weight: 500; font-size: 13px; letter-spacing: 0; line-height: 1.4;
    box-shadow: 0 10px 24px rgba(20, 7, 46, .3);
    opacity: 0; transform: translateY(4px); pointer-events: none;
    transition: opacity .2s ease, transform .2s ease; z-index: 5;
}
.promo-selo:hover::after, .promo-selo:focus-visible::after, .promo-selo:focus::after { opacity: 1; transform: none; }
.promo-selo:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }
.plano.destaque .promo-selo { background: var(--amarelo); color: var(--roxo-profundo); }
.plano.destaque .promo-selo::after { background: #fff; color: var(--roxo-profundo); }
.plano.destaque .promo-linha s { color: var(--lilas-suave); }

/* Letras miúdas recortadas, estilo cupom, dentro de uma resposta */
.corte-cupom {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 14px; padding: 12px 14px;
    border: 1.5px dashed #CDBDF3; border-radius: 12px;
    background: var(--lavanda);
    font-size: 12.5px; line-height: 1.5; color: var(--texto-suave);
}
.corte-cupom svg { flex: 0 0 auto; margin-top: 1px; color: var(--roxo); transform: rotate(-90deg); }
.corte-cupom a { color: var(--roxo); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.corte-cupom a:hover { color: var(--roxo-profundo); }

/* ---------- Aviso de cookies (LGPD) ---------- */
.cookies {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 60;
    width: min(380px, calc(100% - 48px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    background: var(--branco);
    border: 1px solid var(--lilas);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(43, 35, 64, .18);
    font-size: 14px;
    line-height: 1.5;
    color: var(--texto);
    animation: cookies-entrar .4s cubic-bezier(.2, .8, .2, 1);
}
.cookies p { margin: 0; }
.cookies a { color: var(--roxo); font-weight: 600; }
.cookies-acoes { display: flex; gap: 8px; justify-content: flex-end; }
.cookies-acoes button {
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
    border: 1.5px solid var(--lilas);
    background: transparent;
    color: var(--roxo-profundo);
}
.cookies-acoes .cookies-aceitar { background: var(--roxo); border-color: var(--roxo); color: var(--branco); }
.cookies-acoes button:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }
.com-cookies .barra-cta { display: none; }
@keyframes cookies-entrar { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 1080px) {
    .cookies { left: 12px; right: 88px; bottom: 16px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .cookies { animation: none; } }