/* Componentes da página de vídeos · usa só tokens.css. Sem nome de marca.
   Base: identidade v1.0.0 (marcas/videos-pme/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 retangular .moldura virou .celular (SVG de aparelho), em pagina.css;
   - o botão de play usa fundo branco fixo: com --sobre-brand ele sumia no tema escuro. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--texto);font:400 var(--t1)/1.55 var(--fonte-texto);
  caret-color:var(--brand);accent-color:var(--brand);scrollbar-color:var(--campo-borda) var(--fundo)}
h1,h2,h3{font-family:var(--fonte-titulo);line-height:1.08;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:var(--t5);font-weight:800} h2{font-size:var(--t4);font-weight:700} h3{font-size:var(--t2);font-weight:700}
p{margin:0;text-wrap:pretty} a{color:var(--brand);text-underline-offset:.2em}
::selection{background:var(--brand);color:var(--sobre-brand)}
.miolo{max-width:1080px;margin:0 auto;padding:0 var(--e5)}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

/* cabeçalho: nome provisório em texto no lugar do logo */
.topo{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);padding:var(--e5) 0}
.nome{font:700 var(--t1) var(--fonte-titulo);color:var(--texto);text-decoration:none;letter-spacing:-.01em}

/* botão de ação: um principal por tela */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);min-height:48px;padding:0 var(--e5);
  border-radius:var(--r-pilula);border:2px solid transparent;font:700 var(--t0) var(--fonte-texto);text-decoration:none;cursor:pointer;
  background:var(--acao);color:var(--sobre-acao);transition:transform var(--mov),box-shadow var(--mov)}
.botao:hover{transform:translateY(-1px);box-shadow:var(--sombra)}
.botao:active{transform:none}
.botao--contorno{background:transparent;color:var(--brand);border-color:var(--brand)}
.botao[disabled],.botao[aria-disabled="true"]{cursor:not-allowed;opacity:.55;transform:none;box-shadow:none}

/* hero */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--e7);align-items:center;padding:var(--e7) 0 var(--e8)}
.hero p.sub{font-size:var(--t2);color:var(--apoio);margin-top:var(--e4);max-width:34ch}
.hero .acoes{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e6)}
.hero .nota{font-size:var(--t1);color:var(--apoio);margin-top:var(--e4)}
.selo{display:inline-block;font:700 var(--t1) var(--fonte-texto);background:var(--acao);color:var(--sobre-acao);padding:var(--e1) var(--e3);border-radius:var(--r-pilula)}
.kicker{font:600 var(--t0) var(--fonte-texto);color:var(--brand);margin-bottom:var(--e3);display:block}

/* rótulo sobre o vídeo e botão de play */
.plano{position:absolute;left:var(--e3);top:var(--e3);z-index:1;font:600 .875rem/1.4 var(--fonte-texto);padding:2px var(--e3);
  border-radius:var(--r-pilula);background:var(--superficie);color:var(--texto);border:1px solid var(--linha)}
.play{position:absolute;inset:auto 0 var(--e5) 0;margin:auto;width:64px;height:64px;border-radius:50%;
  background:#FFFFFF;color:#1D45A0;display:grid;place-items:center;border:0;cursor:pointer;
  box-shadow:0 2px 4px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.4);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 #1D45A0}
.legenda-video{font-size:var(--t1);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--destaque{border:2px solid var(--brand)}
.plano-cartao .preco{font:800 var(--t4) var(--fonte-titulo);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plano-cartao .preco small{font:500 var(--t1) var(--fonte-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;border-radius:50%;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}

/* 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)}
.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}}