/* Replay do Atelier do Luxo em aulas: catálogo (filas de cards) + player. Visual do Atelier: chumbo com grão, Times,
   rótulos em Helvetica espaçada na cor areia, fim do título em script, moldura de fio duplo, lacre LR, faixas esmeralda. */
@font-face{font-family:Tinos;src:url(fonts/Tinos-Regular-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;font-display:swap}
@font-face{font-family:Tinos;src:url(fonts/Tinos-Regular-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF;font-display:swap}
@font-face{font-family:Tinos;font-style:italic;src:url(fonts/Tinos-Italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC;font-display:swap}
@font-face{font-family:Tinos;font-style:italic;src:url(fonts/Tinos-Italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF;font-display:swap}
@font-face{font-family:"Pinyon Script";src:url(fonts/PinyonScript-latin.woff2) format("woff2");font-display:swap}
:root{
  /* nomes antigos mantidos, valores do Atelier: noite = chumbo, oxblood = esmeralda, oxblood-claro = areia */
  --noite-0:#161616; --noite-1:#1a1a1a; --noite-2:#1f1f1f; --noite-3:#262626; --noite-4:#2c2c2c;
  --oxblood:#22372B; --oxblood-vivo:#9DB3A5; --oxblood-claro:#CDB8A8;
  --pedra:#8A8A8A; --pedra-clara:#BDBDBD;
  --marfim-texto:#F4F4F4; --marfim-corpo:#CFCFCF; --marfim-numero:#F4F4F4;
  --display:"Times New Roman",Times,Tinos,serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --script:"Edwardian Script ITC","Pinyon Script",cursive;
  --lado:18px;
  --card:74vw;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--noite-0)}
body{background:var(--noite-0);color:var(--marfim-corpo);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.assistindo{overflow:hidden}
img{display:block;max-width:100%}
ol{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--marfim-texto);letter-spacing:-.015em}
em{font-style:italic;color:var(--oxblood-claro)}
.eyebrow{font:500 12px/1.3 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--pedra-clara)}
.filete{display:flex;align-items:center;width:180px;margin:14px auto 20px}
.filete::before,.filete::after{content:"";height:1px;flex:1;background:var(--pedra)}
.filete i{width:10px;height:15px;border:1.5px solid var(--pedra-clara);border-radius:50%;margin:0 10px}
:focus-visible{outline:2px solid var(--oxblood-claro);outline-offset:3px}

/* aviso do prazo */
.aviso-prazo{position:sticky;top:0;z-index:30;background:var(--oxblood);border-bottom:1px solid var(--oxblood-vivo);padding:10px var(--lado) 11px;text-align:center;font:400 13px/1.4 var(--sans);color:var(--marfim-texto)}
.aviso-prazo b{font-weight:600}
.aviso-prazo span{display:inline-block;color:var(--oxblood-claro);font-weight:500;font-variant-numeric:tabular-nums}

/* barra de navegação sobre o hero */
.barra{position:absolute;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:18px var(--lado)}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font:500 12px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--marfim-texto)}
.marca img{width:30px}
.marca span,.barra-dossie{white-space:nowrap}
@media (max-width:460px){.marca span{display:none}.barra-dossie{letter-spacing:.16em}}
.barra-dossie{font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--marfim-texto);border:1px solid rgba(244,244,244,.35);padding:10px 14px;transition:border-color .2s,background .2s}
.barra-dossie:hover{border-color:var(--oxblood-claro);background:rgba(34,55,43,.4)}

/* hero: no celular, a foto em cima e o texto embaixo (sem cobrir o rosto) */
.hero{position:relative;overflow:hidden;padding:0 0 30px}
.hero-img{position:relative;height:min(125vw,74svh);background:url(img/aulas/atelier-alto.webp) 50% 20%/cover no-repeat}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,22,22,.6) 0%,rgba(22,22,22,0) 20%,rgba(22,22,22,0) 55%,rgba(22,22,22,.85) 84%,var(--noite-0) 100%)}
.hero-txt{position:relative;z-index:1;max-width:620px;margin-top:-86px;padding:0 var(--lado)}
.selo{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--marfim-texto)}
.selo img{width:20px}
.hero h1{margin-top:14px;font-size:clamp(46px,12vw,104px);line-height:.98}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:18px;font:400 14px/1.3 var(--sans);color:var(--marfim-corpo)}
.meta b{font-weight:600;color:var(--oxblood-claro)}
.meta i{width:3px;height:3px;border-radius:50%;background:var(--pedra-clara)}
.hero-desc{margin-top:14px;font-size:16px;line-height:1.55;color:var(--marfim-corpo);max-width:540px}
.hero-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hero-cont{margin-top:14px;font-size:14px;color:var(--pedra-clara)}
.hero-cont b{color:var(--marfim-texto);font-weight:500}

.bt-play,.bt-sec{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;font:600 13px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid;transition:background .2s,border-color .2s,color .2s}
.bt-play{background:var(--marfim-numero);border-color:var(--marfim-numero);color:var(--noite-0)}
.bt-play:hover{background:#fff}
.bt-sec{background:rgba(31,31,31,.6);border-color:rgba(244,244,244,.3);color:var(--marfim-texto)}
.bt-sec:hover{border-color:var(--oxblood-claro);background:rgba(34,55,43,.45)}
.tri{width:0;height:0;border-left:12px solid currentColor;border-top:7.5px solid transparent;border-bottom:7.5px solid transparent;margin-left:2px}

/* catálogo: filas */
.catalogo{position:relative;z-index:2;padding:6px 0 40px}
.fila{margin-top:30px}
.fila-tit{padding:0 var(--lado);font:400 clamp(22px,5.4vw,30px)/1.15 var(--display)}
.fila-tit span{display:block;margin-bottom:6px;font:500 11px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--oxblood-claro)}
.trilho-wrap{position:relative}
.trilho{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--lado);padding:14px var(--lado) 18px;scrollbar-width:none}
.trilho::-webkit-scrollbar{display:none}
.seta{display:none}

.card{flex:0 0 var(--card);scroll-snap-align:start;text-decoration:none;color:inherit;position:relative}
.card-img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;container-type:inline-size;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
/* capa padrão das aulas */
.capa{position:absolute;inset:0;display:block;overflow:hidden;background:radial-gradient(90% 120% at 100% 100%,rgba(34,55,43,.75) 0%,rgba(34,55,43,.18) 45%,rgba(34,55,43,0) 70%),var(--noite-2);border:1px solid rgba(205,184,168,.2);transition:border-color .35s}
.capa::before{content:"";position:absolute;inset:7px;border:1px solid rgba(189,189,189,.12);pointer-events:none}
.capa-topo{position:absolute;left:8.5cqw;right:8.5cqw;top:9cqw;display:flex;align-items:center;gap:10px}
.capa-aula{font:600 clamp(10px,3.2cqw,12px)/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--oxblood-claro);white-space:nowrap}
.capa-topo::after{content:"";flex:1;height:1px;background:rgba(205,184,168,.3)}
.capa-parte{order:3;font:500 clamp(9px,2.8cqw,11px)/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--pedra-clara);white-space:nowrap}
.capa-num{position:absolute;right:6cqw;bottom:-11cqw;font:italic 400 58cqw/1 var(--display);letter-spacing:-.05em;color:rgba(205,184,168,.13);transition:color .35s}
.capa-tit{position:absolute;left:8.5cqw;right:22cqw;bottom:8.5cqw;font:400 clamp(17px,7.4cqw,27px)/1.12 var(--display);letter-spacing:-.01em;color:var(--marfim-texto);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.capa.mini .capa-topo{left:9cqw;top:10cqw}
.capa.mini .capa-aula{font-size:9px;letter-spacing:.22em}
.capa.mini .capa-num{right:8cqw;bottom:-14cqw;font-size:70cqw;color:rgba(205,184,168,.3)}
.card-play{position:absolute;z-index:2;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(34,55,43,.9);border:1px solid var(--oxblood-vivo);display:flex;align-items:center;justify-content:center;color:var(--marfim-numero);opacity:0;transform:scale(.85);transition:opacity .25s,transform .25s}
.card-play .tri{border-left-width:14px;border-top-width:9px;border-bottom-width:9px;margin-left:4px}
.capa-parte.visto{color:var(--oxblood-claro)}
.barra-prog{position:absolute;z-index:3;left:0;right:0;bottom:0;height:3px;background:rgba(244,244,244,.18)}
.barra-prog i{display:block;height:100%;background:var(--oxblood-vivo)}
.card-txt{display:flex;flex-direction:column;gap:3px;padding:11px 2px 0}
.card-meta{font:600 11px/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--pedra-clara)}
.card-sub{font-size:14px;line-height:1.45;color:var(--marfim-corpo)}
.card:hover .card-img,.card:focus-visible .card-img{box-shadow:0 18px 40px rgba(0,0,0,.55)}
.card:hover .capa,.card:focus-visible .capa{border-color:rgba(205,184,168,.55)}
.card:hover .capa-num,.card:focus-visible .capa-num{color:rgba(205,184,168,.22)}
.card:hover .card-play,.card:focus-visible .card-play{opacity:1;transform:scale(1)}
.card:focus-visible{outline:none}

/* dossiê (mantido do replay anterior) */
.dossie{padding:80px var(--lado) 100px;max-width:900px;margin:0 auto;text-align:center;border-top:1px solid rgba(138,138,138,.35)}
.dossie h2{font-size:clamp(34px,7.5vw,64px);line-height:1.05}
.corpo{margin:18px auto 0;max-width:600px;font-size:clamp(18px,4.4vw,21px)}
.botao{display:inline-block;margin-top:32px;background:var(--oxblood);border:1px solid var(--oxblood-vivo);color:var(--marfim-numero);text-decoration:none;font:600 14px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;padding:21px 32px 21px 38px;transition:background .2s ease}
.botao:hover{background:#2c4637}
.como{margin-top:70px;text-align:left;background:var(--noite-2);padding:40px 22px 44px}
.como > .eyebrow{text-align:center}
.aviso{margin:14px auto 0;text-align:center;max-width:560px;font:400 clamp(19px,4.6vw,23px)/1.35 var(--display);color:var(--marfim-texto)}
.passos{margin-top:30px;border-top:1px solid var(--pedra)}
.passos li{display:grid;grid-template-columns:50px 1fr;gap:4px;padding:24px 0;border-bottom:1px solid rgba(138,138,138,.5)}
.passos .n{font:italic 400 32px/1 var(--display);color:var(--oxblood-claro)}
.passos h3{font-size:22px;line-height:1.2}
.passos p{margin-top:8px;font-size:16px}
.como .botao{display:block;text-align:center;margin:32px auto 0;max-width:360px}
.rodape{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px var(--lado) 56px;background:var(--noite-0);font:500 12px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--pedra)}
.rodape img{width:64px}

/* encerrado */
.encerrado-box{margin:20px var(--lado) 0;padding:60px 24px;text-align:center;background:var(--noite-2);border:1px solid rgba(189,189,189,.18)}
.encerrado-box h2{font-size:clamp(28px,6vw,44px)}
.encerrado-box p{margin-top:10px;color:var(--pedra-clara);font-size:15px}

/* player */
.player{position:fixed;inset:0;z-index:40;background:var(--noite-0);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.player[hidden]{display:none}
.player-topo{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:16px;padding:12px var(--lado);background:rgba(22,22,22,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(138,138,138,.3)}
.voltar{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid rgba(244,244,244,.28);padding:10px 14px;cursor:pointer;font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--marfim-texto)}
.voltar span{font-size:16px;letter-spacing:0}
.voltar:hover{border-color:var(--oxblood-claro)}
.player-serie{font:400 17px/1.2 var(--display);color:var(--marfim-texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-video{position:relative;background:#000;aspect-ratio:16/9;max-height:calc(100svh - 64px);margin:0 auto;width:100%}
.player-video video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.proxima{position:absolute;right:16px;bottom:64px;z-index:2;width:min(340px,calc(100% - 32px));background:rgba(22,22,22,.94);border:1px solid rgba(205,184,168,.4);padding:18px 18px 0}
.proxima-tit{margin-top:8px;font:400 19px/1.25 var(--display);color:var(--marfim-texto)}
.proxima-tit span{display:block;margin-bottom:4px;font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--oxblood-claro)}
.proxima-acoes{display:flex;gap:8px;margin-top:14px}
.proxima-acoes .bt-play,.proxima-acoes .bt-sec{min-height:42px;padding:0 14px;font-size:11px}
.proxima-barra{height:3px;margin:16px -18px 0;background:rgba(244,244,244,.15)}
.proxima-barra i{display:block;height:100%;width:0;background:var(--oxblood-vivo)}

.player-info{display:grid;gap:36px;padding:26px var(--lado) 70px;max-width:1280px;margin:0 auto}
.p-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:400 13px/1.3 var(--sans);color:var(--pedra-clara)}
.p-meta span{font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--oxblood-claro)}
.p-meta i{width:3px;height:3px;border-radius:50%;background:var(--pedra)}
.player-txt h2{margin-top:12px;font-size:clamp(30px,7vw,52px);line-height:1.05}
.p-sub{margin-top:10px;font:italic 400 clamp(18px,4.4vw,22px)/1.35 var(--display);color:var(--oxblood-claro)}
.p-desc{margin-top:14px;font-size:16px;max-width:640px}
.p-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.p-acoes [hidden]{display:none}
.episodios .eyebrow{padding-bottom:12px;border-bottom:1px solid rgba(138,138,138,.4)}
.ep{display:grid;grid-template-columns:128px 1fr;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid rgba(138,138,138,.25);text-decoration:none;color:inherit;position:relative}
.ep-n{display:none}
.ep-img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;container-type:inline-size}
.ep-agora{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(34,55,43,.72);font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--marfim-numero)}
.ep-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ep-tit{font:400 16px/1.25 var(--display);color:var(--marfim-texto)}
.ep-meta{font-size:12px;color:var(--pedra-clara);letter-spacing:.04em}
.ep-desc{display:none;font-size:14px;line-height:1.45;color:var(--marfim-corpo)}
.ep.atual .ep-tit{color:var(--oxblood-claro)}
.ep:hover .ep-tit{color:var(--marfim-numero)}
.ep:hover .capa,.ep.atual .capa{border-color:rgba(205,184,168,.55)}

@media (min-width:700px){
  :root{--lado:40px;--card:40vw}
  .ep{grid-template-columns:36px 180px 1fr;gap:18px;padding:18px 0}
  .ep-n{display:block;font:italic 400 30px/1 var(--display);color:var(--pedra-clara);text-align:center;padding-top:14px}
  .ep-desc{display:block}
}
@media (min-width:1000px){
  :root{--lado:56px;--card:calc((100vw - 2 * 56px - 3 * 12px) / 3.35)}
  .hero{min-height:86vh;display:flex;align-items:center;padding:80px 0 120px}
  .hero-img{position:absolute;inset:0;left:18%;height:auto;background-image:url(img/aulas/atelier-largo.webp);background-position:70% 30%}
  .hero-img::after{display:none}
  .hero-txt{margin-top:0}
  .hero::after{content:"";position:absolute;inset:0;background:
    linear-gradient(90deg,var(--noite-0) 0%,var(--noite-0) 16%,rgba(22,22,22,.7) 34%,rgba(22,22,22,0) 62%),
    linear-gradient(180deg,rgba(22,22,22,.5) 0%,rgba(22,22,22,0) 20%,rgba(22,22,22,0) 70%,var(--noite-0) 100%)}
  .hero-txt{max-width:760px}
  .hero-desc{font-size:17px}
  .catalogo{margin-top:-90px}
  .trilho{gap:12px;padding-top:18px;padding-bottom:26px}
  .seta{display:flex;align-items:center;justify-content:center;position:absolute;top:18px;bottom:26px;z-index:4;width:calc(var(--lado) - 8px);border:0;cursor:pointer;background:rgba(22,22,22,.7);color:var(--marfim-texto);opacity:0;transition:opacity .2s}
  .seta::before{content:"";width:14px;height:14px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);margin-right:4px}
  .seta.esq{left:0}.seta.esq::before{transform:rotate(135deg);margin:0 0 0 4px}
  .seta.dir{right:0}
  .trilho-wrap:hover .seta{opacity:1}
  .trilho-wrap.no-inicio .seta.esq,.trilho-wrap.no-fim .seta.dir{opacity:0;pointer-events:none}
  .card:hover .card-img{transform:scale(1.04)}
  .player-info{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:56px;padding-top:36px}
  .player-txt{position:sticky;top:90px;align-self:start}
  .ep{grid-template-columns:36px 170px 1fr}
  .como{padding:56px 60px 60px}
  .passos li{grid-template-columns:80px 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Atelier ---------- */
body::before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;background:url(img/grao.png);opacity:.14}
em{color:var(--marfim-texto)}
.script{font-family:var(--script);font-weight:400;font-size:1.32em;line-height:.8;letter-spacing:0;white-space:nowrap;color:var(--marfim-texto)}
.selo img{width:28px}
.selo{color:var(--oxblood-claro)}
.marca img{width:34px}
.hero h1{font-size:clamp(50px,13vw,112px);line-height:1;letter-spacing:-.01em}
.hero h1 .script{display:inline-block;margin-left:.04em;padding-right:.08em}
.eyebrow,.capa-aula,.card-meta,.fila-tit span{color:var(--oxblood-claro)}
.fila-tit span{display:flex;width:fit-content;align-items:center;gap:14px}
.fila-tit span::after{content:"";width:40px;height:1px;background:currentColor;opacity:.6}
.bt-play{background:var(--marfim-numero);color:var(--noite-0);font-weight:500}
.bt-play:hover{background:#fff}
.bt-sec,.voltar{font-weight:500}
/* capa: cartão chumbo de fio duplo, com o lacre e uma luz esmeralda no canto */
.capa{background:radial-gradient(110% 130% at 100% 100%,rgba(34,55,43,.95) 0%,rgba(34,55,43,.35) 45%,rgba(34,55,43,0) 72%),var(--noite-2);border:1px solid rgba(205,184,168,.35)}
.capa::before{inset:6px;border-color:rgba(205,184,168,.14)}
.capa-num{font-style:normal;color:rgba(205,184,168,.10)}
.capa.mini .capa-num{color:rgba(205,184,168,.22)}
.card-play{background:rgba(34,55,43,.92);border-color:rgba(205,184,168,.6)}
.barra-prog i{background:var(--oxblood-claro)}
.proxima-barra i{background:var(--oxblood-claro)}
.p-sub{color:var(--oxblood-claro)}
.ep.atual .ep-tit{color:var(--oxblood-claro)}
.player-serie .script{font-size:1.4em}
.rodape{padding:48px var(--lado) 64px;border-top:1px solid rgba(205,184,168,.18)}
.rodape img{width:120px;opacity:.85}
@media (min-width:1000px){
  .hero-img{left:46%;background-position:50% 30%}
  .hero::after{background:
    linear-gradient(90deg,var(--noite-0) 0%,var(--noite-0) 46%,rgba(22,22,22,.6) 50%,rgba(22,22,22,0) 64%),
    linear-gradient(180deg,rgba(22,22,22,.5) 0%,rgba(22,22,22,0) 20%,rgba(22,22,22,0) 70%,var(--noite-0) 100%)}
}