/* Mondikid — estilo do site
   Fundo creme, muito espaço, caixas de cantos redondos, desenhos dentro de formas de cor e poucos rabiscos de traço fino.
   Letras gratuitas (licença OFL, em fontes/): Gochi Hand nos títulos, Patrick Hand à mão, Poppins no texto.
   Texto branco só sobre o azul-escuro. */

@font-face { font-family: "Gochi Hand"; src: url("fontes/gochi-hand.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Patrick Hand"; src: url("fontes/patrick-hand.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fontes/poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fontes/poppins-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fontes/poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fontes/poppins-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --letra-titulo: "Gochi Hand", cursive;
  --letra-mao: "Patrick Hand", cursive;
  --letra-texto: "Poppins", system-ui, sans-serif;
  --marinho: #003865;
  --rosa: #E56DB1;
  --rosa-escuro: #B0307F;
  --rosa-medio: #F5B3D8;
  --laranja: #E87722;
  --laranja-escuro: #B8540C;
  --amarelo: #FED141;
  --agua: #9CDBD9;
  --papel: #F5F2ED;
  --rosa-claro: #FCE6F2;
  --amarelo-claro: #FFF3CF;
  --agua-claro: #DDF2F1;
  --laranja-claro: #FBE1CB;
  --marinho-claro: #E6ECF2;
  --texto-suave: #3F5A78;
  --largura: 1160px;
  --raio: 28px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 116px; font-synthesis: style; }
body {
  margin: 0; background: var(--papel); color: var(--marinho);
  font: 400 18.5px/1.65 var(--letra-texto);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; font-weight: 600; }
h1, h2 { font-family: var(--letra-titulo); font-weight: 400; letter-spacing: .005em; }
h1 { font-size: clamp(2.6rem, 5.4vw, 4.3rem); line-height: 1.05; }
h2 { font-size: clamp(2.1rem, 3.8vw, 3.1rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }
b, strong { font-weight: 600; }

.mao { font-family: var(--letra-mao); font-weight: 400; color: var(--rosa-escuro); font-size: 1.45em; line-height: 1; display: inline-block; }
.envolve { max-width: var(--largura); margin: 0 auto; padding: 0 24px; }
.seccao { padding: 88px 0; position: relative; }
.intro { max-width: 780px; margin-bottom: 48px; }
.intro.centro { margin-left: auto; margin-right: auto; text-align: center; }
.intro p { color: var(--texto-suave); }
/* a etiqueta em pílula por cima dos títulos */
.pilula {
  display: inline-block; font: 600 13.5px/1 var(--letra-texto); letter-spacing: .02em; padding: 8px 15px; border-radius: 99px;
  background: #fff; color: var(--rosa-escuro); margin-bottom: 16px;
}
.pilula.rosa { background: var(--rosa-claro); }
.pilula.agua { background: var(--agua-claro); color: var(--marinho); }
.pilula.amarela { background: var(--amarelo); color: var(--marinho); }
.rabisco { position: absolute; pointer-events: none; width: auto; z-index: 1; }

/* ---------- traços à mão e marcadores ----------
   risco: sublinhado desenhado à mão, que se desenha ao abrir a página
   marca: fundo de cor redondo atrás das palavras que contam */
.risco { position: relative; white-space: nowrap; }
.risco svg { position: absolute; left: -3%; bottom: -.04em; width: 106%; height: .32em; overflow: visible; fill: none; stroke: var(--rosa); stroke-width: 5; stroke-linecap: round; pointer-events: none; }
.risco path { stroke-dasharray: 100; animation: desenhar .8s ease-out .3s backwards; }
.risco path + path { stroke-width: 3.5; animation-delay: .75s; }
@keyframes desenhar { from { stroke-dashoffset: 100; } }
mark.marca {
  --m: var(--rosa-medio); color: inherit; padding: 0 .16em; border-radius: .32em;
  background: linear-gradient(transparent 22%, var(--m) 22%, var(--m) 90%, transparent 90%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
mark.marca.agua { --m: var(--agua); color: var(--marinho); }
mark.marca.amarela { --m: var(--amarelo); color: var(--marinho); }
mark.marca.escuro { --m: var(--marinho); color: #fff; }
mark.marca.branca { --m: #fff; color: var(--marinho); }
.circulo { position: relative; display: inline-block; }
.circulo svg { position: absolute; left: -14%; top: -14%; width: 128%; height: 130%; overflow: visible; fill: none; stroke: var(--rosa); stroke-width: 3; stroke-linecap: round; pointer-events: none; }
/* o autocolante em forma de estrela de pontas */
.autocolante {
  display: grid; place-items: center; text-align: center; width: 112px; height: 112px; padding: 18px;
  background: url("img/rabiscos/estrela-cheia.svg") center / contain no-repeat; color: var(--marinho);
  font: 400 19px/1.05 var(--letra-titulo); transform: rotate(10deg);
}
@media (prefers-reduced-motion: reduce) { .risco path { animation: none; } }

/* texto que ainda falta preencher: aparece marcado para não escapar */
.falta { background: #FFF1A8; padding: 0 4px; }

/* ---------- botões ---------- */
.botao {
  display: inline-block; text-decoration: none; font-family: inherit; font-weight: 600; font-size: 17px; line-height: 1.3;
  padding: 15px 30px; background: var(--marinho); color: #fff; border: 0; border-radius: 99px; cursor: pointer;
  transition: transform .15s, background .15s;
}
.botao:hover { transform: translateY(-2px); background: #0B4A80; }
.botao:active { transform: translateY(1px); }
.botao:focus-visible, .ligacao:focus-visible, summary:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }
.ligacao { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--rosa); }

/* ---------- topo ---------- */
/* barra fina por cima do topo: história, perguntas, contactos e redes (sai ao descer a página; o topo fica) */
.barra-topo { background: var(--marinho); color: #fff; font-size: 14px; font-weight: 500; }
.barra-topo .envolve { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 42px; }
.barra-topo nav { display: flex; gap: 28px; }
.barra-topo a { color: #fff; text-decoration: none; white-space: nowrap; }
.barra-topo a:hover, .barra-topo a[aria-current] { color: var(--amarelo); }
.barra-topo .redes { display: flex; align-items: center; gap: 18px; }
.barra-topo .redes svg { display: block; }
@media (max-width: 620px) {
  .barra-topo { font-size: 13px; }
  .barra-topo .envolve { height: 38px; gap: 12px; }
  .barra-topo nav { gap: 16px; }
  .barra-topo .longo { display: none; }
  .barra-topo .redes { gap: 14px; }
}
.topo { position: sticky; top: 0; z-index: 10; background: rgba(245, 242, 237, .92); backdrop-filter: blur(8px); }
.topo .envolve { display: flex; align-items: center; gap: 28px; height: 108px; }
.topo .logo img { height: 80px; width: auto; }
.topo nav { display: flex; gap: 34px; margin-left: auto; font-size: 17.5px; font-weight: 500; }
.topo nav a { text-decoration: none; white-space: nowrap; }
.topo nav a:hover { color: var(--rosa-escuro); }
.topo .botao { font-size: 17px; padding: 13px 26px; }
.topo .entrar { font-size: 17.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.topo .entrar:hover { color: var(--rosa-escuro); }
.topo .conta-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }

/* ---------- abertura ---------- */
.abertura { padding: 44px 0 72px; position: relative; overflow: hidden; }
.abertura::before { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: var(--rosa-claro); left: -190px; top: -120px; }
.abertura .envolve { display: grid; grid-template-columns: 1fr 1.02fr; gap: 56px; align-items: center; position: relative; z-index: 2; }
.abertura h1 { margin-bottom: 22px; }
.abertura p.grande { font-size: 1.22rem; color: var(--texto-suave); max-width: 31em; }
.abertura .acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin: 32px 0 22px; }
.abertura .preco-curto { font-size: 16px; font-weight: 500; color: var(--texto-suave); }
.abertura .preco-curto strong { color: var(--marinho); background: var(--amarelo); padding: 3px 10px; border-radius: 99px; }

/* a montra: os desenhos em formas de cor e o ecrã do jogo (onde entra o vídeo) */
.montra { position: relative; width: 100%; aspect-ratio: 1 / .9; }
.montra .bola { position: absolute; border-radius: 50%; }
.montra .b1 { width: 74%; aspect-ratio: 1; right: 2%; top: 4%; background: var(--agua-claro); }
.montra .b2 { width: 11%; aspect-ratio: 1; left: 6%; bottom: 10%; background: var(--amarelo); }
.montra .b3 { width: 6%; aspect-ratio: 1; right: 4%; top: 2%; background: var(--rosa-medio); }
.aparelho { position: absolute; left: 6%; right: 4%; top: 31%; background: var(--marinho); border-radius: 26px; padding: 10px 14px; z-index: 2; box-shadow: 0 26px 40px -22px rgba(0, 56, 101, .45); }
.aparelho .ecra { border-radius: 14px; overflow: hidden; aspect-ratio: 2.055; background: #F8F5F2; }
.aparelho .ecra img, .aparelho .ecra video { width: 100%; height: 100%; object-fit: cover; display: block; }
.desenho-forma { position: absolute; display: grid; place-items: center; z-index: 3; }
.desenho-forma img { max-width: 72%; max-height: 72%; object-fit: contain; }
.montra .d1 { width: 26%; aspect-ratio: 1; left: 0; top: 4%; background: var(--rosa-medio); border-radius: 30px; transform: rotate(-7deg); }
.montra .d2 { width: 23%; aspect-ratio: 1 / 1.12; right: 0; bottom: 0; background: var(--amarelo); border-radius: 999px 999px 26px 26px; transform: rotate(5deg); }
.montra .d3 { width: 21%; aspect-ratio: 1; left: 30%; bottom: 2%; background: var(--laranja-claro); -webkit-mask: url("img/formas/flor.svg") center / contain no-repeat; mask: url("img/formas/flor.svg") center / contain no-repeat; }
.montra .r-seta { width: 22%; left: 23%; top: 12%; transform: rotate(8deg); }
.montra .vida { position: absolute; left: 44%; top: 9%; font-size: clamp(1.2rem, 2.2vw, 1.6rem); transform: rotate(-4deg); z-index: 3; }
.montra .r-estrela { width: 7%; right: 13%; top: 14%; }
.montra .r-coracao { width: 7%; left: 3%; top: 76%; }
.montra .r-brilho { width: 5%; right: 30%; bottom: 3%; }

/* ---------- as promessas: uma barra branca em pílula ---------- */
.promessas { padding: 0 24px; }
.promessas ul {
  list-style: none; margin: 0 auto; max-width: calc(var(--largura) - 48px); padding: 18px 26px; background: #fff; border-radius: 99px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.promessas li { display: flex; align-items: center; gap: 14px; font-weight: 500; font-size: 16.5px; line-height: 1.3; padding: 4px 10px; }
.promessas li + li { border-left: 2px dashed var(--marinho-claro); }
.promessas img { width: 46px; height: 46px; flex: none; }

/* ---------- como funciona: três cartões de papel tracejado ---------- */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; list-style: none; margin: 0; padding: 0; }
.passo { position: relative; background: var(--rosa-claro); border: 2px dashed rgba(176, 48, 127, .35); border-radius: var(--raio); padding: 30px 30px 32px; }
.passo:nth-child(2) { background: var(--agua-claro); border-color: rgba(0, 56, 101, .25); }
.passo:nth-child(3) { background: var(--amarelo-claro); border-color: rgba(184, 84, 12, .32); }
.passo .numero {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; margin-bottom: 18px;
  background: var(--rosa-escuro); color: #fff; font: 400 26px/1 var(--letra-titulo);
}
.passo:nth-child(2) .numero { background: var(--marinho); }
.passo:nth-child(3) .numero { background: var(--laranja-escuro); }
.passo img { position: absolute; right: 22px; top: 18px; height: 78px; width: auto; }
.passo h3 { font-size: 1.2rem; }
.passo p { margin: 0; color: var(--texto-suave); font-size: 17px; }
.nota-natal { margin: 34px 0 0; font-weight: 500; text-align: center; }
.nota-natal .mao { font-size: 1.35em; margin-right: 6px; }

/* ---------- o que tem o jogo: cartões brancos, cada desenho numa forma de cor ---------- */
.jogo .rabisco.r1 { width: 120px; right: 6%; top: 92px; }
.grelha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cartao { background: #fff; border-radius: var(--raio); padding: 28px 28px 30px; transition: transform .18s; }
.cartao:hover { transform: translateY(-4px); }
.cartao .forma { width: 104px; height: 104px; display: grid; place-items: center; margin-bottom: 20px; background: var(--rosa-medio); border-radius: 50%; }
.cartao .forma img { max-width: 72px; max-height: 78px; object-fit: contain; }
.cartao:nth-child(2) .forma { background: var(--agua); border-radius: 999px 999px 22px 22px; }
.cartao:nth-child(3) .forma { background: var(--amarelo); border-radius: 0; -webkit-mask: url("img/formas/flor.svg") center / contain no-repeat; mask: url("img/formas/flor.svg") center / contain no-repeat; }
.cartao:nth-child(4) .forma { background: var(--laranja-claro); border-radius: 28px; }
.cartao:nth-child(5) .forma { background: var(--rosa-claro); border-radius: 0; -webkit-mask: url("img/formas/flor8.svg") center / contain no-repeat; mask: url("img/formas/flor8.svg") center / contain no-repeat; }
.cartao:nth-child(6) .forma { background: var(--agua-claro); border-radius: 22px 22px 999px 999px; }
.cartao h3 { font-size: 1.15rem; }
.cartao p { margin: 0; color: var(--texto-suave); font-size: 17px; }
.cartao .ligacao { color: var(--marinho); }
.deslizar { display: none; }

/* ---------- para que idade: um arco azul com três cartões de bainha recortada ---------- */
.idades { padding-top: 40px; }
.idades > .envolve { max-width: var(--largura); }
.arco { background: var(--marinho); color: #fff; border-radius: 600px 600px 44px 44px / 260px 260px 44px 44px; padding: 124px 56px 74px; position: relative; }
.arco .intro { color: #fff; }
.arco .intro p { color: #D6E1EC; }
.arco .pilula { background: rgba(255, 255, 255, .12); color: #fff; }
.arco .rabisco.r1 { width: 54px; left: 13%; top: 120px; }
.arco .rabisco.r2 { width: 110px; right: 11%; top: 150px; }
.idades-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.idades-lista .idade {
  --c: var(--rosa-medio); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none;
  color: var(--marinho); background: var(--c); border-radius: var(--raio) var(--raio) 0 0; padding: 30px 26px 26px; margin-bottom: 16px; transition: transform .18s;
}
.idades-lista .idade::after { content: ""; position: absolute; left: 0; right: 0; bottom: -15px; height: 16px; background: radial-gradient(circle at 15px 0, var(--c) 14.5px, transparent 15px) 0 0 / 30px 16px repeat-x; }
.idades-lista .idade:nth-child(2) { --c: var(--agua); }
.idades-lista .idade:nth-child(3) { --c: var(--amarelo); }
.idades-lista .idade:hover { transform: translateY(-5px); }
.idades-lista .idade:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.selo-nivel { display: flex; flex-direction: column; align-items: center; }
.idades-lista .idade .anos { font-weight: 600; font-size: 15px; background: #fff; padding: 5px 14px; border-radius: 99px; }
.idades-lista .idade .moldura { width: 130px; height: 130px; border-radius: 50%; background: #fff; display: grid; place-items: center; margin: 18px 0 14px; }
.idades-lista .idade .moldura img { max-width: 92px; max-height: 98px; object-fit: contain; }
.idades-lista .idade h3 { font: 400 2rem/1 var(--letra-titulo); margin: 0 0 10px; }
.idades-lista .idade p { font-size: 16.5px; flex: 1; margin: 0 0 18px; }
.idades-lista .idade .escolher { font-weight: 600; font-size: 16px; background: #fff; padding: 9px 18px; border-radius: 99px; }
.idades-lista .idade .escolher::after { content: none; }

/* ---------- menu do telemóvel ---------- */
.menu-botao { display: none; }
.topo nav .so-menu { display: none; }

/* ---------- sobre nós (manifesto na página inicial, história na sua página) ---------- */
#sobre { padding: 96px 0; overflow: hidden; }
#sobre .fita { position: absolute; left: 0; width: 100%; height: 220px; top: 50%; transform: translateY(-50%); z-index: 0; }
#sobre > .envolve { position: relative; z-index: 2; max-width: 980px; background: #fff; border-radius: 40px; padding: 64px 70px 58px; text-align: center; }
.sobre .manifesto { font-family: var(--letra-titulo); font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.3; color: var(--marinho); margin: 0; }
.manifesto img { display: inline-block; height: 1.3em; width: auto; vertical-align: -.32em; transform: rotate(-6deg); }
.manifesto img:nth-of-type(2) { transform: rotate(7deg); }
#sobre .sobre-link { margin: 30px 0 0; }
.sobre .envolve { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
#sobre > .envolve { display: block; }
.sobre p { color: var(--texto-suave); }
.sobre p.destaque { font-size: 1.31rem; color: var(--marinho); font-weight: 500; }
.mural { position: relative; height: 520px; background: var(--agua-claro); border-radius: 40px; }
.mural img { position: absolute; width: auto; }
.mural .m1 { height: 150px; left: 8%; top: 7%; transform: rotate(-8deg); }
.mural .m2 { height: 135px; left: 54%; top: 4%; transform: rotate(6deg); }
.mural .m3 { height: 150px; left: 30%; top: 33%; transform: rotate(3deg); }
.mural .m4 { height: 120px; left: 70%; top: 36%; transform: rotate(-5deg); }
.mural .m5 { height: 140px; left: 6%; top: 62%; transform: rotate(5deg); }
.mural .m6 { height: 125px; left: 46%; top: 66%; transform: rotate(-7deg); }
.mural .m7 { height: 64px; left: 80%; top: 76%; transform: rotate(10deg); }
.mural .legenda { position: absolute; left: 22px; bottom: 14px; font: 400 21px var(--letra-mao); color: var(--texto-suave); }
.mural .nome { position: absolute; font: 400 21px/1 var(--letra-mao); color: var(--marinho); padding: 5px 12px 6px; border-radius: 99px; transform: rotate(-4deg); }
.mural .n1 { left: 3%; top: 38%; background: var(--rosa-medio); }
.mural .n2 { left: 76%; top: 9%; background: var(--amarelo); transform: rotate(5deg); }
.mural .n3 { left: 70%; top: 91%; background: #fff; }
.valores { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 12px; }
.valores li { background: var(--rosa-claro); padding: 14px 20px; font-weight: 500; font-size: 17.5px; border-radius: 18px; }
.valores li:nth-child(2) { background: var(--amarelo-claro); }
.valores li:nth-child(3) { background: var(--agua-claro); }
.assinatura { font-size: 2.1rem; color: var(--marinho); }

/* ---------- preço: um cartão branco grande, com o autocolante das vagas ---------- */
.preco .envolve { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.oferta { background: #fff; border-radius: 40px; padding: 48px 48px 44px; position: relative; }
.oferta .autocolante { position: absolute; right: -26px; top: -40px; }
.oferta .rotulo { display: inline-block; background: var(--agua-claro); color: var(--marinho); font-weight: 600; font-size: 14.5px; letter-spacing: .02em; padding: 7px 15px; border-radius: 99px; text-transform: none; }
.oferta .valor { font-family: var(--letra-titulo); font-size: 5.4rem; line-height: 1; margin: 22px 0 10px; }
.oferta .valor .circulo + small { margin-left: 28px; }
.oferta .valor small { font-family: var(--letra-texto); font-size: 1.15rem; font-weight: 500; color: var(--texto-suave); margin-left: 10px; }
.oferta .periodo { font-weight: 500; margin-bottom: 4px; }
.oferta .depois { color: var(--texto-suave); font-size: 16.5px; }
.oferta ul { padding: 22px 0 0; list-style: none; margin: 22px 0 30px; display: grid; gap: 10px; border-top: 2px dashed var(--marinho-claro); }
.oferta li { padding-left: 32px; position: relative; font-size: 17px; }
.oferta li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%; background: var(--rosa-claro); color: var(--rosa-escuro); font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.oferta .miudo { font-size: 15px; color: var(--texto-suave); margin: 16px 0 0; }
.vagas .ultimas { display: inline-block; margin: 6px 0 0; font: 400 1.3rem var(--letra-titulo); background: var(--amarelo); padding: 6px 16px; border-radius: 99px; }
.vagas .prenda { margin-top: 30px; background: var(--agua-claro); border-radius: var(--raio); padding: 24px; display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: center; }
.vagas .prenda p { margin: 0; font-size: 16.5px; color: var(--texto-suave); }
.vagas .prenda img { height: 76px; width: auto; margin: auto; }

/* ---------- perguntas ---------- */
.perguntas .envolve { max-width: 860px; }
details { background: #fff; margin-bottom: 12px; border-radius: 22px; }
summary { cursor: pointer; list-style: none; padding: 21px 70px 21px 26px; font-weight: 600; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--rosa-claro); color: var(--rosa-escuro); display: grid; place-items: center; font-size: 22px; font-weight: 500; line-height: 1; }
details[open] summary::after { content: "–"; background: var(--rosa-escuro); color: #fff; }
details > div { padding: 0 26px 22px; color: var(--texto-suave); }
details > div p:last-child { margin: 0; }

/* ---------- fecho: um bloco amarelo de cantos redondos, com os bonecos a espreitar ---------- */
.fecho { padding: 30px 0 90px; position: relative; }
.fecho > .envolve { background: var(--amarelo); border-radius: 44px; text-align: center; padding: 76px 32px 0; overflow: hidden; position: relative; }
.fecho h2 { max-width: 760px; margin: 0 auto 14px; font-size: clamp(2.2rem, 4.6vw, 3.5rem); }
.fecho p { color: var(--marinho); margin-bottom: 30px; font-weight: 500; }
.fecho .bonecos { display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 3vw, 36px); margin-top: 52px; }
.fecho .bonecos img { height: clamp(74px, 11vw, 140px); width: auto; margin-bottom: -24px; transform: rotate(-5deg); }
.fecho .bonecos img:nth-child(even) { transform: rotate(5deg); margin-bottom: -38px; }

.rodape { position: relative; background: var(--marinho); color: #fff; margin-top: 210px; padding: 70px 0 64px; font-size: 16px; }
.rodape::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 120px; background: url(img/formas/nuvens-rodape.svg) repeat-x 0 100% / 1400px 120px; pointer-events: none; }
.rodape a { color: #fff; }
.rodape .falta { color: var(--marinho); }
.redes-rodape { display: flex; gap: 12px; margin-top: 18px; }
.redes-rodape a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--agua); color: var(--marinho); }
.redes-rodape a { background: var(--laranja); color: var(--marinho); } /* os dois iguais: laranja, com o ícone azul */
.redes-rodape a:hover { background: var(--rosa); color: var(--marinho); } /* no hover, rosa; o ícone continua azul */
.rodape .envolve { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; } /* 4 colunas alinhadas em cima: marca, Mondikid, legal, contactos */
.rodape img { height: 66px; width: auto; margin-bottom: 14px; }
.rodape .descricao { max-width: 380px; }
.rodape .custo, .contacto .custo { display: block; font-size: 11px; line-height: 1.3; margin-top: 2px; opacity: .9; }
.rodape .livro-reclamacoes img { height: 54px; width: auto; margin: 6px 0 0; } /* o logótipo oficial do pacote LogosLRE (o preto negativo) com a caixa preta tirada: só o branco, sem caixa */
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--amarelo); }
.rodape h3 { font: 400 1.75rem/1.1 var(--letra-titulo); margin-bottom: 14px; color: var(--amarelo); }
.rodape .legal { grid-column: 1 / -1; font-size: 12.5px; color: #fff; padding-top: 22px; margin-top: 10px; border-top: 1px dashed rgba(255, 255, 255, .14); }

/* ---------- contactos e apoio ---------- */
.contactos { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: start; margin-top: 30px; }
.form-contacto { background: var(--agua-claro); padding: 32px 32px 28px; border-radius: var(--raio); }
.form-contacto h2 { font-size: 1.9rem; }
.form-contacto .miudo { margin: 16px 0 0; }
.isco { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.outros-contactos { display: grid; gap: 12px; }
.contacto { display: block; background: var(--rosa-claro); padding: 18px 22px; border-radius: 22px; text-decoration: none; font-size: 17px; color: var(--texto-suave); transition: transform .15s; }
.contacto strong { display: block; color: var(--marinho); font-size: 18px; }
.contacto.azul { background: var(--agua-claro); }
.contacto.verde { background: var(--amarelo-claro); }
.contacto:hover { transform: translateY(-3px); }

/* ---------- mensagens, no painel ---------- */
.mensagens { margin-top: 40px; }
.mensagem { background: #fff; padding: 18px 22px; margin-top: 12px; border-radius: 18px; }
.mensagem.respondida { background: var(--marinho-claro); }
.mensagem h3 { margin-bottom: .2em; }
.mensagem .miudo { margin: 0 0 6px; }
.mensagem .texto-mensagem { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- ecrãs pequenos ---------- */
@media (max-width: 1140px) { .topo .envolve { gap: 24px; } .topo nav { gap: 26px; } }
@media (max-width: 960px) {
  .contactos { grid-template-columns: 1fr; }
  .topo nav { display: none; }
  .topo .entrar { margin-left: auto; }
  .topo nav.conta-nav { display: flex; }
  .menu-botao {
    display: grid; align-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 11px; border-radius: 50%;
    background: #fff; border: 0; cursor: pointer; flex: none;
  }
  .menu-botao i { display: block; height: 2.5px; border-radius: 2px; background: var(--marinho); transition: transform .15s, opacity .15s; }
  .menu-botao[aria-expanded="true"] i:nth-child(2) { transform: translateY(7.5px) rotate(45deg); }
  .menu-botao[aria-expanded="true"] i:nth-child(3) { opacity: 0; }
  .menu-botao[aria-expanded="true"] i:nth-child(4) { transform: translateY(-7.5px) rotate(-45deg); }
  .menu-botao:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
  .topo nav#menu.aberto {
    display: flex; flex-direction: column; gap: 0; position: absolute; left: 12px; right: 12px; top: calc(100% + 6px);
    background: #fff; border-radius: 26px; padding: 8px 24px 22px; font-size: 18px; box-shadow: 0 24px 40px -18px rgba(0, 56, 101, .3);
  }
  .topo nav#menu.aberto a { padding: 12px 0; }
  .topo nav#menu.aberto .so-menu { display: block; margin-top: 8px; padding: 12px 16px; background: var(--papel); border-radius: 16px; }
  .topo nav#menu.aberto .so-menu[data-conta] { display: none; } /* o «Entrar» já está no topo */
  .abertura .envolve, .sobre .envolve, .preco .envolve { grid-template-columns: 1fr; }
  .abertura .envolve { gap: 30px; }
  .montra { max-width: 600px; margin: 0 auto; }
  .promessas ul { grid-template-columns: 1fr 1fr; border-radius: 30px; }
  .promessas li:nth-child(3) { border-left: 0; }
  .grelha, .passos { grid-template-columns: 1fr 1fr; }
  .idades-lista { grid-template-columns: 1fr; gap: 44px; max-width: 420px; margin: 0 auto; }
  .arco { padding: 100px 26px 60px; border-radius: 400px 400px 36px 36px / 170px 170px 36px 36px; }
  #sobre > .envolve { padding: 44px 30px 40px; margin: 0 16px; }
  .mural { height: 440px; order: 2; }
  .rodape .envolve { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 17.5px; }
  .seccao { padding: 76px 0; }
  .topo .envolve { height: 82px; gap: 12px; }
  .topo .logo img { height: 60px; }
  .topo .botao { font-size: 14px; padding: 9px 15px; }
  .abertura { padding: 18px 0 48px; }
  .abertura::before { width: 240px; height: 240px; left: -130px; top: -90px; }
  .abertura .acoes { margin: 26px 0 18px; gap: 18px; }
  .abertura .acoes .botao { flex: 1 1 100%; text-align: center; }
  .promessas { padding: 0 16px; }
  .promessas ul { grid-template-columns: 1fr; gap: 0; padding: 10px 18px; border-radius: 26px; }
  .promessas li { padding: 10px 4px; }
  .promessas li + li { border-left: 0; border-top: 2px dashed var(--marinho-claro); }
  .promessas img { width: 38px; height: 38px; }
  .passos { grid-template-columns: 1fr; gap: 14px; }
  /* os seis cartões do jogo passam a uma fila que se desliza com o dedo */
  .grelha {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 24px;
    margin: 0 -24px; padding: 0 24px 10px; scrollbar-width: none;
  }
  .grelha::-webkit-scrollbar { display: none; }
  .grelha .cartao { scroll-snap-align: start; }
  .deslizar { display: block; margin: 14px 0 0; font-size: 1.3rem; color: var(--texto-suave); }
  .jogo .rabisco.r1 { display: none; }
  .idades .envolve { padding: 0 12px; }
  .arco { padding: 84px 18px 52px; border-radius: 300px 300px 30px 30px / 110px 110px 30px 30px; }
  .arco .rabisco { display: none; }
  #sobre { padding: 80px 0; }
  #sobre .fita { height: 140px; }
  .topo .envolve > .entrar { display: none; }
  .topo .envolve > .botao { margin-left: auto; } /* sem o «Entrar», o botão encosta à direita */
  .topo nav#menu.aberto .so-menu[data-conta] { display: block; }
  .oferta { padding: 40px 24px 30px; border-radius: 30px; }
  .oferta .valor { font-size: 4.2rem; }
  .oferta .autocolante { right: -6px; top: -46px; width: 96px; height: 96px; font-size: 17px; }
  .fecho { padding: 10px 0 64px; }
  .fecho > .envolve { margin: 0 12px; padding: 56px 22px 0; border-radius: 34px; }
  .fecho .bonecos { margin-top: 40px; }
  .fecho .bonecos img:nth-child(n+6) { display: none; }
  .mural .nome { font-size: 19px; }
  .rodape .envolve { grid-template-columns: 1fr; }
}


/* =====================================================================
   Páginas da loja: entrar, encomendar, conta, painel, ajuda e textos legais
   ===================================================================== */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.botao-texto { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; font-weight: 700; text-align: left;
  text-decoration: underline; text-decoration-color: var(--rosa); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.botao.secundario { background: #fff; color: var(--marinho); }
.botao.pequeno { font-size: 15px; padding: 9px 16px; box-shadow: 3px 3px 0 var(--marinho); }
.botao.perigo { background: #B3261E; }
.botao[disabled] { opacity: .55; cursor: wait; transform: none; box-shadow: 4px 4px 0 var(--marinho); }
.rotulo { display: inline-block; background: var(--marinho); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; }
.miudo { font-size: 15px; color: var(--texto-suave); }

.pagina { padding: 48px 0 96px; min-height: 62vh; }
.pagina .estreito { max-width: 840px; }
.pagina h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.pagina .grande { font-size: 1.22rem; color: var(--texto-suave); max-width: 36em; }
.pagina .mao { margin-bottom: 8px; }

.aviso { padding: 14px 18px; margin: 18px 0; font-weight: 600; font-size: 17px; }
.aviso.erro { background: #FDE2E2; color: #8A1C1C; }
.aviso.ok { background: var(--agua-claro); color: var(--marinho); }
.aviso.info { background: var(--agua-claro); }

/* ---------- campos ---------- */
.bloco { border: 0; margin: 0 0 20px; padding: 28px 28px 30px; background: var(--rosa-claro); min-width: 0; }
.bloco.azul { background: var(--agua-claro); }
.bloco.verde { background: var(--amarelo-claro); }
.bloco.cinza { background: var(--marinho-claro); }
.bloco legend { float: left; width: 100%; padding: 0; margin: 0 0 18px; font-weight: 800; font-size: 1.35rem; }
.bloco legend + * { clear: both; }
.bloco legend .numero { font: 700 2.3rem/1 var(--letra-mao); color: var(--rosa); margin-right: 10px; }
.bloco > p { color: var(--texto-suave); font-size: 17.5px; }
.campo { display: block; margin-bottom: 24px; }
.campo:last-child { margin-bottom: 0; }
.campo .titulo { display: block; font-weight: 700; margin-bottom: 4px; }
.campo small { display: block; color: var(--texto-suave); font-size: 15.5px; line-height: 1.45; margin-bottom: 10px; }
.campo em, legend em { font-style: normal; font-weight: 500; color: var(--texto-suave); font-size: .85em; }
.campo .contador { margin: 6px 0 0; text-align: right; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--marinho); background: #fff; border: 0; border-radius: 0;
  padding: 13px 14px; -webkit-appearance: none; appearance: none;
}
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
select { padding-right: 42px; background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23003A47' stroke-width='2.4'/%3E%3C/svg%3E"); }
input:focus-visible, select:focus-visible, textarea:focus-visible, .botao-texto:focus-visible { outline: 3px solid var(--laranja); outline-offset: 0; }
.campo.com-erro input, .campo.com-erro textarea, .campo.com-erro select { background-color: #FFE3E3; }
.erro-campo { display: block; color: #B3261E; font-weight: 700; font-size: 15.5px; margin-top: 8px; }

/* escolhas em fichas: cor, animal, comida */
.fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha { position: relative; display: inline-block; }
.ficha input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ficha span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: #fff; font-weight: 600; font-size: 16.5px; cursor: pointer; }
.ficha input:checked + span { background: var(--marinho); color: #fff; }
.ficha input:focus-visible + span { outline: 3px solid var(--laranja); outline-offset: 2px; }
.campo.com-erro .ficha span { background: #FFE3E3; }
.amostra { width: 18px; height: 18px; display: inline-block; }
.amostra[data-cor=vermelho] { background: #E5484D; }
.amostra[data-cor=laranja] { background: #F28C28; }
.amostra[data-cor=amarelo] { background: #F5C518; }
.amostra[data-cor=verde] { background: #2FB36B; }
.amostra[data-cor=azul-claro] { background: #6EC3EB; }
.amostra[data-cor=azul-escuro] { background: #1F4E9C; }
.amostra[data-cor=roxo] { background: #8A4FBF; }
.amostra[data-cor=rosa] { background: #EC7FB0; }

/* os três níveis */
.niveis-escolha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.opcao-nivel { position: relative; display: block; background: #fff; padding: 18px 16px; cursor: pointer; }
.opcao-nivel input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcao-nivel img { height: 56px; width: auto; margin-bottom: 8px; }
.opcao-nivel b { display: block; font-size: 1.1rem; }
.opcao-nivel .idade { display: inline-block; font-size: 14px; font-weight: 700; background: var(--agua-claro); padding: 2px 8px; margin: 4px 0 8px; }
.opcao-nivel small { display: block; color: var(--texto-suave); font-size: 15px; line-height: 1.45; margin: 0; }
.opcao-nivel.escolhida { background: var(--marinho); color: #fff; }
.opcao-nivel.escolhida small { color: #fff; }
.opcao-nivel.escolhida .idade { background: var(--amarelo); color: var(--marinho); }
.opcao-nivel.focada { outline: 3px solid var(--laranja); outline-offset: 2px; }
.campo.com-erro .opcao-nivel { background: #FFE3E3; }

/* as letras do nome, como no jogo */
.letras-previa { display: flex; flex-wrap: wrap; gap: 8px; min-height: 46px; margin: -8px 0 24px; }
.letras-previa b { width: 42px; height: 42px; display: grid; place-items: center; font: 800 24px var(--letra-texto); color: var(--marinho); background: var(--rosa); transform: rotate(-3deg); }
.letras-previa b:nth-child(3n+2) { background: var(--agua); transform: rotate(4deg) translateY(4px); }
.letras-previa b:nth-child(3n) { background: var(--amarelo); transform: rotate(-1deg) translateY(-3px); }

/* caixas de autorização */
.caixa { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; background: #fff; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; font-size: 17px; line-height: 1.5; }
.caixa input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--rosa); cursor: pointer; }
.caixa.com-erro { background: #FFE3E3; }

/* fotos */
.escolher-fotos { display: inline-block; position: relative; }
.escolher-fotos input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.escolher-fotos input:focus-visible + .botao { outline: 3px solid var(--laranja); outline-offset: 3px; }
.miniaturas { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.miniaturas:empty { display: none; }
.miniaturas li { position: relative; background: #fff; aspect-ratio: 1; }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.miniaturas a { display: block; height: 100%; }
.miniaturas button { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border: 0; background: var(--marinho); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }

/* preço e botão no fim da encomenda */
.resumo { background: #fff; box-shadow: 8px 8px 0 var(--marinho); padding: 28px; display: grid; grid-template-columns: 1fr auto; gap: 14px 28px; align-items: center; margin-top: 30px; }
.resumo .valor { font-family: var(--letra-titulo); font-size: 3rem; font-weight: 700; line-height: 1; margin: 12px 0 6px; }
.resumo .miudo { margin: 0; }
.resumo .estado-envio { grid-column: 1 / -1; font-weight: 700; margin: 0; }
.resumo .estado-envio:empty { display: none; }

/* ---------- entrar ---------- */
.entrar-pagina { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.entrar-caixa { background: #fff; box-shadow: 8px 8px 0 var(--marinho); padding: 32px; max-width: 500px; width: 100%; justify-self: end; }
.entrar-caixa input[type=email], .entrar-caixa input[type=password], .entrar-caixa input[type=text] { background: var(--marinho-claro); }
.entrar-caixa .botao { width: 100%; text-align: center; }
.entrar-caixa .campo { margin-bottom: 18px; }
.separadores { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 26px; }
.separadores button { border: 0; font: 700 16px var(--letra-texto); padding: 13px; background: var(--marinho-claro); color: var(--marinho); cursor: pointer; }
.separadores button[aria-selected=true] { background: var(--marinho); color: #fff; }
.separadores button:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
.entrar-caixa .outras { margin: 18px 0 0; font-size: 16px; text-align: center; }
.mostrar-palavra { display: flex; gap: 8px; align-items: center; font-size: 15.5px; margin-top: 8px; color: var(--texto-suave); cursor: pointer; }

/* ---------- conta ---------- */
.cabeca-conta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 26px; }
.cabeca-conta h1 { margin-bottom: 4px; }
.cabeca-conta .miudo { margin: 0; }
.lista-encomendas { display: grid; gap: 28px; }
.encomenda { background: #fff; box-shadow: 6px 6px 0 var(--marinho); padding: 28px; }
.encomenda-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 18px; }
.encomenda-topo h2 { margin: 0 8px 0 0; font-size: 2rem; }
.etiqueta { font-size: 13.5px; font-weight: 700; padding: 4px 10px; background: var(--marinho-claro); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.etiqueta.por_pagar { background: #FFF1A8; }
.etiqueta.paga { background: var(--agua-claro); }
.etiqueta.em_curso { background: var(--rosa-medio); color: var(--marinho); }
.etiqueta.entregue { background: var(--agua); color: var(--marinho); }
.etiqueta.cancelada { color: var(--texto-suave); }
.etiqueta.fundador { background: var(--marinho); color: #fff; }
.progresso { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.progresso li { background: var(--marinho-claro); padding: 10px 12px; font-size: 15px; font-weight: 700; color: var(--texto-suave); }
.progresso li.feito { background: var(--agua); color: var(--marinho); }
.progresso li.agora { background: var(--amarelo); color: var(--marinho); }
.parte { background: #F1F5F6; padding: 20px 22px; margin-top: 12px; }
.parte.pronto .miudo { margin: 14px 0 0; }
.parte.destaque { background: var(--rosa-claro); }
.parte.pronto { background: var(--amarelo-claro); }
.parte h3 { font-size: 1.08rem; margin-bottom: 8px; }
.parte p { color: var(--texto-suave); font-size: 17px; }
.parte p:last-child { margin-bottom: 0; }
.parte .acoes-linha { margin-top: 14px; }
.respostas { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 12px 0 0; font-size: 17px; }
.respostas dt { font-weight: 700; }
.respostas dd { margin: 0; color: var(--texto-suave); overflow-wrap: anywhere; }
.parte details { background: none; margin: 0; }
.parte summary { padding: 0 40px 0 0; }
.parte summary::after { top: -6px; right: 0; }
.descargas { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.descargas a { display: block; background: #fff; padding: 12px 16px; font-weight: 700; text-decoration: none; }
.descargas a::before { content: "↓"; margin-right: 10px; color: var(--rosa-escuro); }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.conta-rodape { margin-top: 48px; background: var(--marinho-claro); padding: 22px 24px; font-size: 16.5px; }
.conta-rodape p { margin: 0 0 8px; color: var(--texto-suave); }
.conta-rodape p:last-child { margin: 0; }
.vazio { background: var(--agua-claro); padding: 36px 28px; text-align: center; }
.vazio img { height: 90px; width: auto; margin: 0 auto 14px; }

/* ---------- painel da Mondikid ---------- */
.larga .envolve { max-width: 1320px; }
.contagens { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 22px 0 26px; }
.contagens div { background: var(--agua-claro); padding: 16px 18px; }
.contagens div:nth-child(2) { background: var(--rosa-claro); }
.contagens div:nth-child(3) { background: var(--amarelo-claro); }
.contagens div:nth-child(4) { background: #FFF1A8; }
.contagens b { display: block; font-size: 2rem; line-height: 1.1; }
.contagens span { font-size: 15px; font-weight: 600; color: var(--texto-suave); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.filtros button { border: 0; background: var(--marinho-claro); font: 600 14.5px var(--letra-texto); padding: 8px 14px; cursor: pointer; color: var(--marinho); }
.filtros button[aria-pressed=true] { background: var(--marinho); color: #fff; }
.filtros .botao { margin-left: auto; }
.tabela-envolve { overflow-x: auto; }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 16px; }
.tabela th { text-align: left; font-size: 13.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); padding: 6px 12px; white-space: nowrap; }
.tabela td { background: #fff; padding: 12px; vertical-align: middle; }
.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover td { background: var(--agua-claro); }
.tabela tbody tr.escolhida td { background: var(--rosa-claro); }
.tabela .nome { font-weight: 800; font-size: 17px; }
.atraso { background: #FDE2E2; color: #8A1C1C; font-weight: 700; padding: 2px 8px; white-space: nowrap; }
.detalhe { margin-top: 30px; background: #fff; box-shadow: 8px 8px 0 var(--marinho); padding: 28px; scroll-margin-top: 90px; }
.detalhe-topo { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 6px; }
.detalhe-topo h2 { margin: 0 8px 0 0; }
.detalhe-grelha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.detalhe-grelha .parte { margin-top: 0; }
.detalhe .parte input, .detalhe .parte select, .detalhe .parte textarea { background: #fff; }
.detalhe .campo { margin-bottom: 14px; }
.ficheiro-entrega { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; background: #fff; padding: 10px 14px; margin-bottom: 8px; font-size: 16px; }
.ficheiro-entrega input { grid-column: 1 / -1; font-size: 15px; }
.campo-link { margin-top: 18px; }
.detalhe code { font-size: 14px; background: var(--marinho-claro); padding: 1px 6px; }
.caixa .erro-campo { grid-column: 2; margin-top: 0; }
.depois-passos { margin-top: 32px; }
.sim { color: var(--marinho); font-weight: 700; }
.nao { color: #B3261E; font-weight: 700; }

/* ---------- ajuda e textos legais ---------- */
.texto { max-width: 780px; }
.texto h2 { font-size: 1.55rem; margin: 2em 0 .6em; }
.texto h3 { font-size: 1.15rem; margin: 1.5em 0 .5em; }
.texto p, .texto li { color: var(--texto-suave); }
.texto strong { color: var(--marinho); }
.texto ul, .texto ol { padding-left: 1.3em; margin: 0 0 1em; }
.texto li { margin-bottom: .45em; }
.indice { background: var(--agua-claro); padding: 20px 24px; margin: 26px 0 8px; }
.indice ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.indice a { font-weight: 600; text-decoration-color: var(--rosa); text-underline-offset: 4px; }
.caixa-ajuda { background: var(--amarelo-claro); padding: 20px 24px; margin: 14px 0; }
.caixa-ajuda.rosa { background: var(--rosa-claro); }
.caixa-ajuda h3 { margin-top: 0; }
.caixa-ajuda ol, .caixa-ajuda ul { margin-bottom: 0; }
.rascunho { background: #FFF1A8; padding: 14px 18px; font-weight: 600; font-size: 16.5px; margin: 18px 0; }

/* ---------- ecrãs pequenos ---------- */
@media (max-width: 960px) {
  .entrar-pagina { grid-template-columns: 1fr; }
  .entrar-caixa { justify-self: stretch; max-width: none; }
  .entrar-desenhos { display: none; }
  .contagens { grid-template-columns: repeat(3, 1fr); }
  .detalhe-grelha { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .pagina { padding: 28px 0 64px; }
  .topo .conta-nav { gap: 14px; font-size: 14.5px; }
  .topo .conta-nav .so-largo { display: none; }
  .bloco { padding: 22px 18px 24px; margin-left: -8px; margin-right: -8px; }
  .niveis-escolha { grid-template-columns: 1fr; }
  .opcao-nivel { display: grid; grid-template-columns: 56px 1fr; gap: 0 14px; align-items: start; }
  .opcao-nivel img { grid-row: span 3; margin: 0; height: 52px; }
  .opcao-nivel .idade { justify-self: start; }
  .resumo { grid-template-columns: 1fr; padding: 22px; }
  .resumo .botao { width: 100%; text-align: center; }
  .entrar-caixa { padding: 24px 20px; }
  .encomenda { padding: 22px 18px; }
  .progresso { grid-template-columns: 1fr 1fr; }
  .respostas { grid-template-columns: 1fr; gap: 2px; }
  .respostas dd { margin-bottom: 8px; }
  .contagens { grid-template-columns: 1fr 1fr; }
  .detalhe { padding: 20px 16px; }
}

/* ---------- a loja no estilo novo: cantos redondos e sombras suaves ---------- */
.seccao, .abertura { overflow-x: clip; }
.bloco { border-radius: var(--raio); }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=search], select, textarea { border-radius: 14px; }
.ficha span { border-radius: 99px; }
.opcao-nivel { border-radius: 20px; }
.caixa { border-radius: 16px; }
.miniaturas li { border-radius: 14px; overflow: hidden; }
.resumo, .entrar-caixa, .encomenda, .detalhe { border-radius: var(--raio); box-shadow: 0 26px 50px -30px rgba(0, 56, 101, .35); }
.botao.pequeno, .botao[disabled] { box-shadow: none; }
.botao.secundario:hover { background: var(--rosa); color: #fff; }
.botao.perigo:hover { background: #8E1F18; }
.separadores { border-radius: 99px; overflow: hidden; }
.aviso { border-radius: 16px; }
.etiqueta, .rotulo { border-radius: 99px; }
.progresso li { border-radius: 12px; }
.letras-previa b { border-radius: 10px; font: 400 26px var(--letra-titulo); }
.bloco legend { font-weight: 600; }
.bloco legend .numero { font: 400 2.2rem/1 var(--letra-titulo); }
.resumo .valor { font-weight: 400; }
.indice, .caixa-ajuda, .rascunho { border-radius: 22px; }
.texto h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }

/* pontinhos em meio-tom (como no Canva), pequenos e discretos: uma mancha na abertura e a sair da borda da página noutras secções */
.abertura::after, #como::before, .preco::before, .perguntas::before { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.abertura::after { right: -90px; top: 0; width: 560px; height: 560px; background: url(img/formas/meio-tom-mancha.svg) no-repeat 0 0 / 100% 100%; }
#como::before, .preco::before, .perguntas::before { width: 420px; height: 680px; background: url(img/formas/meio-tom-lado.svg) no-repeat 0 0 / 100% 100%; }
#como::before { left: 0; bottom: -120px; }
.preco::before { right: 0; top: 40px; transform: scaleX(-1); }
.perguntas::before { right: 0; top: 50%; transform: translateY(-50%) scaleX(-1); }
#como > .envolve, .preco > .envolve, .perguntas > .envolve { position: relative; z-index: 1; }
@media (max-width: 620px) {
  .abertura::after { width: 320px; height: 320px; top: 10px; }
  #como::before, .preco::before, .perguntas::before { width: 220px; height: 360px; }
}

/* perguntas frequentes às cores, uma cor por pergunta (o + fica branco, com a cor da pergunta) */
.perguntas details:nth-of-type(5n+1) { background: var(--rosa-claro); --tom: var(--rosa-escuro); }
.perguntas details:nth-of-type(5n+2) { background: var(--agua-claro); --tom: #2B7F7C; }
.perguntas details:nth-of-type(5n+3) { background: var(--amarelo-claro); --tom: var(--laranja-escuro); }
.perguntas details:nth-of-type(5n+4) { background: var(--laranja-claro); --tom: var(--laranja-escuro); }
.perguntas details:nth-of-type(5n+5) { background: var(--marinho-claro); --tom: var(--marinho); }
.perguntas summary::after { background: #fff; color: var(--tom); }
.perguntas details[open] summary::after { background: var(--tom); color: #fff; }
.perguntas details > div { color: var(--marinho); }

/* =====================================================================
   VERSÃO B (alternativa, a partir da maquete): as mesmas letras e cores,
   desenhos de giz, botões com moldura em píxeis, secções lisas que alternam
   creme e azul, cantos de 24 px em tudo.
   ===================================================================== */
:root { --raio-b: 24px; }
/* só as cinco cores da marca (azul, laranja, amarelo, rosa, verde-água), mais o branco e o creme do fundo:
   os tons mais escuros, mais claros e intermédios passam a ser a própria cor da marca */
:root {
  --rosa-escuro: var(--rosa); --rosa-medio: var(--rosa); --rosa-claro: var(--rosa);
  --laranja-escuro: var(--laranja); --laranja-medio: var(--laranja); --laranja-claro: var(--laranja);
  --amarelo-claro: var(--amarelo); --agua-claro: var(--agua); --agua-escura: var(--agua);
  --marinho-claro: #fff; --texto-suave: var(--marinho);
}

/* topo sobre o verde-água */
.topo { background: rgba(156, 219, 217, .96); }
/* barra de cima no mesmo verde-água, mais alta e com letra mais fina */
.barra-topo { background: var(--agua); color: var(--marinho); font-size: 15px; font-weight: 400; }
.barra-topo .envolve { height: 54px; }
.barra-topo a { color: var(--marinho); }
.barra-topo a:hover, .barra-topo a[aria-current] { color: var(--rosa-escuro); }
@media (max-width: 620px) {
  .barra-topo { font-size: 13.5px; }
  .barra-topo .envolve { height: 46px; }
}

/* botões simples: cor lisa da marca, letra azul e pontas redondas */
.botao { --fundo: var(--laranja); --letra: #fff; --linha: var(--marinho); background: var(--fundo); color: var(--letra); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; border: 0; border-radius: 99px; box-shadow: 0 4px 0 var(--linha); margin: 0 0 4px; }
/* uma linha por baixo, como volume desenhado; ao carregar, o botão desce para cima dela */
.botao:hover { background: var(--fundo); transform: translateY(-2px); }
.botao:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--linha); }
.botao.rosa { --fundo: var(--rosa); }
.botao.amarelo { --fundo: var(--amarelo); --letra: var(--marinho); }
.botao.secundario { --fundo: #fff; --letra: var(--marinho); }
.botao.perigo { --fundo: #B3261E; --letra: #fff; }
/* ao passar por cima, o fundo muda de cor: azul com letra branca; nas zonas azuis, amarelo */
/* ao passar por cima muda só a cor do botão (laranja passa a rosa e rosa a laranja); a linha azul por baixo fica.
   Onde o fundo da zona já é dessa cor, passa a amarelo. */
.botao:hover { --fundo: var(--rosa); }
.botao.rosa:hover, .b-niveis .idade:nth-child(1):hover .escolher { --fundo: var(--laranja); }
.b-niveis .idade:nth-child(2):hover .escolher, .b-niveis .idade:nth-child(3):hover .escolher, .b-fecho .botao:hover { --fundo: var(--amarelo); --letra: var(--marinho); }
.botao.perigo:hover { --fundo: #8E1F18; }
/* nas zonas azuis a linha azul não se via: lá é amarela */
.b-preco .botao, .b-jogo .botao { --linha: var(--amarelo); }
.botao { transition: transform .15s, background-color .15s, color .15s; }

/* rótulos à mão por cima dos títulos */
.b-rotulo { font-family: var(--letra-mao); color: var(--laranja-escuro); font-size: 1.45rem; line-height: 1.1; margin: 0 0 6px; }
.b-cabeca { text-align: center; max-width: 900px; margin: 0 auto 48px; }
.b-cabeca h2 { text-wrap: balance; }
.b-cabeca h2 { margin: 0; }
.b-cabeca h2 + .b-rotulo { margin: 6px 0 0; }
.b-cabeca.lado { max-width: none; text-align: left; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.b-cabeca.lado h2 { max-width: 600px; }
.b-cabeca.lado p { max-width: 320px; margin: 0 0 6px; color: var(--texto-suave); }

/* ---------- abertura ---------- */
.b-abertura { position: relative; overflow: hidden; background: var(--agua); padding: 76px 0 190px; }
.b-abertura::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 150px; background: url(img/formas/nuvens-creme.svg) repeat-x 0 100% / 1600px 150px; }
.b-abertura .envolve { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.02fr; gap: 56px; align-items: center; }
.b-abertura h1 { font-size: clamp(2.8rem, 5.6vw, 4.7rem); margin: 0 0 22px; }
.b-abertura h1 .rosa { color: var(--rosa-escuro); }
.b-abertura h1 + .b-rotulo { margin: -8px 0 18px; }
.b-abertura .preco-curto { display: flex; align-items: center; gap: 12px; margin: 0; font-weight: 600; color: var(--marinho); }
.b-abertura .preco-curto s { font-size: 1.3rem; color: var(--texto-suave); text-decoration-thickness: 2px; }
.b-abertura .preco-curto strong { font-size: 1.9rem; line-height: 1; background: var(--amarelo); padding: 8px 18px; border-radius: 99px; }
.b-abertura .grande { font-size: 1.22rem; max-width: 470px; color: var(--marinho); }
.b-abertura .acoes { margin: 30px 0 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 16px 26px; } /* o preço ao lado do botão */
.b-fio { position: absolute; right: 1.6%; top: -40px; width: 54px; z-index: 1; }
.b-montra { position: relative; aspect-ratio: 1.2; } /* sem fundo: só o telemóvel com o vídeo e três desenhos da Lia à volta */
/* o vídeo do jogo dentro de um telemóvel desenhado à mão: o desenho fica por cima, com o ecrã aberto */
.b-montra .aparelho { position: absolute; left: -2%; top: 17%; width: 104%; aspect-ratio: 1000 / 531; padding: 0; background: none; border-radius: 0; box-shadow: none; transform: rotate(-4deg); filter: drop-shadow(0 18px 16px rgba(0, 56, 101, .28)); }
.b-montra .aparelho::after { content: ""; position: absolute; inset: 0; background: url(img/formas/telemovel-desenhado.svg) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.b-montra .ecra { position: absolute; left: 6.2%; right: 6.2%; top: 10.17%; bottom: 8.78%; aspect-ratio: auto; border-radius: 4%/8%; overflow: hidden; background: var(--papel); }
.b-montra .ecra img, .b-montra .ecra video { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-montra .azulejo { position: absolute; width: 23%; aspect-ratio: 1; background: #fff; border-radius: 22px; display: grid; place-items: center; box-shadow: 0 14px 26px -16px rgba(0, 56, 101, .45); z-index: 2; }
.b-montra .azulejo img { position: absolute; inset: 11%; width: 78%; height: 78%; object-fit: contain; } /* fora da medida da caixa: um desenho alto já não a estica */
.b-montra .a1 { left: 3%; top: -7%; transform: rotate(-7deg); }
.b-montra .a2 { right: -6%; top: 6%; transform: rotate(6deg); }
.b-montra .a3 { right: 10%; bottom: 0; transform: rotate(-4deg); }

/* promessas numa faixa amarela que pousa na nuvem */
.b-promessas { position: relative; z-index: 3; margin-top: 0; padding: 18px 24px 0; }
.b-promessas ul { max-width: var(--largura); margin: 0 auto; list-style: none; display: flex; justify-content: space-around; gap: 16px; background: var(--amarelo); border-radius: 99px; padding: 18px 30px; font-weight: 600; font-size: 17.5px; }
.b-promessas li { display: flex; align-items: center; gap: 10px; }
.b-promessas li::before { content: ""; flex: none; width: 30px; height: 30px; background: url(img/rabiscos/estrela-laranja.svg) center / contain no-repeat; }
.b-promessas li:nth-child(even)::before { background-image: url(img/rabiscos/estrela-rosa.svg); transform: rotate(12deg); }

/* ---------- três pormenores do jogo da Lia, em vídeo, numa faixa verde-água ---------- */
.b-pormenores { background: var(--agua); }
.b-pormenores .envolve { max-width: 1480px; } /* os vídeos ocupam quase a largura toda */
.b-pormenores .b-rotulo { color: var(--laranja); }
.b-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.b-video { margin: 0; }
.b-video .aparelho { position: relative; inset: auto; padding: 0; background: none; border-radius: 0; box-shadow: none; aspect-ratio: 1000 / 531; filter: drop-shadow(0 14px 12px rgba(0, 56, 101, .25)); }
.b-video:nth-child(odd) .aparelho { transform: rotate(-2deg); }
.b-video:nth-child(even) .aparelho { transform: rotate(2deg); }
.b-video .aparelho::after { content: ""; position: absolute; inset: 0; background: url(img/formas/telemovel-desenhado.svg) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.b-video .ecra { position: absolute; left: 6.2%; right: 6.2%; top: 10.17%; bottom: 8.78%; border-radius: 4%/8%; overflow: hidden; background: var(--papel); }
.b-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-video figcaption { margin-top: 24px; text-align: center; color: var(--marinho); }
.b-video figcaption strong { display: block; font: 400 1.9rem/1.1 var(--letra-titulo); }
@media (max-width: 900px) { .b-videos { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; gap: 44px; } }

/* ---------- como funciona ---------- */
#como::before { content: none; }
.b-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.b-passo { position: relative; background: #fff; border-radius: var(--raio-b); padding: 28px 30px 32px; box-shadow: 0 14px 30px -22px rgba(0, 56, 101, .35); }
.b-passo img { height: 96px; width: auto; margin-bottom: 16px; }
.b-passo .numero { position: absolute; right: 28px; top: 16px; font: 400 3.6rem/1 var(--letra-mao); -webkit-text-stroke: 3px currentColor; paint-order: stroke fill; color: var(--laranja); }
.b-passo:nth-child(2) .numero { color: var(--marinho); }
.b-passo:nth-child(3) .numero { color: var(--rosa); }
.b-passo h3 { font: 400 2rem/1.1 var(--letra-titulo); margin: 0 0 10px; }
.b-passo p { margin: 0; color: var(--texto-suave); font-size: 16.5px; }

/* ---------- o jogo: cromos no azul ---------- */
.b-jogo { background: var(--marinho); color: #fff; padding: 96px 0 104px; }
.b-jogo .envolve { position: relative; }
.b-jogo .b-rotulo { color: var(--amarelo); }
.b-jogo h2 { color: #fff; }
/* enfeites à beira da página: o conjunto da estrela em cima à direita e o fio verde-água a passar para a secção de baixo */
.b-enfeite { position: absolute; right: -54px; top: 26px; width: 210px; z-index: 1; pointer-events: none; }
.b-fio-agua { position: absolute; left: -40px; bottom: -190px; width: 130px; z-index: 3; pointer-events: none; }
.b-cromos { gap: 34px 30px; }
.b-cromo { background: var(--papel); color: var(--marinho); border-radius: 18px; padding: 12px 12px 22px; box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .5); transform: rotate(-1.3deg); transition: transform .2s; }
.b-cromo:nth-child(even) { transform: rotate(1.3deg); }
.b-cromo:hover { transform: rotate(0) translateY(-4px); }
.b-cromo.dourado { box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .5); }
.b-cromo-img { position: relative; aspect-ratio: 16 / 9.4; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; background: var(--agua); }
.b-cromo:nth-child(2) .b-cromo-img { background: var(--amarelo); }
.b-cromo:nth-child(3) .b-cromo-img, .b-cromo:nth-child(4) .b-cromo-img { background: var(--rosa); }
.b-cromo:nth-child(5) .b-cromo-img { background: var(--laranja); }
.b-cromo:nth-child(6) .b-cromo-img { background: var(--agua); }
.b-cromo-img img { height: 76%; width: auto; max-width: 80%; object-fit: contain; transition: transform .25s; }
.b-cromo:hover .b-cromo-img img { transform: rotate(-4deg) scale(1.05); }
.b-num { position: absolute; left: 10px; top: 10px; background: #fff; border-radius: 6px; padding: 4px 8px; font: 700 12px/1 var(--letra-texto); letter-spacing: .04em; color: var(--marinho); }
.b-cromo h3 { font: 400 1.8rem/1.1 var(--letra-titulo); margin: 0 8px 8px; }
.b-cromo p { margin: 0 8px; font-size: 15.5px; color: var(--texto-suave); }
.b-cromo .ligacao { color: var(--marinho); }
/* «Como tudo começou»: só o texto, cor-de-rosa */
.sobre-link .ligacao { color: var(--rosa-escuro); font-size: 1.15rem; text-decoration: none; }
.sobre-link .ligacao:hover { color: var(--laranja); } /* o rosa-escuro passou a ser o rosa: o hover tem de ser outra cor */
.b-jogo .deslizar { color: #fff; }

/* ---------- idades: uma caixa, três colunas de cor ---------- */
.b-idades { padding-bottom: 50px; }
.b-niveis { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 28px; overflow: hidden; }
.b-niveis .idade { display: flex; flex-direction: column; padding: 36px 30px 30px; text-decoration: none; color: var(--marinho); background: var(--amarelo); }
.b-niveis .idade:nth-child(2) { background: var(--rosa); }
.b-niveis .idade:nth-child(3) { background: var(--laranja); }
/* as idades: só o texto, maior, sem pílula */
.b-niveis .anos { align-self: flex-start; font-weight: 700; font-size: 1.35rem; line-height: 1.2; color: var(--marinho); }
.b-niveis h3 { font: 400 clamp(2.4rem, 3.6vw, 3.1rem)/1 var(--letra-titulo); margin: 8px 0 14px; }
.b-niveis p { margin: 0 0 22px; font-size: 16.5px; }
.b-niveis img { width: 170px; height: 170px; object-fit: contain; padding: 22px; border-radius: 50%; background: #fff; align-self: center; margin: auto 0 22px; transition: transform .25s; }
.b-niveis .idade:hover img { transform: rotate(-5deg) scale(1.05); }
/* «Escolher» com o mesmo botão do resto do site (o cartão inteiro é a ligação) */
.b-niveis .escolher { align-self: flex-start; padding: 12px 24px; font-size: 16px; }
.b-niveis .escolher::after { content: none; }
.b-niveis .idade:hover .escolher { transform: translateY(-2px); }
.b-niveis .idade:focus-visible { outline: 3px solid var(--laranja); outline-offset: -6px; }

/* ---------- a nossa história, numa frase grande ---------- */
#sobre.b-sobre { padding: 70px 0 90px; overflow: visible; }
#sobre.b-sobre > .envolve { background: none; padding: 0 24px; max-width: 1000px; border-radius: 0; }
.b-manifesto { font: 400 clamp(1.7rem, 3vw, 2.5rem)/1.5 var(--letra-titulo); text-align: center; margin: 0; }
.b-manifesto .mini { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; background: var(--papel); border-radius: 12px; box-shadow: 0 8px 16px -10px rgba(0, 56, 101, .45); vertical-align: middle; margin: 0 .06em; transform: rotate(-3deg); }
.b-manifesto .mini img { width: 82%; height: 82%; object-fit: contain; }
.sublinha { background: linear-gradient(transparent 62%, var(--amarelo) 62% 92%, transparent 92%); color: inherit; padding: 0 .08em; }
.sublinha.agua { background: linear-gradient(transparent 62%, var(--agua) 62% 92%, transparent 92%); }
.b-sobre .sobre-link { text-align: center; margin: 28px 0 0; }

/* ---------- preço, no azul ---------- */
.b-preco { background: var(--marinho); color: #fff; padding: 126px 0 90px; } /* em cima, o mesmo espaço que fica por baixo da lista */
.b-preco .envolve { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
/* as duas colunas acabam à mesma altura: a lista estica até ao fundo do botão Encomendar */
.b-oferta { display: flex; flex-direction: column; }
.b-oferta .b-lista { flex: 1; display: flex; flex-direction: column; justify-content: space-between; margin: 0; }
.b-oferta .b-lista li:last-child { padding-bottom: 4px; }
.b-coluna { align-content: start; }
.b-oferta .b-rotulo { color: var(--amarelo); }
.b-valor + .b-rotulo { font-size: 1.7rem; margin: 0 0 6px; }
.b-valor { font: 400 clamp(5rem, 9vw, 7.4rem)/.9 var(--letra-titulo); margin: 0 0 12px; color: #fff; }
.b-depois { font: 400 1.5rem/1.2 var(--letra-mao); color: var(--agua); margin: 0 0 24px; }
.b-lista { list-style: none; padding: 0; margin: 0 0 32px; }
.b-lista li { padding: 10px 0 10px 32px; background: url(img/formas/coracao-pixeis.svg) no-repeat 0 14px / 18px 16px; font-size: 16.5px; }
.b-preco .botao.amarelo { --moldura: var(--laranja); --sombra: var(--laranja-escuro); }
.b-oferta .miudo { color: #C9D6E3; font-size: 14.5px; margin: 20px 0 0; }
.b-vagas { position: relative; overflow: hidden; background: var(--papel); color: var(--marinho); border-radius: 28px; padding: 44px 40px 40px; }
.b-vagas::before { content: ""; position: absolute; right: 0; top: 0; width: 240px; height: 400px; background: url(img/formas/meio-tom-lado.svg) no-repeat 0 0 / 100% 100%; transform: scaleX(-1); }
.b-vagas > * { position: relative; }
/* a coluna da direita: as vagas e a prenda em duas caixas separadas */
.b-coluna { display: grid; gap: 24px; }
.b-coluna .b-encomendar { justify-self: start; margin-top: 6px; }
.b-vagas h2 { margin: 0 0 16px; }
.b-prenda { display: flex; gap: 22px; align-items: center; background: var(--laranja); color: var(--marinho); border-radius: 28px; padding: 28px 34px; }
.b-prenda img { width: 92px; height: 92px; flex: none; object-fit: contain; padding: 14px; background: #fff; border-radius: 50%; } /* o presente é laranja: num círculo branco, como os desenhos dos níveis */
.b-prenda p { margin: 0; font-size: 16px; }

/* ---------- perguntas: cores fortes, como na maquete ---------- */
.b-perguntas details:nth-of-type(6n+1), .b-perguntas details:nth-of-type(6n+6) { --cor: var(--rosa); color: var(--marinho); --tom: var(--rosa-escuro); }
.b-perguntas details:nth-of-type(6n+2), .b-perguntas details:nth-of-type(6n+5) { --cor: var(--agua); color: var(--marinho); --tom: var(--marinho); }
.b-perguntas details:nth-of-type(6n+3) { --cor: var(--amarelo); color: var(--marinho); --tom: var(--laranja-escuro); }
.b-perguntas details:nth-of-type(6n+4) { --cor: var(--laranja); color: var(--marinho); --tom: var(--laranja-escuro); }
.b-perguntas details > div { color: inherit; }
.b-perguntas details:nth-of-type(n) { --tom: var(--marinho); background: var(--papel); border: 3px solid var(--cor); overflow: hidden; } /* :nth-of-type(n) para ganhar às cores antigas de .perguntas */
/* a pergunta fica na cor; a resposta, aberta, fica no bege da página, com a moldura na mesma cor */
.b-perguntas summary { background: var(--cor); }
.b-perguntas details > div { padding-top: 18px; }
.b-perguntas summary::after { background: #fff; color: var(--marinho); }
.b-perguntas details[open] summary::after { background: var(--marinho); color: #fff; }

/* ---------- fecho: caixa laranja e os desenhos em quadrados ---------- */
.b-fecho { padding: 40px 0 30px; }
.b-fecho-caixa { display: grid; grid-template-columns: 1.2fr 1fr; border-radius: 28px; overflow: hidden; background: var(--laranja); }
.b-fecho-texto { padding: 60px 52px; color: #fff; align-self: center; }
.b-fecho-texto h2 { color: #fff; margin: 0 0 16px; }
.b-fecho-texto p { margin: 0 0 30px; }
.b-fecho-grelha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(170px, 1fr)); }
.b-fecho-grelha span { display: grid; place-items: center; min-width: 0; background: var(--amarelo); }
.b-fecho-grelha span:nth-child(1) { background: var(--agua); }
.b-fecho-grelha span:nth-child(2) { background: var(--rosa); }
.b-fecho-grelha span:nth-child(3) { background: var(--amarelo); }
.b-fecho-grelha span:nth-child(4) { background: var(--amarelo); }
.b-fecho-grelha span:nth-child(5) { background: var(--agua); }
.b-fecho-grelha span:nth-child(6) { background: var(--rosa); }
.b-fecho-grelha img { width: 64%; max-height: 120px; object-fit: contain; transition: transform .25s; }
.b-fecho-grelha span:hover img { transform: rotate(-6deg) scale(1.08); }

/* ---------- ecrãs mais pequenos ---------- */
@media (max-width: 960px) {
  .b-abertura .envolve { grid-template-columns: 1fr; gap: 40px; }
  .b-montra { width: 100%; max-width: 560px; margin: 0 auto; }
  .b-promessas ul { display: grid; grid-template-columns: 1fr 1fr; border-radius: 26px; }
  .b-passos { grid-template-columns: 1fr; }
  .b-cabeca.lado { flex-direction: column; align-items: flex-start; gap: 10px; }
  .b-niveis { grid-template-columns: 1fr; }
  .b-preco .envolve { grid-template-columns: 1fr; gap: 40px; }
  .b-fecho-caixa { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .b-abertura { padding: 44px 0 130px; }
  .rodape::before { height: 80px; background-size: 940px 80px; }
  .rodape { margin-top: 140px; padding: 50px 0 44px; }
  .b-abertura::after { height: 92px; background-size: 980px 92px; }
  .b-fio { display: none; }
  .b-enfeite { width: 100px; right: -30px; top: -34px; }
  .b-fio-agua { width: 80px; left: -26px; bottom: -120px; }
  .b-promessas ul { grid-template-columns: 1fr; padding: 14px 24px; gap: 8px; }
  .b-cabeca { margin-bottom: 34px; }
  .b-passo { padding: 24px 22px 26px; }
  .b-vagas { padding: 34px 24px; }
  .b-fecho-texto { padding: 42px 26px; }
  .b-niveis img { width: 140px; height: 140px; }
}

/* botão do WhatsApp: fixo no canto inferior direito, por cima do site (nas cores da marca, com a linha azul dos botões) */
.whatsapp { position: fixed; right: 22px; bottom: 22px; z-index: 50; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--rosa); color: #fff; box-shadow: 0 4px 0 var(--marinho), 0 10px 22px -8px rgba(0, 56, 101, .5); transition: transform .15s, background-color .15s; }
.whatsapp:hover { background: var(--laranja); transform: translateY(-2px); }
.whatsapp:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--marinho); }
.whatsapp:focus-visible { outline: 3px solid var(--laranja); outline-offset: 4px; }
@media (max-width: 620px) { .whatsapp { right: 16px; bottom: 16px; width: 54px; height: 54px; } }
@media print { .whatsapp { display: none; } }

/* ---------- as outras páginas: o título numa faixa verde-água com nuvens, como a abertura da página principal ---------- */
.pagina.com-faixa { padding-top: 0; }
.b-faixa { position: relative; overflow: hidden; background: var(--agua); text-align: center; padding: 64px 0 132px; margin-bottom: 28px; }
.b-faixa::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 110px; background: url(img/formas/nuvens-creme.svg) repeat-x 0 100% / 1400px 110px; }
.b-faixa .envolve { position: relative; z-index: 1; max-width: 860px; }
.b-faixa h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); margin: 0; }
.b-faixa .b-rotulo { margin: 8px 0 0; }
.b-faixa .grande, .b-faixa .miudo { margin: 18px auto 0; max-width: 36em; color: var(--marinho); }
@media (max-width: 620px) {
  .b-faixa { padding: 40px 0 96px; }
  .b-faixa::after { height: 70px; background-size: 900px 70px; }
}
/* os campos dos cartões brancos (entrar) ficam no bege, para se verem */
.entrar-caixa input[type=email], .entrar-caixa input[type=password], .entrar-caixa input[type=text] { background: var(--papel); }

/* ---------- o mesmo espaço em cima e em baixo de todas as secções da página principal ----------
   --esp entre o conteúdo e a beira da secção; entre duas secções beges seguidas, metade de cada lado */
main { --esp: 120px; }
@media (max-width: 1000px) { main { --esp: 92px; } }
@media (max-width: 620px) { main { --esp: 66px; } }
.seccao.b-como { padding: calc(var(--esp) * .8) 0 var(--esp); }
.seccao.b-jogo, .seccao.b-preco, .seccao.b-pormenores { padding: var(--esp) 0; }
.seccao.b-idades { padding: var(--esp) 0 calc(var(--esp) / 2); }
#sobre.b-sobre { padding: calc(var(--esp) / 2) 0 var(--esp); }
.seccao.b-perguntas { padding: var(--esp) 0 calc(var(--esp) / 2); }
.b-fecho { padding-top: calc(var(--esp) / 2); }

/* tablet (iPad): os três níveis lado a lado, mais compactos */
@media (min-width: 701px) and (max-width: 1000px) {
  .b-niveis { grid-template-columns: repeat(3, 1fr); }
  .b-niveis .idade { padding: 28px 20px 24px; }
  .b-niveis h3 { font-size: 2.1rem; }
  .b-niveis img { width: 128px; height: 128px; padding: 16px; }
  .b-niveis p { font-size: 15.5px; }
}
/* telemóvel: o telemóvel da abertura e os desenhos à volta cabem no ecrã */
@media (max-width: 620px) {
  .b-montra .aparelho { left: 3%; width: 94%; }
  .b-montra .a1 { left: 0; top: -2%; }
  .b-montra .a2 { right: 0; }
  .b-montra .azulejo { width: 22%; border-radius: 16px; }
}

/* ---------- páginas de conta com o topo e o rodapé da página principal ---------- */
/* entrar: fundo verde-água, como a abertura */
body.fundo-agua { background: var(--agua); }
/* caixa de desenhos: 3 x 3 quadrados em rosa, amarelo e bege (o verde-água desaparecia no fundo) */
.entrar-desenhos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); width: 100%; align-self: stretch; contain: size; /* a mesma altura da caixa de entrar: estica até ela e não a empurra */ border-radius: 28px; overflow: hidden; box-shadow: 0 26px 50px -30px rgba(0, 56, 101, .35); }
.entrar-desenhos span { display: grid; place-items: center; min-width: 0; min-height: 0; background: var(--papel); }
.entrar-desenhos span:nth-child(1), .entrar-desenhos span:nth-child(5), .entrar-desenhos span:nth-child(9) { background: var(--rosa); }
.entrar-desenhos span:nth-child(2), .entrar-desenhos span:nth-child(6), .entrar-desenhos span:nth-child(7) { background: var(--amarelo); }
.entrar-desenhos img { width: 64%; height: 64%; object-fit: contain; transition: transform .25s; }
.entrar-desenhos span:hover img { transform: rotate(-6deg) scale(1.08); }
/* «Esqueci-me da palavra-passe» e «Voltar a entrar»: pequeninos, uma ligação simples */
.entrar-caixa .outras { margin-top: 16px; font-size: 14.5px; }
.entrar-caixa .outras .botao-texto { font-weight: 500; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.entrar-caixa .outras .botao-texto:hover { color: var(--rosa); }
/* conta: o «Painel» e o «Sair» por baixo do email */
.conta-acoes { display: flex; gap: 20px; margin: 10px 0 0; font-size: 15.5px; }
.conta-acoes a, .conta-acoes .botao-texto { font-weight: 600; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* obrigado: a ligação para a ajuda por baixo do botão */
.ajuda-linha { text-align: center; margin-top: 18px; font-size: 16px; }
/* obrigado: os números dos passos todos a azul-marinho (o rosa desaparecia no cartão rosa) e o botão ao centro */
.passo .numero, .passo:nth-child(2) .numero, .passo:nth-child(3) .numero { background: var(--marinho); color: #fff; }
.acoes-linha.depois-passos { justify-content: center; }
/* entrar no iPad e no telemóvel: só uma fila de 3 desenhos por cima da caixa, para a caixa não descer muito */
@media (max-width: 960px) {
  .entrar-desenhos { max-width: none; aspect-ratio: 3 / 1; contain: none; align-self: auto; grid-template-rows: minmax(0, 1fr); border-radius: 22px; }
  .entrar-desenhos span:nth-child(n+4) { display: none; }
}

/* história: o telemóvel com o vídeo do jogo da Lia e, por baixo, alguns desenhos dela.
   No computador acompanha a leitura (fica preso ao descer a página), porque o texto é mais alto. */
.sobre .envolve { align-items: start; }
.historia-lia { position: sticky; top: 140px; padding-top: 12px; }
.historia-lia .aparelho { position: relative; inset: auto; padding: 0; background: none; border-radius: 0; box-shadow: none; aspect-ratio: 1000 / 531; transform: rotate(-3deg); filter: drop-shadow(0 18px 16px rgba(0, 56, 101, .28)); }
.historia-lia .aparelho::after { content: ""; position: absolute; inset: 0; background: url(img/formas/telemovel-desenhado.svg) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.historia-lia .ecra { position: absolute; left: 6.2%; right: 6.2%; top: 10.17%; bottom: 8.78%; aspect-ratio: auto; border-radius: 4%/8%; overflow: hidden; background: var(--papel); }
.historia-desenhos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 46px; }
.historia-desenhos span { position: relative; aspect-ratio: 1; background: #fff; border-radius: 18px; box-shadow: 0 14px 26px -16px rgba(0, 56, 101, .45); }
.historia-desenhos img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; }
.historia-desenhos span:nth-child(odd) { transform: rotate(-5deg); }
.historia-desenhos span:nth-child(even) { transform: rotate(4deg) translateY(8px); }
.historia-lia .b-rotulo { text-align: center; margin: 26px 0 0; }
@media (max-width: 960px) {
  .historia-lia { position: static; width: 100%; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 620px) {
  .historia-desenhos { gap: 12px; margin-top: 34px; }
  .historia-desenhos span { border-radius: 14px; }
}
.historia-lia .b-rotulo { color: var(--laranja); }

/* páginas interiores: mais espaço entre as nuvens da faixa do título e o conteúdo */
.b-faixa { margin-bottom: 76px; }
.b-faixa:has(+ .seccao) { margin-bottom: 0; } /* a história já tem o espaço da secção */
@media (max-width: 1000px) { .b-faixa { margin-bottom: 56px; } }
@media (max-width: 620px) { .b-faixa { margin-bottom: 40px; } }

/* contactos: telefone, email e redes, cada um com o ícone num círculo branco */
.form-contacto h2 { font-size: clamp(2.1rem, 3.2vw, 2.6rem); line-height: 1.15; }
.outros-contactos { display: grid; gap: 16px; }
.contacto { display: flex; align-items: center; gap: 18px; padding: 18px 22px; color: var(--marinho); }
.contacto .icone { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--marinho); box-shadow: 0 3px 0 var(--marinho); transition: transform .2s; }
.contacto:hover .icone { transform: rotate(-8deg) scale(1.06); }
.contacto .texto { display: block; font-size: 17px; line-height: 1.35; }
.contacto .texto strong { display: block; font-size: 18px; }
.contacto.c-rosa { background: var(--rosa); }
.contacto.c-amarelo { background: var(--amarelo); }
.contacto.c-agua { background: var(--agua); }
.contacto.c-laranja { background: var(--laranja); }

/* contactos: a caixa do formulário a amarelo (a faixa do título já é verde-água) e os campos a bege */
.form-contacto { background: var(--amarelo); }
.form-contacto input[type=text], .form-contacto input[type=email], .form-contacto select, .form-contacto textarea { background-color: var(--papel); }
.form-contacto textarea { min-height: 0; }
.aceitar { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; margin: 0 0 22px; cursor: pointer; }
.aceitar input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--marinho); }
/* ícones mais pequenos, em círculo bege */
.contacto { gap: 16px; padding: 16px 22px; }
.contacto .icone { width: 44px; height: 44px; background: var(--papel); box-shadow: 0 2px 0 var(--marinho); }
.contacto .icone svg { width: 20px; height: 20px; }
/* desenhos no espaço por baixo dos cartões */
.contacto-desenho { display: flex; justify-content: center; align-items: flex-end; gap: 6px; padding-top: 26px; }
.contacto-desenho img { width: auto; }
.contacto-desenho .d1 { height: 190px; transform: rotate(-4deg); }
.contacto-desenho .d2 { height: 150px; transform: rotate(8deg); margin-bottom: 40px; }
@media (max-width: 960px) { .contacto-desenho { display: none; } }

/* entrar: mais espaço entre o topo e as caixas */
body.fundo-agua .pagina { padding-top: 96px; }
@media (max-width: 960px) { body.fundo-agua .pagina { padding-top: 48px; } }
/* como funciona: os desenhos cabem todos na mesma caixa (um desenho largo, como a máquina, já não fica maior) */
.b-passo img { width: 100px; height: 92px; object-fit: contain; object-position: left center; }
/* os cromos do jogo: o desenho fica dentro da caixa da imagem, sem a esticar (as caixas ficam todas do mesmo tamanho) */
.b-cromo-img img { position: absolute; left: 10%; top: 12%; width: 80%; height: 76%; max-width: none; object-fit: contain; }
/* sem palavras sozinhas na última linha dos títulos e dos textos curtos */
h1, h2, h3, .b-rotulo { text-wrap: balance; }
p, li, .b-cromo p { text-wrap: pretty; }
/* a prenda agora é amarela: já se vê no laranja, sem o círculo branco */
.b-prenda img { width: 74px; height: 96px; padding: 0; background: none; border-radius: 0; }
.rodape .redes-rodape a, .rodape .redes-rodape a:hover { color: var(--marinho); } /* o ícone fica sempre azul, também no hover */

/* divisões entre secções: uma onda leve em vez da linha reta.
   A onda é desenhada dentro da secção de cor, na cor da secção vizinha (bege em cima e em baixo; verde-água por baixo do preço). */
.seccao.b-jogo, .seccao.b-preco, .seccao.b-pormenores { position: relative; }
.seccao.b-jogo::before, .seccao.b-jogo::after, .seccao.b-preco::before, .seccao.b-preco::after, .seccao.b-pormenores::after {
  content: ""; position: absolute; left: 0; right: 0; height: 36px; pointer-events: none; background: var(--papel);
  -webkit-mask: url(img/formas/onda-borda.svg) repeat-x 0 0 / 1400px 36px; mask: url(img/formas/onda-borda.svg) repeat-x 0 0 / 1400px 36px;
}
.seccao.b-jogo::before, .seccao.b-preco::before { top: -1px; }
.seccao.b-jogo::after, .seccao.b-preco::after, .seccao.b-pormenores::after { bottom: -1px; transform: scaleY(-1); }
.seccao.b-preco::after { background: var(--agua); -webkit-mask-position: 350px 0; mask-position: 350px 0; } /* por baixo do preço vem a faixa dos vídeos */
.seccao.b-jogo::after { -webkit-mask-position: 700px 0; mask-position: 700px 0; }
@media (max-width: 620px) {
  .seccao.b-jogo::before, .seccao.b-jogo::after, .seccao.b-preco::before, .seccao.b-preco::after, .seccao.b-pormenores::after {
    height: 22px; -webkit-mask-size: 860px 22px; mask-size: 860px 22px;
  }
}
/* rodapé alinhado: os títulos das colunas acabam onde acaba o logótipo, e a primeira ligação de cada coluna fica na linha da descrição */
@media (min-width: 961px) {
  .rodape .envolve > div:not(:first-child) > h3:first-child { margin-top: 35px; }
}

/* animações de entrada (js/animar.js): só desenhos, telemóveis e caixas de imagens, nunca textos.
   Usa translate e scale à parte, para não estragar as rotações que os desenhos já têm. */
.por-ver { opacity: 0; translate: 0 22px; scale: .92; }
.por-ver.visto { opacity: 1; translate: 0 0; scale: 1;
  transition: opacity .6s ease var(--atraso, 0ms), translate .75s cubic-bezier(.2, .9, .3, 1.25) var(--atraso, 0ms), scale .75s cubic-bezier(.2, .9, .3, 1.25) var(--atraso, 0ms), transform .25s ease; }
@media (prefers-reduced-motion: reduce) { .por-ver { opacity: 1; translate: none; scale: none; } }

/* «Esqueci-me da palavra-passe» e «Voltar a entrar»: pequeninos e sem linha por baixo */
.entrar-caixa .outras { font-size: 13px; margin-top: 14px; }
.entrar-caixa .outras .botao-texto { text-decoration: none; font-weight: 500; }
.entrar-caixa .outras .botao-texto:hover { color: var(--rosa); }
#esqueci-conta { font-size: 13px; }
#esqueci-conta a { text-decoration: none; }
#esqueci-conta a:hover { color: var(--rosa); }

/* contactos: o formulário a azul-escuro, com os campos a bege e as letras claras */
.form-contacto { background: var(--marinho); color: #fff; }
.form-contacto h2 { color: var(--amarelo); }
.form-contacto .campo .titulo, .form-contacto .aceitar, .form-contacto .aceitar a { color: #fff; }
.form-contacto .aceitar input { accent-color: var(--laranja); }
.form-contacto .botao { --linha: var(--amarelo); }
/* o desenho por baixo dos cartões, maior */
.contacto-desenho { padding-top: 34px; gap: 10px; }
.contacto-desenho .d1 { height: 270px; }
.contacto-desenho .d2 { height: 210px; margin-bottom: 56px; }

/* o campo do telefone (contactos) com o mesmo aspeto dos outros */
input[type=tel] { width: 100%; font: inherit; font-size: 17px; color: var(--marinho); background: #fff; border: 0; border-radius: 14px; padding: 13px 14px; -webkit-appearance: none; appearance: none; }
.form-contacto input[type=tel] { background-color: var(--papel); }
.form-contacto .campo .titulo em { color: #fff; opacity: .8; }
/* contactos: os campos obrigatórios marcados com * */
.form-contacto .obrigatorio { color: var(--amarelo); }
.form-contacto .obrigatorios { margin: 16px 0 0; font-size: 13px; color: #fff; opacity: .85; }
/* ainda mais espaço entre as nuvens da faixa e o conteúdo (todas as páginas interiores) */
.b-faixa { margin-bottom: 116px; }
.b-faixa:has(+ .seccao) { margin-bottom: 0; }
@media (max-width: 1000px) { .b-faixa { margin-bottom: 76px; } }
@media (max-width: 620px) { .b-faixa { margin-bottom: 52px; } }
/* termos e privacidade: a data da versão no fim do texto */
.texto .versao { margin-top: 40px; font-size: 14px; color: var(--marinho); opacity: .75; }

/* ---------- encomenda passo a passo ---------- */
.passos-enc { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.passos-enc li { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 99px; background: #fff; color: var(--marinho); font-size: 14.5px; font-weight: 600; opacity: .5; }
.passos-enc .n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--papel); font: 400 16px/1 var(--letra-titulo); }
.passos-enc li.feito { opacity: 1; }
.passos-enc li.feito .n { background: var(--agua); }
.passos-enc li.agora { opacity: 1; background: var(--marinho); color: #fff; }
.passos-enc li.agora .n { background: var(--amarelo); color: var(--marinho); }
.em-passos .bloco legend .numero { display: none; } /* o número já está nos passos lá em cima */
.bloco legend .numero { color: var(--marinho); } /* (ao mudar as respostas, tudo à vista: o rosa sumia no bloco rosa) */
.em-passos .bloco:focus { outline: none; }
.navegar { display: flex; gap: 14px; margin: 4px 0 0; }
.navegar #seguinte { margin-left: auto; }
.navegar #voltar { --fundo: #fff; --letra: var(--marinho); }
.navegar #voltar:hover { --fundo: var(--amarelo); }
@media (max-width: 620px) {
  .passos-enc li .t { display: none; }
  .passos-enc li { padding: 5px; }
  .passos-enc li.agora { padding-right: 14px; }
  .passos-enc li.agora .t { display: inline; }
}
/* espaçamentos coerentes dentro dos blocos: o mesmo espaço entre todos os campos;
   a fila das letras do nome só ocupa lugar quando há letras */
.bloco legend { margin-bottom: 22px; }
.bloco .campo { margin-bottom: 26px; }
.bloco .campo:last-child, .bloco > :last-child { margin-bottom: 0; }
.letras-previa { min-height: 0; margin: -12px 0 26px; }
.letras-previa:empty { display: none; }
/* encomenda: os blocos a bege, como a página (o texto lia-se mal no rosa); os campos e as opções ficam brancos */
.bloco, .bloco.azul, .bloco.verde, .bloco.cinza { background: var(--papel); padding: 6px 0 8px; margin-bottom: 36px; border-radius: 0; }
@media (max-width: 960px) { .bloco { margin-left: 0; margin-right: 0; } }
.bloco legend { font-size: 1.6rem; }

/* contactos: os nomes dos campos só a branco (o asterisco também) e sem negrito */
.form-contacto .campo .titulo { font-weight: 400; }
.form-contacto .obrigatorio { color: #fff; }
/* os passos lá em cima: só os números, e o nome só no passo onde se está (cabe numa linha) */
.passos-enc li .t { display: none; }
.passos-enc li { padding: 5px; }
.passos-enc li.agora { padding-right: 16px; }
.passos-enc li.agora .t { display: inline; }
/* os passos da encomenda: ao centro, maiores e animados (o nome do passo abre-se, o número salta; os feitos ganham um visto) */
.passos-enc { justify-content: center; gap: 12px; margin-bottom: 34px; }
.passos-enc li { padding: 6px; font-size: 17px; transition: background-color .35s ease, color .35s ease, padding .45s ease, opacity .35s ease; }
.passos-enc .n { width: 40px; height: 40px; font-size: 21px; transition: background-color .35s ease; }
.passos-enc li .t { display: inline-block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; vertical-align: middle; transition: max-width .5s ease, opacity .35s ease .1s; }
.passos-enc li.agora { padding-right: 20px; }
.passos-enc li.agora .t { display: inline-block; max-width: 260px; opacity: 1; }
.passos-enc li.agora .n { animation: passo-salta .5s cubic-bezier(.2, .9, .3, 1.4); }
.passos-enc li.feito .n { font-size: 0; }
.passos-enc li.feito .n::after { content: "✓"; font: 700 19px/1 var(--letra-texto); color: var(--marinho); }
@keyframes passo-salta { 0% { transform: scale(.6) rotate(-12deg); } 60% { transform: scale(1.15) rotate(4deg); } 100% { transform: none; } }
@media (max-width: 620px) {
  .passos-enc { gap: 8px; }
  .passos-enc li { font-size: 15px; padding: 4px; }
  .passos-enc .n { width: 32px; height: 32px; font-size: 17px; }
  .passos-enc li.agora { padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .passos-enc li, .passos-enc li .t, .passos-enc .n { transition: none; }
  .passos-enc li.agora .n { animation: none; }
}
@media (max-width: 620px) {
  .passos-enc { flex-wrap: nowrap; gap: 5px; }
  .passos-enc li { flex: none; padding: 3px; font-size: 13.5px; }
  .passos-enc li.agora { flex: 0 1 auto; min-width: 0; padding-right: 12px; }
  .passos-enc .n { width: 28px; height: 28px; font-size: 16px; }
  .passos-enc li.agora .t { max-width: 150px; text-overflow: ellipsis; }
  .passos-enc li.feito .n::after { font-size: 15px; }
}
@media (max-width: 620px) {
  /* no telemóvel só os números (o nome do passo é o título logo por baixo) */
  .passos-enc li.agora { padding-right: 3px; }
  .passos-enc li.agora .t { display: none; }
  .passos-enc { gap: 10px; }
  .passos-enc .n { width: 34px; height: 34px; font-size: 18px; }
}
/* as ondas comem parte do espaço: as secções de cor ganham a altura da onda, em cima e em baixo */
.seccao.b-jogo, .seccao.b-preco { padding-top: calc(var(--esp) + 40px); padding-bottom: calc(var(--esp) + 40px); }
.seccao.b-pormenores { padding-bottom: calc(var(--esp) + 40px); }
.seccao.b-jogo, .seccao.b-preco { padding-top: calc(var(--esp) + 70px); padding-bottom: calc(var(--esp) + 70px); }
.seccao.b-pormenores { padding-bottom: calc(var(--esp) + 70px); }
@media (max-width: 620px) {
  .seccao.b-jogo, .seccao.b-preco { padding-top: calc(var(--esp) + 36px); padding-bottom: calc(var(--esp) + 36px); }
  .seccao.b-pormenores { padding-bottom: calc(var(--esp) + 36px); }
}

/* contactos: os desenhos ao centro (em altura) do espaço que sobra por baixo dos cartões, e a mexer */
.contactos { align-items: stretch; }
.form-contacto { align-self: start; }
.outros-contactos { display: flex; flex-direction: column; gap: 16px; }
.contacto-desenho { flex: 1 1 auto; align-items: center; padding: 24px 0 0; }
.contacto-desenho .d2 { margin-bottom: 70px; }
/* ela salta: agacha-se, sobe, aterra com um pequeno amassar; os balões flutuam */
.contacto-desenho .d1 { transform-origin: 50% 100%; animation: menina-salta 2.6s cubic-bezier(.3, 0, .3, 1) infinite; }
.contacto-desenho .d2 { transform-origin: 50% 100%; animation: baloes 4.2s ease-in-out infinite; }
@keyframes menina-salta {
  0%, 60%, 100% { translate: 0 0; scale: 1 1; }
  8% { translate: 0 0; scale: 1.05 .94; }
  26% { translate: 0 -38px; scale: .97 1.04; }
  44% { translate: 0 0; scale: 1 1; }
  50% { translate: 0 0; scale: 1.06 .93; }
}
@keyframes baloes { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -16px; rotate: 3deg; } }
@media (prefers-reduced-motion: reduce) { .contacto-desenho .d1, .contacto-desenho .d2 { animation: none; } }
/* as caixas e os cartões ficam brancos; só os fundos do site são bege */
.b-cromo, .b-vagas, .b-manifesto .mini { background: #fff; }
.b-perguntas details:nth-of-type(n) { background: #fff; }
/* encomenda: os desenhos dos níveis (os mesmos da página principal) numa caixa igual, para ficarem do mesmo tamanho */
.opcao-nivel img { width: 80px; height: 70px; object-fit: contain; object-position: left center; margin-bottom: 10px; }
@media (max-width: 960px) { .opcao-nivel img { width: 60px; height: 54px; margin: 0; } }
/* níveis da encomenda: sem uma palavra sozinha na última linha; no escolhido (azul-escuro), o desenho num fundo branco para não desaparecer */
.opcao-nivel small, .opcao-nivel b { text-wrap: pretty; }
.opcao-nivel.escolhida img { background: #fff; border-radius: 14px; padding: 6px; }

/* o nome com duas palavras: o espaço entre elas é só um intervalo na fila das letras */
.letras-previa .espaco { width: 18px; }

/* encomenda: mais espaço entre os campos; as fichas um pouco mais justas (o «Outro» cabe ao lado da «Borboleta»);
   os outros animais que já não se podem escolher ficam esbatidos */
.bloco .campo { margin-bottom: 44px; }
.fichas { gap: 8px 7px; }
.ficha span { padding: 9px 13px; font-size: 16px; }
.ficha.desligada span { opacity: .4; cursor: not-allowed; }
.ficha.desligada input { cursor: not-allowed; }

/* encomenda, os desenhos: o limite das fotos e o link como alternativa */
.bloco .limites { margin: 10px 0 0; font-size: 14.5px; }
.bloco .campo-link { margin-top: 30px; }

/* a barra dos passos: cada passo é um botão; os feitos (✓) carregam-se para voltar */
.passos-enc .ir { all: unset; display: flex; align-items: center; gap: 8px; cursor: default; border-radius: 99px; }
.passos-enc li.feito .ir { cursor: pointer; }
.passos-enc li.feito:hover { background: var(--amarelo); }
.passos-enc .ir:focus-visible { outline: 3px solid var(--laranja); outline-offset: 4px; }
/* «Mostrar a palavra-passe» por baixo dos campos */
.bloco .mostrar-palavra, .entrar-caixa .mostrar-palavra { margin: -26px 0 26px; }
/* a conta na encomenda: «Mostrar a palavra-passe» e «Esqueci-me…» logo por baixo do campo */
.bloco .mostrar-palavra { margin: -34px 0 0; }
.bloco #esqueci-conta { margin: 10px 0 0; }

/* obrigado: as caixas dos passos mais largas (o texto fica em menos linhas) */
.obrigado-largo { max-width: 1100px; }
.obrigado-largo .passos { gap: 22px; }
.obrigado-largo .passo img { height: 70px; width: 84px; object-fit: contain; object-position: right top; }

/* ajuda: os temas como as perguntas frequentes */
.ajuda-perguntas { margin-top: 26px; }
.ajuda-perguntas details { margin-bottom: 12px; border-radius: 22px; scroll-margin-top: 130px; }
.ajuda-perguntas details > div { padding: 18px 26px 22px; }
.ajuda-perguntas details > div > :first-child { margin-top: 0; }
.ajuda-perguntas details > div > :last-child { margin-bottom: 0; }

/* conta: o + das partes («As respostas»…) ao centro da linha */
.parte summary { display: flex; align-items: center; min-height: 34px; padding: 0 48px 0 0; }
.parte summary::after { top: 50%; right: 0; transform: translateY(-50%); }

/* entrar: a caixa de desenhos olha para a sua forma: quase quadrada, 3 x 3; larga, 4 x 2; muito larga, uma fila de 3 */
.entrar-desenhos { display: block; container-type: size; }
.entrar-desenhos .grelha-desenhos { display: grid; width: 100%; height: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
.entrar-desenhos .grelha-desenhos span { display: grid; place-items: center; min-width: 0; min-height: 0; }
.entrar-desenhos .grelha-desenhos img { width: 62%; height: 62%; object-fit: contain; }
@container (min-aspect-ratio: 5 / 4) {
  .entrar-desenhos .grelha-desenhos { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .entrar-desenhos .grelha-desenhos span:nth-child(n+9) { display: none; }
  .entrar-desenhos .grelha-desenhos span:nth-child(1), .entrar-desenhos .grelha-desenhos span:nth-child(4), .entrar-desenhos .grelha-desenhos span:nth-child(6) { background: var(--rosa); }
  .entrar-desenhos .grelha-desenhos span:nth-child(2), .entrar-desenhos .grelha-desenhos span:nth-child(7) { background: var(--amarelo); }
  .entrar-desenhos .grelha-desenhos span:nth-child(3), .entrar-desenhos .grelha-desenhos span:nth-child(5), .entrar-desenhos .grelha-desenhos span:nth-child(8) { background: var(--papel); }
}
@container (min-aspect-ratio: 2 / 1) {
  .entrar-desenhos .grelha-desenhos { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
  .entrar-desenhos .grelha-desenhos span:nth-child(n+4) { display: none; }
}
@media (max-width: 960px) {
  .entrar-desenhos { contain: size layout style; aspect-ratio: 3 / 1; height: auto; }
}

/* o menu do telemóvel a azul-escuro (não branco) */
.topo nav .so-extra { display: none; }
@media (max-width: 960px) {
  .topo nav#menu.aberto { background: var(--marinho); box-shadow: 0 24px 40px -18px rgba(0, 56, 101, .5); }
  .topo nav#menu.aberto a { color: #fff; }
  .topo nav#menu.aberto a:hover { color: var(--amarelo); }
  .topo nav#menu.aberto .so-menu { background: var(--agua); color: var(--marinho); }
}
/* no telemóvel: sem a barra de cima nem o botão «Encomendar»; estão dentro do menu, depois dos itens principais */
@media (max-width: 620px) {
  .barra-topo { display: none; }
  .topo .envolve > .botao { display: none; }
  .topo .menu-botao { margin-left: auto; }
  .topo nav#menu.aberto .so-extra { display: block; }
  .topo nav#menu.aberto .so-extra:first-of-type { margin-top: 10px; }
  .topo nav#menu.aberto .menu-redes { display: flex; gap: 12px; padding: 10px 0 2px; }
  .topo nav#menu.aberto .menu-redes a { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--laranja); color: var(--marinho); }
  .topo nav#menu.aberto a.menu-encomendar { display: block; text-align: center; margin-top: 16px; padding: 14px 26px; color: #fff; --linha: var(--amarelo); }
  /* mais espaço entre o topo e o conteúdo */
  .b-abertura { padding-top: 64px; }
  .b-faixa { padding-top: 56px; }
}
/* a abertura no telemóvel: a frase e a idade, depois o vídeo do jogo, depois o resto do texto */
@media (max-width: 960px) {
  .b-abertura .b-texto { display: contents; }
  .b-abertura .envolve { gap: 0; }
  .b-abertura h1 { order: 1; }
  .b-abertura h1 + .b-rotulo { order: 2; margin-bottom: 30px; }
  .b-abertura .b-montra { order: 3; margin-bottom: 38px; }
  .b-abertura .grande { order: 4; }
  .b-abertura .acoes { order: 5; }
}
/* no telemóvel, a fita das promessas passa para depois do «Como funciona» */
@media (max-width: 620px) {
  main:has(> .b-abertura) { display: flex; flex-direction: column; }
  main > .b-abertura, main > .b-como { order: -1; }
  .b-promessas { padding: 0 16px 66px; }
}

/* «Desliza para o lado»: uma seta desenhada a seguir, que empurra devagar para o lado */
.b-jogo .deslizar::after { content: ""; display: inline-block; width: 46px; height: 18px; margin-left: 10px; vertical-align: middle;
  background: url(img/formas/seta-desenhada.svg) no-repeat center / contain; animation: seta-empurra 1.6s ease-in-out infinite; }
@keyframes seta-empurra { 0%, 100% { translate: 0 0; } 50% { translate: 8px 0; } }
@media (prefers-reduced-motion: reduce) { .b-jogo .deslizar::after { animation: none; } }
/* «É uma prenda?» no telemóvel: a prenda em cima, ao meio, e o texto por baixo */
@media (max-width: 620px) {
  .b-prenda { flex-direction: column; text-align: center; gap: 14px; padding: 26px 24px 28px; }
  .b-prenda img { width: 70px; height: 86px; }
}
/* no telemóvel, o «Encomendar» do preço de uma ponta à outra */
@media (max-width: 620px) {
  .b-encomendar { display: block; width: 100%; text-align: center; box-sizing: border-box; }
}
/* o bloco laranja do fim, quando fica numa coluna: o texto e o botão ao centro */
@media (max-width: 960px) {
  .b-fecho-texto { text-align: center; }
  .b-fecho-texto .botao { margin-left: auto; margin-right: auto; }
}
/* rodapé no telemóvel: depois da descrição, tudo ao centro (redes, colunas, livro de reclamações e o texto legal) */
@media (max-width: 620px) {
  .rodape .redes-rodape { justify-content: center; }
  .rodape .envolve > div:not(:first-child), .rodape .legal { text-align: center; }
  .rodape .livro-reclamacoes img { margin-left: auto; margin-right: auto; display: block; }
}
/* rodapé no telemóvel: os contactos antes da informação legal */
@media (max-width: 620px) {
  .rodape .envolve > :nth-child(1) { order: 0; }
  .rodape .envolve > :nth-child(2) { order: 1; }
  .rodape .envolve > :nth-child(4) { order: 2; }
  .rodape .envolve > :nth-child(3) { order: 3; }
  .rodape .envolve > .legal { order: 4; }
}

/* voltar ao topo: por cima do botão do WhatsApp, só depois de descer */
.subir { position: fixed; right: 28px; bottom: 96px; z-index: 50; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--laranja); color: var(--marinho); box-shadow: 0 4px 0 var(--marinho), 0 10px 22px -8px rgba(0, 56, 101, .5);
  opacity: 0; translate: 0 14px; pointer-events: none; transition: opacity .3s ease, translate .3s ease, background-color .2s ease; }
.subir.visivel { opacity: 1; translate: 0 0; pointer-events: auto; }
.subir:hover { background: var(--amarelo); }
.subir:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; }
@media (max-width: 620px) { .subir { right: 22px; bottom: 90px; width: 44px; height: 44px; } }
/* conta sem encomendas: caixa branca (o fundo da página já é verde-água) */
.vazio { background: #fff; border-radius: var(--raio); }
.vazio img { height: 110px; }
/* rodapé no telemóvel: o logótipo e a descrição também ao centro, como o resto */
@media (max-width: 620px) {
  .rodape .envolve > div:first-child { text-align: center; }
  .rodape .envolve > div:first-child > img { margin-left: auto; margin-right: auto; display: block; }
}
/* iPad: o desenho de cima à esquerda da abertura não tapa a frase da idade; os três passos lado a lado */
@media (max-width: 960px) {
  .b-abertura h1 + .b-rotulo { margin-bottom: 40px; }
  .b-montra .a1 { top: 0; }
}
@media (min-width: 621px) and (max-width: 960px) {
  .b-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .b-passo { padding: 22px 20px 24px; }
  .b-passo h3 { font-size: 1.35rem; }
  .b-passo p { font-size: 15px; }
}
/* conta: a etiqueta à mão por baixo do título, a laranja, como nas outras páginas */
.cabeca-conta .b-rotulo { margin: 2px 0 12px; color: var(--laranja); }
/* números pequenos dos passos na letra do texto (o «1» da letra à mão parece um 7) */
.passos-enc .n, .passo .numero { font-family: var(--letra-texto); font-weight: 700; }
.passos-enc .n { font-size: 17px; }
.passo .numero { font-size: 20px; }
/* obrigado no iPad: os três passos lado a lado (em duas colunas, o terceiro ficava sozinho) */
@media (min-width: 621px) and (max-width: 960px) {
  .obrigado-largo .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .obrigado-largo .passo { padding: 22px 18px 24px; }
  .obrigado-largo .passo p { font-size: 15px; }
}
/* no telemóvel, o botão «Quero um jogo» e o preço da abertura ficam ao meio */
@media (max-width: 620px) {
  .b-abertura .acoes { justify-content: center; }
}
/* no telemóvel, o botão «Quero um jogo» da abertura vai de uma ponta à outra */
@media (max-width: 620px) {
  .b-abertura .acoes .botao { flex: 1 1 100%; text-align: center; }
}
/* no iPad, o preço e a lista entram mais para dentro, alinhados com o texto dos cartões de baixo */
@media (min-width: 621px) and (max-width: 960px) {
  .b-oferta { padding: 0 40px; }
}
/* no iPad, a abertura fica toda ao meio: o título, a idade, o texto, o botão e o preço */
@media (min-width: 621px) and (max-width: 960px) {
  .b-abertura h1, .b-abertura h1 + .b-rotulo, .b-abertura .grande { text-align: center; text-wrap: balance; }
  .b-abertura .grande { max-width: 540px; margin-left: auto; margin-right: auto; }
  .b-abertura .acoes { justify-content: center; }
}
/* conta e painel: as caixas de dentro do cartão em creme e com cantos redondos (nada de cinzento nem de caixas retas) */
.parte { background: var(--papel); border-radius: 20px; }
.progresso li { background: var(--papel); }               /* os passos que faltam: creme, como as caixas */
.etiqueta { background: var(--papel); }
/* o + de abrir: rosa com o sinal branco; aberto, azul com o sinal branco (o rosa sobre rosa não se via) */
summary::after { background: var(--rosa); color: #fff; }
details[open] summary::after { background: var(--marinho); color: #fff; }
/* «Mudar as respostas» alinhado com as respostas (herdava a margem das perguntas frequentes) */
.parte details > div { padding: 0; }
/* o resto das caixas retas da conta e do painel */
.descargas a { border-radius: 14px; }
.miniaturas button { border-radius: 50%; }
.contagens div { border-radius: 20px; }
.filtros button { border-radius: 99px; }
.tabela td:first-child { border-radius: 14px 0 0 14px; }
.tabela td:last-child { border-radius: 0 14px 14px 0; }
.detalhe code { border-radius: 6px; }
.rascunho { border-radius: 16px; }
/* só o amarelo da marca, e sombras em azul em vez de preto */
.falta, .rascunho, .etiqueta.por_pagar, .contagens div:nth-child(4) { background: var(--amarelo); }
.b-cromo, .b-cromo.dourado { box-shadow: 0 18px 30px -16px rgba(0, 56, 101, .5); }
.aparelho .ecra { background: var(--papel); }
/* conta: a caixa «Precisas de ajuda?» como o cartão da encomenda (cantos redondos e a mesma sombra) */
.conta-rodape { background: #fff; border-radius: var(--raio); box-shadow: 0 26px 50px -30px rgba(0, 56, 101, .35); padding: 26px 30px; }