/* Clipcerto Media · componentes (v2.0.0, 2026-10-28). Usa só tokens.css.
   Origem: marcas/clipcerto-media/assets/componentes.css. Mudanças em relação à referência:
   - o ícone de check é um arquivo SVG (../img/check.svg), sem data URI, para a CSP não abrir img-src data:;
   - a moldura 9:16 (.moldura) continua sendo o aparelho em SVG (.celular, em pagina.css): o vídeo é o protagonista;
   - o botão de play tem fundo branco fixo e símbolo em vinho, nos dois temas. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--texto);font:400 var(--t1)/var(--entrelinha-texto) var(--fonte-texto);
  font-stretch:var(--largura-texto);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  caret-color:var(--brand);accent-color:var(--brand);scrollbar-color:var(--campo-borda) var(--fundo)}
h1,h2,h3{font-family:var(--fonte-titulo);font-stretch:var(--largura-titulo);line-height:var(--entrelinha-titulo);
  letter-spacing:-.025em;margin:0;text-wrap:balance}
h1{font-size:var(--t5);font-weight:800} h2{font-size:var(--t4);font-weight:750} h3{font-size:var(--t2);font-weight:700;letter-spacing:-.015em}
p{margin:0;text-wrap:pretty} a{color:var(--brand);text-underline-offset:.18em;text-decoration-thickness:1px}
::selection{background:var(--brand);color:var(--sobre-brand)}
.miolo{max-width:1120px;margin:0 auto;padding:0 var(--e5)}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}

/* cabeçalho: logo em SVG, duas <img> (claro e escuro); o CSS mostra a certa */
.topo{display:flex;align-items:center;justify-content:space-between;gap:var(--e5);padding:var(--e5) 0}
.nome{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--texto);border-radius:6px}
.marca-logo{display:block;height:30px;width:auto}
.marca-logo--escuro{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .marca-logo--claro{display:none}:root:not([data-theme="light"]) .marca-logo--escuro{display:block}}
:root[data-theme="dark"] .marca-logo--claro{display:none} :root[data-theme="dark"] .marca-logo--escuro{display:block}
.nav{display:flex;align-items:center;gap:var(--e4);font:500 var(--t0) var(--fonte-texto)}

/* botão: um principal por tela. Vinho no claro, tungstênio no escuro */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);min-height:48px;padding:0 var(--e5);
  border-radius:var(--r-botao);border:2px solid transparent;font:650 var(--t0)/1.2 var(--fonte-texto);letter-spacing:.005em;
  text-decoration:none;cursor:pointer;background:var(--acao);color:var(--sobre-acao);text-align:center;
  transition:background-color var(--mov),transform var(--mov),box-shadow var(--mov)}
.botao:hover{background:var(--acao-hover);transform:translateY(-1px);box-shadow:var(--sombra)}
.botao:active{transform:none;box-shadow:none}
.botao--contorno{background:transparent;color:var(--brand);border-color:currentColor}
.botao--contorno:hover{background:color-mix(in srgb,var(--brand) 8%,transparent)}
.botao--grande{min-height:56px;padding:0 var(--e6);font-size:var(--t1)}
.botao[aria-disabled="true"],.botao:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* hero */
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--e7);align-items:center;padding:var(--e7) 0 var(--e8)}
.hero h1{font-size:var(--t6);letter-spacing:-.035em}
.hero p.sub{font-size:var(--t2);line-height:1.45;color:var(--apoio);margin-top:var(--e5);max-width:36ch}
.hero .acoes{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e6)}
.hero .nota{font-size:var(--t0);color:var(--apoio);margin-top:var(--e4)}
.kicker{display:block;font:600 var(--t0) var(--fonte-texto);color:var(--brand);margin-bottom:var(--e4)}
.selo{display:inline-flex;align-items:center;gap:var(--e2);font:650 var(--t-1)/1 var(--fonte-texto);letter-spacing:.01em;
  background:var(--acento);color:var(--sobre-acento);padding:6px var(--e3);border-radius:var(--r-pilula)}

/* etiqueta sobre o vídeo e botão de play (a moldura em si é .celular, em pagina.css) */
.plano{position:absolute;right:var(--e3);top:var(--e3);z-index:2;font:600 var(--t-1)/1 var(--fonte-texto);padding:6px var(--e3);
  border-radius:var(--r-pilula);background:rgba(20,6,12,.62);color:#FFFFFF;backdrop-filter:blur(6px)}
.play{position:absolute;z-index:2;left:50%;bottom:var(--e5);translate:-50% 0;width:56px;height:56px;border-radius:50%;
  background:#FFFFFF;color:#6E1630;display:grid;place-items:center;border:0;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.3);transition:transform var(--mov)}
.play:hover{transform:scale(1.06)}
.play:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px;box-shadow:0 0 0 6px #6E1630}
.legenda-video{font-size:var(--t0);color:var(--apoio);text-align:center;margin-top:var(--e3)}

/* cartão de plano */
.planos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e5);align-items:stretch}
.plano-cartao{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r-cartao);padding:var(--e6);
  display:flex;flex-direction:column;gap:var(--e4);box-shadow:var(--sombra)}
.plano-cartao h3{font-size:var(--t3)}
.plano-cartao .promessa{color:var(--apoio)}
.plano-cartao--destaque{border:2px solid var(--brand)}
.plano-cartao--palco{background:var(--palco);color:var(--sobre-palco);border-color:transparent}
.plano-cartao--palco .promessa,.plano-cartao--palco .preco small,.plano-cartao--palco .texto-pequeno{color:var(--apoio-palco)}
.plano-cartao--palco .botao--contorno{color:var(--sobre-palco)}
.plano-cartao--palco .botao--contorno:hover{background:rgba(255,255,255,.1)}
.plano-cartao--palco a:not(.botao){color:var(--sobre-palco)}
.plano-cartao--palco :focus-visible{outline-color:var(--sobre-palco)}

.plano-cartao .preco{font:800 var(--t4)/1 var(--fonte-titulo);font-stretch:var(--largura-titulo);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}
.plano-cartao .preco small{font:500 var(--t1) var(--fonte-texto);font-stretch:var(--largura-texto);color:var(--apoio);letter-spacing:0}
.plano-cartao ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--e3)}
.plano-cartao li{display:flex;gap:var(--e3);align-items:flex-start}
.plano-cartao li::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;background:var(--brand);
  -webkit-mask:url("../img/check.svg") center/contain no-repeat;mask:url("../img/check.svg") center/contain no-repeat}
.plano-cartao .botao{margin-top:auto}
.plano-cartao--palco li::before{background:var(--acento)} /* depois da regra geral, para vencer na cascata */

/* faixa em vinho: amostra, rodapé */
.faixa-palco{background:var(--palco);color:var(--sobre-palco)}
.faixa-palco p{color:var(--apoio-palco)}
.faixa-palco h2{color:var(--sobre-palco)}
.faixa-palco .botao{background:var(--acento);color:var(--sobre-acento)}
.faixa-palco .botao:hover{background:var(--tungstenio-300)}
.faixa-palco a:not(.botao){color:var(--sobre-palco)}
.faixa-palco :focus-visible{outline-color:var(--sobre-palco)}
.faixa-palco ::selection{background:var(--acento);color:var(--sobre-acento)}

/* números de prova (prazo, quantidade) */
.numero{font:800 var(--t4)/1 var(--fonte-titulo);font-stretch:var(--largura-titulo);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}

/* formulário */
.campo{display:grid;gap:var(--e2)}
.campo label{font:600 var(--t0) var(--fonte-texto)}
.campo .ajuda{font-size:var(--t0);color:var(--apoio)}
.campo input,.campo select,.campo textarea{min-height:48px;padding:var(--e3) var(--e4);border-radius:var(--r-campo);width:100%;
  border:1.5px solid var(--campo-borda);background:var(--superficie);color:var(--texto);font:400 var(--t1) var(--fonte-texto);
  transition:border-color var(--mov),box-shadow var(--mov)}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"],.campo textarea[aria-invalid="true"]{border-color:var(--erro)}
.campo .erro{color:var(--erro);font-size:var(--t0)}

section{padding:var(--e8) 0}
.cab-secao{margin-bottom:var(--e6)} .cab-secao p{color:var(--apoio);margin-top:var(--e3);max-width:52ch}
@media (max-width:760px){.hero{grid-template-columns:1fr;gap:var(--e6)}.planos{grid-template-columns:1fr}}