/* =====================================================================
   JCE 2.0 — SITE
   Componentes das páginas que o DS não tinha, no mesmo idioma visual:
   abertura interna, séries, galeria, vídeos + player, cases, menu mobile.
   ===================================================================== */

/* ---------- acessibilidade ---------- */
.skip{position:fixed;left:var(--gutter);top:-60px;z-index:100;background:var(--ink);color:var(--bone);padding:10px 14px;transition:top .3s var(--ease)}
.skip:focus{top:12px}

/* ---------- títulos com palavras inteiras (quebra só entre palavras) ---------- */
.hero-title .wd{display:inline-block;white-space:nowrap}

/* ---------- abertura das páginas internas ---------- */
.hero--page{height:auto;min-height:78vh;min-height:78svh;justify-content:flex-end;padding-top:calc(var(--nav-top) + 8vh);padding-bottom:10vh}
.hero--page .hero-title{line-height:1}  /* títulos que quebram: acentos não encostam na linha de cima */
.hero--page .hero-title .row{white-space:normal;font-size:clamp(40px,7.4vw,118px)}
.hero--page .hero-sub{max-width:520px}
.hero--page .hero-meta{bottom:10vh}
.hero--page .reg-h{top:auto;bottom:0}
@media(max-width:760px){
  .hero--page .hero-title .row{font-size:11vw}
  .hero--page .hero-meta{position:static;text-align:left;margin-top:4vh}
}
.go--back i{transition:transform .35s var(--ease)}
.go--back:hover i{transform:translateX(-6px)}

/* ---------- lista: variações ---------- */
.list--tight{padding-top:0;padding-bottom:12vh}
.lic-idx{display:inline-block;min-width:3.2em;font-size:11px;letter-spacing:.14em;color:var(--verm);vertical-align:middle;transform:translateY(-.35em)}
a.lic-row{color:inherit}

/* ---------- intro: título + parágrafos ---------- */
.intro{background:var(--bone);padding:14vh var(--gutter) 6vh}
.intro .section-head{margin-bottom:6vh}
.intro-body{max-width:760px;margin-left:auto;display:grid;gap:1.4em}
.intro-body p{font-size:17px;line-height:1.65;color:var(--t-lead)}
.intro-body .intro-lead{font-size:clamp(20px,1.9vw,26px);line-height:1.4;color:var(--ink);font-weight:500;letter-spacing:-.01em}

/* ---------- séries: grade de thumbs ---------- */
.series{background:var(--bone);padding:14vh var(--gutter) 16vh}
.series .section-head{margin-bottom:6vh}
.series-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5vh 2.4vw}
.series--compact{padding-top:10vh}
.series--compact .series-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.series-grid,.series--compact .series-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.series-grid{grid-template-columns:1fr}.series--compact .series-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.series-card{display:block}
.frame.thumb{width:100%;height:auto;aspect-ratio:4/5}
.frame.thumb img{width:100%;height:100%;transform:scale(1.06);transition:transform 1.1s var(--ease),filter .6s var(--ease)}
.series-card:hover .frame.thumb img,.video-card:hover .frame.thumb img{transform:scale(1);filter:grayscale(0) contrast(1.04)}
.series-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--hair-ink);padding:14px 0 12px;position:relative}
.series-meta::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--verm);transition:width .5s var(--ease)}
.series-card:hover .series-meta::after{width:100%}
.series-meta h3{font-weight:900;font-size:clamp(18px,1.8vw,24px);letter-spacing:-.015em;line-height:1.15}
.series-meta .mono{color:var(--t-index);white-space:nowrap;font-size:10px}

/* ---------- galeria da série ---------- */
.gallery{background:var(--bone);padding:6vh var(--gutter) 10vh;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10vh 2.4vw;align-items:start}
.gallery-item{margin:0}
.gallery-item--h{grid-column:1/-1}
@media(max-width:760px){.gallery{grid-template-columns:1fr;gap:6vh}}
.gallery-img{overflow:hidden;background:var(--frame-ground)}
.gallery-img img{width:100%;height:auto}
.gallery-item figcaption{display:flex;gap:18px;margin-top:14px;color:var(--t-muted);font-size:10px}

/* ---------- vídeos ---------- */
.videos{background:var(--bone);padding:12vh var(--gutter) 10vh}
.videos .section-head{margin-bottom:5vh}
.video-filters{margin-bottom:5vh}
.video-card{display:block;width:100%;text-align:left;cursor:pointer}
.video-card .frame.thumb{aspect-ratio:16/9}
.video-card--featured{margin-bottom:8vh}
.video-card--featured .frame.thumb{aspect-ratio:21/9}
@media(max-width:700px){.video-card--featured .frame.thumb{aspect-ratio:16/9}}
.video-card--featured .video-title{font-size:var(--fs-h3);font-weight:900}
.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7vh 2.4vw}
@media(max-width:700px){.video-grid{grid-template-columns:1fr}}
.video-meta{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:14px 0 12px;border-bottom:1px solid var(--hair-ink)}
.video-title{font-weight:700;font-size:var(--fs-title);letter-spacing:-.015em;line-height:1.15}
.video-meta .mono{color:var(--t-index);font-size:10px;white-space:nowrap}
.play{position:absolute;inset:0;z-index:3;display:grid;place-items:center}
.play i{width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.75);color:#fff;display:grid;place-items:center;
  font-style:normal;font-size:14px;padding-left:3px;transition:transform .4s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.video-card:hover .play i{transform:scale(1.12);background:var(--verm);border-color:var(--verm)}
.video-card.is-hidden{display:none}

/* ---------- player (overlay) ---------- */
.player{position:fixed;inset:0;z-index:95;background:rgba(12,11,10,.97);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:70px var(--gutter) 40px}
.player[hidden]{display:none}
.player-frame{width:min(100%,calc((100vh - 180px) * 16 / 9),1400px);aspect-ratio:16/9;background:#000;position:relative}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--t-mono-ink)}
.player-cap{color:var(--t-mono-ink)}
.player-close{position:absolute;top:22px;right:var(--gutter);color:var(--bone);display:flex;gap:10px;align-items:center;letter-spacing:.18em}
.player-close i{font-style:normal;font-size:18px;line-height:1;transition:transform .35s var(--ease)}
.player-close:hover i{transform:rotate(90deg);color:var(--verm)}

/* ---------- cases ---------- */
.cases{background:var(--bone);padding:10vh var(--gutter) 16vh}
.cases .section-head{margin-bottom:6vh}
.case{border-top:1px solid var(--hair-ink);padding:40px 0 48px;position:relative}
.case:last-child{border-bottom:1px solid var(--hair-ink)}
.case::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--verm);transition:width .6s var(--ease)}
.case:hover::before{width:100%}
.case-head{display:grid;grid-template-columns:60px 1fr auto;gap:3vw;align-items:start;margin-bottom:34px}
.case-head .idx{color:var(--verm);padding-top:.6em}
.case-head h3{font-weight:900;font-size:var(--fs-h3);letter-spacing:-.02em;line-height:1.08}
.case-head p{margin-top:8px;color:var(--t-muted)}
.case-metric{text-align:right}
.case-metric span{display:block;font-weight:700;font-size:clamp(28px,4vw,56px);letter-spacing:-.02em;line-height:1}
.case-metric small{display:block;margin-top:8px;color:var(--t-index);font-size:10px}
.case-cols{display:grid;grid-template-columns:60px repeat(3,minmax(0,1fr));gap:3vw}
.case-cols::before{content:""}
.case-cols .mono{display:block;margin-bottom:10px;color:var(--t-index);font-size:10px}
.case-cols p{font-size:15px;line-height:1.6;color:var(--t-lead)}
@media(max-width:860px){
  .case-head{grid-template-columns:40px 1fr}
  .case-metric{grid-column:2;text-align:left}
  .case-cols{grid-template-columns:1fr;gap:22px}
  .case-cols::before{display:none}
}

/* ---------- ledger: texto corrido ao lado ---------- */
.ledger-aside{font-size:clamp(18px,1.7vw,24px);line-height:1.55;color:var(--t-foot);font-weight:500}

/* ---------- rodapé: assinatura ---------- */
.foot-cols .foot-sign{height:34px;width:auto}
.foot-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:5vh}
.foot-actions .foot-cta{margin:0}
.foot-sub{color:var(--t-foot);display:inline-flex;gap:8px;align-items:center;font-size:11px;letter-spacing:.18em;transition:color .25s var(--ease)}
.foot-sub i{font-style:normal;transition:transform .35s var(--ease)}
.foot-sub:hover{color:var(--verm)}
.foot-sub:hover i{transform:translate(3px,-3px)}

/* ---------- menu mobile ---------- */
.nav-toggle{display:none;border:1px solid currentColor;padding:9px 14px;font-size:11px;letter-spacing:.18em}
@media(max-width:760px){
  .nav-toggle{display:inline-block}
  .nav .links .buy,.nav .links .lang{display:none}
  .nav .wordmark span{display:none}
}
.menu-mobile{position:fixed;inset:0;z-index:69;background:var(--ink);color:var(--bone);display:flex;flex-direction:column;
  justify-content:space-between;padding:110px var(--gutter) 34px}
.menu-mobile[hidden]{display:none}
.menu-mobile ol{display:grid;gap:4px}
.menu-mobile ol a{display:flex;align-items:baseline;gap:14px;font-weight:900;font-size:clamp(28px,8.6vw,46px);letter-spacing:-.02em;
  line-height:1.15;border-bottom:1px solid var(--hair-bone);padding:12px 0}
.menu-mobile ol a .mono{color:var(--verm);font-size:10px}
.menu-mobile ol a[aria-current="page"]{color:var(--verm)}
.menu-mobile-foot{display:flex;justify-content:space-between;gap:18px;color:var(--t-foot)}
body.menu-open{overflow:hidden}

/* ---------- títulos longos (Operação Criativa) ---------- */
.hero--long .hero-title .row{font-size:clamp(36px,5.6vw,92px)}
@media(max-width:760px){.hero--long .hero-title .row{font-size:9.4vw}}

/* ---------- capítulos numerados ---------- */
.chapters{background:var(--bone);padding:4vh var(--gutter) 16vh}
.chapter{display:grid;grid-template-columns:60px minmax(0,1fr) minmax(0,1.6fr);gap:3vw;border-top:1px solid var(--hair-ink);padding:44px 0 52px;position:relative}
.chapter:last-child{border-bottom:1px solid var(--hair-ink)}
.chapter::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--verm);transition:width .6s var(--ease)}
.chapter:hover::before{width:100%}
.chapter-idx{color:var(--verm);padding-top:.7em}
.chapter-title{font-weight:900;font-size:var(--fs-h3);letter-spacing:-.02em;line-height:1.08}
.chapter-body{display:grid;gap:1.1em}
.chapter-body > p{font-size:17px;line-height:1.65;color:var(--t-lead)}
.chapter-body > p:first-child{font-size:clamp(18px,1.5vw,21px);color:var(--ink);line-height:1.55}
.chapter-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--hair-ink);margin-top:.4em}
.chapter-items.is-even{grid-template-columns:repeat(2,minmax(0,1fr))}
.chapter-item{padding:22px 22px 24px 0;border-bottom:1px solid var(--hair-ink)}
.chapter-items .chapter-item{border-right:1px solid var(--hair-ink);padding-left:22px}
.chapter-items .chapter-item:first-child,.chapter-items.is-even .chapter-item:nth-child(odd){padding-left:0}
.chapter-items:not(.is-even) .chapter-item:nth-child(3n),.chapter-items.is-even .chapter-item:nth-child(2n){border-right:0}
.chapter-items:not(.is-even) .chapter-item:nth-child(3n+1){padding-left:0}
.chapter-item h4{font-weight:700;font-size:17px;letter-spacing:-.01em;margin-bottom:10px;line-height:1.3}
.chapter-item p{font-size:14.5px;line-height:1.6;color:var(--t-lead)}
@media(max-width:1100px){.chapter{grid-template-columns:48px minmax(0,1fr)}.chapter-body{grid-column:2}}
@media(max-width:760px){
  .chapter{grid-template-columns:1fr;gap:14px}.chapter-body{grid-column:auto}
  .chapter-items,.chapter-items.is-even{grid-template-columns:1fr}
  .chapter-items .chapter-item{border-right:0;padding-left:0}
}

/* ---------- índice de âncoras ---------- */
.anchors{background:var(--bone);padding:0 var(--gutter) 10vh;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4vw}
.anchor{display:grid;grid-template-columns:auto 1fr auto;gap:6px 16px;align-items:baseline;border-top:1px solid var(--ink);padding:18px 0;position:relative}
.anchor .anchor-name{font-weight:900;font-size:clamp(22px,2.6vw,38px);letter-spacing:-.02em;line-height:1}
.anchor .anchor-sub{grid-column:2/-1;color:var(--t-muted);font-size:10px;line-height:1.7}
.anchor i{font-style:normal;transition:transform .35s var(--ease)}
.anchor:hover i{transform:translateY(5px)}
.anchor::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--verm);transition:width .5s var(--ease)}
.anchor:hover::after{width:100%}
@media(max-width:860px){.anchors{grid-template-columns:1fr}}

/* ---------- abertura de case ---------- */
.case-intro{background:var(--bone);padding:16vh var(--gutter) 8vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:5vw;border-top:1px solid var(--hair-ink);scroll-margin-top:60px}
.case-eyebrow{display:block;color:var(--verm);margin-bottom:22px;line-height:1.8}
.case-name{font-weight:900;font-size:clamp(52px,9vw,150px);letter-spacing:-.04em;line-height:.88;word-break:break-word}
.case-intro-body{display:grid;gap:1.1em;align-content:start;padding-top:8px}
.case-intro-body > p{font-size:17px;line-height:1.65;color:var(--t-lead)}
.case-intro-body .case-lead{font-size:clamp(22px,2.3vw,32px);line-height:1.25;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.case-facts{display:grid;border-top:1px solid var(--hair-ink);margin-top:.6em}
.case-facts > div{display:grid;grid-template-columns:minmax(110px,170px) 1fr;gap:18px;border-bottom:1px solid var(--hair-ink);padding:12px 0}
.case-facts dt{color:var(--t-index);font-size:10px;padding-top:3px}
.case-facts dd{font-size:15px;line-height:1.5}
.case-intro-body .btn-outline{justify-self:start;margin-top:.6em}
@media(max-width:900px){.case-intro{grid-template-columns:1fr;gap:5vh;padding-top:12vh}}
@media(max-width:560px){.case-facts > div{grid-template-columns:1fr;gap:4px}}

/* ---------- telas de produto ---------- */
.screens{background:var(--bone);padding:0 var(--gutter) 14vh}
.screens-title{color:var(--t-index);margin-bottom:22px}
.screens-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6vh 2.4vw}
.screen{margin:0}
.screen--full{grid-column:1/-1}
.screen-img{background:var(--frame-ground);overflow:hidden;border:1px solid var(--hair-ink)}
.screen-img img{width:100%;height:auto}
.screen figcaption{display:flex;gap:16px;margin-top:12px;color:var(--t-muted);font-size:10px;line-height:1.7}
@media(max-width:760px){.screens-grid{grid-template-columns:1fr}}

/* ---------- MODO ESCURO (páginas com "theme":"dark") ----------
   Troca papel e tinta: os componentes leem os mesmos tokens. */
body.theme-dark{
  --bone:#161513; --ink:#f4f1ea;
  --hair-ink:rgba(244,241,234,.16);
  --t-primary:#f4f1ea; --t-lead:rgba(244,241,234,.8); --t-demo:rgba(244,241,234,.84);
  --t-spec:rgba(244,241,234,.6); --t-label:rgba(244,241,234,.6); --t-muted:rgba(244,241,234,.5);
  --t-index:rgba(244,241,234,.45); --t-placeholder:rgba(244,241,234,.25);
  --stroke-outline:rgba(244,241,234,.6);
  --frame-ground:#24221f;
  background:var(--bone);color:var(--ink);
}
body.theme-dark ::selection{background:var(--verm);color:#f4f1ea}
body.theme-dark .reg-cross::before,body.theme-dark .reg-cross::after{background:var(--ink)}