/* ==========================================================================
   Benefin — estilos do site
   Referência: "Frame 1.svg" (Figma, 1080px).

   Proporção: a página é sempre o frame do Figma ocupando a largura da janela.
   - abaixo de 1080px: toda medida é calc(N * var(--s)); --s encolhe com a tela;
   - a partir de 1080px: o layout fica em 1080px (--s = 1px) e o <body> recebe
     --zoom (calculado no <head>): largura ÷ 1080, limitado pela altura para a
     primeira tela mostrar o hero até os botões das lojas. Se a altura limitar,
     as faixas de fundo e o laranja do hero seguem até a borda da tela.
   Fontes usam max(mínimo, N * --s) para não ficarem ilegíveis.
   Abaixo de 600px entra o layout de celular (reorganizado, não só reduzido).
   ========================================================================== */

@font-face {
    font-family: 'Sora';
    src: url('/fonts/sora-latin.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Sora';
    src: url('/fonts/sora-latin-ext.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
    /* escala: 1px do Figma (ver cabeçalho do arquivo) */
    --s: min(1px, 100vw / 1080);

    /* cores */
    --laranja: #FF5B00;
    --laranja-escuro: #D04B00;
    --laranja-hover: #E85200;
    --azul: #10293F;
    --azul-texto: #0C1C2D;
    --cinza-texto: #4C494C;
    --creme: #FCF0E5;
    --creme-icone: #FFDECB;
    --creme-passo: #FFF0E3;
    --branco: #FFFFFF;

    /* tipografia */
    --fonte: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --tracking-titulo: -0.075em;
    --fs-hero: max(29px, calc(42 * var(--s)));
    --fs-titulo: max(25px, calc(40 * var(--s)));
    --fs-sub: max(14.5px, calc(16 * var(--s)));
    --fs-corpo: 16px;

    /* espaços e raios */
    --container: 1080px;
    --gutter: calc(40 * var(--s));
    --secao: calc(104 * var(--s));
    --raio-s: 9px;
    --raio-m: 14px;
    --raio-l: 23px;
    --raio-xl: calc(28 * var(--s));

    --sombra-foco: 0 0 0 3px var(--branco), 0 0 0 6px var(--azul);
    --transicao: 180ms ease;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--fonte);
    font-size: var(--fs-corpo);
    line-height: 1.45;
    color: var(--azul);
    background: var(--creme);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
@media (min-width: 1024px) {
    body { zoom: var(--zoom, 1); min-height: calc(100vh / var(--zoom, 1)); }
}
/* abaixo da seção do app a página é branca (como no Figma); main branco faz o fundo chegar ao rodapé em páginas curtas */
main { flex: 1; background: var(--branco); }
.hero, .secao-beneficios, .secao-app { background: var(--creme); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--sombra-foco); border-radius: 6px; }

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
    position: absolute; left: 16px; top: -60px; z-index: 100;
    padding: 10px 16px; border-radius: var(--raio-s);
    background: var(--azul); color: var(--branco); font-weight: 600;
}
.pular:focus { top: 12px; }
.destaque { color: var(--laranja); }

/* Links sem destino definido (ver LINKS em config.php) */
[data-pendente] { cursor: not-allowed; }

/* ---------- Botões ---------- */
.botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 14px;
    min-height: 43px; padding: 10px 24px;
    border: 2px solid transparent; border-radius: var(--raio-m);
    font-weight: 700; font-size: 14px; line-height: 1.2;
    cursor: pointer;
    transition: background-color var(--transicao), color var(--transicao), border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.botao .icone { width: 25px; height: auto; transition: transform var(--transicao); }
.botao:hover .icone { transform: translateX(4px); }
.botao:active { transform: translateY(1px); }
.botao-primario { background: var(--laranja); color: var(--branco); }
.botao-primario:hover { background: var(--laranja-hover); }
.botao-claro { background: var(--branco); color: var(--laranja); }
.botao-claro:hover { background: var(--creme); }
.botao-contorno { border-color: var(--laranja); color: var(--laranja); font-weight: 600; font-size: 13px; min-height: 40px; padding-inline: 26px; }
.botao-contorno:hover { background: var(--laranja); color: var(--branco); }
.botao-grande {
    min-height: max(44px, calc(52 * var(--s))); padding-inline: max(22px, calc(42 * var(--s)));
    font-size: max(14px, calc(15 * var(--s))); font-weight: 600; border-radius: 13px;
    white-space: nowrap;
}

.link-ver { flex: none; white-space: nowrap; margin-top: calc(26 * var(--s)); color: var(--laranja); font-weight: 700; font-size: max(14px, calc(15 * var(--s))); letter-spacing: -0.03em; padding: 4px 0; border-bottom: 2px solid transparent; transition: border-color var(--transicao); }
.link-ver:hover { border-color: currentColor; }

/* lojas */
.lojas { display: flex; flex-wrap: wrap; gap: max(8px, calc(14 * var(--s))); }
.loja { display: block; border-radius: var(--raio-s); transition: transform var(--transicao), box-shadow var(--transicao); }
.loja img { width: max(120px, calc(148 * var(--s))); height: auto; }
.loja:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgb(16 41 63 / 0.14); }

/* ---------- Cabeçalho ---------- */
/* fixo no topo durante a rolagem; --altura-topo também desconta o header nas âncoras */
:root { --altura-topo: 60px; }
.topo { position: sticky; top: 0; z-index: 20; background: var(--creme); border-bottom: 2px solid var(--laranja); }
section[id] { scroll-margin-top: var(--altura-topo); }
.topo-barra { display: flex; align-items: center; justify-content: space-between; min-height: var(--altura-topo); gap: 24px; padding-inline: calc(52 * var(--s)) calc(47 * var(--s)); }
.topo-logo img { width: 92px; }
.topo-nav { display: flex; align-items: center; flex: 1; gap: 24px; padding-left: calc(41 * var(--s)); }
.topo-nav ul { display: flex; gap: calc(32 * var(--s)); }
.topo-nav ul a {
    display: block; padding: 8px 0;
    font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em;
    border-bottom: 2px solid transparent;
    transition: color var(--transicao), border-color var(--transicao);
}
.topo-nav ul a:hover { color: var(--laranja); }
.topo-nav ul a[aria-current="page"] { color: var(--laranja); border-color: var(--laranja); }
.topo-cta { min-width: 131px; min-height: 36px; padding-block: 7px; margin-left: auto; font-size: 14px; }
.topo-menu-botao { display: none; }

/* ---------- Seções (genérico) ---------- */
.secao { padding-block: var(--secao) 0; }
.secao-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: calc(38 * var(--s)); }
.secao-cabeca-recuada { padding-left: calc(56 * var(--s)); }
.titulo-secao {
    font-size: var(--fs-titulo); font-weight: 800; line-height: 1.08;
    letter-spacing: var(--tracking-titulo); color: var(--azul);
}
.secao-sub { margin-top: calc(10 * var(--s)); font-size: var(--fs-sub); letter-spacing: -0.01em; color: var(--azul); }
.cartao { background: var(--branco); border-radius: var(--raio-xl); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-top: calc(38 * var(--s)); }
/* decoração alinhada ao frame (1080 * --s); o .hero corta o que passar da tela */
.hero-decor {
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: calc(1080 * var(--s)); transform: translateX(-50%);
    pointer-events: none;
}
.hero-elipse {
    position: absolute; left: calc(593 * var(--s)); top: calc(-222 * var(--s));
    width: calc(765 * var(--s)); height: calc(594 * var(--s)); border-radius: 50%;
    background: linear-gradient(200deg, var(--laranja) 15%, rgb(252 240 229 / 0.1) 85%);
    transform: rotate(14.8deg);
}
/* bitmap do Figma (500→1082px) e, quando a tela é mais larga que o frame,
   continuação com as cores da borda direita do bitmap */
.hero-fundo {
    position: absolute; left: calc(500 * var(--s)); top: calc(-8 * var(--s));
    width: calc(1582 * var(--s)); height: calc(582 * var(--s));
    background:
        url('/img/hero-fundo.webp') left top / calc(582 * var(--s)) 100% no-repeat,
        linear-gradient(180deg, #FF8800 0%, #FEC827 25%, #FEA524 50%, #FFB86A 75%, #FFBF00 100%) calc(580 * var(--s)) 0 / 100% 100% no-repeat;
}
/* janelas mais largas que o frame: dissolve a emenda entre o bitmap e o degradê */
.hero-fundo::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: calc(550 * var(--s)); right: 0;
    background: linear-gradient(180deg, #FF8800 0%, #FEC827 25%, #FEA524 50%, #FFB86A 75%, #FFBF00 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(45 * var(--s)));
    mask-image: linear-gradient(90deg, transparent, #000 calc(45 * var(--s)));
}
/* colunas 385 + 640 do frame, em fr para acompanhar a escala */
.hero-grade {
    position: relative; display: grid; grid-template-columns: minmax(0, 385fr) minmax(0, 640fr);
    padding-inline: calc(55 * var(--s)) 0;
}
.hero-texto { position: relative; z-index: 3; padding-bottom: calc(26 * var(--s)); }
.hero-sobretitulo { font-size: max(12px, calc(14 * var(--s))); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.01em; }
.hero-titulo {
    margin-top: calc(12 * var(--s));
    font-size: var(--fs-hero); font-weight: 800; line-height: 1.08;
    letter-spacing: var(--tracking-titulo);
}
.hero-titulo .destaque { display: block; }
.hero-lead { margin-top: calc(14 * var(--s)); max-width: 386px; font-size: max(14px, calc(15.8 * var(--s))); line-height: 1.22; color: var(--cinza-texto); }
.hero-texto .botao-grande { margin-top: calc(32 * var(--s)); min-width: min(100%, calc(274 * var(--s))); }
.hero-texto .lojas { margin-top: calc(20 * var(--s)); }

/* posições do Figma relativas à coluna visual (que começa em x = 440) */
.hero-visual { position: relative; min-height: 100%; }
/* foto em 592px de largura, deslocada 47px para a esquerda (recorte do Figma: 545px);
   na largura exata do frame a borda da tela corta em 420px, como na referência */
.hero-foto {
    position: absolute; left: calc(220 * var(--s)); top: calc(-73 * var(--s));
    width: calc(545 * var(--s)); height: calc(616 * var(--s)); overflow: hidden;
    border-bottom-left-radius: calc(25 * var(--s));
    /* a borda direita da foto fica fora do frame; só aparece (esfumada) em janelas largas */
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.hero-foto img { width: calc(592 * var(--s)); max-width: none; margin-left: calc(-47 * var(--s)); }
.hero-celular {
    position: absolute; left: calc(-63 * var(--s)); top: calc(23 * var(--s)); z-index: 2;
    width: calc(360 * var(--s)); max-width: none;
    filter: drop-shadow(0 4px 2px rgb(0 0 0 / 0.25));
}
.hero-selo {
    position: absolute; left: calc(396 * var(--s)); top: calc(388 * var(--s)); z-index: 2;
    display: flex; align-items: center; gap: calc(14 * var(--s));
    width: max(150px, calc(212 * var(--s))); min-height: calc(80 * var(--s));
    padding: calc(12 * var(--s)) calc(18 * var(--s)) calc(12 * var(--s)) calc(12 * var(--s));
    background: var(--branco); border-radius: calc(24 * var(--s));
    font-size: max(11px, calc(14 * var(--s))); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--azul);
}
.hero-selo-b {
    flex: none; display: grid; place-items: center;
    width: calc(52 * var(--s)); height: calc(50 * var(--s));
    border-radius: calc(11 * var(--s)); background: var(--laranja);
}
.hero-selo-b img { width: calc(28 * var(--s)); }

.diferenciais {
    position: relative; z-index: 4;
    display: grid; grid-template-columns: 222fr 222fr 242fr 218fr; gap: calc(18 * var(--s));
    margin-inline: calc(15 * var(--s)) calc(-2 * var(--s)); padding: calc(10 * var(--s)) calc(13 * var(--s));
    background: var(--branco); border-radius: calc(25 * var(--s));
}
.diferencial {
    display: flex; align-items: center; gap: calc(12 * var(--s));
    min-height: calc(78 * var(--s)); padding: calc(10 * var(--s)) calc(12 * var(--s));
    background: var(--creme); border-radius: calc(16 * var(--s));
    font-size: max(12px, calc(14 * var(--s))); line-height: 1.3;
}
.diferencial strong { display: block; font-weight: 700; letter-spacing: -0.02em; }
.diferencial-icone {
    flex: none; display: grid; place-items: center;
    width: max(34px, calc(51 * var(--s))); height: max(34px, calc(51 * var(--s)));
    border-radius: 50%; background: var(--creme-icone); color: #FF5C00;
}
.diferencial-icone .icone { width: max(19px, calc(26 * var(--s))); height: auto; }

/* ---------- Benefícios ---------- */
.secao-beneficios { padding-top: calc(60 * var(--s)); }
.secao-beneficios .secao-cabeca { padding-inline: calc(8 * var(--s)) calc(48 * var(--s)); }
.beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(12 * var(--s)) calc(16 * var(--s)); margin-inline: calc(-3 * var(--s)); }
.beneficio {
    padding: calc(22 * var(--s)) calc(29 * var(--s)); min-height: calc(206 * var(--s));
    transition: transform var(--transicao), box-shadow var(--transicao);
}
/* monitores grandes: o --zoom da página (até ~1,8×) deixava os cards enormes; aqui a ampliação para em 1,1× */
@media (min-width: 1024px) {
    .beneficios { zoom: calc(min(var(--zoom, 1), 1.1) / var(--zoom, 1)); }
}
.beneficio:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgb(208 75 0 / 0.12); }
.beneficio-icone {
    display: grid; place-items: center;
    width: max(46px, calc(66 * var(--s))); height: max(44px, calc(64 * var(--s)));
    border-radius: max(12px, calc(16 * var(--s))); background: #FF5C01; color: var(--branco);
    box-shadow: 0 3px 0 var(--laranja-escuro);
}
.beneficio-icone .icone { width: max(26px, calc(38 * var(--s))); height: auto; }
.beneficio-nome { margin-top: calc(15 * var(--s)); font-size: max(14.5px, calc(20 * var(--s))); font-weight: 700; line-height: 1.05; letter-spacing: 0.01em; color: var(--azul-texto); }
.beneficio-desc { margin-top: calc(8 * var(--s)); font-size: max(13px, calc(17 * var(--s))); line-height: 1.3; color: var(--azul-texto); }

/* ---------- App ---------- */
.secao-app { padding-top: calc(38 * var(--s)); padding-bottom: calc(23 * var(--s)); }
.app-cartao {
    position: relative; display: grid; grid-template-columns: 1fr 1fr;
    min-height: calc(417 * var(--s)); margin-inline: calc(4 * var(--s)) calc(-8 * var(--s));
    border-radius: calc(27 * var(--s));
    background: linear-gradient(135deg, #FDECD5 45%, #FDCC97 80%);
}
.app-texto { position: relative; z-index: 2; padding: calc(43 * var(--s)) 0 calc(38 * var(--s)) calc(49 * var(--s)); }
.app-texto .titulo-secao { max-width: calc(440 * var(--s)); }
.app-lead { margin-top: calc(18 * var(--s)); max-width: max(280px, calc(390 * var(--s))); font-size: var(--fs-sub); line-height: 1.33; }
.lista-confere { display: grid; gap: calc(12 * var(--s)); margin-top: calc(18 * var(--s)); }
.lista-confere li { display: flex; align-items: center; gap: 12px; font-size: max(14px, calc(17 * var(--s))); font-weight: 600; letter-spacing: -0.01em; color: var(--azul-texto); }
.lista-confere .icone { flex: none; width: max(16px, calc(19 * var(--s))); height: auto; color: var(--laranja); }
.app-texto .lojas { margin-top: calc(26 * var(--s)); }
.app-visual { position: relative; border-radius: 0 calc(27 * var(--s)) calc(27 * var(--s)) 0; }
.app-ondas {
    position: absolute; right: 0; bottom: 0;
    width: calc(590 * var(--s)); height: calc(417 * var(--s)); max-width: none;
    border-radius: 0 calc(27 * var(--s)) calc(27 * var(--s)) 0;
}
.app-homem { position: absolute; left: calc(48 * var(--s)); bottom: 0; width: calc(338 * var(--s)); max-width: none; }

/* ---------- Fundo branco do restante da página ---------- */
.secao-passos, .secao-planos, .secao-depoimentos, .secao-representante, .secao-faq, .secao-cta { background: var(--branco); }
.secao-passos { padding-top: calc(64 * var(--s)); }

/* ---------- Como funciona ---------- */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(90 * var(--s)); padding-left: calc(20 * var(--s)); }
.passo { position: relative; }
.passo-marca { display: flex; align-items: flex-start; gap: calc(16 * var(--s)); }
.passo-numero {
    flex: none; display: grid; place-items: center;
    width: max(26px, calc(33 * var(--s))); height: max(26px, calc(33 * var(--s))); margin-top: calc(3 * var(--s));
    border-radius: 50%; background: #FF6500; color: var(--branco);
    font-size: max(12px, calc(15 * var(--s))); font-weight: 700;
}
.passo-icone {
    flex: none; display: grid; place-items: center;
    width: max(56px, calc(79 * var(--s))); height: max(56px, calc(79 * var(--s)));
    border-radius: 50%; background: var(--creme-passo); color: #FF6500;
}
.passo-icone .icone { width: max(32px, calc(46 * var(--s))); height: auto; stroke-width: 2.1; }
.passo-icone .icone-celular { width: max(24px, calc(34 * var(--s))); stroke-width: 4; }
.passo-nome { margin-top: calc(14 * var(--s)); padding-left: max(46px, calc(63 * var(--s))); font-size: max(14.5px, calc(17 * var(--s))); font-weight: 700; letter-spacing: -0.02em; color: var(--azul); }
.passo-desc { margin-top: calc(6 * var(--s)); padding-left: max(46px, calc(63 * var(--s))); font-size: max(13px, calc(14 * var(--s))); line-height: 1.3; letter-spacing: -0.02em; color: var(--azul); }
.passo-seta { position: absolute; left: calc(169 * var(--s)); top: calc(8 * var(--s)); width: calc(137 * var(--s)); color: #FF6500; }

/* ---------- Planos ---------- */
.secao-planos { --fs-titulo: max(24px, calc(36 * var(--s))); }
.planos-faixa {
    display: grid; grid-template-columns: 1fr max(250px, calc(306 * var(--s))); align-items: center; gap: calc(32 * var(--s));
    min-height: calc(273 * var(--s));
    padding: calc(16 * var(--s)) calc(103 * var(--s)) calc(16 * var(--s)) calc(40 * var(--s));
    margin-inline: calc(1 * var(--s)) calc(-1 * var(--s));
    border-radius: calc(21 * var(--s));
    background: linear-gradient(95deg, #FF5A09 0%, #FE7506 64%, #FD5D01 100%);
}
.planos-texto { align-self: start; color: var(--branco); padding-top: calc(8 * var(--s)); }
.planos-texto .titulo-secao { color: var(--branco); max-width: max(220px, calc(350 * var(--s))); line-height: 1.12; }
.planos-lead { margin-top: calc(14 * var(--s)); max-width: calc(470 * var(--s)); font-size: max(14px, calc(17 * var(--s))); line-height: 1.33; }
.planos-texto .botao-claro {
    margin-top: calc(28 * var(--s)); min-width: max(150px, calc(188 * var(--s))); min-height: max(44px, calc(55 * var(--s)));
    padding-inline: max(20px, calc(42 * var(--s))) 24px;
    border-radius: calc(16 * var(--s)); font-size: max(14px, calc(17 * var(--s))); font-weight: 700; justify-content: flex-start;
}
.plano { padding: calc(14 * var(--s)) max(18px, calc(30 * var(--s))) calc(18 * var(--s)); background: var(--branco); border-radius: max(14px, calc(20 * var(--s))); }
.plano-nome { font-size: max(12.5px, calc(13.5 * var(--s))); font-weight: 600; color: var(--azul); }
.plano-preco { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; color: var(--azul); }
.plano-moeda { font-size: max(16px, calc(19 * var(--s))); font-weight: 700; }
.plano-preco strong { font-size: max(25px, calc(30 * var(--s))); font-weight: 700; letter-spacing: -0.01em; }
.plano-periodo { margin-left: 8px; font-size: max(12px, calc(13 * var(--s))); font-weight: 600; }
.lista-confere-compacta { gap: calc(4 * var(--s)); margin-top: calc(6 * var(--s)); }
.lista-confere-compacta li { gap: 10px; font-size: max(12.5px, calc(13 * var(--s))); }
.lista-confere-compacta .icone { width: max(15px, calc(17 * var(--s))); }
.plano-botao {
    width: 100%; margin-top: calc(14 * var(--s)); min-height: max(40px, calc(42 * var(--s)));
    border-radius: 13px; font-size: max(13px, calc(13.5 * var(--s))); font-weight: 600; gap: 26px;
}

/* ---------- Depoimentos ---------- */
.secao-depoimentos { --fs-titulo: max(24px, calc(36 * var(--s))); }
.secao-depoimentos .secao-cabeca { margin-bottom: calc(30 * var(--s)); }
.depoimentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16 * var(--s)); }
.depoimento {
    display: flex; align-items: flex-start; gap: calc(18 * var(--s));
    padding: calc(18 * var(--s)) calc(16 * var(--s)) calc(18 * var(--s)) calc(18 * var(--s));
    border-radius: var(--raio-l); background: var(--branco);
}
.depoimento-foto { flex: none; width: max(56px, calc(80 * var(--s))); height: max(56px, calc(80 * var(--s))); border-radius: 50%; object-fit: cover; background: #D9D9D9; }
.depoimento blockquote { max-width: max(180px, calc(180 * var(--s))); font-size: 13.5px; line-height: 1.33; letter-spacing: -0.03em; color: var(--azul); }
.depoimento figcaption { margin-top: calc(16 * var(--s)); }
.depoimento-nome { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.04em; }
.estrelas { display: flex; gap: 4px; margin-top: 6px; color: var(--laranja); }
.estrelas .icone { width: 15px; height: 15px; }

/* ---------- Representante ---------- */
.secao-representante { --fs-titulo: max(24px, calc(36 * var(--s))); }
.representante-faixa {
    display: grid; grid-template-columns: 1fr max(280px, calc(420 * var(--s))); align-items: center; gap: calc(40 * var(--s));
    padding: calc(44 * var(--s)) calc(40 * var(--s)) calc(44 * var(--s)) calc(50 * var(--s));
    border-radius: var(--raio-xl); background: var(--creme);
}
.representante-texto .titulo-secao { max-width: max(240px, calc(420 * var(--s))); }
.representante-lead { margin-top: calc(14 * var(--s)); max-width: max(280px, calc(440 * var(--s))); font-size: var(--fs-sub); line-height: 1.33; }
.representante-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: calc(28 * var(--s)); }
.representante-vantagens { display: grid; gap: calc(12 * var(--s)); }
.representante-vantagem { display: flex; align-items: center; gap: calc(18 * var(--s)); padding: calc(16 * var(--s)) calc(22 * var(--s)); }
.representante-vantagem .beneficio-icone { flex: none; width: max(42px, calc(54 * var(--s))); height: max(40px, calc(52 * var(--s))); }
.representante-vantagem .beneficio-icone .icone { width: max(22px, calc(28 * var(--s))); }
.representante-vantagem-nome { font-size: max(14.5px, calc(18 * var(--s))); font-weight: 700; line-height: 1.15; color: var(--azul-texto); }
.representante-vantagem-desc { margin-top: 2px; font-size: max(12.5px, calc(14.5 * var(--s))); line-height: 1.3; color: var(--azul-texto); }

/* ---------- FAQ ---------- */
.secao-faq { --fs-titulo: max(24px, calc(34 * var(--s))); }
.secao-faq .secao-cabeca { padding-left: calc(15 * var(--s)); padding-right: calc(7 * var(--s)); margin-bottom: calc(18 * var(--s)); }
.secao-faq .secao-cabeca .botao-contorno { margin-top: 2px; }
.secao-faq .secao-sub { margin-top: 4px; font-size: max(14px, calc(15 * var(--s))); }
/* a referência lê por coluna: 3 perguntas à esquerda, 3 à direita.
   Cada coluna empilha sozinha, então abrir uma resposta não desalinha a outra. */
.faq {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: calc(47 * var(--s)); align-items: start;
    padding-inline: calc(9 * var(--s)) calc(4 * var(--s));
}
.faq-coluna { display: flex; flex-direction: column; gap: calc(11 * var(--s)); }
.faq-item { background: var(--creme); border-radius: var(--raio-s); }
.faq-pergunta { font-size: max(14px, calc(15 * var(--s))); font-weight: 600; letter-spacing: -0.01em; }
.faq-pergunta button {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; min-height: 41px; padding: 8px 20px 8px 14px;
    border: 0; border-radius: var(--raio-s); background: none; text-align: left;
    font-weight: inherit; letter-spacing: inherit; cursor: pointer;
    transition: color var(--transicao);
}
.faq-pergunta button:hover { color: var(--laranja); }
.faq-mais { flex: none; width: 14px; height: 15px; transition: transform var(--transicao); }
.faq-pergunta button[aria-expanded="true"] .faq-mais { transform: rotate(45deg); }
.faq-resposta { padding: 0 20px 14px 14px; font-size: 14px; line-height: 1.45; color: var(--cinza-texto); }
.faq-resposta[hidden] { display: none; }
.pendente { padding: 8px 10px; border: 1px dashed var(--laranja); border-radius: 6px; color: var(--laranja-escuro); font-style: italic; }

/* ---------- CTA final ---------- */
.secao-cta { padding-top: calc(48 * var(--s)); }
.cta-faixa {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: calc(54 * var(--s));
    min-height: calc(154 * var(--s));
    padding: calc(22 * var(--s)) calc(32 * var(--s)) calc(22 * var(--s)) calc(50 * var(--s));
    margin-inline: calc(-12 * var(--s)) calc(-15 * var(--s));
    border-radius: calc(25 * var(--s)); background: var(--azul); color: var(--branco);
}
.cta-titulo { font-size: max(22px, calc(31 * var(--s))); font-weight: 800; line-height: 1.12; letter-spacing: -0.05em; max-width: 360px; }
.cta-texto p { margin-top: calc(14 * var(--s)); font-size: max(13px, calc(14.8 * var(--s))); }
.cta-simbolo {
    display: grid; place-items: center;
    width: max(60px, calc(96 * var(--s))); height: max(60px, calc(96 * var(--s)));
    border-radius: calc(21 * var(--s)); background: var(--laranja);
}
.cta-simbolo img { width: 55%; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--branco); }
.rodape-barra { display: flex; align-items: center; gap: 24px; min-height: 75px; padding-block: 12px; padding-inline: calc(52 * var(--s)) calc(130 * var(--s)); }
.rodape-logo img { width: 113px; }
.rodape nav { margin-left: auto; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.rodape-links a { font-size: 13px; font-weight: 600; letter-spacing: -0.03em; transition: color var(--transicao); }
.rodape-links a:hover { color: var(--laranja); }
.rodape-redes { display: flex; gap: 4px; margin-left: calc(90 * var(--s)); }
.rodape-redes a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--azul); transition: color var(--transicao); }
.rodape-redes a:hover { color: var(--laranja); }
.rodape-redes .icone { width: 20px; height: 20px; }

/* ---------- Páginas internas ---------- */
.pagina-interna .secao:first-of-type { padding-top: calc(64 * var(--s)); }
.pagina-interna .secao-cta { padding-bottom: 0; }
.pagina-interna main > .secao:last-child { padding-bottom: 8px; }
.pagina-interna .secao-planos:first-child { padding-bottom: 40px; }
.pagina-interna .secao-depoimentos:first-child,
.pagina-interna .secao-faq:first-child { padding-bottom: 40px; }

/* ==========================================================================
   Menu recolhível (até 1023px). O resto do layout segue a escala --s.
   ========================================================================== */
@media (max-width: 1023px) {
    :root { --altura-topo: 56px; }
    .topo-barra { padding-inline: max(16px, var(--gutter)); }
    .topo-menu-botao {
        display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto;
        border: 0; border-radius: 12px; background: var(--laranja); cursor: pointer;
    }
    .topo-menu-icone, .topo-menu-icone::before, .topo-menu-icone::after {
        display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--branco);
        transition: transform var(--transicao), opacity var(--transicao);
    }
    /* --menu-passo: distância entre as barras (o celular usa barras mais grossas) */
    .topo-menu-icone { position: relative; --menu-passo: 6px; }
    .topo-menu-icone::before, .topo-menu-icone::after { content: ''; position: absolute; left: 0; }
    .topo-menu-icone::before { top: calc(-1 * var(--menu-passo)); }
    .topo-menu-icone::after { top: var(--menu-passo); }
    .topo-menu-botao[aria-expanded="true"] .topo-menu-icone { background: transparent; }
    .topo-menu-botao[aria-expanded="true"] .topo-menu-icone::before { transform: translateY(var(--menu-passo)) rotate(45deg); }
    .topo-menu-botao[aria-expanded="true"] .topo-menu-icone::after { transform: translateY(calc(-1 * var(--menu-passo))) rotate(-45deg); }
    .topo-nav {
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 16px;
        padding: 12px max(16px, var(--gutter)) 24px;
        background: var(--creme); border-bottom: 2px solid var(--laranja);
        box-shadow: 0 16px 24px rgb(16 41 63 / 0.08);
    }
    .js .topo-nav:not(.aberto) { display: none; }
    .topo-nav ul { flex-direction: column; gap: 0; }
    .topo-nav ul a { padding: 12px 0; font-size: 16px; border-bottom: 1px solid rgb(16 41 63 / 0.08); }
    .topo-nav ul a[aria-current="page"] { border-bottom-color: var(--laranja); }
    .topo-cta { min-height: 48px; margin-left: 0; font-size: 15px; }
}

/* Tablet (600–1023px): mesma composição do Figma em escala; só ajustes de leitura */
@media (min-width: 600px) and (max-width: 1023px) {
    /* depoimento: foto acima do texto para a citação não ficar espremida */
    .depoimento { flex-direction: column; gap: 12px; padding-inline: 0; }
    .depoimento blockquote { max-width: none; }
    .cta-faixa { gap: calc(32 * var(--s)); }
}
/* tablet pequeno em pé: 4 diferenciais lado a lado ficariam espremidos */
@media (min-width: 600px) and (max-width: 767px) {
    .diferenciais { grid-template-columns: 1fr 1fr; }
    .cta-simbolo { display: none; }
    /* coluna de texto do hero estreita: botão sem seta e lojas menores, numa linha só */
    .hero-texto .botao-grande { padding-inline: 18px; }
    .hero-texto .botao-grande .icone { display: none; }
    .hero-texto .loja img { width: 104px; }
    .hero-texto .lojas { gap: 8px; }
    .cta-faixa { grid-template-columns: 1fr auto; }
    /* representante: duas colunas espremeriam o botão; vantagens descem */
    .representante-faixa { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Celular (até 599px): layout reorganizado e compacto
   ========================================================================== */
@media (max-width: 599px) {
    :root {
        --gutter: 16px;
        --secao: 64px;
        --fs-hero: clamp(30px, 8.4vw, 36px);
        --fs-titulo: clamp(22px, 6vw, 26px);
        --fs-sub: 13.5px;
        --raio-xl: 18px;
    }
    .secao-planos, .secao-depoimentos, .secao-faq { --fs-titulo: clamp(21px, 5.6vw, 25px); }

    /* ----- Cabeçalho e hero: referência "Frame 2 - Referencia Responsividade Mobile.svg" -----
       O frame tem 527px de largura; --m é 1px dele, então a tela inteira é a referência
       em escala (como --s faz com o frame de 1080px no desktop). Medidas = coordenadas do SVG. */
    :root { --m: calc(100vw / 527); --altura-topo: max(56px, calc(85 * var(--m))); --fs-hero: max(28px, calc(46 * var(--m))); }
    .topo-barra { padding-inline: calc(24 * var(--m)) calc(26 * var(--m)); }
    .topo-logo img { width: calc(153 * var(--m)); }
    .topo-menu-botao {
        width: max(40px, calc(47 * var(--m))); height: max(40px, calc(47 * var(--m)));
        border: 1px solid #FFA674; border-radius: calc(12.5 * var(--m));
    }
    .topo-menu-icone, .topo-menu-icone::before, .topo-menu-icone::after {
        width: calc(32 * var(--m)); height: max(3px, calc(6 * var(--m)));
    }
    .topo-menu-icone { --menu-passo: calc(10.5 * var(--m)); }

    /* texto e botões em cima; embaixo a família sobre o fundo laranja, sem o celular */
    .hero { padding-top: calc(24 * var(--m)); --alem-da-dobra: 40px; }
    .hero-decor { display: none; }
    /* o frame é mais alto que a tela do celular: o hero vai só até um pouco além da
       primeira tela (--alem-da-dobra), para o selo aparecer inteiro ao abrir o site.
       Telas mais altas que o frame ficam com a altura da referência. */
    .hero-grade {
        grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding-inline: calc(26 * var(--m));
        min-height: min(calc(1077 * var(--m)), calc(100vh - var(--altura-topo) - 2px - 24 * var(--m) + var(--alem-da-dobra)));
        min-height: min(calc(1077 * var(--m)), calc(100svh - var(--altura-topo) - 2px - 24 * var(--m) + var(--alem-da-dobra)));
    }
    .hero-texto { position: relative; z-index: 3; padding-bottom: 0; }
    .hero-sobretitulo { font-size: max(11px, calc(14 * var(--m))); line-height: 1.25; }
    .hero-titulo { max-width: 8.2em; margin-top: calc(6 * var(--m)); line-height: 1.07; }
    .hero-lead { max-width: calc(392 * var(--m)); margin-top: calc(14 * var(--m)); font-size: max(12.5px, calc(16.3 * var(--m))); line-height: 1.18; }
    .hero-texto .botao-grande {
        width: 100%; min-height: calc(72 * var(--m)); margin-top: calc(24 * var(--m));
        justify-content: space-between; padding: 8px calc(41 * var(--m)) 8px calc(47 * var(--m));
        border-radius: calc(13 * var(--m)); font-size: max(15px, calc(24 * var(--m)));
    }
    .hero-texto .botao-grande .icone { width: calc(42 * var(--m)); }
    .hero-texto .lojas { gap: calc(16 * var(--m)); margin-top: calc(21 * var(--m)); }
    .hero-texto .loja { border-radius: calc(9 * var(--m)); }
    .hero-texto .loja img { width: calc(176 * var(--m)); }
    .loja img { width: 124px; }

    /* faixa de borda a borda que começa em y = 469 (atrás do botão) e ocupa o resto do hero */
    .hero-visual {
        height: auto; min-height: calc(250 * var(--m)); overflow: hidden;
        margin: calc(-132 * var(--m)) calc(-26 * var(--m)) 0;
    }
    /* fundo laranja: o mesmo bitmap do desktop, girado 90° como no frame */
    .hero-visual::before {
        content: ''; position: absolute; left: calc(-25 * var(--m)); top: 0;
        width: calc(611 * var(--m)); height: calc(611 * var(--m));
        background: url('/img/hero-fundo.webp') center / 100% 100% no-repeat;
        transform: rotate(90deg);
    }
    /* família: o mesmo recorte do desktop (592px deslocada 47px, caixa de 545 × 616) */
    /* a caixa vai até o fim do hero; a foto, presa no topo, é cortada embaixo */
    .hero-foto {
        left: calc(-3 * var(--m)); top: calc(101 * var(--m)); bottom: 0;
        width: calc(545 * var(--m)); height: auto; border-radius: 0;
        -webkit-mask-image: none; mask-image: none;
    }
    .hero-foto img { width: calc(592 * var(--m)); margin-left: calc(-47 * var(--m)); }
    .hero-celular { display: none; }
    .hero-selo {
        /* fica 16px acima da borda da tela, qualquer que seja a altura dela */
        left: auto; right: calc(26 * var(--m)); top: auto; bottom: calc(var(--alem-da-dobra) + 16px);
        width: calc(212 * var(--m)); min-height: calc(80 * var(--m)); gap: calc(10 * var(--m));
        padding: calc(12 * var(--m)) calc(26 * var(--m)) calc(12 * var(--m)) calc(12 * var(--m));
        border-radius: calc(24 * var(--m)); font-size: max(10.5px, calc(15.5 * var(--m)));
    }
    .hero-selo-b { width: calc(52 * var(--m)); height: calc(50 * var(--m)); border-radius: calc(11 * var(--m)); }
    .hero-selo-b img { width: calc(28 * var(--m)); }

    .diferenciais { grid-template-columns: 1fr 1fr; gap: 8px; margin: 24px 0 0; padding: 8px; border-radius: 18px; }
    .diferencial { gap: 8px; min-height: 58px; padding: 8px; border-radius: 12px; font-size: 12px; }
    .diferencial-icone { width: 32px; height: 32px; }
    .diferencial-icone .icone { width: 18px; }

    /* cabeçalhos de seção empilhados */
    .secao-cabeca, .secao-beneficios .secao-cabeca, .secao-faq .secao-cabeca { flex-direction: column; gap: 10px; margin-bottom: 20px; padding-inline: 0; }
    .secao-cabeca-recuada { padding-left: 0; }
    .link-ver { margin-top: 0; }
    .quebra { display: none; }

    /* benefícios em 2 colunas compactas */
    .secao-beneficios { padding-top: 40px; }
    .beneficios { grid-template-columns: 1fr 1fr; gap: 10px; margin-inline: 0; }
    .beneficio { min-height: 0; padding: 14px; }
    .beneficio-icone { width: 42px; height: 40px; border-radius: 11px; box-shadow: 0 2px 0 var(--laranja-escuro); }
    .beneficio-icone .icone { width: 24px; }
    .beneficio-nome { margin-top: 12px; font-size: 14px; line-height: 1.2; letter-spacing: 0; }
    .beneficio-desc { margin-top: 4px; font-size: 12.5px; line-height: 1.35; }

    /* app: texto e, abaixo, o homem com as ondas */
    .secao-app { padding-top: 28px; padding-bottom: 0; }
    .app-cartao { grid-template-columns: 1fr; margin-inline: 0; border-radius: 22px; overflow: hidden; }
    .app-texto { padding: 28px 20px 0; }
    .app-texto .titulo-secao { max-width: none; }
    .app-lead { max-width: none; margin-top: 10px; }
    .lista-confere { gap: 8px; margin-top: 14px; }
    .lista-confere li { font-size: 14px; }
    .app-texto .lojas { margin-top: 18px; }
    .app-visual { height: 280px; margin-top: 12px; border-radius: 0; }
    .app-ondas { left: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: 0; }
    .app-homem { left: 50%; width: 200px; transform: translateX(-50%); }

    /* passos em linhas */
    .secao-passos { padding-top: 40px; }
    .passos { grid-template-columns: 1fr; gap: 16px; padding-left: 0; }
    .passo { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
    .passo-marca { grid-row: 1 / span 2; gap: 8px; }
    .passo-numero { width: 24px; height: 24px; margin-top: 0; font-size: 12px; }
    .passo-icone { width: 52px; height: 52px; }
    .passo-icone .icone { width: 28px; }
    .passo-icone .icone-celular { width: 20px; }
    .passo-nome, .passo-desc { padding-left: 0; margin-top: 0; }
    .passo-nome { align-self: end; font-size: 15px; }
    .passo-desc { align-self: start; margin-top: 2px; }
    .passo-seta { display: none; }

    /* planos: texto e cartão empilhados */
    .secao-planos { padding-top: 36px; }
    .planos-faixa { grid-template-columns: 1fr; gap: 20px; padding: 26px 16px 16px; margin-inline: 0; border-radius: 20px; }
    .planos-texto { padding-top: 0; }
    .planos-texto .titulo-secao, .planos-lead { max-width: none; }
    .planos-texto .botao-claro { width: 100%; margin-top: 18px; justify-content: center; padding-inline: 20px; }

    /* depoimentos em lista compacta */
    .secao-depoimentos { padding-top: 40px; }
    .secao-depoimentos .secao-cabeca { margin-bottom: 12px; }
    .depoimentos { grid-template-columns: 1fr; gap: 0; }
    .depoimento { gap: 14px; padding: 14px 0; border-radius: 0; border-bottom: 1px solid rgb(16 41 63 / 0.08); }
    .depoimento:last-child { border-bottom: 0; }
    .depoimento-foto { width: 52px; height: 52px; }
    .depoimento blockquote { max-width: none; font-size: 14px; }
    .depoimento figcaption { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .estrelas { margin-top: 0; }
    .estrelas .icone { width: 13px; height: 13px; }

    /* representante: texto e botões em cima, vantagens embaixo */
    .representante-faixa { grid-template-columns: 1fr; gap: 20px; padding: 24px 16px 16px; border-radius: 22px; }
    .representante-texto { padding-inline: 4px; }
    .representante-texto .titulo-secao, .representante-lead { max-width: none; }
    .representante-lead { margin-top: 10px; }
    .representante-botoes { margin-top: 18px; }
    .representante-botoes .botao { width: 100%; }
    .representante-vantagens { gap: 8px; }
    .representante-vantagem { gap: 12px; padding: 12px 14px; border-radius: 14px; }

    /* FAQ em coluna única, na ordem da referência */
    .secao-faq { padding-top: 36px; }
    .faq, .faq-coluna { grid-template-columns: 1fr; gap: 8px; padding-inline: 0; }
    .faq-pergunta button { min-height: 48px; padding-block: 10px; }

    .secao-cta { padding-top: 40px; }
    .cta-faixa { grid-template-columns: 1fr; gap: 16px; padding: 24px 18px; margin-inline: 0; border-radius: 20px; }
    .cta-titulo { font-size: 24px; }
    .cta-texto p { margin-top: 8px; }
    .cta-simbolo { display: none; }

    /* rodapé centralizado: logo, links em 2 × 2 e redes, um bloco embaixo do outro */
    .rodape-barra { flex-direction: column; gap: 18px; padding: 28px var(--gutter) 24px; text-align: center; }
    .rodape nav { width: 100%; margin-left: 0; padding-block: 16px; border-block: 1px solid rgb(16 41 63 / 0.08); }
    .rodape-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
    .rodape-links a { display: block; padding-block: 4px; }
    .rodape-links li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .rodape-redes { margin-left: 0; gap: 12px; }

    .pagina-interna .secao:first-of-type { padding-top: 32px; }
}
/* celulares bem estreitos (320–359px): diferenciais em uma coluna */
@media (max-width: 359px) {
    .diferenciais { grid-template-columns: 1fr; }
    .diferencial { min-height: 46px; }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    .beneficio:hover, .loja:hover, .botao:active { transform: none; }
    .botao:hover .icone { transform: none; }
}