/* Clipcerto v2 (fase 1): o site em várias páginas. Cabeçalho com menu, rodapé com as seções do site,
   entrada com o Google e as páginas novas (início, como funciona, planos, exemplos, modelos, sobre,
   criar conta, amostra). Só usa tokens.css; os componentes de base ficam em componentes.css e pagina.css. */

/* ---- cabeçalho: logo, menu de seções, conta e ferramentas (tema e botão do menu no celular) ---- */
.topo{flex-wrap:wrap;row-gap:var(--e3)}
.topo .nav{order:1;flex:1 1 auto;justify-content:space-between;gap:var(--e4);min-width:0}
.nav-lista{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--e1);flex-wrap:wrap}
.nav-lista a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--e3);border-radius:var(--r-campo);color:var(--texto);
  text-decoration:none;font-weight:500;white-space:nowrap;transition:background-color var(--mov),color var(--mov)}
.nav-lista a:hover{color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,transparent);text-decoration:none}
.nav-lista a[aria-current="page"]{color:var(--brand);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.4em}
.nav-conta{display:flex;align-items:center;gap:var(--e3);flex:none}
.topo-ferramentas{order:2;display:flex;align-items:center;gap:var(--e2);flex:none}
.menu-botao{order:2;display:inline-flex;align-items:center;gap:var(--e2);min-height:44px;min-width:44px;padding:0 var(--e3);border:1.5px solid var(--campo-borda);
  border-radius:var(--r-campo);background:transparent;color:var(--texto);font:600 var(--t0) var(--fonte-texto);cursor:pointer;transition:background-color var(--mov),border-color var(--mov)}
.menu-botao:hover{border-color:var(--brand);color:var(--brand)}
.menu-botao[aria-expanded="true"]{background:var(--brand);color:var(--sobre-brand);border-color:var(--brand)}
.menu-barras{position:relative;width:18px;height:2px;background:currentColor;border-radius:1px;flex:none;transition:background-color var(--mov)}
.menu-barras::before,.menu-barras::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:1px;transition:transform var(--mov)}
.menu-barras::before{top:-6px} .menu-barras::after{top:6px}
.menu-botao[aria-expanded="true"] .menu-barras{background:transparent}
.menu-botao[aria-expanded="true"] .menu-barras::before{transform:translateY(6px) rotate(45deg)}
.menu-botao[aria-expanded="true"] .menu-barras::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1040px){
  .topo .nav{order:3;flex-basis:100%;flex-direction:column;align-items:stretch;gap:var(--e2);padding:var(--e3) 0 var(--e5);border-top:1px solid var(--linha)}
  /* sem JS o botão fica oculto e o menu aparece sempre; com JS, só quando aberto */
  .topo:has(.menu-botao:not([hidden])) .nav:not([data-aberto]){display:none}
  .nav-lista{flex-direction:column;align-items:stretch;gap:0}
  .nav-lista a{min-height:48px;font-size:var(--t1)}
  .nav-lista a[aria-current="page"]{text-decoration:none;background:color-mix(in srgb,var(--brand) 8%,transparent)}
  .nav-conta{flex-direction:column;align-items:stretch;gap:var(--e3);margin-top:var(--e3);padding-top:var(--e4);border-top:1px solid var(--linha)}
  .nav-conta .link-topo{justify-content:center;border:1.5px solid var(--campo-borda)}
  .nav-conta .botao{width:100%}
}
@media (prefers-reduced-motion:no-preference) and (max-width:1040px){.topo .nav[data-aberto]{animation:sobe 200ms cubic-bezier(.2,.7,.2,1) both}}
@media (min-width:1041px){.menu-botao{display:none}}
/* celular estreito: o botão do menu vira só o ícone (44 px), e tudo cabe numa linha ao lado do logo curto */
@media (max-width:430px){.topo{gap:var(--e2)}.topo-ferramentas{gap:var(--e1)}.menu-botao{padding:0;width:44px;justify-content:center}.menu-botao .menu-rotulo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

/* ---- rodapé: as seções do site ganham uma coluna ---- */
.rodape .cols{grid-template-columns:1.3fr 1fr 1fr 1fr}
@media (max-width:760px){.rodape .cols{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.rodape .cols{grid-template-columns:1fr}}

/* ---- início ---- */
.passos--tres{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.passos--tres{grid-template-columns:1fr}}
.destaque{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:var(--e7);align-items:center}
.destaque .celular{max-width:260px}
.destaque h2{max-width:18ch}
.destaque p{color:var(--apoio);margin-top:var(--e4);max-width:52ch}
.destaque ul{list-style:none;margin:var(--e5) 0 0;padding:0;display:grid;gap:var(--e3)}
.destaque li{display:flex;gap:var(--e3);align-items:flex-start;max-width:50ch}
.destaque li::before{content:"";flex:none;width:20px;height:20px;margin-top:4px;background:var(--brand);
  -webkit-mask:url("../img/check.svg") center/contain no-repeat;mask:url("../img/check.svg") center/contain no-repeat}
.destaque .acoes{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e6)}
@media (max-width:760px){.destaque{grid-template-columns:1fr;gap:var(--e6)}}
.planos-resumo{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e5);align-items:stretch}
.planos-resumo .plano-cartao .preco{margin-top:var(--e2)}
.planos-resumo .plano-cartao p.lista{color:var(--apoio);font-size:var(--t0)}
@media (max-width:900px){.planos-resumo{grid-template-columns:1fr}}
.chamada{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--e6);align-items:center;padding:var(--e8) 0}
.chamada h2{max-width:20ch}
.chamada p{margin-top:var(--e4);max-width:48ch}
.chamada .acoes{display:grid;gap:var(--e3);justify-items:start}
.chamada .acoes .texto-pequeno{font-size:var(--t0)}
@media (max-width:760px){.chamada{grid-template-columns:1fr;gap:var(--e5)}}

.fecho{display:flex;flex-wrap:wrap;gap:var(--e3)}

/* ---- cabeça das páginas internas ---- */
.cabeca-pagina{padding:var(--e6) 0 var(--e5);max-width:760px}
.cabeca-pagina h1{font-size:var(--t5)}
.cabeca-pagina p{color:var(--apoio);font-size:var(--t2);line-height:1.45;margin-top:var(--e4);max-width:44ch}
@media (max-width:760px){.cabeca-pagina p{font-size:var(--t1)}}

/* ---- selo "em breve" e "sob consulta": contorno, sem a luz do tungstênio ---- */
.selo--breve{background:transparent;color:var(--apoio);border:1.5px solid var(--campo-borda)}
.faixa-palco .selo--breve,.plano-cartao--palco .selo--breve{color:var(--apoio-palco);border-color:var(--apoio-palco)}

/* ---- planos: três cartões; o Intermediário ainda não abriu ---- */
.planos--tres{grid-template-columns:repeat(3,1fr);align-items:start}
@media (max-width:1040px){.planos--tres{grid-template-columns:1fr}}
.plano-cartao--breve{border:1.5px dashed var(--campo-borda);background:var(--superficie-2);box-shadow:none}
.plano-cartao--breve .preco{color:var(--apoio);font-size:var(--t2)}
.plano-cartao .cabeca-plano{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e2) var(--e3)}
.plano-cartao .cabeca-plano h3,.plano-cartao .cabeca-plano h2{margin:0;font-size:var(--t3);font-weight:700;letter-spacing:-.015em}
.plano-cartao .promessa{margin-top:var(--e2)}
.plano-cartao--breve ul li::before{background:var(--campo-borda)}
.plano-cartao--breve .texto-pequeno{color:var(--apoio)}
.plano-cartao[id]{scroll-margin-top:var(--e5)}
.planos-aviso{margin-top:var(--e6);color:var(--apoio);font-size:var(--t0);max-width:75ch}

/* ---- como funciona: a sequência importa, por isso o número ---- */
.etapas{list-style:none;margin:var(--e5) 0 0;padding:0;counter-reset:etapa;display:grid;gap:var(--e6);max-width:760px}
.etapas li{counter-increment:etapa;position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--e4) var(--e5);align-items:start}
.etapas li::before{content:counter(etapa);width:48px;height:48px;border-radius:50%;background:var(--brand);color:var(--sobre-brand);display:grid;place-items:center;
  font:800 var(--t1)/1 var(--fonte-titulo);font-stretch:var(--largura-titulo);font-variant-numeric:tabular-nums}
.etapas li:not(:last-child)::after{content:"";position:absolute;left:23px;top:56px;bottom:calc(var(--e6) * -1);width:2px;background:var(--linha)}
.etapas .etapa{display:grid;gap:var(--e3);padding-top:var(--e2)}
.etapas h2{font-size:var(--t2)}
.etapas p{color:var(--apoio);max-width:58ch}
.etapas ul{margin:0;padding-left:1.1em;display:grid;gap:var(--e1);color:var(--apoio);max-width:58ch}
.etapas strong{color:var(--texto)}
.etiqueta{display:inline-flex;align-items:center;gap:var(--e2);justify-self:start;font:600 var(--t-1)/1 var(--fonte-texto);letter-spacing:.01em;color:var(--brand);
  padding:6px var(--e3);border-radius:var(--r-pilula);background:color-mix(in srgb,var(--brand) 9%,var(--superficie))}
.etiqueta::before{content:"";width:16px;height:16px;background:currentColor;
  -webkit-mask:url("../img/relogio.svg") center/contain no-repeat;mask:url("../img/relogio.svg") center/contain no-repeat}
@media (max-width:560px){.etapas li{grid-template-columns:36px minmax(0,1fr);gap:var(--e3) var(--e4)}.etapas li::before{width:36px;height:36px;font-size:var(--t0)}.etapas li:not(:last-child)::after{left:17px;top:44px}}
.ciclo{margin-top:var(--e8);padding:var(--e6);border-radius:var(--r-cartao);background:var(--superficie-2);border:1px solid var(--linha);max-width:760px}
.ciclo h2{font-size:var(--t3)}
.ciclo p{color:var(--apoio);margin-top:var(--e3);max-width:60ch}
.ciclo dl{margin:var(--e5) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--e4) var(--e5)}
.ciclo dt{font-weight:700}
.ciclo dd{margin:var(--e1) 0 0;color:var(--apoio);font-size:var(--t0)}

/* ---- exemplos: grade de vitrine, com o crédito de quem tem licença aberta ---- */
.vitrine--grade{grid-template-columns:repeat(3,1fr);row-gap:var(--e8)}
@media (max-width:760px){
  .vitrine--grade{display:grid;grid-template-columns:1fr;overflow:visible;margin-inline:0;padding:0;row-gap:var(--e7)}
  .vitrine--grade>li{flex:none}
}
.vitrine .credito{font-size:var(--t-1);line-height:1.45;color:var(--apoio);padding-top:var(--e2);border-top:1px solid var(--linha)}
.vitrine .credito a{color:inherit;font-weight:600;overflow-wrap:anywhere}
.exemplo-breve{display:grid;align-content:center;justify-items:center;gap:var(--e3);aspect-ratio:300/620;max-width:280px;margin-inline:auto;padding:var(--e5);
  border:1.5px dashed var(--campo-borda);border-radius:var(--r-moldura);text-align:center;color:var(--apoio)}
.exemplo-breve .ilustra{margin:0;opacity:.5}
.exemplo-breve strong{color:var(--texto);font:700 var(--t1) var(--fonte-titulo);font-stretch:var(--largura-titulo)}
.grupo-exemplos{margin-top:var(--e8)}
.grupo-exemplos:first-of-type{margin-top:0}
.grupo-exemplos>h2{font-size:var(--t3);margin-bottom:var(--e3)}
.grupo-exemplos>p{color:var(--apoio);max-width:66ch;margin-bottom:var(--e6)}
.nota-licenca{margin-top:var(--e7);padding:var(--e4) var(--e5);border-radius:var(--r-cartao);background:var(--superficie-2);border:1px solid var(--linha);font-size:var(--t0);color:var(--apoio);max-width:75ch}
.nota-licenca strong{color:var(--texto)}

/* ---- modelos: um por página; aqui a vitrine dos três ---- */
.modelos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e5)}
@media (max-width:900px){.modelos{grid-template-columns:1fr}}
.modelo-cartao{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--e4);align-items:start;padding:var(--e5);border:1px solid var(--linha);border-radius:var(--r-cartao);
  background:var(--superficie);color:var(--texto);text-decoration:none;box-shadow:var(--sombra);transition:transform var(--mov),box-shadow var(--mov),border-color var(--mov)}
.modelo-cartao:hover{transform:translateY(-2px);border-color:var(--brand);text-decoration:none}
.modelo-cartao .quadro{width:96px;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:var(--superficie-2);display:grid;place-items:center;color:var(--apoio)}
.modelo-cartao .quadro img{width:100%;height:100%;object-fit:cover;display:block}
.modelo-cartao .quadro svg{width:32px;height:35px;opacity:.5}
.modelo-cartao .corpo{display:grid;gap:var(--e2)}
.modelo-cartao h2{font-size:var(--t2)}
.modelo-cartao p{color:var(--apoio);font-size:var(--t0)}
.modelo-cartao .selo,.modelo-cartao .selo--breve{justify-self:start;margin-bottom:var(--e1)}
.modelo-cartao .ir{color:var(--brand);font-weight:700;margin-top:var(--e1)}
.modelo-cartao:hover .ir{text-decoration:underline}
@media (max-width:560px){.modelo-cartao{grid-template-columns:72px minmax(0,1fr);padding:var(--e4)}.modelo-cartao .quadro{width:72px}}
.modelo{padding:var(--e5) 0 var(--e8)}
.modelo .duas{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
.modelo .lado h1{font-size:var(--t5)}
.modelo .lado>p{color:var(--apoio);font-size:var(--t2);line-height:1.45;margin-top:var(--e4);max-width:40ch}
.modelo .lado .selo,.modelo .lado .selo--breve{margin-bottom:var(--e4)}
.modelo .ficha{margin-top:var(--e6);display:grid;gap:var(--e5)}
.modelo .ficha h2{font-size:var(--t2)}
.modelo .ficha ul{list-style:none;margin:var(--e3) 0 0;padding:0;display:grid;gap:var(--e2)}
.modelo .ficha li{display:flex;gap:var(--e3);align-items:flex-start;max-width:52ch;color:var(--texto)}
.modelo .ficha li::before{content:"";flex:none;width:20px;height:20px;margin-top:4px;background:var(--brand);
  -webkit-mask:url("../img/check.svg") center/contain no-repeat;mask:url("../img/check.svg") center/contain no-repeat}
.modelo .ficha p{color:var(--apoio);margin-top:var(--e3);max-width:56ch}
.modelo .ficha .acoes{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e2)}
.modelo .amostra-do-modelo{display:grid;gap:var(--e4);justify-items:center;padding-top:var(--e3)}
.modelo .amostra-do-modelo .credito{font-size:var(--t-1);color:var(--apoio);text-align:center;max-width:34ch}
.modelo .amostra-do-modelo .credito a{color:inherit;font-weight:600;overflow-wrap:anywhere}
.modelo .amostra-do-modelo .legenda-video{margin:0}
.outros-modelos{margin-top:var(--e8);padding-top:var(--e6);border-top:1px solid var(--linha)}
.outros-modelos h2{font-size:var(--t2);margin-bottom:var(--e4)}
.outros-modelos ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--e2) var(--e5)}
.outros-modelos a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
@media (max-width:860px){.modelo .duas{grid-template-columns:1fr}.modelo .amostra-do-modelo{order:-1}}

/* ---- sobre ---- */
.sobre{padding:var(--e5) 0 var(--e8);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:var(--e8);align-items:start}
.sobre .texto h1{font-size:var(--t5)}
.sobre .texto>p{margin-top:var(--e4);max-width:62ch}
.sobre .texto>p.abertura{font-size:var(--t2);line-height:1.45;color:var(--apoio);max-width:40ch}
.sobre .texto h2{font-size:var(--t3);margin-top:var(--e7)}
.sobre .texto h2+p{margin-top:var(--e3)}
.sobre .texto ul{margin:var(--e3) 0 0;padding-left:1.1em;display:grid;gap:var(--e2);max-width:60ch}
.sobre .ficha-sobre{position:sticky;top:var(--e5);display:grid;gap:var(--e4);padding:var(--e6);border-radius:var(--r-moldura);background:var(--palco);color:var(--sobre-palco)}
.sobre .ficha-sobre .ilustra{color:var(--acento);width:56px;height:61px;margin:0}
.sobre .ficha-sobre dl{margin:0;display:grid;gap:var(--e4)}
.sobre .ficha-sobre dt{font:600 var(--t-1) var(--fonte-texto);letter-spacing:.04em;text-transform:uppercase;color:var(--apoio-palco)}
.sobre .ficha-sobre dd{margin:var(--e1) 0 0;color:var(--sobre-palco)}
.sobre .ficha-sobre a{color:var(--sobre-palco)}
.sobre .ficha-sobre :focus-visible{outline-color:var(--sobre-palco)}
@media (max-width:860px){.sobre{grid-template-columns:1fr;gap:var(--e6)}.sobre .ficha-sobre{position:static}}

/* ---- entrar e criar conta: os logins sociais (Google, Microsoft, Facebook; o Apple entra na mesma grade) ---- */
.botoes-sociais{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--e3)}
.botao--social{width:100%;background:var(--superficie);color:var(--texto);border:1.5px solid var(--campo-borda);gap:var(--e3);padding:0 var(--e4)}
.botao--social:hover{background:var(--superficie-2);border-color:var(--texto);box-shadow:none}
.botao--social svg{width:20px;height:20px;flex:none}
.aviso-email{margin-bottom:var(--e5);display:grid;gap:var(--e3)}
.aviso-email .acoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3)}
.aviso-email .botao{min-height:44px}
.ou{display:flex;align-items:center;gap:var(--e3);color:var(--apoio);font-size:var(--t0);margin:var(--e1) 0}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--linha)}
.entrar .troca{margin-top:var(--e5);font-size:var(--t0);color:var(--apoio)}
.entrar .troca a{font-weight:600;display:inline-block;padding:var(--e2) 0}

/* ---- amostra (exige conta): quem pede, os estados e o formulário ---- */
.amostra{padding:var(--e5) 0 var(--e9)}
.amostra .duas{align-items:start}
.amostra .duas>*{min-width:0}
.amostra .lado h1{font-size:var(--t5)}
.amostra .lado>p{color:var(--apoio);margin-top:var(--e4);max-width:44ch}
.conta-chip{display:inline-flex;align-items:center;gap:var(--e2);max-width:100%;margin-top:var(--e5);padding:var(--e2) var(--e4) var(--e2) var(--e2);border-radius:var(--r-pilula);
  border:1px solid var(--linha);background:var(--superficie);font-size:var(--t0);color:var(--texto)}
.conta-chip .inicial{flex:none;width:32px;height:32px;border-radius:50%;background:var(--brand);color:var(--sobre-brand);display:grid;place-items:center;font:700 var(--t0)/1 var(--fonte-texto);text-transform:uppercase}
.conta-chip span:not(.inicial){min-width:0;overflow-wrap:anywhere}
.conta-chip small{display:block;color:var(--apoio);font-size:var(--t-1)}
.amostra .estado{display:grid;gap:var(--e4);justify-items:start;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r-cartao);padding:var(--e6);box-shadow:var(--sombra)}
.amostra .estado h2{font-size:var(--t3)}
.amostra .estado h2:focus{outline:none}
.amostra .estado p{color:var(--apoio);max-width:48ch}
.amostra .estado .ilustra{margin-bottom:0}
.amostra .estado .acoes{display:flex;flex-wrap:wrap;gap:var(--e3)}
.amostra .estado .form-aviso{width:100%}
.amostra .estado .esqueleto{display:grid;gap:var(--e3);width:100%}
.amostra .estado .esqueleto span{display:block;height:20px;border-radius:var(--r-campo);background:var(--linha)}
.amostra .estado .esqueleto span:nth-child(2){width:80%}.amostra .estado .esqueleto span:nth-child(3){width:55%}
@media (prefers-reduced-motion:no-preference){.amostra .esqueleto span{animation:respira 1.4s ease-in-out infinite}@keyframes respira{50%{opacity:.45}}}
.amostra .formulario>p.quem-pede{font-size:var(--t0);color:var(--apoio);padding:var(--e3) var(--e4);border-radius:var(--r-campo);background:var(--superficie-2)}
.amostra .formulario>p.quem-pede strong{color:var(--texto);overflow-wrap:anywhere}
.amostra .formulario>p.quem-pede a{white-space:nowrap}

/* ---- páginas curtas e aviso de página de conta sem índice ---- */
.curta .acoes .botao{min-width:0}