/* Besourinhos Play — palco vermelho do bloco; tema único com as cores da marca */
:root{
  --red:#E30713; --red-deep:#B8040F; --orange:#C9330B;
  --yellow:#FFD000; --cream:#FFF6DC; --cream-2:#F1E4BC; --sky:#5BB8E6;
  --ink:#2A0204;
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,"Cascadia Mono",monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--red);color:var(--cream);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:20px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow)}

/* topo */
.top{position:sticky;top:0;z-index:20;background:var(--red);border-bottom:1px solid rgba(255,246,220,.14);padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;align-items:center;gap:24px;padding-block:10px}
.top img{height:44px;width:auto;display:block}
.top nav{display:flex;gap:22px;margin-left:auto;font-weight:600;font-size:15px}
.top nav a{text-decoration:none;opacity:.85}
.top nav a:hover{opacity:1;color:var(--yellow)}
@media (max-width:640px){.top nav{display:none}}

/* hero */
.hero{padding-block:40px 56px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
h1{font-family:var(--display);font-weight:800;font-size:clamp(44px,7vw,92px);line-height:.92;letter-spacing:-.02em;margin:14px 0 20px;text-wrap:balance}
h1 em{font-style:normal;color:var(--yellow)}
.lead{font-size:19px;max-width:30em;opacity:.92;margin:0 0 28px}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0 0 30px;padding:0;list-style:none}
.facts li{display:flex;flex-direction:column}
.facts b{font-family:var(--display);font-size:38px;line-height:1;color:var(--yellow)}
.facts span{font-size:14px;opacity:.8}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--yellow);color:var(--ink);font-weight:700;padding:14px 22px;border-radius:999px;text-decoration:none;transition:transform .15s}
.cta:hover{transform:translateY(-2px)}
.hero-photo img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:45% 40%;border-radius:22px;display:block}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}
/* celular: a foto do regente vira o fundo da primeira tela, com título e botão por cima (no PC nada muda) */
@media (max-width:860px){
  .hero{position:relative;overflow:hidden;padding:0;min-height:calc(100svh - 65px);display:flex;align-items:flex-end}
  .hero-grid{position:static;width:100%;padding-block:0 32px}
  .fotos{padding-top:36px}
  .hero-photo{position:absolute;inset:0 0 auto;height:78%}
  .hero-photo img{height:100%;aspect-ratio:auto;border-radius:0;object-position:46% 30%}
  .hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(227,7,19,0) 55%,rgba(227,7,19,.6) 80%,var(--red) 100%)}
  .hero-grid>div:first-child{position:relative;z-index:1}
  .hero h1{font-size:clamp(38px,11vw,56px);text-shadow:0 2px 18px rgba(42,2,4,.35)}
  .hero .eyebrow,.hero .lead,.hero .facts{display:none}
}

/* carrossel de fotos: arrasta no celular, setas no computador, toque abre em tela cheia */
.fotos{padding-block:0 64px}
.reel{list-style:none;margin:0;padding:0;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none}
.reel::-webkit-scrollbar{display:none}
.reel li{flex:none;scroll-snap-align:start}
.ph{display:block;height:300px;padding:0;border:0;border-radius:16px;overflow:hidden;background:var(--red-deep);cursor:zoom-in}
.ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.ph:hover img{transform:scale(1.03)}
@media (max-width:900px){.reel{margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}}
@media (max-width:760px){.ph{height:230px}}
.lb{position:fixed;inset:0;z-index:50;background:rgba(42,2,4,.96);display:grid;place-items:center;padding:56px 12px}
.lb[hidden]{display:none}
.lb img{max-width:calc(100vw - 150px);max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);object-fit:contain;border-radius:10px}
.lb .arrow{display:grid;position:fixed;margin-top:-23px}
.lb .arrow.prev{left:16px}.lb .arrow.next{right:16px}
.lb-x{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;width:46px;height:46px;border-radius:50%;border:0;background:var(--yellow);color:var(--ink);font-size:28px;line-height:1;font-weight:700}
.lb-n{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;font-size:13px;color:var(--cream);opacity:.8}
@media (max-width:700px){.lb img{max-width:calc(100vw - 24px);max-height:calc(100dvh - 150px)}.lb .arrow{top:auto;bottom:calc(8px + env(safe-area-inset-bottom,0px));margin-top:0}}

.stripe{height:22px;background:repeating-linear-gradient(180deg,var(--sky) 0 5px,var(--cream) 5px 11px)}

section.block{padding-block:72px}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 32px;margin-bottom:28px}
h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.6vw,56px);line-height:1;letter-spacing:-.015em;margin:8px 0 0;text-wrap:balance}
.sec-head p{max-width:34em;margin:0;opacity:.85}

/* estudar: instrumento × ritmo */
.study{background:var(--cream);color:var(--ink)}
.study .eyebrow{color:var(--red)}
.mode{display:inline-flex;background:var(--cream-2);border-radius:999px;padding:4px}
.mode button{border:0;background:none;padding:9px 18px;border-radius:999px;font-weight:600;font-size:15px}
.mode button[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.chips button{border:2px solid var(--ink);background:none;border-radius:999px;padding:8px 16px;font-weight:600;font-size:15px}
.chips button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:var(--cream)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{position:relative;text-decoration:none;border-radius:16px;padding:16px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;background:var(--red);color:var(--cream);overflow:hidden;transition:transform .15s}
.tile:nth-child(4n+2){background:var(--red-deep)}
.tile:nth-child(4n+3){background:var(--ink)}
.tile:nth-child(4n+4){background:var(--orange)}
a.tile:hover{transform:translateY(-3px)}
.tile.soon{opacity:.45}
.t-top{display:flex;justify-content:space-between;align-items:start;gap:10px}
.t-name{font-family:var(--display);font-weight:800;font-size:26px;line-height:1;letter-spacing:-.01em}
.t-sub{font-size:14px;opacity:.85;margin-top:4px}
.t-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;opacity:.9}
.play{width:34px;height:34px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;flex:none}
.play svg{width:13px;height:13px;margin-left:2px;fill:var(--ink)}

/* chamadas e completos */
.list{margin-top:34px}
.list h3{font-family:var(--display);font-size:26px;margin:0 0 6px}
.list p.note{margin:0 0 14px;opacity:.8;font-size:15px}
.group{margin:0 0 6px;position:relative}
.group img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:20px;display:block}
.group figcaption{position:absolute;left:16px;bottom:14px;background:var(--red);padding:6px 12px;border-radius:999px;font-size:14px;font-weight:600}
@media (max-width:600px){.group img{aspect-ratio:4/3}}

/* aulas: faixa com foto + cards em pé (estilo Reels) */
.lessons{background:var(--red-deep)}
.banner{position:relative;border-radius:22px;overflow:hidden;margin-bottom:22px}
.banner img{width:100%;height:280px;object-fit:cover;object-position:40% 18%;display:block}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(122,2,10,.92) 0%,rgba(122,2,10,.7) 38%,rgba(122,2,10,0) 70%)}
.banner-text{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:32px 40px;max-width:560px}
.banner-text p{margin:12px 0 0;opacity:.92}
@media (max-width:700px){
  .banner img{height:360px;object-position:38% 20%}
  .banner::after{background:linear-gradient(0deg,rgba(122,2,10,.95) 0%,rgba(122,2,10,.75) 45%,rgba(122,2,10,0) 80%)}
  .banner-text{justify-content:end;padding:22px}
}
.cards-wrap{position:relative}
.cards{list-style:none;margin:0;padding:0 0 6px;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.cards::-webkit-scrollbar{display:none}
.cards li{flex:0 0 calc((100% - 5 * 14px) / 6);scroll-snap-align:start}
.card{position:relative;display:block;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:var(--ink);color:var(--cream);text-decoration:none;transition:transform .15s}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,2,4,.55) 0%,rgba(42,2,4,0) 30%,rgba(42,2,4,0) 45%,rgba(42,2,4,.92) 100%)}
a.card:hover{transform:translateY(-4px)}
.card.soon{opacity:.5}
.c-n{position:absolute;left:14px;top:8px;font-family:var(--display);font-weight:800;font-size:48px;line-height:1;color:var(--yellow);z-index:1}
.c-foot{position:absolute;z-index:1;left:12px;right:12px;bottom:12px;display:grid;gap:4px}
.c-name{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.05;text-wrap:balance}
.c-meta{font-size:11.5px;opacity:.85}
.arrow{position:absolute;top:50%;z-index:2;width:46px;height:46px;margin-top:-26px;border-radius:50%;border:0;background:var(--yellow);color:var(--ink);font-size:22px;font-weight:700;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.arrow[disabled]{opacity:0;pointer-events:none}
.arrow.prev{left:-18px}.arrow.next{right:-18px}
@media (max-width:900px){
  .cards{margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}
  .cards li{flex-basis:40%}
  .arrow{display:none}
}
@media (max-width:480px){.cards li{flex-basis:56%}}
/* cards deitados (16:9): chamadas e ritmos completos */
.cards.wide li{flex-basis:calc((100% - 2 * 14px) / 3)}
.cards.wide .card{aspect-ratio:16/9}
.cards.wide .card::after{background:linear-gradient(180deg,rgba(42,2,4,0) 35%,rgba(42,2,4,.92) 100%)}
.cards.wide .c-foot{grid-template-columns:1fr auto;align-items:end;gap:10px}
.cards.wide .c-meta{text-align:right}
@media (max-width:900px){.cards.wide li{flex-basis:62%}}
@media (max-width:480px){.cards.wide li{flex-basis:86%}}

/* página do vídeo */
.watch{padding-block:32px 72px}
.back{display:inline-block;margin-bottom:18px;font-weight:600;text-decoration:none;opacity:.85}
.back:hover{opacity:1;color:var(--yellow)}
.stage{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start}
.stage.vert{grid-template-columns:auto minmax(0,1fr)}
.screen{position:relative;background:#000;border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(60,0,0,.35)}
.screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.stage:not(.vert) .screen{aspect-ratio:16/9}
.stage.vert .screen{aspect-ratio:9/16;height:min(80vh,720px)}
@media (max-width:860px){
  .stage,.stage.vert{grid-template-columns:1fr}
  .stage.vert .screen{height:auto;width:min(100%,calc(78vh * 9 / 16));margin-inline:auto}
}
.info{display:grid;gap:18px;align-content:start}
.info h1{font-size:clamp(32px,4vw,52px);margin:6px 0 0}
.info .sub{margin:0;opacity:.85}
.views{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:14px;background:rgba(0,0,0,.18);padding:8px 14px;border-radius:999px;justify-self:start}
.views svg{width:18px;height:18px;fill:none;stroke:var(--yellow);stroke-width:2}
.share-slot{display:none}
.next h2{font-size:24px;margin:0 0 10px}
.next ul{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,246,220,.25)}
.next li{border-bottom:1px solid rgba(255,246,220,.25)}
.next a{display:flex;justify-content:space-between;gap:12px;padding:11px 2px;text-decoration:none;font-weight:600}
.next a:hover{color:var(--yellow)}
.next .d{font-family:var(--mono);font-size:13px;font-weight:400;opacity:.8}

footer{background:var(--ink);padding-block:48px calc(56px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
footer img{height:56px;width:auto}
footer p{margin:0;opacity:.75;font-size:14px;max-width:36em}
/* botão do som (só na página inicial) */
.som{position:fixed;z-index:40;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:52px;height:52px;border-radius:50%;border:0;background:var(--yellow);color:var(--ink);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3);cursor:pointer}
.som svg{width:24px;height:24px}
.som svg path{fill:currentColor}
.som svg path.o{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.som[aria-pressed="false"]{background:var(--cream)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}