/* Integralis Kids — tokens da casa (brand/tokens.css) + toques coloridos para criança */
:root {
  --bg: #070609; --panel: #0f0f15; --card: #111118; --line: #20212f; --line2: #3e3f47;
  --fg: #ffffff; --mut: #adaeb8; --dim: #8e8f9a;
  --pri: #439cb6; --pri-lt: #7fd6f0; --pri-dk: #1c6f8c; --btn: #1c6f8c; --btn-h: #0e5576;
  --ok: #5ec9a0; --warn: #e0b54a; --danger: #f0675c;
  --k1: #ff6b6b; --k2: #ffb703; --k3: #7fd6f0; --k4: #5ec9a0; --k5: #c77dff; --k6: #ff8fab;
  --fonte: "Onest", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; } body { height: 100dvh; }
body { margin: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: 500 16px/1.5 var(--fonte); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 520px at 10% -10%, rgba(67,156,182,.28), transparent 70%), radial-gradient(700px 500px at 105% 105%, rgba(199,125,255,.18), transparent 70%); }

.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marca-logo { height: 38px; width: auto; }
.marca-nome { display: inline-flex; font: 800 24px/1 var(--fonte); white-space: nowrap; }
.marca-nome .l { display: inline-block; text-shadow: 0 2px 0 rgba(0,0,0,.4); transform: rotate(var(--r, 0deg)); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.marca-nome .esp { width: .36em; }
.marca:hover .marca-nome .l { transform: translateY(-3px) rotate(calc(var(--r, 0deg) * -1)); }
.topo-acoes { display: flex; gap: 8px; flex: none; }
.btn-suave { flex: none; white-space: nowrap; font: 700 14px var(--fonte); color: var(--fg); background: rgba(255,255,255,.08); border: 2px solid var(--line2); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.btn-suave:hover { border-color: var(--pri-lt); }
:focus-visible { outline: 3px solid var(--pri-lt); outline-offset: 2px; }

main { overflow-x: hidden; overflow-y: auto; flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0 16px; }

/* ---- tela de entrada ---- */
.hero { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 12px 0 8px; overflow: visible; }
.flutua { position: absolute; inset: 0; pointer-events: none; }
.flutua span { position: absolute; font-size: clamp(28px, 6vw, 54px); opacity: .85; animation: voa 7s ease-in-out infinite; }
/* só nas margens: os enfeites não passam por cima do texto, e em tela estreita eles somem */
.flutua span:nth-child(1) { left: 1%; top: 4%; } .flutua span:nth-child(2) { right: 1%; top: 4%; animation-delay: -1s; }
.flutua span:nth-child(3) { left: 1%; top: 80%; animation-delay: -2s; } .flutua span:nth-child(4) { right: 1%; top: 80%; animation-delay: -3s; }
.flutua span:nth-child(5) { right: 1%; top: 30%; animation-delay: -4s; } .flutua span:nth-child(6) { left: 1%; top: 30%; animation-delay: -5s; }
.flutua span:nth-child(7) { left: 1%; top: 55%; animation-delay: -2.5s; } .flutua span:nth-child(8) { right: 1%; top: 55%; animation-delay: -3.5s; }
@media (max-width: 1000px) { .flutua { display: none; } }
@keyframes voa { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-16px) rotate(5deg); } }
.selo { position: relative; margin: 0; font: 700 13px var(--fonte); color: var(--bg); background: linear-gradient(90deg, var(--k2), var(--k6)); padding: 6px 14px; border-radius: 999px; }
.hero h1 { position: relative; margin: 0; font: 800 clamp(34px, 7.5vw, 66px)/1.05 var(--fonte); letter-spacing: -.01em; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--k3), var(--k5), var(--k6)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { position: relative; margin: 0; max-width: 560px; color: var(--mut); font-size: clamp(15px, 2.4vw, 18px); }
.sub strong { color: var(--fg); }
.ideias { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; }
.ideia { font: 700 15px var(--fonte); color: var(--fg); background: var(--card); border: 2px solid var(--c, var(--line2)); border-radius: 18px; padding: 10px 14px; cursor: pointer; transition: transform .2s cubic-bezier(.3,1.6,.5,1), background .2s; }
.ideia:hover { transform: translateY(-3px) rotate(-1.5deg); background: color-mix(in srgb, var(--c) 18%, var(--card)); }
.privacidade { position: relative; margin: 4px 0 0; max-width: 520px; color: var(--dim); font-size: 13px; }

/* ---- palco ---- */
#palco { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
/* a tela do cinema: sempre 16:9, para o quadro nunca cortar quem está na cena */
.cena { position: relative; flex: none; width: min(100%, calc((100dvh - 240px) * 16 / 9)); aspect-ratio: 16 / 9; margin: 0 auto; border-radius: 18px; overflow: hidden; box-shadow: 0 0 80px rgba(127,214,240,.28), 0 18px 50px rgba(0,0,0,.6); background: radial-gradient(circle at 50% 40%, #27235c, #0b0a24 72%); isolation: isolate; }
.c-abertura { position: absolute; inset: 0; transition: opacity 1.4s; }
.c-abertura.fim { opacity: 0; }
.estrela { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(127,214,240,.8); animation: pisca 2.4s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: .25; transform: scale(.6); } }
.c-filme { position: absolute; inset: 0; z-index: 1; }
.c-filme img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform, opacity; animation: abre-quadro 1.6s ease both, var(--camera) var(--dur, 24s) cubic-bezier(.3, 0, .7, 1) both; }
/* a câmera viaja pelo quadro seguindo a ação: com zoom de 1.3, andar até 11% nunca mostra a borda da imagem */
.cam-sobe { --camera: cam-sobe; } .cam-desce { --camera: cam-desce; } .cam-direita { --camera: cam-direita; } .cam-esquerda { --camera: cam-esquerda; } .cam-aproxima { --camera: cam-aproxima; } .cam-afasta { --camera: cam-afasta; }
@keyframes abre-quadro { from { opacity: 0; filter: brightness(1.5) blur(6px); } to { opacity: 1; filter: none; } }
@keyframes cam-sobe { from { transform: scale(1.3) translateY(-11%); } to { transform: scale(1.3) translateY(11%); } }
@keyframes cam-desce { from { transform: scale(1.3) translateY(11%); } to { transform: scale(1.3) translateY(-11%); } }
@keyframes cam-direita { from { transform: scale(1.3) translateX(11%); } to { transform: scale(1.3) translateX(-11%); } }
@keyframes cam-esquerda { from { transform: scale(1.3) translateX(-11%); } to { transform: scale(1.3) translateX(11%); } }
@keyframes cam-aproxima { from { transform: scale(1); } to { transform: scale(1.3); } }
@keyframes cam-afasta { from { transform: scale(1.3); } to { transform: scale(1); } }
/* luzinhas flutuando sobre o quadro: a cena continua viva entre uma frase e outra */
.c-poeira { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; container-type: size; }
.c-poeira i { position: absolute; bottom: -4%; width: var(--t); height: var(--t); border-radius: 50%; background: #fff6c9; box-shadow: 0 0 10px 3px rgba(255,214,120,.8); opacity: 0; animation: sobe var(--d) linear infinite; animation-delay: var(--a); }
@keyframes sobe { 10% { opacity: .85; } 80% { opacity: .6; } to { opacity: 0; transform: translate(var(--x), -105cqh); } }
.c-aviso { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 9; width: min(92%, 520px); background: #fff4d6; color: #3a2a00; border: 3px solid var(--k2); border-radius: 18px; padding: 12px 16px; font: 800 16px/1.35 var(--fonte); text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.c-pensa { position: absolute; left: 12px; top: 12px; z-index: 9; background: rgba(7,6,9,.72); color: #fff; font: 700 14px var(--fonte); border-radius: 999px; padding: 6px 12px; animation: pisca-texto 1.4s infinite; }
@keyframes pisca-texto { 50% { opacity: .55; } }
/* legenda de cinema */
.legenda { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; margin: 0; padding: clamp(28px, 6%, 56px) 7% clamp(12px, 2.4%, 22px); text-align: center; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.78)); font: 700 clamp(14px, 1.6vw, 21px)/1.3 var(--fonte); text-shadow: 0 2px 6px rgba(0,0,0,.9); animation: surge-legenda .8s ease; transition: opacity 1s; }
.legenda.some { opacity: 0; }
@keyframes surge-legenda { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 700px) { .legenda { display: none; } .cena { border-radius: 12px; } .cena.assistindo .legenda { display: block; } }
.livro { list-style: none; margin: 0; padding: 8px 14px; flex: 1; min-height: 52px; overflow-y: auto; background: var(--card); border: 2px solid var(--line); border-radius: 14px; color: var(--fg); font-size: 15px; line-height: 1.35; }
/* celular em pé: o quadro é vertical e ocupa a tela; o livro fica com duas linhas e rola */
@media (max-width: 700px) and (orientation: portrait) {
  #palco { gap: 6px; }
  .cena { flex: 1; width: 100%; min-height: 0; aspect-ratio: auto; }
  .livro { flex: none; height: 58px; min-height: 0; padding: 6px 12px; font-size: 14px; border-radius: 12px; }
}
/* enquanto pinta: a barrinha anda pelo tempo medido de um quadro e espera no fim */
.c-barra { position: absolute; left: 0; top: 0; z-index: 9; height: 4px; width: 92%; background: linear-gradient(90deg, var(--pri-dk), var(--pri), var(--pri-lt)); transform-origin: left; animation: pinta 22s cubic-bezier(.2, .6, .4, 1) both; }
@keyframes pinta { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.livro li { padding: 3px 0; }
.livro li::before { content: "📖 "; }
.livro:empty::before { content: "A sua história vai aparecer escrita aqui."; color: var(--dim); }

/* ---- aviso de privacidade ---- */
body.pagina-aviso { display: block; height: auto; min-height: 100dvh; overflow: auto; background: var(--bg); color: var(--fg); }
.aviso-priv { width: min(720px, 100%); margin: 0 auto; padding: 24px 16px 48px; line-height: 1.55; }
.aviso-priv h1 { font: 800 30px/1.2 var(--fonte); margin: 16px 0 8px; }
.aviso-priv h2 { font: 800 20px/1.25 var(--fonte); margin: 28px 0 8px; color: var(--pri-lt); }
.aviso-priv p, .aviso-priv ul { color: var(--mut); margin: 0 0 10px; }
.aviso-priv strong { color: var(--fg); }
.aviso-priv a, .privacidade a { color: var(--pri-lt); }

/* ---- área dos pais ---- */
.pais { width: min(460px, 92vw); max-height: 90dvh; overflow-y: auto; color: var(--fg); background: var(--panel); border: 2px solid var(--line2); border-radius: 18px; padding: 20px; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.pais::backdrop { background: rgba(7,6,9,.75); }
.pais h2 { margin: 0 0 8px; font: 800 22px/1.2 var(--fonte); }
.pais form { display: flex; flex-direction: column; gap: 12px; }
.pais label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 14px; }
.pais input, .pais textarea { font: 600 16px var(--fonte); color: var(--fg); background: var(--card); border: 2px solid var(--line2); border-radius: 12px; padding: 10px 12px; resize: vertical; }
.pais input:focus, .pais textarea:focus { border-color: var(--pri-lt); outline: none; }
.pais-ajuda, .pais-nota { margin: 0; color: var(--mut); font-size: 14px; }
.pais-nota { color: var(--dim); font-size: 12px; }
.pais-msg { margin: 0; min-height: 20px; color: var(--warn); font-size: 14px; font-weight: 700; }
.pais-botoes { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.pais .enviar { padding: 10px 18px; font-size: 15px; }

/* ---- barra de baixo ---- */
.barra { display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.mic { flex: none; width: 68px; height: 68px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--pri-dk), var(--pri)); box-shadow: 0 0 0 0 rgba(127,214,240,.6); display: grid; place-items: center; transition: transform .15s; }
.mic:hover { transform: scale(1.06); }
.mic[aria-pressed="true"] { background: linear-gradient(135deg, var(--k1), var(--k6)); animation: onda 1.3s infinite; }
@keyframes onda { 0% { box-shadow: 0 0 0 0 rgba(255,107,107,.7); } 100% { box-shadow: 0 0 0 22px rgba(255,107,107,0); } }
.barra input { flex: 1; min-width: 0; font: 600 17px var(--fonte); color: var(--fg); background: var(--panel); border: 2px solid var(--line2); border-radius: 999px; padding: 15px 20px; }
.barra input::placeholder { color: var(--dim); }
.barra input:focus { border-color: var(--pri-lt); outline: none; }
.enviar { flex: none; font: 800 16px var(--fonte); color: #fff; background: var(--btn); border: 0; border-radius: 999px; padding: 15px 22px; cursor: pointer; }
.enviar:hover { background: var(--btn-h); }
.enviar:disabled { opacity: .5; cursor: wait; }
.ouvindo { margin: 0; padding: 0 16px 8px; text-align: center; color: var(--pri-lt); font-weight: 700; }
body.entrada-ativa .mic { width: 84px; height: 84px; }

@media (max-width: 560px) { .marca-logo { height: 30px; } .marca-nome { font-size: 19px; } .topo { flex-wrap: wrap; gap: 6px; padding: 8px 12px; } .topo-acoes { margin-left: auto; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .btn-suave { font-size: 12px; padding: 6px 10px; } .barra { gap: 8px; } .enviar { padding: 15px 12px; } .mic { width: 58px; height: 58px; } .barra input { font-size: 16px; padding: 15px 12px; } body.entrada-ativa .mic { width: 64px; height: 64px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }

.aviso-fechar { display: block; margin: 10px auto 0; padding: 8px 22px; border: 0; border-radius: 12px; background: var(--btn); color: #fff; font: 800 15px/1.2 var(--fonte); cursor: pointer; }