/* Materiais Venturi · dobras variadas: foto, banda de imagem, divisão texto e imagem, animação ao rolar.
   Carregar depois de material.css. */

/* herói com foto da marca à direita */
.hero.foto{background:var(--preto);min-height:min(78vh,720px);display:flex;align-items:center}
.hero.foto::before{inset:0;height:auto;background:var(--foto) var(--foto-pos,72% center)/var(--foto-tam,cover) no-repeat;opacity:1;mask-image:none;-webkit-mask-image:none}
.hero.foto::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#060606 30%,rgba(6,6,6,.82) 52%,rgba(6,6,6,.25) 78%,rgba(6,6,6,.1));pointer-events:none}
.hero.foto .w{z-index:1;width:100%}
.hero.foto .hero-txt{max-width:620px}

/* faixa alternada */
section.alt{background:radial-gradient(900px 420px at 100% 0%,rgba(222,27,27,.09),transparent 65%),#0E0E10;border-top:1px solid var(--line2)}
section.cola{padding-top:44px}
.banda .duo-txt p{color:var(--sub);font-size:1.06rem}

/* banda de imagem que sangra a largura toda */
.banda{position:relative;padding-block:120px 70px;border-bottom:1px solid var(--line);overflow:hidden;background:#000}
.banda::before{content:'';position:absolute;inset:0;background:var(--img) center/cover no-repeat;opacity:.85;transform:scale(1.06);transition:transform 1.8s ease}
.banda.vista::before{transform:scale(1)}
.banda::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,6,.2),rgba(6,6,6,.5) 45%,#060606 100%)}
.banda .w{position:relative;z-index:1}
.banda .cap-h{margin-bottom:0}
.banda .citacao{font-size:clamp(2rem,6.4vw,4rem);max-width:18ch}
.banda .credito{position:absolute;right:16px;top:14px;z-index:1;font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(244,242,239,.5)}

/* divisão texto e imagem */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.split.inv>:first-child{order:2}
.split.topo{align-items:start}
.split .quadro{position:relative;border:1px solid var(--line2);overflow:hidden;background:#000;margin:0}
.split .quadro img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.split .quadro.largo img{aspect-ratio:16/10}
.split .quadro figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;background:linear-gradient(transparent,rgba(6,6,6,.92));font:500 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sub)}
.split .colar{position:sticky;top:24px}

/* print real dentro de uma janela de navegador */
.janela-nav{border:1px solid var(--line2);background:#111;box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.janela-nav .barra-nav{display:flex;gap:6px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line)}
.janela-nav .barra-nav i{width:9px;height:9px;border-radius:50%;background:var(--line2);flex:none}
.janela-nav .barra-nav span{margin-left:10px;font:500 10px/1 var(--mono);color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.janela-nav img{width:100%}
.janela-nav + figcaption{display:flex;gap:12px;align-items:flex-start;margin-top:12px;font-size:.9rem}
.inclina{transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);transition:transform .6s ease}
.inclina:hover{transform:none}

/* esteira das três etapas, com o pulso andando */
.esteira{position:relative}
.esteira .linha-pulso{position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--line2);overflow:hidden;z-index:1}
.esteira .linha-pulso::after{content:'';position:absolute;top:0;left:-30%;width:30%;height:100%;background:linear-gradient(90deg,transparent,var(--red-bright),transparent);animation:pulso 3.2s linear infinite}
@keyframes pulso{to{left:100%}}
.ico{display:block;width:40px;height:40px;border:1.5px solid var(--red);margin-bottom:12px;position:relative}
.ico.robo::before{content:'';position:absolute;left:9px;top:9px;width:14px;height:14px;border:2px solid var(--red-bright);border-radius:50%}
.ico.robo::after{content:'';position:absolute;right:6px;bottom:8px;width:10px;height:2px;background:var(--red-bright);transform:rotate(45deg)}
.ico.gaveta::before{content:'';position:absolute;left:8px;right:8px;top:8px;height:8px;border:2px solid var(--red-bright)}
.ico.gaveta::after{content:'';position:absolute;left:8px;right:8px;bottom:8px;height:8px;border:2px solid var(--red-bright)}
.ico.lista::before{content:'';position:absolute;left:9px;right:9px;top:10px;height:2px;background:var(--red-bright);box-shadow:0 7px 0 var(--red-bright),0 14px 0 var(--muted)}

/* página anotada: os números acendem em sequência */
.anota.vista .pt::before{animation:acende 6s ease-in-out infinite}
.anota.vista .pt[data-n="02"]::before{animation-delay:1.2s}
.anota.vista .pt[data-n="03"]::before{animation-delay:2.4s}
.anota.vista .pt[data-n="04"]::before{animation-delay:3.6s}
@keyframes acende{0%,18%{transform:scale(1.3);box-shadow:0 0 0 6px rgba(222,27,27,.25)}26%,100%{transform:none;box-shadow:none}}

/* a base sobe tijolo por tijolo */
.base.vista .tijolos span{animation:sobe .6s ease both}
.base.vista .tijolos span:nth-child(2){animation-delay:.12s}.base.vista .tijolos span:nth-child(3){animation-delay:.24s}.base.vista .tijolos span:nth-child(4){animation-delay:.36s}.base.vista .tijolos span:nth-child(5){animation-delay:.48s}.base.vista .tijolos span:nth-child(6){animation-delay:.6s}.base.vista .tijolos span:nth-child(7){animation-delay:.72s}
@keyframes sobe{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}

/* conferências com o placar colado ao lado */
.confere{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:34px;align-items:start}
.confere .lateral{position:sticky;top:24px;display:flex;flex-direction:column;gap:14px}
.confere .lateral .placar{margin-top:0;grid-template-columns:1fr;gap:12px}
.confere .lateral .faixas{grid-template-columns:1fr;margin-top:0}
.confere .lateral .faixas li{border-right:0;border-bottom:1px solid var(--line2);padding:14px}
.confere .lateral .faixas li:last-child{border-bottom:0}

/* autor em página inteira */
.autor-grande{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border:1px solid var(--line2);background:var(--preto2)}
.autor-grande img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;display:block}
.autor-grande figure{margin:0;overflow:hidden}
.autor-grande figure img{object-position:60% center}
.autor-grande .txt{padding:34px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.autor-grande h3{font-size:clamp(1.8rem,5vw,2.8rem)}

/* acordeão */
.acordeao{border-top:1px solid var(--line2)}
.acordeao details{border-bottom:1px solid var(--line2)}
.acordeao summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 2px;font:900 1.02rem/1.15 var(--sans);text-transform:uppercase;color:var(--text)}
.acordeao summary::-webkit-details-marker{display:none}
.acordeao summary::after{content:'+';flex:none;font:700 18px/1 var(--mono);color:var(--red-bright);transition:transform .2s}
.acordeao details[open] summary::after{transform:rotate(45deg)}
.acordeao details p{padding:0 2px 16px;color:var(--sub);max-width:70ch}

/* número gigante vazado ao fundo de uma seção */
.marca-fundo{position:relative;overflow:hidden}
.marca-fundo::before{content:attr(data-marca);position:absolute;right:-2%;top:-6%;font:900 clamp(12rem,40vw,30rem)/.8 var(--sans);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(222,27,27,.18);pointer-events:none}
.marca-fundo>.w{position:relative}

/* linha do tempo da semana, com o traço correndo */
.semana-anim{position:relative}
.semana-anim::before{content:'';position:absolute;left:0;top:0;height:3px;width:0;background:var(--red-bright);z-index:1}
.semana-anim.vista::before{animation:corre 2.4s ease forwards}
@keyframes corre{to{width:100%}}

/* passo a passo com print anotado: como conferir, assim não / assim sim, repare em */
/* peças que o playbook usa sem carregar material.css */
.ficticio{font:500 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block}
.marcas{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
.marcas li{padding-left:20px;position:relative}
.marcas li::before{content:'';position:absolute;left:0;top:.68em;width:9px;height:2px;background:var(--red-bright)}
.selo{flex:none;font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;background:var(--red);color:#fff}
.selo.ilus{background:transparent;color:var(--muted);border:1px solid var(--line2)}
.passo{display:flex;flex-direction:column;gap:16px;border:1px solid var(--line2);background:var(--preto2);padding:20px;margin-top:4px}
.acoes{list-style:none;counter-reset:a;display:grid;gap:10px;margin:0;padding:0}
.acoes li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;counter-increment:a;color:var(--sub)}
.acoes li::before{content:counter(a);width:26px;height:26px;background:var(--red);color:#fff;font:700 13px/26px var(--mono);text-align:center}
.acoes b{color:var(--text)}
.comparar{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.print-cel{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.print-cel .moldura{border:7px solid #1c1c20;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 22px 44px -26px rgba(0,0,0,.95)}
.print-cel .moldura img{width:100%;display:block}
.selo-print{align-self:flex-start;font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:7px 9px}
.print-cel.nao .selo-print{border:1.5px solid var(--muted);color:var(--sub)}
.print-cel.sim .selo-print{background:var(--red);color:#fff}
.leg-print{list-style:none;counter-reset:l;display:grid;gap:8px;margin:0;padding:0;font-size:.93rem;color:var(--sub)}
.leg-print li{display:grid;grid-template-columns:24px 1fr;gap:8px;counter-increment:l;align-items:start}
.leg-print li::before{content:counter(l);width:21px;height:21px;border-radius:50%;background:var(--red);color:#fff;font:700 11px/21px Arial,sans-serif;text-align:center;margin-top:1px}
.print-cel.nao .leg-print li::before{background:transparent;border:1.5px solid var(--red-bright);color:var(--red-bright);line-height:18px}
.repare{border-left:3px solid var(--red-bright);padding:6px 0 6px 16px}
.repare .marcas{margin-top:10px}
.print-largo{margin:0;display:flex;flex-direction:column;gap:10px}
.print-largo img{width:100%;border:1px solid var(--line2);border-radius:6px;display:block}
.print-largo figcaption{display:flex;gap:12px;align-items:flex-start;font-size:.9rem}
@media (max-width:760px){
  .comparar{grid-template-columns:1fr;gap:26px}
  .print-cel .moldura{max-width:330px}
  .passo{padding:14px}
}
@media print{
  .passo{padding:4mm;gap:3mm;break-inside:auto}
  .comparar{grid-template-columns:1fr 1fr;gap:5mm;break-inside:avoid}
  .print-cel .moldura{border-width:4px;border-radius:10px;box-shadow:none}
  .print-cel .moldura img{max-height:80mm;object-fit:cover;object-position:top}
  .item .checks label{padding:4px 4px}
  .item .corpo{gap:3.5mm}
  .item{break-inside:auto!important}
  .cola .item:nth-of-type(n+3){break-before:page}
  .cola .item:nth-of-type(2){margin-top:4mm}
  .cola .item:first-of-type .print-cel .moldura img{max-height:64mm}
  .passo .mono{font-size:8pt}
  .repare{padding:1mm 0 1mm 4mm}
  .repare .marcas{gap:1.2mm;margin-top:2mm}
  .repare .marcas li{font-size:9pt}
  .ficticio{font-size:7pt}
  .leg-print{font-size:8.6pt;gap:1.5mm}
  .acoes{gap:1.5mm}
  .acoes li{font-size:9.4pt}
  .repare{break-inside:avoid}
  .print-largo{break-inside:avoid}
}

/* formulário que libera o download */
html.gate-aberto{overflow:hidden}
.gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px}
.gate[hidden]{display:none}
.gate-fundo{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(3px)}
.gate-caixa{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--preto2);border:1px solid var(--line2);border-top:3px solid var(--red-bright);padding:28px 24px 22px;display:flex;flex-direction:column;gap:14px}
.gate-caixa h2{font-size:clamp(1.5rem,5vw,2rem);line-height:.98}
.gate-sub{font-size:.95rem;color:var(--sub);max-width:none}
.gate-x{position:absolute;right:10px;top:8px;background:transparent;border:0;color:var(--muted);font:400 28px/1 var(--sans);cursor:pointer;padding:4px 8px}
.gate-x:hover{color:var(--text)}
.gate-grade{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gate-grade label{display:flex;flex-direction:column;gap:6px;font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:0}
.gate-grade .c2{grid-column:1/-1}
.gate-grade label[hidden]{display:none}
.gate-grade input,.gate-grade select{font:400 1rem/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--text);background:var(--preto);border:1px solid var(--line2);border-radius:0;padding:12px;width:100%;min-width:0}
.gate-grade input:focus,.gate-grade select:focus{outline:2px solid var(--red-bright);outline-offset:0;border-color:transparent}
.gate-grade select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:34px}
.gate-grade .isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gate-erro{color:var(--red-bright);font-size:.92rem;margin:0}
.gate-btn{width:100%;text-align:center;padding:18px}
.gate-btn[disabled]{opacity:.6;cursor:wait}
.gate-lgpd{font-size:.78rem;color:var(--muted);max-width:none}
@media (max-width:520px){.gate-grade{grid-template-columns:1fr}.gate-caixa{padding:24px 16px 18px}}
@media print{.gate{display:none!important}}

/* aparecer ao rolar: só com JS ligado e movimento permitido */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.js .rv.vista{opacity:1;transform:none}
.js .rv.d1{transition-delay:.12s}.js .rv.d2{transition-delay:.24s}.js .rv.d3{transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .esteira .linha-pulso::after,.anota.vista .pt::before,.base.vista .tijolos span,.semana-anim.vista::before{animation:none}
  .semana-anim::before{width:100%}
  .banda::before{transform:none;transition:none}
  .inclina{transform:none}
}
@media (max-width:760px){
  .hero.foto{min-height:0;padding-top:250px;align-items:flex-end}
  .hero.foto::before{background-size:cover;background-position:var(--foto-pos-cel,68% 20%);height:330px;bottom:auto}
  .hero.foto::after{background:linear-gradient(180deg,rgba(6,6,6,0) 90px,rgba(6,6,6,.8) 230px,#060606 320px)}
  .split,.confere,.autor-grande{grid-template-columns:1fr}
  .split.inv>:first-child{order:0}
  .split .colar{position:relative;top:auto}.confere .lateral{position:static}
  .banda{padding-block:90px 46px}
  .inclina{transform:none}
  .autor-grande img{aspect-ratio:1/1;object-position:center 20%}
}
@media print{
  .js .rv{opacity:1!important;transform:none!important}
  .hero.foto{display:none!important}
  figure,.janela-nav,.gsc-lado,.cwv{break-inside:avoid}
  .janela-nav img{max-height:110mm;object-fit:cover;object-position:top}
  .split-tela{grid-template-columns:1fr!important}
  .banda{padding:7mm 0 5mm!important}
  .banda .citacao{font-size:19pt!important}
  .banda .duo-txt{margin-top:3mm!important}
  .banda .duo-txt p{font-size:9.2pt}
  .confere .lateral .faixas{grid-template-columns:repeat(3,1fr);margin-top:5mm}
  .confere .lateral .faixas li{border-right:1px solid var(--line2);border-bottom:0;padding:3.5mm}
  .confere .lateral .faixas li:last-child{border-right:0}
  .confere{display:block}
  .base .topo3 div{padding:2mm!important}
  .base .topo3 b{font-size:12pt}
  .base .setas{height:4mm}
  .base .tijolos{padding:2mm!important;gap:1.5mm!important}
  .base .tijolos span{padding:1.6mm!important;font-size:8pt}
  .base .chao{padding:2.4mm 4mm}
  .banda .citacao{font-size:17pt!important}
  .banda .duo-txt p{font-size:8.8pt}
  section.cola{padding-top:4mm}
  .banda{padding:12mm 0 8mm;break-inside:avoid;background:#000}
  .banda::before{opacity:.6;transform:none}
  .banda .citacao{font-size:24pt}
  .banda .credito{display:none}
  .split{grid-template-columns:1fr 1fr;gap:6mm}
  .split .quadro img{aspect-ratio:auto;max-height:92mm}
  .split .colar{position:relative;top:auto}.confere .lateral{position:static}
  .confere{grid-template-columns:1fr}
  .autor-grande{grid-template-columns:52mm 1fr;break-inside:avoid}
  .autor-grande img{aspect-ratio:auto;height:70mm}
  .autor-grande .txt{padding:6mm}
  .inclina{transform:none}
  .esteira .linha-pulso,.marca-fundo::before{display:none}
  .acordeao details{break-inside:avoid}
  .acordeao summary::after{display:none}
  .semana-anim::before{width:100%;animation:none}
}