/* Site público do Hubmark. Mesma identidade do painel (admin/assets/css/admin.css):
   fundo escuro #211c1c com brilho verde e azul, Urbanist Bold nos títulos, Inter no corpo.
   Mobile first; pontos de quebra: 48em, 52em (âncoras do topo) e 64em.
   Contrastes calculados pela fórmula WCAG. */

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-var.woff2") format("woff2");
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Urbanist";
    src: url("../fonts/urbanist-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0100-024F, U+0259, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Marca. Verde e azul puros só em fundo escuro ou decoração; no claro, as versões escuras. */
    --cor-verde: #51ae46;          /* 6,0:1 sobre --cor-fundo; 5,2:1 sobre --cor-superficie; 3,3:1 sobre o ponto mais claro do brilho (só decoração ali) */
    --cor-verde-hover: #62b957;    /* fundo do botão no hover: --cor-fundo por cima 6,9:1 */
    --cor-azul: #2aadd4;           /* 6,4:1 sobre --cor-fundo; 5,5:1 sobre --cor-superficie */
    --cor-verde-escuro: #2d7a2a;   /* 5,3:1 sobre branco; 4,7:1 sobre --cor-marca-suave; branco por cima 5,3:1 */
    --cor-azul-escuro: #0d6f99;    /* 5,6:1 sobre branco; 5,0:1 sobre --cor-marca-suave */
    --gradiente-marca: linear-gradient(135deg, var(--cor-verde), var(--cor-azul));

    /* Escuro */
    --cor-fundo: #211c1c;          /* 16,8:1 com o texto branco */
    --cor-superficie: #2e2828;     /* cartões sobre o fundo; branco 14,5:1, --cor-texto-2 8,9:1 */
    --cor-texto: #ffffff;
    --cor-texto-2: #cfc9c9;        /* 10,3:1 sobre --cor-fundo; 5,7:1 sobre o ponto mais claro do brilho verde */
    --cor-linha: rgba(255, 255, 255, .16);        /* só decorativa */
    --cor-contorno: rgba(255, 255, 255, .55);     /* contorno do botão secundário: 5,6:1 sobre --cor-fundo (WCAG 1.4.11) */
    --cor-foco: #2aadd4;           /* anel de foco no escuro: 6,4:1 sobre --cor-fundo */

    /* Claro */
    --cor-papel: #ffffff;
    --cor-marca-suave: #e8f5e6;    /* --cor-fundo por cima 14,9:1 */
    --cor-texto-claro: #211c1c;    /* 16,8:1 sobre branco */
    --cor-texto-claro-2: #5b5c60;  /* 6,7:1 sobre branco; 5,9:1 sobre --cor-marca-suave */
    --cor-linha-clara: #dcdfe4;    /* só decorativa */
    --cor-foco-claro: #0d6f99;     /* anel de foco no claro: 5,6:1 sobre branco */

    /* Brilho do fundo de entrada do painel, mais fraco para o texto correr por cima:
       no ponto mais claro (verde a 34%, #314e2a) o branco dá 9,3:1 e o --cor-texto-2 5,7:1;
       no do azul (30%, #244853) 9,9:1 e 6,0:1. */
    --brilho-verde: rgba(81, 174, 70, .34);
    --brilho-azul: rgba(42, 173, 212, .30);
    --fundo-brilho:
        radial-gradient(110% 80% at 0% 0%, var(--brilho-verde), transparent 70%),
        radial-gradient(110% 80% at 100% 100%, var(--brilho-azul), transparent 70%);

    --radius: 16px;
    --radius-pilula: 999px;
    --max-w: 72rem;
    --gutter: 1rem;
    --alvo-toque: 44px;
    --fonte-titulo: "Urbanist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 5rem;
}

body {
    font-family: var(--fonte);
    font-size: 1.0625rem;
    line-height: 1.6;
    background: var(--cor-fundo);
    color: var(--cor-texto);
    overflow-wrap: break-word;   /* só parte a palavra que sozinha não cabe na linha (títulos a 320px com texto a 200%) */
}

ul, ol { list-style: none; }
a { color: inherit; }
svg { display: block; }
/* Sprite de símbolos: fora do fluxo (o display acima venceria o [hidden]). */
svg[hidden] { display: none; }
img { max-width: 100%; height: auto; }

/* Partes do navegador que também carregam a marca */
::selection { background: var(--cor-verde); color: var(--cor-fundo); }   /* 6,0:1 */
:root { caret-color: var(--cor-verde); accent-color: var(--cor-verde); }

:focus-visible {
    outline: 3px solid var(--cor-foco);
    outline-offset: 3px;
}
.secao--clara :focus-visible { outline-color: var(--cor-foco-claro); }

.so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.so-largo { display: none; }

.pular {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 2000;
    padding: .75rem 1rem;
    background: var(--cor-papel);
    color: var(--cor-texto-claro);
    border-radius: 8px;
}
.pular:focus { top: 1rem; }

.contem {
    max-width: var(--max-w);
    margin: 0 auto;
}

/* Topo */
.topo {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: .625rem var(--gutter);
    background: var(--cor-fundo);
    border-bottom: 1px solid var(--cor-linha);
}
.topo__conteudo {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;   /* sem espaço ao lado da marca (320px, texto a 200%), "Entrar" e "Testar" descem */
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
}
.topo__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
}
.topo__ancoras { display: none; }
.topo__entrar,
.topo__ancoras a {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque);
    padding: 0 .5rem;
    font-weight: 600;
    text-decoration: none;
}
.topo__entrar:hover,
.topo__ancoras a:hover { text-decoration: underline; text-underline-offset: 4px; }

.marca {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--alvo-toque);
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.375rem;
    letter-spacing: -.01em;
    text-decoration: none;
}
.marca__icone {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 4px;
    border-radius: 8px;
    background: var(--cor-fundo);
    box-shadow: 0 0 0 1px var(--cor-linha);
}
.marca__icone svg,
.marca__icone img { width: 100%; height: 100%; }
/* Celular muito estreito: o ícone fica e o nome sai da vista (continua para o leitor de tela). */
.marca:not(.marca--rodape) { font-size: 0; }

/* Botões: verde com texto escuro (6,0:1), como o primário do painel */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: .75rem 1.75rem;
    border: 0;
    border-radius: var(--radius-pilula);
    background: var(--cor-verde);
    color: var(--cor-fundo);
    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    transition: background-color .25s ease, transform .35s var(--ease);
}
.botao:hover { background: var(--cor-verde-hover); transform: translateY(-2px); }
.botao:active { transform: translateY(0); }
.botao--pequeno {
    min-height: var(--alvo-toque);
    padding: .5rem 1rem;
    font-size: .9375rem;
    box-shadow: none;
}
.botao--contorno {
    background: transparent;
    color: var(--cor-texto);
    box-shadow: inset 0 0 0 2px var(--cor-contorno);
}
.botao--contorno:hover { background: rgba(255, 255, 255, .1); }

/* Títulos */
.titulo {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    text-wrap: balance;
    margin-bottom: 1rem;
}
.titulo--hero {
    font-size: clamp(2.25rem, 1.5rem + 3.4vw, 3.5rem);
    line-height: 1.06;
    margin-bottom: 1.25rem;
}
h3 {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.2;
    letter-spacing: -.01em;
}
.texto-2 { color: var(--cor-texto-2); max-width: 40rem; }
.secao--clara .texto-2 { color: var(--cor-texto-claro-2); }

/* Seções */
.secao {
    padding: 4rem var(--gutter);
}
.secao--clara {
    background: var(--cor-papel);
    color: var(--cor-texto-claro);
}

/* Hero */
.hero {
    padding: 3rem var(--gutter) 4rem;
    background-color: var(--cor-fundo);
    background-image: var(--fundo-brilho);
}
/* No celular as grades das seções têm uma coluna só, que não cresce com o conteúdo (palavra longa com texto a 200%
   alargava a página); as de duas colunas, nas media queries do fim, trocam esta. */
.hero__grade, .fluxo, .quem, .planos, .planos__comuns, .agencias, .perguntas { grid-template-columns: minmax(0, 1fr); }
.hero__grade { display: grid; gap: 3rem; align-items: center; }
.hero__lide {
    max-width: 38rem;
    margin-bottom: 2rem;
    font-size: 1.125rem;
    color: var(--cor-texto-2);
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.hero__nota { margin-top: 1rem; font-size: .9375rem; color: var(--cor-texto-2); }

/* Quadro de exemplo (HTML e CSS, dados fictícios) */
.quadro {
    background: var(--cor-superficie);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    overflow: hidden;
}
.quadro__topo { padding: 1.25rem 1.25rem 1rem; }
.quadro__titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.quadro__sub { font-size: .875rem; color: var(--cor-texto-2); }
.quadro__lista { border-top: 1px solid var(--cor-linha); }
.linha {
    display: grid;
    gap: .35rem;
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--cor-linha);
}
.linha__tipo { font-size: .8125rem; font-weight: 600; color: var(--cor-texto-2); }
.linha__titulo { font-weight: 600; line-height: 1.35; }
.quadro__legenda {
    padding: .9rem 1.25rem 1.1rem;
    font-size: .8125rem;
    color: var(--cor-texto-2);
}

.selo {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .7rem;
    border-radius: var(--radius-pilula);
    background: rgba(255, 255, 255, .08);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
}
.selo svg { width: 14px; height: 14px; flex: none; color: var(--cor-verde); }
.selo--producao::before,
.selo--gestor::before,
.selo--final::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.selo--producao::before { background: var(--cor-azul); }
.selo--gestor::before { box-shadow: inset 0 0 0 2px var(--cor-texto-2); }
.selo--final::before { box-shadow: inset 0 0 0 2px var(--cor-azul); }

/* Etiqueta "IA": onde a IA entra */
.ia {
    display: inline-block;
    padding: .05rem .4rem;
    border: 1px solid var(--cor-azul);
    border-radius: 4px;
    color: var(--cor-azul);          /* 6,4:1 sobre --cor-fundo; 5,5:1 sobre --cor-superficie */
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.4;
}

/* Como funciona */
.fluxo { display: grid; gap: 2.5rem; }
.passos {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
    counter-reset: passo;
}
.passos::before,
.passos::after {
    content: "";
    position: absolute;
    left: calc(1.375rem - 1px);
    top: 1.5rem;
    bottom: 1.5rem;
    width: 2px;
}
.passos::before { background: var(--cor-linha); }
.passos::after { background: var(--gradiente-marca); transform-origin: top; }
.passo {
    position: relative;
    padding-left: 4.25rem;
    overflow-wrap: anywhere;   /* com o recuo do número sobram 120px a 320px com texto a 200% */
    counter-increment: passo;
}
.passo::before {
    content: counter(passo);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--cor-fundo);
    box-shadow: inset 0 0 0 2px var(--cor-verde);
    color: var(--cor-verde);
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.125rem;
}
.passo h3 { margin: .4rem 0 .5rem; font-size: 1.5rem; }
.passo p { color: var(--cor-texto-2); max-width: 38rem; }
.passo .passo__ia {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    margin-top: .9rem;
    padding: .75rem 1rem;
    border-radius: 12px;
    background: rgba(42, 173, 212, .12);   /* --cor-texto-2 por cima: 8,0:1 */
}

/* Para quem é */
.quem { display: grid; gap: 3rem; }
.quem p { max-width: 40rem; }
.papeis { margin-top: 2rem; }
.papeis > div {
    display: grid;
    gap: .15rem;
    padding: 1rem 0;
    border-top: 1px solid var(--cor-linha-clara);
}
.papeis > div:last-child { border-bottom: 1px solid var(--cor-linha-clara); }
.papeis dt { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.1875rem; }
.papeis dd { color: var(--cor-texto-claro-2); }
.quem__link {
    align-self: start;
    padding: 1.5rem;
    border-radius: 24px;
    background: var(--cor-marca-suave);
}
.quem__link h3 { margin-bottom: .75rem; font-size: 1.5rem; }
.quem__link > p { margin-bottom: 1.5rem; }

.aval {
    padding: 1.25rem;
    border-radius: 12px;
    background: var(--cor-papel);
    box-shadow: 0 10px 28px rgba(33, 28, 28, .14);
}
.aval__tipo { font-size: .8125rem; font-weight: 600; color: var(--cor-texto-claro-2); }
.aval__titulo { margin: .15rem 0 .5rem; font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.aval__texto { font-size: .9375rem; color: var(--cor-texto-claro-2); }
.aval__acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.aval__botao {
    padding: .4rem 1rem;
    border-radius: var(--radius-pilula);
    box-shadow: inset 0 0 0 1.5px var(--cor-texto-claro);
    font-size: .875rem;
    font-weight: 700;
}
.aval__botao--sim { background: var(--cor-verde-escuro); color: var(--cor-papel); box-shadow: none; }   /* 5,3:1 */
.aval__legenda { margin-top: 1rem; font-size: .8125rem; color: var(--cor-texto-claro-2); }

/* Planos */
.planos__intro { margin-bottom: 2.5rem; }
.planos { display: grid; gap: 1.25rem; }
.plano {
    padding: 1.5rem;
    border-radius: var(--radius);
    background: var(--cor-superficie);
}
.plano h3 { font-size: 1.625rem; }
.plano__para { margin: .25rem 0 1.25rem; color: var(--cor-texto-2); }
.plano__preco { color: var(--cor-texto-2); }
.plano__valor {
    margin-right: .15rem;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--cor-texto);
}
.plano__anual { margin: .35rem 0 1.5rem; font-size: .9375rem; color: var(--cor-texto-2); }
.plano__itens > div {
    display: flex;
    flex-wrap: wrap;   /* "Armazenamento" e o valor não cabem lado a lado a 320px com texto a 200% */
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 0;
    border-top: 1px solid var(--cor-linha);
}
.plano__itens dt { color: var(--cor-texto-2); overflow-wrap: anywhere; min-width: 0; }
.plano__itens dd { font-weight: 600; text-align: right; }

.planos__comuns { display: grid; gap: 2rem; margin-top: 3.5rem; }
.planos__comuns h3 { margin-bottom: .75rem; }
.lista-ok { display: grid; gap: .6rem; }
.lista-ok li { display: flex; align-items: flex-start; gap: .65rem; }
.lista-ok svg { flex: none; width: 1.375rem; height: 1.375rem; margin-top: .1rem; color: var(--cor-verde); }
.planos__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 3rem;
}

/* Agências: o brilho do painel volta, por cima do fundo escuro */
.secao--agencias {
    background-color: var(--cor-fundo);
    background-image:
        radial-gradient(110% 80% at 100% 0%, var(--brilho-azul), transparent 70%),
        radial-gradient(110% 80% at 0% 100%, var(--brilho-verde), transparent 70%);
}
.agencias { display: grid; gap: 2.5rem; }
.agencias__lide { max-width: 34rem; font-size: 1.125rem; color: var(--cor-texto-2); }
.agencias__itens > div {
    padding: 1.5rem 0;
    border-top: 1px solid var(--cor-linha);
}
.agencias__itens > div:last-child { border-bottom: 1px solid var(--cor-linha); }
.agencias__itens h3 { margin-bottom: .5rem; }
.agencias__itens p { max-width: 36rem; color: var(--cor-texto-2); }
.agencias__itens > div:last-child p { margin-bottom: 1rem; color: var(--cor-texto); font-weight: 600; }

/* Perguntas (details/summary nativos) */
.perguntas { display: grid; gap: 2rem; }
.acordeao details { border-top: 1px solid var(--cor-linha-clara); }
.acordeao details:last-child { border-bottom: 1px solid var(--cor-linha-clara); }
.acordeao summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding: .75rem 0;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
}
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--cor-verde-escuro);
    background:
        linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
    transition: transform .3s var(--ease);
}
.acordeao details[open] summary::after { transform: rotate(45deg); }
.acordeao details p {
    max-width: 38rem;
    padding: 0 2rem 1.25rem 0;
    color: var(--cor-texto-claro-2);
}

/* CTA final */
.secao--cta {
    padding: 5rem var(--gutter);
    text-align: center;
    background-color: var(--cor-fundo);
    background-image:
        radial-gradient(90% 90% at 50% 0%, var(--brilho-verde), transparent 70%),
        radial-gradient(90% 90% at 50% 100%, var(--brilho-azul), transparent 70%);
}
.cta__texto { max-width: 32rem; margin: 0 auto 2rem; font-size: 1.125rem; color: var(--cor-texto-2); }

/* Rodapé */
.rodape {
    padding: 2.5rem var(--gutter);
    border-top: 1px solid var(--cor-linha);
    font-size: .9375rem;
    color: var(--cor-texto-2);
}
.rodape__conteudo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; }
.marca--rodape { color: var(--cor-texto); }
.rodape__links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.rodape__links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--alvo-toque);
    text-underline-offset: 4px;
}
.rodape__nota { flex-basis: 100%; }

/* Documentos (termos.html, privacidade.html): texto longo em fundo claro */
.documento {
    max-width: 46rem;
    margin: 0 auto;
}
.documento .vigencia { color: var(--cor-texto-claro-2); margin-bottom: 2rem; }
.documento h2 {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.25;
    margin: 2.5rem 0 .75rem;
}
.documento p, .documento ul { margin-bottom: 1rem; }
.documento ul { list-style: disc; padding-left: 1.5rem; }
.documento li { margin-bottom: .375rem; }
.documento a { color: var(--cor-azul-escuro); text-underline-offset: 3px; }
.documento table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: 1rem; }
.documento th, .documento td { text-align: left; vertical-align: top; padding: .5rem .75rem .5rem 0; border-bottom: 1px solid var(--cor-linha-clara); }
.documento .rolagem { overflow-x: auto; }

/* Página de erro (404.html) */
.erro {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 3.5rem var(--gutter);
    text-align: center;
    background-image: var(--fundo-brilho);
}
.erro .titulo { margin-bottom: 0; }
.erro p { color: var(--cor-texto-2); max-width: 32rem; }

/* Movimento: só CSS, só com a preferência liberada */
@media (prefers-reduced-motion: no-preference) {
    .linha { animation: subir .7s var(--ease) both; animation-delay: calc(var(--i) * 110ms + 150ms); }
    @keyframes subir {
        from { opacity: 0; transform: translateY(14px); }
        to { opacity: 1; transform: none; }
    }
    /* O traço que liga as etapas se enche com a rolagem. Sem suporte, fica inteiro. */
    @supports (animation-timeline: view()) {
        .passos::after {
            animation: tracar linear both;
            animation-timeline: view();
            animation-range: entry 25% cover 60%;
        }
        @keyframes tracar {
            from { transform: scaleY(0); }
            to { transform: scaleY(1); }
        }
    }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

@media (min-width: 21.5em) {
    .marca:not(.marca--rodape) { font-size: 1.375rem; }
}
@media (min-width: 30em) {
    .so-largo { display: inline; }
    .linha {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "tipo selo" "titulo titulo";
        align-items: center;
    }
    .linha__tipo { grid-area: tipo; }
    .linha__titulo { grid-area: titulo; }
    .selo { grid-area: selo; justify-self: end; }
}
@media (min-width: 48em) {
    :root { --gutter: 2rem; }
    .secao { padding-block: 5.5rem; }
    .topo { padding-block: .75rem; }
    .hero { padding-block: 4.5rem 5.5rem; }
    .quadro__topo { padding: 1.5rem 1.5rem 1.1rem; }
    .linha { padding: 1rem 1.5rem; }
    .quadro__legenda { padding-inline: 1.5rem; }
    .papeis > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
    .quem__link { padding: 2.25rem; }
    .plano { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 2.5rem; padding: 2rem; }
    .plano > h3,
    .plano > .plano__para,
    .plano > .plano__preco,
    .plano > .plano__anual { grid-column: 1; }
    .plano__itens { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
    .planos__comuns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
    .planos__cta { flex-direction: row; align-items: center; gap: 1.5rem; }
    .secao--cta { padding-block: 7rem; }
    .acordeao details p { padding-bottom: 1.5rem; }
}
@media (min-width: 52em) {
    .topo__ancoras { display: flex; }
    .topo__nav { gap: .25rem 1rem; }
}
@media (min-width: 64em) {
    :root { --gutter: 3rem; }
    .secao { padding-block: 7.5rem; }
    .hero { padding-block: 5.5rem 7rem; }
    .hero__grade { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4.5rem; }
    .fluxo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; }
    .fluxo__intro { position: sticky; top: 7rem; align-self: start; }
    .quem { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 5rem; }
    .planos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
    .plano { display: block; padding: 2rem; }
    .plano__para { min-height: 3.2em; }   /* os três preços ficam na mesma altura */
    .planos__comuns { margin-top: 4.5rem; }
    .agencias { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5rem; align-items: start; }
    .perguntas { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; align-items: start; }
    .secao--cta { padding-block: 8rem; }
}