/* plenakids.com — manual da marca 1.0 (PK2): azul Plena, vermelho Kids só como acento, creme nos fundos, Nunito Sans */
:root{
  --azul:#014eae;--azul-escuro:#013d8a;--azul-noite:#0b2547;--vermelho:#e33922;--creme:#fcf5e7;--creme-2:#f6eedd;
  --texto:#17324d;--texto-2:#3d5570;--mudo:#5f7389;--branco:#fff;--borda:rgba(1,78,174,.14);
  --raio:20px;--sombra:0 10px 30px rgba(1,45,100,.08),0 1px 3px rgba(1,45,100,.06);
  --fonte:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 17px/1.6 var(--fonte);color:var(--texto);background:var(--branco);overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--azul)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--vermelho);outline-offset:3px;border-radius:6px}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.pular{position:absolute;left:-999px;top:8px;padding:8px 14px;background:var(--azul);color:#fff;border-radius:10px;z-index:10}
.pular:focus{left:16px}

/* topo */
.topo{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--borda)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.topo .logo img{height:40px;width:auto}
.topo nav{display:flex;align-items:center;gap:22px}
.topo nav a{color:var(--texto);font-weight:700;font-size:15px;text-decoration:none}
.topo nav a:hover{color:var(--azul)}
.topo nav .botao{color:#fff}
@media(max-width:820px){.topo nav a:not(.botao){display:none}}

/* botões */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border:0;border-radius:14px;
  background:var(--azul);color:#fff;font:800 16px var(--fonte);text-decoration:none;cursor:pointer;box-shadow:0 10px 24px rgba(1,78,174,.25);transition:background .15s,transform .15s}
.botao:hover{background:var(--azul-escuro);transform:translateY(-1px)}
.botao.claro{background:#fff;color:var(--azul);box-shadow:inset 0 0 0 2px var(--borda)}
.botao.claro:hover{background:var(--creme)}
.botao.pequeno{min-height:40px;padding:8px 16px;font-size:14px;border-radius:12px;box-shadow:none}

/* abertura */
.abertura{background:var(--creme);padding:72px 0 80px;position:relative;overflow:hidden}
.abertura .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.selo{display:inline-block;margin-bottom:18px;padding:6px 12px;border-radius:999px;background:#fff;color:var(--vermelho);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(227,57,34,.25)}
h1{font-size:clamp(34px,5vw,56px);line-height:1.06;font-weight:800;letter-spacing:-.02em;color:var(--azul-noite)}
h1 em{font-style:normal;color:var(--azul)}
.abertura p.lead{margin-top:18px;max-width:34em;font-size:19px;color:var(--texto-2)}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.nota{margin-top:16px;color:var(--mudo);font-size:14px}

/* ilustração do Monitor (desenho do produto, nomes fictícios) */
.tela{background:#fff;border-radius:26px;box-shadow:0 30px 70px rgba(1,45,100,.18),0 0 0 1px var(--borda);overflow:hidden}
.tela-topo{display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--azul);color:#fff;font-weight:800}
.tela-topo img{width:30px;height:30px}
.tela-topo span{margin-left:auto;font-size:13px;font-weight:700;opacity:.85}
.tela-corpo{display:grid;gap:12px;padding:18px}
.pulseira{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--creme);border:1px solid var(--borda)}
.pulseira .cor{width:12px;height:44px;border-radius:8px;background:var(--azul)}
.pulseira b{display:block;font-size:16px}
.pulseira small{color:var(--mudo);font-size:13px}
.pulseira .tempo{font-weight:800;font-size:20px;font-variant-numeric:tabular-nums;color:var(--azul-noite)}
.pulseira.acabando .cor{background:#d08a00}.pulseira.acabando .tempo{color:#8a5a00}
.pulseira.esgotado{background:#fdeeea;border-color:rgba(227,57,34,.3)}.pulseira.esgotado .cor{background:var(--vermelho)}.pulseira.esgotado .tempo{color:#a8291a;font-size:15px}
.tela-rodape{display:flex;justify-content:space-between;padding:12px 18px 16px;color:var(--mudo);font-size:13px;font-weight:700}

/* seções */
section{padding:84px 0}
.titulo-secao{max-width:40em;margin-bottom:40px}
.titulo-secao span{display:block;margin-bottom:10px;color:var(--vermelho);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
h2{font-size:clamp(28px,3.6vw,40px);line-height:1.12;font-weight:800;letter-spacing:-.015em;color:var(--azul-noite)}
.titulo-secao p{margin-top:14px;color:var(--texto-2);font-size:18px}
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cartao{padding:26px;border-radius:var(--raio);background:#fff;box-shadow:var(--sombra);border:1px solid var(--borda)}
.cartao .icone{display:grid;place-items:center;width:48px;height:48px;margin-bottom:16px;border-radius:14px;background:#e8eff9;color:var(--azul)}
.cartao .icone svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
h3{font-size:19px;line-height:1.3;font-weight:800;color:var(--azul-noite)}
.cartao p{margin-top:8px;color:var(--texto-2);font-size:16px}
.faixa-creme{background:var(--creme)}

/* passos */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:passo}
.passo{padding:28px;border-radius:var(--raio);background:#fff;border:1px solid var(--borda)}
.passo::before{counter-increment:passo;content:counter(passo);display:grid;place-items:center;width:40px;height:40px;margin-bottom:16px;border-radius:50%;background:var(--vermelho);color:#fff;font-weight:800}
.passo p{margin-top:8px;color:var(--texto-2);font-size:16px}
.passo code{font:700 15px var(--fonte);color:var(--azul)}

/* entrar na unidade */
.entrar{background:var(--azul);color:#fff}
.entrar h2{color:#fff}.entrar .titulo-secao span{color:#ffb3a6}.entrar .titulo-secao p{color:#d6e2f5}
.form-unidade{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;max-width:620px}
.campo-unidade{flex:1 1 300px;display:flex;align-items:center;min-height:56px;border-radius:14px;background:#fff;color:var(--texto);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.campo-unidade input{flex:1;min-width:0;height:56px;padding:0 4px 0 18px;border:0;background:transparent;font:800 18px var(--fonte);color:var(--texto)}
.campo-unidade input:focus{outline:none}
.campo-unidade:focus-within{box-shadow:0 0 0 3px var(--vermelho),0 10px 30px rgba(0,0,0,.18)}
.campo-unidade span{padding-right:18px;color:var(--mudo);font-weight:700;white-space:nowrap}
.entrar .botao{background:var(--vermelho);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.entrar .botao:hover{background:#c42e1a}
.erro-unidade{flex-basis:100%;min-height:1.5em;color:#ffd7cf;font-weight:700;font-size:15px}

/* contato */
.contato .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.contato .cartao{text-align:left}
.contato ul{list-style:none;display:grid;gap:10px;margin-top:6px}
.contato li{color:var(--texto-2)}

/* rodapé */
.rodape{background:var(--azul-noite);color:#c8d5e8;padding:48px 0 36px;font-size:15px}
.rodape .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;align-items:flex-start}
.rodape img{height:44px;width:auto}
.rodape nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.rodape a{color:#fff;font-weight:700;text-decoration:none}
.rodape a:hover{text-decoration:underline}
.rodape small{display:block;margin-top:14px;color:#93a6c2;font-size:13px}

/* páginas de texto (privacidade, suporte, exclusão) */
.documento{padding:56px 0 80px}
.documento .wrap{max-width:760px}
.documento h1{font-size:clamp(30px,4vw,42px)}
.documento .meta{margin:10px 0 34px;color:var(--mudo);font-size:15px}
.documento h2{margin:34px 0 10px;font-size:23px}
.documento p,.documento li{color:var(--texto-2)}
.documento p+p{margin-top:12px}
.documento ul{margin:10px 0 0 22px;display:grid;gap:6px}
.documento strong{color:var(--texto)}
.documento .aviso{margin-top:20px;padding:16px 18px;border-radius:14px;background:var(--creme);border:1px solid var(--borda)}

@media(max-width:960px){
  .abertura .wrap,.contato .wrap{grid-template-columns:1fr}
  .grade,.passos{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  body{font-size:16px}
  .abertura{padding:44px 0 56px}
  section{padding:60px 0}
  .grade,.passos{grid-template-columns:1fr}
  .topo .logo img{height:34px}
  .campo-unidade span{font-size:14px;padding-right:12px}
  .campo-unidade input{font-size:16px;padding-left:14px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}