/* ==========================================================================
   SUPER LOJA BABY: sistema visual
   Fofo e alegre na moldura (bebê herói de capa, estrelas, fundos claros suaves, contorno azul-marinho) e calmo na vitrine:
   card liso, foto no palco branco, nome e preço primeiro.
   Cores do logo (opção A, 05/11/2026): azul #1E9BEA, amarelo #FFC629, rosa #FF5AA5, contorno azul-marinho #172D48.
   Essas três cores NÃO passam como texto em fundo branco (1,57 a 3,03:1): aqui elas só enfeitam (fundo, traço, estrela).
   Texto e botão usam estes tons, todos com pelo menos 4,5:1 sobre branco:
     - azul-marinho #172D48 (texto, 14:1) e #3A526E (texto de apoio, 7:1);
     - azul forte #0F6FB8 (link e botão azul, 5,3:1, texto branco no botão) e #0B5A9A (hover, 7:1);
     - rosa forte #D6246E (botão e destaque, 4,8:1, texto branco no botão);
     - amarelo #FFC629 só como fundo de botão, sempre com texto azul-marinho (8,7:1).
   Base: o motor (assets/css/style.css) fala em tokens; aqui eles ganham as cores do bebê.
   ========================================================================== */
@import url("../../css/style.css");

/* ---------- tokens ---------- */
:root{
  --amarelo:#FFC629;
  --amarelo-cl:#FFD65C;
  --rosa:#FF5AA5;           /* só enfeite */
  --rosa-forte:#D6246E;     /* texto e botão */
  --azul-logo:#1E9BEA;      /* só enfeite */

  /* os tokens do motor, nas cores do bebê */
  --tinta:#172D48; --tinta-md:#3A526E; --tinta-cl:#5E7590;
  --azul:#0F6FB8; --azul-fundo:#0B5A9A; --capa:#1E9BEA; --capa-vidro:#E3F3FE;
  --ouro:#FFC629; --ouro-fundo:#F2B200; --laranja:#D6246E; --areia:#FFF1C2;
  --papel:#F4FAFF; --creme:#FFF8E4; --branco:#FFFFFF; --borda:#DCEBF7; --borda-forte:#BCD6EC;
  --sucesso:#1B7A4B; --sucesso-cl:#E2F5EA; --erro:#C0392B;
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:36px;
  --sombra-card:0 2px 4px rgba(23,45,72,.05), 0 12px 28px -14px rgba(23,45,72,.26);
  --sombra-alta:0 8px 20px -6px rgba(23,45,72,.18), 0 28px 60px -30px rgba(23,45,72,.38);
  --display:"Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --texto:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body{background:var(--papel); color:var(--tinta)}
::selection{background:var(--amarelo); color:var(--tinta)}
:focus-visible{outline:3px solid var(--azul)}
.d1,.d2,.d3{letter-spacing:-.01em}

/* ---------- botões ---------- */
/* O botão de ação da página (amarelo com sombra azul-marinho) segue o do motor. Na vitrine ele fica discreto: quem chama atenção é o produto. */
.btn--ouro:hover{background:var(--amarelo-cl)}
.card .btn--ouro{background:var(--branco); color:var(--azul); border:2px solid var(--azul); box-shadow:none}
.card .btn--ouro:hover{background:var(--azul); color:#fff; border-color:var(--azul); transform:none; box-shadow:none}
.btn--azul{background:var(--azul); color:#fff}
.btn--azul:hover{background:var(--azul-fundo)}
.btn--tinta:hover{background:var(--tinta-md)}
.btn--claro{background:#fff; color:var(--tinta); border:2px solid var(--tinta); box-shadow:var(--sombra-tinta-sm)}
.btn--claro:hover{background:var(--amarelo); color:var(--tinta); border-color:var(--tinta)}
.cab__link{color:var(--azul); border-bottom-color:var(--capa)}
.cab__link:hover{color:var(--rosa-forte); border-color:var(--rosa)}
.cab__link--pe{display:inline-block; margin-top:18px}

/* ---------- selos da casa (só o de novidade e o de esgotado: sem selo de oferta, sem desconto) ---------- */
.selo--oferta{background:var(--rosa-forte); color:#fff}
.selo--novo{background:var(--tinta); color:#fff}
.selo--esgotado{background:#E6EEF6; color:var(--tinta-md)}

/* ---------- cabeçalho ---------- */
.marca img{height:48px; width:auto}
.topo.encolhe .marca img{height:42px}
.topo__nota{display:flex; align-items:center; gap:7px; font-size:.86rem; color:var(--tinta-md); white-space:nowrap}
.topo__nota svg{color:var(--azul)}
.acao--guias{color:var(--tinta)}
.acao--guias svg{color:var(--rosa-forte)}
.menu a:hover{color:var(--azul); border-bottom-color:var(--rosa)}
.menu a[aria-current]{color:var(--azul); border-bottom-color:var(--rosa)}
.busca button{background:var(--azul)}
.busca button:hover{background:var(--azul-fundo)}
.busca input:focus{border-color:var(--azul)}

/* ---------- abertura (hero) ---------- */
.hero{background:linear-gradient(172deg,#D6EDFD 0%,#EAF6FF 52%,#FFF3F8 100%)}
.hero::before{--pontos:rgba(30,155,234,.24)}
.hero h1{color:var(--tinta); text-shadow:none}
.hero__sub{color:var(--tinta-md)}
.hero__fita{background:var(--amarelo); color:var(--tinta)}
.hero__provas li{color:var(--tinta); background:rgba(255,255,255,.82); border:1px solid var(--borda-forte); backdrop-filter:none}
.hero__provas svg{color:var(--rosa-forte)}
.hero__mascote{width:min(100%,400px); filter:drop-shadow(0 16px 20px rgba(23,45,72,.22))}
.hero__palco{min-height:380px}
/* Raios amarelos suaves atrás do bebê, como a explosão de gibi do herói. */
.raios::after{
  background:repeating-conic-gradient(from 4deg at 50% 52%, rgba(255,198,41,.34) 0deg 5deg, rgba(255,198,41,0) 5deg 13deg);
}
.hero__balao{background:#fff; font-size:.95rem}
/* Estrelas ao redor do herói. */
.estrela{
  position:absolute; z-index:3; display:block; width:40px; height:40px; background:var(--amarelo);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:brilha 3.6s ease-in-out infinite;
}
.estrela--a{right:6%; top:8%; width:46px; height:46px}
.estrela--b{left:8%; bottom:14%; width:30px; height:30px; background:var(--rosa); animation-delay:1.2s}
.estrela--c{right:12%; bottom:6%; width:24px; height:24px; background:var(--azul-logo); animation-delay:2.2s}
@keyframes brilha{0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(1.18) rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.estrela{animation:none}}
.capa-onda path{fill:#fff}

/* ---------- faixa de vantagens ---------- */
.vantagens{background:#fff}
/* o texto da vantagem usa a altura de linha dele, não a do corpo */
.vantagem > div{line-height:1.4}
.vantagem > div > span{display:block}
.vantagem__ic{background:var(--capa-vidro); color:var(--azul)}
.vantagem:nth-child(2) .vantagem__ic{background:#FFF1C2; color:#8A5A00}
.vantagem:nth-child(3) .vantagem__ic{background:#FFE3EF; color:var(--rosa-forte)}

/* ---------- seções e cartões ---------- */
.cat__n{background:var(--tinta); color:#fff}
.cat--tudo{background:var(--capa-vidro)}
.passo::before{background:var(--amarelo); color:var(--tinta); border-color:var(--tinta)}
.afiliado{background:#fff; border-color:var(--borda-forte)}
.afiliado__ic{background:#FFE3EF; color:var(--rosa-forte)}
.card{border-radius:var(--r-lg)}
.card__marca{color:var(--tinta-md)}
.card__foto{background:#fff}
.card__nome:hover{color:var(--azul)}

/* ---------- páginas de dentro (capa das institucionais) ---------- */
.capa-pg{background:linear-gradient(162deg,#D6EDFD,#EAF6FF 60%,#FFF3F8)}
.capa-pg::before{--pontos:rgba(30,155,234,.22)}
.capa-pg h1{color:var(--tinta)}
.capa-pg p{color:var(--tinta-md)}
.painel__n{background:var(--tinta)}

/* ---------- filtro do blog (por assunto) ---------- */
.blog-filtro{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px}
.blog-filtro a{display:inline-flex; align-items:center; gap:7px; padding:8px 17px; border-radius:var(--r-full); border:2px solid var(--borda-forte); background:var(--branco);
  font-family:var(--display); font-weight:500; font-size:.92rem; color:var(--tinta-md)}
.blog-filtro a span{font-size:.78rem; color:var(--tinta-cl)}
.blog-filtro a:hover{border-color:var(--tinta); color:var(--tinta)}
.blog-filtro a[aria-current]{background:var(--tinta); border-color:var(--tinta); color:#fff}
.blog-filtro a[aria-current] span{color:#C9DCEF}
@media (max-width:640px){.blog-filtro{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px} .blog-filtro a{flex:none}}

/* ---------- 404 ---------- */
.pg-404{text-align:center}
.pg-404 img{width:min(46vw,200px); height:auto; margin:0 auto}
.pg-404 .codigo{font-family:var(--display); font-weight:700; font-size:clamp(3.4rem,10vw,5.4rem); line-height:1; color:var(--azul); -webkit-text-stroke:3px var(--tinta); paint-order:stroke fill}

/* ---------- rodapé ---------- */
.rodape{background:var(--tinta); color:#D3E3F3}
.rodape img.logo{height:48px; width:auto}
.rodape p{color:#D3E3F3}
.rodape a:hover,.rodape__base a:hover{color:var(--amarelo)}
.rodape__afiliada{display:flex; gap:10px; margin-top:14px; font-size:.86rem; color:#D3E3F3}
.rodape__afiliada svg{flex:none; margin-top:3px; color:var(--amarelo)}
.rodape__base .credito{white-space:nowrap}

/* ---------- celular ---------- */
@media (max-width:960px){
  .hero__palco{min-height:0}
  .hero__mascote{width:min(62%,300px)}
  .estrela--a{right:12%; top:10%}
  .estrela--b{left:14%; bottom:18%}
  .estrela--c{right:20%; bottom:6%}
  .topo__nota{display:none}
}
@media (max-width:640px){
  .marca img{height:44px}
  .topo.encolhe .marca img{height:40px}
  .acao--guias .acao__tx{display:none}
  .afiliado{flex-direction:column; gap:12px}
  .rodape{padding-top:36px}
}

/* Ajustes de QA (05/11/2026), só da baby.
   - gaveta fechada: a sombra do motor vazava pela borda esquerda de toda página; só aparece com a gaveta aberta;
   - "×" do filtro ativo: 3,74:1 passa a 4,5:1 ou mais (azul escuro sobre fundo branco);
   - celular, /produto: as miniaturas viram uma fila só, com rolagem, para o nome e o preço ficarem na primeira tela. */
.gaveta{box-shadow:none; transition:transform .3s cubic-bezier(.4,.14,.3,1), box-shadow .3s}
.gaveta[data-aberta]{box-shadow:var(--sombra-alta)}
.ficha-ativa a{background:#fff; color:var(--azul-fundo)}
.ficha-ativa a:hover{background:var(--azul); color:#fff}
@media (max-width:960px){
  .pdp > *{min-width:0}
  .pdp__principal img{aspect-ratio:4/3}
  .pdp__miniaturas{flex-wrap:nowrap; overflow-x:auto; gap:8px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .pdp__miniaturas::-webkit-scrollbar{display:none}
  .pdp__miniaturas button{width:64px}
}