/* Layout: coluna central como página de programa infantil (CBeebies), céu azul com manchas,
   capa = cenário da série (fundo branco + grama) e ficha branca sobreposta. Tema único, claro, de propósito.
   Mobile first: as regras base valem para o celular; telas maiores ganham colunas nos @media (min-width) do fim. */
:root {
  --ceu: #bfe4f2;
  --mancha-ceu: #d3eef8;
  --roxo: #5a1a9e;
  --roxo-escuro: #3d0f70;
  --vermelho-fala: #c8282b;
  --grama: #38941a;
  --contorno: #1b1b1b;
  --papel: #ffffff;
  --lilas: #f4f0fa;
  --texto: #2a2440;
  --texto-suave: #5d5675;
  --amarelo: #f7d43a;
  --ceu-claro: #e9f6fb;
  --verde-claro: #dff3d6;
  --rosa-claro: #fbe0e0;
  --terra: #6b4423;
  --pedra: #8a8f98;
  --fonte-titulo: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --fonte-texto: "Nunito", "Segoe UI", system-ui, sans-serif;
  --raio: 18px;
  --sombra: 0 2px 0 rgba(61, 15, 112, .08), 0 10px 30px rgba(61, 15, 112, .10);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background-color: var(--ceu);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='%23d3eef8'%3E%3Cpath d='M48 30c26-14 62 2 66 30s-20 44-46 46-52-8-56-34 10-30 36-42z'/%3E%3Cpath d='M212 18c22-6 52 10 54 34s-22 32-44 28-36-14-38-32 6-24 28-30z'/%3E%3Cpath d='M150 150c30-8 64 14 62 44s-34 46-64 40-46-28-40-52 14-26 42-32z'/%3E%3Cpath d='M26 212c20-4 40 12 38 32s-22 30-40 26-26-18-24-32 8-22 26-26z'/%3E%3Cpath d='M262 236c22-2 40 16 36 36s-26 30-46 24-26-24-20-38 10-20 30-22z'/%3E%3C/g%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: var(--roxo); }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--roxo); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 400; color: var(--roxo-escuro); text-wrap: balance; line-height: 1.1; margin: 0; }

.pagina {
  max-width: 1040px;
  margin: 0 auto;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  padding-block: 10px 0;
}

/* Menu: barra roxa que gruda no topo e rola de lado no celular */
.menu {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 12px;
  padding: 6px;
  background: var(--roxo);
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: 0 6px 16px rgba(61, 15, 112, .22);
}
.menu::-webkit-scrollbar { display: none; }
.menu a {
  flex: none;
  font-family: var(--fonte-titulo);
  color: var(--papel);
  text-decoration: none;
  font-size: 1rem;
  padding: 6px 10px;
  border-radius: 999px;
}
.menu a:hover { background: rgba(255, 255, 255, .14); }
.menu-logo { background: var(--papel); padding: 2px 8px !important; }
.menu-logo:hover { background: var(--papel) !important; }
.menu-logo img { height: 30px; width: auto; }
.menu-redes { flex: none; display: flex; gap: 2px; margin-left: auto; padding-left: 6px; border-left: 2px solid rgba(255, 255, 255, .3); }
.menu .menu-rede { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; }
.menu-rede svg { width: 20px; height: 20px; }

/* Capa: o cenário da série */
.capa { position: relative; margin-bottom: 44px; }
.palco {
  position: relative;
  background: var(--papel);
  border-radius: var(--raio) var(--raio) 0 0;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  box-shadow: var(--sombra);
}
.palco-turma {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4vw;
  padding-inline: 8px;
  margin-bottom: -4px;
}
.palco-personagem { position: relative; display: block; transition: transform .2s ease; }
.palco-personagem img { height: 19vw; max-height: 150px; min-height: 60px; width: auto; }
.palco-personagem:hover { transform: translateY(-6px); }

.fala {
  position: absolute;
  bottom: calc(100% + 18px);
  left: 0;
  margin: 0;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--vermelho-fala);
  white-space: nowrap;
}
.fala::after {
  content: "";
  position: absolute;
  left: 30px;
  top: calc(100% + 4px);
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--vermelho-fala);
  transform: rotate(18deg);
}

.grama {
  height: 52px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'%3E%3Cpath d='M0 12 L20 8 L34 13 L52 6 L70 11 L86 9 L104 14 L122 7 L140 12 L158 9 L176 13 L196 6 L214 11 L232 8 L250 13 L270 7 L288 12 L306 9 L324 14 L344 7 L362 12 L380 8 L400 11' fill='none' stroke='%231b1b1b' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E") top / 100% 20px no-repeat,
    linear-gradient(transparent 10px, var(--grama) 10px);
}

.ficha {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  margin: -24px 0 0;
  padding: 20px 18px;
  background: var(--papel);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.ficha-texto { min-width: 0; }
.ficha h1 { font-size: 2rem; }
.ficha p { margin: 8px 0 0; max-width: 62ch; color: var(--texto-suave); }
.ficha .slogan { margin-top: 6px; font-weight: 800; color: var(--vermelho-fala); font-size: 1.05rem; }
.slogan span + span::before { content: " "; }
.ficha-logo { width: 96px; height: auto; grid-row: 1; }

/* Seções */
.secao { margin-bottom: 44px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.secao > h2 { font-size: 1.9rem; text-align: center; }
.secao-intro { margin: -6px 0 0; text-align: center; color: var(--texto-suave); }

.painel {
  width: 100%;
  background: var(--papel);
  border-radius: var(--raio);
  padding: 20px 18px;
  box-shadow: var(--sombra);
}
.texto-corrido p, p.texto-corrido { margin: 0 0 12px; max-width: 64ch; }
.texto-corrido p:last-child { margin-bottom: 0; }

.grade-serie, .grade-equipe { display: grid; gap: 18px; align-items: start; }
.grade-serie > *, .grade-equipe > * { min-width: 0; }
.fatos { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fato { background: var(--lilas); border-radius: 14px; padding: 10px 12px; }
.fato dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--texto-suave); }
.fato dd { margin: 2px 0 0; font-family: var(--fonte-titulo); font-size: 1.05rem; color: var(--roxo-escuro); line-height: 1.2; }

/* Cartas dos personagens: no celular, imagem ao lado do texto */
.cartas { width: 100%; display: grid; grid-template-columns: 1fr; gap: 12px; }
.carta {
  background: var(--lilas);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
  display: grid;
  grid-template-columns: 108px 1fr;
}
.carta-palco {
  background: var(--papel);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px 6px 0;
  border-bottom: 8px solid var(--grama);
}
.carta-palco img { width: 92px; height: auto; }
.carta-corpo { min-width: 0; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.carta h3 { font-size: 1.5rem; color: var(--cor-personagem, var(--roxo-escuro)); }
.carta p { margin: 0; font-size: .93rem; }
.carta-detalhe { color: var(--texto-suave); }
.falas { list-style: none; margin: auto 0 0; padding: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.falas li {
  background: var(--papel);
  color: var(--vermelho-fala);
  font-weight: 800;
  border-radius: 14px 14px 14px 4px;
  padding: 5px 11px;
  font-size: .9rem;
}
.falas li::before { content: "“"; }
.falas li::after { content: "”"; }

.criadora { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.criadora-icone {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--roxo);
  color: var(--papel);
}
.criadora-icone svg { width: 32px; height: 32px; }
.criadora h3 { font-size: 1.4rem; }
.criadora p { margin: 6px 0 0; max-width: 70ch; }
.etiqueta {
  display: inline-block;
  font-size: .74rem !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  color: var(--roxo);
  background: var(--lilas);
  padding: 3px 10px;
  border-radius: 999px;
}

.botao {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-size: 1.1rem;
  color: var(--papel);
  background: var(--roxo);
  text-decoration: none;
  padding: 12px 26px;
  border-radius: 999px;
}
.botao:hover { background: var(--roxo-escuro); }

/* Números reais das redes */
.numeros { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.numeros li { background: var(--roxo); color: var(--papel); border-radius: var(--raio); padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.numeros li:first-child { grid-column: 1 / -1; }
.numeros strong { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.8rem; line-height: 1; color: var(--amarelo); font-variant-numeric: tabular-nums; }
.numeros span { font-size: .88rem; line-height: 1.35; }
.nota { margin: 0; font-size: .82rem; color: var(--texto-suave); text-align: center; }

/* Quem faz */
.pessoas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pessoas li { background: var(--lilas); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; }
.pessoas strong { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.15rem; color: var(--roxo-escuro); }
.pessoas span { font-size: .9rem; color: var(--texto-suave); }

/* Redes */
.redes { width: 100%; display: grid; grid-template-columns: 1fr; gap: 10px; }
.rede {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--papel);
  border-radius: var(--raio);
  text-decoration: none;
  color: var(--texto);
  box-shadow: var(--sombra);
  transition: transform .2s ease;
}
.rede:hover { transform: translateY(-4px); }
.rede-icone {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--roxo);
  color: var(--papel);
}
.rede-icone svg { width: 26px; height: 26px; }
.rede-texto { display: flex; flex-direction: column; min-width: 0; }
.rede-texto strong { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.3rem; color: var(--roxo-escuro); line-height: 1.1; }
.rede-texto span { font-size: .88rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.aviso { margin: 0; font-weight: 800; color: var(--vermelho-fala); }

/* Rodapé com as cores do arco-íris do logo */
.rodape { padding-block: 0 24px; text-align: center; color: var(--texto); }
.rodape p { margin: 12px 0 0; }
.arco { display: flex; height: 10px; border-radius: 999px; overflow: hidden; max-width: 320px; margin: 0 auto; }
.arco i { flex: 1; }
.arco i:nth-child(1) { background: #a11cf0; }
.arco i:nth-child(2) { background: #f01fd6; }
.arco i:nth-child(3) { background: #e2262c; }
.arco i:nth-child(4) { background: #ee7a1f; }
.arco i:nth-child(5) { background: #f8e43c; }
.arco i:nth-child(6) { background: #3fcf35; }
.arco i:nth-child(7) { background: #2b47d6; }

@media (prefers-reduced-motion: reduce) {
  .palco-personagem, .rede { transition: none; }
  .palco-personagem:hover, .rede:hover { transform: none; }
}

/* Telas maiores */
@media (min-width: 560px) {
  body { font-size: 17px; }
  .pagina {
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
    padding-block: 18px 0;
  }
  .menu { width: fit-content; max-width: 100%; margin: 0 auto 18px; padding: 6px 10px 6px 8px; }
  .palco { min-height: 300px; }
  .grama { height: 72px; }
  .fala { left: 50%; transform: translateX(-30%); font-size: 1.3rem; }
  .ficha { grid-template-columns: 1fr auto; align-items: center; gap: 24px; margin: -40px 4vw 0; padding: 24px 28px; }
  .ficha h1 { font-size: 2.6rem; }
  .ficha-logo { width: 130px; grid-row: auto; }
  .painel { padding: 26px 28px; }
  .cartas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .secao > h2 { font-size: 2.3rem; }
}
@media (min-width: 760px) {
  .redes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .numeros li:first-child { grid-column: auto; }
  .numeros li { padding: 20px 18px; }
  .numeros strong { font-size: 2.4rem; }
  .grade-serie { grid-template-columns: 1.4fr 1fr; gap: 28px; }
  .grade-equipe { grid-template-columns: 1.3fr 1fr; gap: 28px; }
}
@media (min-width: 960px) {
  .capa { margin-bottom: 64px; }
  .secao { margin-bottom: 64px; gap: 18px; }
  .palco { min-height: 380px; }
  .grama { height: 92px; }
  .ficha { margin: -46px 48px 0; padding: 26px 30px; }
  .ficha h1 { font-size: 3rem; }
  .ficha-logo { width: 150px; }
  .cartas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .carta { display: flex; flex-direction: column; }
  .carta-palco { height: 180px; padding: 0; }
  .carta-palco img { width: auto; height: 140px; }
  .falas { flex-direction: column; align-items: flex-start; }
}