@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700&display=swap");

body.home-previa{
  --papel:#FFF8F1;
  --branco:#fff;
  --laranja:#F08A24;
  --laranja-f:#FFE8C8;
  --laranja-e:#C26512;
  --coral:#E07A5F;
  --coral-f:#FFD9C4;
  --azul:#1A7A96;
  --menta:#0E8A6A;
  --menta-f:#D5F3E6;
  --rosa:#D4537E;
  --rosa-f:#F8D4E2;
  --lilas:#6B4C9A;
  --lilas-f:#E6DCF4;
  --sombra:0 2px 0 rgba(36,48,68,.06), 0 12px 28px -14px rgba(36,48,68,.25);
  --sombra-forte:0 4px 0 rgba(36,48,68,.08), 0 22px 40px -18px rgba(36,48,68,.35);
  --display:"Fredoka","Nunito",system-ui,sans-serif;
  --corpo:"Nunito",system-ui,sans-serif;
  background:
    radial-gradient(circle at 8% 12%, var(--laranja-f) 0 120px, transparent 121px),
    radial-gradient(circle at 95% 28%, var(--menta-f) 0 90px, transparent 91px),
    var(--papel);
  font-family:var(--corpo);
  color:var(--t);
}

body.home-previa .marca,
body.home-previa .mega-abre,
body.home-previa .rodape h3,
body.home-previa h1,
body.home-previa h2,
body.home-previa h3{
  font-family:var(--display);
}
body.home-previa .topo{background:var(--branco)}
body.home-previa .anuncio{background:transparent;color:#8A7464}
body.home-previa .marca{font-weight:700;letter-spacing:-.02em}
body.home-previa .mega-abre{font-weight:600;box-shadow:var(--sombra)}
body.home-previa .busca form{border-radius:999px;background:var(--branco);box-shadow:var(--sombra)}

.home{
  --respiro:clamp(1rem,3vw,2rem);
  display:grid;
  grid-template-columns:[full-start] minmax(var(--respiro),1fr) [conteudo-start] min(1240px,calc(100% - 2*var(--respiro))) [conteudo-end] minmax(var(--respiro),1fr) [full-end];
  padding-bottom:3rem;
}
.home > :not(#hp-palco),
#hp-palco > *{grid-column:conteudo;min-width:0}
#hp-palco{display:contents}
#hp-palco > .hp-cheia{
  grid-column:full;
  display:grid;
  grid-template-columns:subgrid;
  padding-inline:0;
  border-radius:0;
}
#hp-palco > .hp-cheia > *{grid-column:2;min-width:0}

.hp-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:center;
  gap:2rem;
  padding:1.6rem 0 1.8rem;
}
.hp-selo{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.3rem .85rem;
  border:2px dashed var(--laranja);
  border-radius:999px;
  background:var(--branco);
  color:var(--laranja-e);
  font:600 .8rem var(--display);
  transform:rotate(-2deg);
}
.home-titulo{
  margin:.85rem 0 .7rem;
  font:700 clamp(2.2rem,4.6vw,3.6rem)/1.02 var(--display);
  letter-spacing:-.02em;
  color:#243044;
}
.home-titulo .hp-grito{
  color:#E23B32;
  font-size:.78em;
  font-weight:700;
  letter-spacing:.01em;
  position:relative;
  white-space:nowrap;
}
.home-titulo .hp-grito:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:.04em;
  height:.28em;
  border-radius:99px;
  background:#FFD2CE;
  z-index:-1;
}
.home-titulo em{
  color:var(--laranja);
  font-style:normal;
  position:relative;
  white-space:nowrap;
}
.home-titulo em:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:.06em;
  height:.22em;
  border-radius:99px;
  background:var(--rosa-f);
  z-index:-1;
}
.previa-nota{
  max-width:42ch;
  margin:0;
  color:#5C6B7A;
  font-size:1.08rem;
  line-height:1.5;
}
.hp-hero-img{
  border:6px solid var(--branco);
  border-radius:32px;
  overflow:hidden;
  background:#F3F0EC;
  box-shadow:var(--sombra-forte);
  transform:rotate(1.2deg);
}
.hp-hero-img img{
  display:block;
  width:100%;
  height:auto;
  background:#F3F0EC;
}
.hp-hero-img a{display:block}

.hp-sec{margin:0 0 1.5rem;padding:1.35rem 1.4rem 1.45rem;border-radius:28px;position:relative}
#hp-palco h2{margin:0;font:600 clamp(1.35rem,2.2vw,1.8rem)/1.1 var(--display)}
#hp-palco h2:before{
  content:"";
  display:inline-block;
  width:.5em;height:.5em;
  margin-right:.45em;
  border-radius:50%;
  background:currentColor;
  vertical-align:.08em;
}
.hp-barra{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:0 0 1rem}
.hp-visitante .hp-mover,.hp-visitante .hp-escolhe{display:none!important}

.faixa-pinte{background:var(--laranja-f)}
.faixa-pinte h2{color:var(--laranja-e)}
.faixa-corte{
  background-color:var(--coral-f);
  background-image:radial-gradient(#fff 1.5px, transparent 1.6px);
  background-size:22px 22px;
  border-radius:0;
  padding-top:2rem;padding-bottom:2.1rem;
}
.faixa-corte h2{color:#C65A2E}
.faixa-png{background:transparent;padding-left:0;padding-right:0}
.faixa-png h2{color:var(--azul);flex:1;text-align:center}
.faixa-png .hp-barra{justify-content:center}
.faixa-quebra{background:var(--menta-f)}
.faixa-quebra h2{color:var(--menta)}
.faixa-sala{background:var(--rosa-f);margin:0}
.faixa-sala h2{color:var(--rosa)}
.faixa-mistura{background:var(--lilas-f)}
.faixa-mistura h2{color:var(--lilas)}

#hp-palco .card{
  display:flex;flex-direction:column;
  height:auto;align-self:start;
  padding:8px;border:0;border-radius:22px;
  background:var(--branco);color:var(--t);
  box-shadow:var(--sombra);
  text-decoration:none;
  transition:transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .25s;
}
#hp-palco .hp-linha:not(.hp-rolo-trilho) .card:hover,
#hp-palco .hp-mini .card:hover,
#hp-palco .hp-pilha .card:hover,
#hp-palco .hp-destaque > .card:hover{
  transform:translateY(-6px) rotate(-1.2deg);
  box-shadow:var(--sombra-forte);
}
#hp-palco .capa{aspect-ratio:4/3;flex:0 0 auto;width:100%;position:relative;display:block;border-radius:16px;overflow:hidden;background:#F3F0EC}
#hp-palco .capa img{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;background:#F3F0EC;transition:transform .45s}
.hp-pinte-faixa{display:grid;grid-template-columns:148px minmax(0,1fr);gap:.85rem;align-items:stretch;width:100%}
.hp-pinte-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;min-width:0;width:100%}
#hp-palco .hp-pinte-cards .card{align-self:stretch;width:100%;max-width:none;min-width:0}
#hp-palco .hp-pinte-cards .capa{width:100%;max-height:none}
#hp-palco .card:hover .capa img{transform:scale(1.05)}
#hp-palco .txt{display:flex;justify-content:center;padding:.55rem .35rem .3rem}
#hp-palco .rotulo{font:600 .95rem/1.2 var(--display);text-align:center}
#hp-palco .hp-grande .rotulo{font-size:1.15rem}

.hp-linha{display:flex;flex-wrap:nowrap;gap:.85rem;width:100%}
.hp-linha .card{width:auto;flex:1 1 0;min-width:0;max-width:none}

.hp-atalhos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.hp-atalho{
  display:flex;align-items:center;gap:1rem;
  min-height:84px;padding:1rem 1.15rem;
  border:0;border-radius:24px;
  background:var(--branco);color:var(--t);
  box-shadow:var(--sombra);
  text-decoration:none;
  transition:transform .25s cubic-bezier(.3,1.6,.5,1);
}
.hp-atalho:hover{transform:translateY(-4px)}
.hp-atalho i{width:56px;height:56px;flex:0 0 56px;border-radius:18px;display:flex;align-items:center;justify-content:center;transform:rotate(-6deg)}
.hp-atalho svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hp-atalho strong{display:block;font:600 1.12rem var(--display)}
.hp-atalho em{display:block;font-style:normal;font-weight:600;font-size:.88rem;color:#5C6B7A}
.tom-pinte i{background:var(--laranja-f);color:var(--laranja-e)}
.tom-quebra i{background:var(--menta-f);color:var(--menta)}
.tom-sala i{background:var(--rosa-f);color:var(--rosa)}

.hp-destaque{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);justify-content:stretch;gap:.85rem;align-items:start;width:100%;max-width:none}
.hp-destaque .hp-grande{width:100%;max-width:none}
.hp-fala{display:flex;width:100%;min-width:0}
.hp-mini{display:flex;flex-direction:column;justify-content:space-between;gap:.7rem;width:100%;margin:0}
.hp-mini .card{width:100%;max-width:none;min-width:0}

.hp-lado-fora{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:.85rem;align-items:stretch;margin:0}
.hp-lado-fora .hp-sec{margin:0}
.hp-anuncio-solido,.hp-banner{
  margin:0;border:2px dashed #E7D3C4;border-radius:22px;
  background:var(--branco);color:#5C6B7A;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font:700 .78rem var(--corpo);letter-spacing:.08em;text-transform:uppercase;padding:1rem;
}
.hp-tres{
  display:grid;grid-template-columns:minmax(0,2.15fr) 148px minmax(0,1fr);
  gap:.85rem;align-items:stretch;width:100%;margin:0;
}
.hp-tres-esq{grid-template-columns:148px minmax(0,2.15fr) minmax(0,1fr)}
.hp-tres .hp-grande{width:100%;max-width:none}
.hp-tres .hp-banner{width:auto;align-self:stretch}
.hp-pilha{display:flex;flex-direction:column;justify-content:space-between;gap:.7rem;width:auto;align-self:stretch}
.hp-pilha .card{width:100%;max-width:none;min-width:0}

.hp-meio{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,34%);gap:1rem;align-items:stretch;width:100%;margin:0 0 1.5rem}
.hp-meio .hp-sec{margin:0}
.hp-youtube{
  margin:0;height:100%;border-radius:28px;background:#2C3148;color:#fff;
  padding:1.15rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.75rem;
  box-shadow:var(--sombra);
}
.hp-yt-nome{margin:0;font:600 1.1rem var(--display)}
.hp-yt-tela{flex:1 1 auto;min-height:9rem;height:auto;border-radius:18px;background:#F4F1EE;display:flex;align-items:center;justify-content:center}
.hp-yt-botao{width:68px;height:46px;border-radius:14px;background:var(--coral);display:flex;align-items:center;justify-content:center}
.hp-yt-botao i{width:0;height:0;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent #fff;margin-left:3px}
.hp-yt-lista{list-style:none;margin:0;padding:0}
.hp-yt-lista li{display:flex;gap:.65rem;align-items:center;padding:.4rem 0;font-size:.88rem}
.hp-yt-lista b{width:64px;height:38px;border-radius:8px;background:#E7E2DC;flex:0 0 64px}
.hp-tablist{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .9rem}
.hp-tablist button{
  min-height:38px;padding:0 1rem;border:0;border-radius:999px;
  background:var(--branco);color:var(--rosa);
  font:600 .9rem var(--display);cursor:pointer;box-shadow:var(--sombra);
}
.hp-tablist button[aria-selected="true"]{background:var(--rosa);color:#fff}

.hp-rolo{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;align-items:center;gap:.8rem}
.hp-rolo-janela{overflow:hidden;min-width:0;padding:8px 0 14px}
.hp-rolo-trilho{width:max-content;transition:transform .9s cubic-bezier(.5,0,.2,1)}
.hp-rolo-trilho .card{width:168px;flex:0 0 168px;min-width:168px;max-width:168px}
.hp-seta{
  width:60px;height:60px;border:4px solid #fff;border-radius:20px;padding:0;cursor:pointer;
  background:var(--laranja);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 0 var(--laranja-e);transform:rotate(-8deg);
}
.hp-seta + .hp-rolo-janela + .hp-seta{background:var(--rosa);box-shadow:0 5px 0 #A83258;transform:rotate(8deg)}
.hp-seta:hover{transform:rotate(0) scale(1.06)}
.hp-seta svg{width:30px;height:30px;fill:#fff;stroke:none;display:block}
.hp-seta svg.vira{transform:scaleX(-1)}

.hp-misto{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:1.5rem;align-items:center;
  background:var(--branco);border:0;border-radius:28px;
  box-shadow:var(--sombra);padding:1.8rem 1.6rem;
}
.hp-misto h2:before{display:none}
.hp-misto p{margin:.45rem 0 0;max-width:46ch;color:#5C6B7A;font-size:1.05rem;line-height:1.5}
.hp-notas{display:flex;flex-direction:column;gap:.6rem}
.hp-notas a{
  display:flex;align-items:center;gap:.7rem;
  min-height:52px;padding:.75rem 1rem;border-radius:18px;
  color:#243044;text-decoration:none;font:600 1rem var(--display);
  transition:transform .2s;
}
.hp-notas a.nota-0{background:var(--laranja-f)}
.hp-notas a.nota-1{background:var(--menta-f)}
.hp-notas a.nota-2{background:var(--rosa-f)}
.hp-notas a:before{content:"★";color:var(--laranja)}
.hp-notas a:hover{transform:translateX(6px)}

.hp-hero,
#hp-palco > *{animation:hp-surge .6s ease both}
#hp-palco > :nth-child(2){animation-delay:.07s}
#hp-palco > :nth-child(3){animation-delay:.14s}
#hp-palco > :nth-child(4){animation-delay:.21s}
#hp-palco > :nth-child(5){animation-delay:.28s}
#hp-palco > :nth-child(6){animation-delay:.35s}
#hp-palco > :nth-child(7){animation-delay:.42s}
#hp-palco > :nth-child(8){animation-delay:.49s}
@keyframes hp-surge{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hp-hero,#hp-palco > *,#hp-palco .card,#hp-palco .capa img,.hp-atalho,.hp-notas a,.hp-seta{animation:none!important;transition:none!important}
  .hp-rolo-trilho{transition:none}
}
@media (max-width:800px){
  .hp-hero,.hp-lado-fora,.hp-meio,.hp-tres,.hp-atalhos,.hp-destaque,.hp-pinte-faixa,.hp-pinte-cards,.hp-misto{grid-template-columns:1fr}
  .hp-hero-img{transform:none}
  .hp-anuncio-solido{min-height:120px}
}