/* Salll · Estudos · layout compartilhado. Editar aqui atualiza TODOS os estudos. */
:root{
  --orange:#FE7021; --gold:#FBA839; --gold-d:#E0951F; --red:#E4384A;
  --purple:#7F61A4; --blue:#5E50C1; --blue2:#6E7BD8; --teal:#17A398;
  --green:#25D366; --slate:#8B97A8;
  /* Tema CLARO (frame do estudo). O miolo e BRANCO puro: a capa escura fica
     no chrome do institucional (estudo-chrome.css) e daqui pra baixo a pagina
     e a folha em branco onde a PDP e dissecada. Superficies que precisam
     destacar do fundo usam --bg-deep / --card-hi, nao mais o cinza do body. */
  --bg:#FFFFFF; --bg-alt:#F7F8FA; --bg-deep:#ECEEF1; --card:#FFFFFF;
  --card-hi:#F3F5F8; --text:#181A1F; --muted:#5C6470; --dim:#9BA2AD;
  --line:rgba(20,22,28,.10); --line-h:rgba(20,22,28,.17);
  --orange-tint:rgba(254,112,33,.12); --gold-tint:rgba(251,168,57,.16);
  --red-tint:rgba(228,56,74,.10); --purple-tint:rgba(127,97,164,.12);
  --blue-tint:rgba(94,80,193,.10);
  /* PDP shopper-side sempre clara (marketplace e branco), dentro do site escuro */
  --pdp-bg:#ffffff; --pdp-text:#0F1111; --pdp-muted:#565959; --pdp-line:#e7e7e7;
  --pdp-link:#007185; --pdp-price:#0F1111;
  --pdp-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* PDP = marketplace clean: fonte neutra padrao em tudo (nao a fonte da marca Salll) */
.pdp,.pdp *{font-family:var(--pdp-font)!important;letter-spacing:normal!important}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit}
img{max-width:100%;display:block}

/* NAV (herdado) */
nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:rgba(255,255,255,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.nav-logo img{height:26px;width:auto;display:block;filter:brightness(0)}
.nav-links{display:flex;gap:26px;list-style:none;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;transition:color .25s;font-family:'Outfit',sans-serif}
.nav-links a:hover{color:var(--text)}
.nav-cta{padding:9px 18px;font-size:11px;font-weight:700;color:#fff;text-decoration:none;border-radius:8px;background:var(--orange);letter-spacing:1.2px;text-transform:uppercase;font-family:'Outfit',sans-serif}
@media(max-width:720px){.nav-links li:not(.keep){display:none}}

/* SELO SIMULADO (obrigatorio) */
/* Selo de conteudo simulado: obrigatorio e nao removivel. Fundo escuro solido,
   igual ao do hero, em vez do listrado: a faixa fecha a capa e entrega a pagina
   ao branco do estudo em uma transicao so. Vermelho claro no destaque porque o
   #E4384A da paleta nao passa contraste sobre preto. */
.sim-banner{background:#141414;border-bottom:1px solid rgba(255,255,255,.08);color:rgba(240,240,240,.78);font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1px;text-align:center;padding:11px 16px}
.sim-banner b{color:#FF7A87}

/* 1080 punha a descricao do produto em ~140 caracteres por linha, quase o dobro
   do teto de legibilidade (45-75 por linha, otimo em torno de 66 · Bringhurst,
   repetido pela Baymard em e-commerce). Container em 980 + teto de medida por
   bloco de prosa (--measure) abaixo: o container resolve a pagina, o ch resolve
   o paragrafo, que e onde a leitura quebra de verdade. */
.wrap{max-width:980px;margin:0 auto;padding:0 24px}
:root{--measure:68ch}
.section{padding:56px 0}
.label{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2.6px;text-transform:uppercase;color:#CC4A01;font-weight:700;margin-bottom:14px}

/* HERO */
.hero{padding:64px 0 40px;border-bottom:1px solid var(--line)}
.hero h1{font-family:'Outfit',sans-serif;font-size:clamp(30px,5vw,54px);font-weight:800;line-height:1.05;letter-spacing:-1.4px;margin-bottom:18px}
.hero h1 .hl{color:var(--orange)}
.hero-sub{font-size:16px;color:var(--muted);max-width:680px}
.hero-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;font-family:'Space Mono',monospace;font-size:11px;color:var(--dim);letter-spacing:.5px}
.hero-meta b{color:var(--text);font-weight:700}

/* ===== Toggle Conformidade (antes) x Performance (depois) ===== */
.lens-intro{margin:10px 0 20px}
.lens-toggle{display:inline-flex;background:var(--card);border:1px solid var(--line-h);border-radius:12px;padding:5px;gap:4px;margin-bottom:8px}
.lens-btn{border:none;background:transparent;color:var(--muted);font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;letter-spacing:.5px;padding:11px 20px;border-radius:9px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
/* opacity:1, nao .7: a linha de baixo agora carrega informacao ("cadastro
   simples e comum" / "com metodo e performance"), nao e mais enfeite. Medido:
   com .7 dava 3.2:1 no botao inativo e 3.4:1 no ativo laranja; com .85 ainda
   dava 4.27 e 3.75 — os dois reprovados no AA. Com 1 fica 5.98 (inativo) e
   4.62 (branco sobre #CC4A01). A hierarquia fica no tamanho de fonte e no
   uppercase, nao no contraste. Nao baixar de 1. */
.lens-btn small{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase;opacity:1;font-weight:400}
.lens-btn.active{color:#fff}
.lens-btn.active.conf{background:linear-gradient(103deg,#454A52 0%,#70767F 100%)}
/* O lado Salll e o lado da festa: degrade que ANDA DE MATIZ (roxo -> magenta
   -> rosa) em vez de andar de claridade. Isso e deliberado. #C23F7A, com
   4.9:1, e o ponto mais claro que o branco aguenta confortavel, e por isso
   ele e o FIM do degrade, nao o meio. O brilho radial fica em .18 de branco
   (mesma regra da versao anterior: nao deixar o canto claro furar o minimo).
   Medido: 11.56 / 8.24 / 4.9 nos tres stops. */
.lens-btn.active.perf{
  background:
    radial-gradient(130% 170% at 6% -10%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(103deg,#5A1B6E 0%,#8E1E6B 44%,#C23F7A 100%);
  box-shadow:0 6px 18px rgba(90,27,110,.30), inset 0 1px 0 rgba(255,255,255,.20);
}
/* Terceira lente (frontmax em diante): a explicacao comparativa, bloco a bloco.
   Azul-petroleo pra nao competir com o cinza do "hoje" nem com o roxo do metodo:
   ela nao e um estado da PDP, e a aula em cima dos dois. 8.1:1 no branco. */
.lens-btn.active.blocos{
  background:
    radial-gradient(130% 170% at 6% -10%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(103deg,#123B52 0%,#1C5B72 52%,#2E7F94 100%);
  box-shadow:0 6px 18px rgba(18,59,82,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
/* Quarta lente (frontmax em diante): a apresentacao comercial. Laranja da marca
   porque essa e a unica lente que fala da Salll, nao da PDP do cliente. O stop
   final e #E0620F, nao o #FE7021 puro: medido, o laranja de marca da 2.9:1 com
   branco por cima e reprova. Assim fica 4.6:1. */
.lens-btn.active.proposta{
  background:
    radial-gradient(130% 170% at 6% -10%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(103deg,#7A2703 0%,#B34206 52%,#E0620F 100%);
  box-shadow:0 6px 18px rgba(122,39,3,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.lens-pane{display:none}
.lens-pane.active{display:block}
/* Lente sem trilho proprio: o split vira coluna unica e a aula fica dentro do
   bloco, nao ao lado dele. */
.study-split:has(> .teach-rail.rail-off){grid-template-columns:minmax(0,1fr)}
.teach-rail.rail-off{display:none}
/* Com tres lentes o trilho nao cabe numa linha no celular: empilha. */
@media(max-width:760px){
  .lens-toggle{display:flex;flex-direction:column;width:100%;align-items:stretch}
  .lens-btn{width:100%}
}
.lens-note{border-radius:12px;padding:16px 20px;margin-bottom:6px;font-size:14px;line-height:1.6}
.lens-note.conf{background:var(--blue-tint);border:1px solid rgba(94,80,193,.3)}
.lens-note.perf{background:var(--orange-tint);border:1px solid rgba(254,112,33,.28)}
.lens-note b{color:var(--text)}
.lens-note .tag{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;display:block;margin-bottom:6px}
.lens-note.conf .tag{color:var(--blue2)} .lens-note.perf .tag{color:var(--orange)}

/* PDP antes (Conformidade): simples, 1 imagem, titulo raso */
.pdp.antes{opacity:.98}
.pdp.antes .pdp-grid{grid-template-columns:minmax(0,380px) minmax(0,1fr) 268px}
.pdp.antes .gal{grid-template-columns:1fr}
/* O quadro do "antes" e 1:1, mas ele vive dentro do `.gal`, que no layout do
   estudo e flex column. Sem `align-self:start` + `height:auto` ele esticava
   pela altura da linha e virava um retangulo alto (308x512 medido a 390px de
   largura): a foto ficava perdida no meio de um quadro vazio e parecia bug.
   O `max-width` da imagem tambem era apertado demais pra foto em retrato. */
.antes-single{border:1px solid var(--pdp-line);border-radius:10px;background:#fff;aspect-ratio:1/1;height:auto;align-self:start;width:100%;display:flex;align-items:center;justify-content:center}
.antes-single img{max-width:86%;max-height:86%;object-fit:contain}
.antes-flat{font-size:13px;color:#555;line-height:1.6;margin-top:10px}
.antes-miss{font-family:'Space Mono',monospace;font-size:11px;color:#D11C2F;margin-top:14px;padding-top:12px;border-top:1px dashed var(--pdp-line);line-height:1.7}
.antes-miss b{color:#b02020}

/* Fonte da lente "Como esta hoje": o estudo afirma que a pagina do cliente
   esta assim, entao ele precisa poder CONFERIR num clique. Sem isso a lente
   antes vira alegacao; com o link, vira citacao. */
.antes-fonte{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:14px;padding:11px 14px;border:1px solid var(--pdp-line);border-left:3px solid var(--blue);border-radius:8px;background:#fff}
.antes-fonte .af-lab{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:#fff;background:var(--blue);padding:3px 8px;border-radius:4px;flex-shrink:0}
.antes-fonte .af-txt{font-size:12px;color:var(--pdp-muted);line-height:1.5;flex:1;min-width:180px}
.antes-fonte .af-txt b{color:var(--pdp-text)}
.antes-fonte .af-link{display:inline-flex;align-items:center;gap:5px;font-family:'Outfit',sans-serif;font-weight:700;font-size:12px;color:var(--orange);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s;white-space:nowrap}
.antes-fonte .af-link:hover{border-bottom-color:var(--orange)}
@media(max-width:600px){.antes-fonte{padding:10px 12px}.antes-fonte .af-txt{font-size:11.5px}}

/* ===== PDP ANATOMIA AMAZON, skin Salll (fundo claro dentro do site escuro) ===== */
.pdp{background:var(--pdp-bg);color:var(--pdp-text);border-radius:16px;padding:26px 30px 30px;margin:32px 0;box-shadow:0 12px 40px rgba(20,22,28,.10);border:1px solid var(--line)}
.pdp-mk{font-size:11px;color:var(--pdp-muted);margin-bottom:16px;display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--pdp-line);padding-bottom:12px}
.pdp-mk .dot{width:6px;height:6px;border-radius:50%;background:var(--orange)}
/* 3 regioes: galeria | centro | buybox */
.pdp-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr) 268px;gap:26px;align-items:start}
@media(max-width:900px){.pdp-grid{grid-template-columns:1fr}}

/* Galeria: coluna de thumbs vertical + main (Amazon) */
.gal{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px}
.gal-thumbs{display:flex;flex-direction:column;gap:8px}
.gal-thumb{position:relative;width:52px;height:52px;border:1px solid var(--pdp-line);border-radius:8px;background:#fafafa;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,box-shadow .15s}
.gal-thumb img{width:100%;height:100%;object-fit:contain;padding:5px}
.gal-thumb.active{border:2px solid var(--orange);box-shadow:0 0 0 1px var(--orange)}
.gal-thumb:hover{border-color:var(--orange)}
/* Letra VALOR solta a esquerda do thumb (camada aula) */
.gal-thumb .vl{position:absolute;left:-19px;top:50%;transform:translateY(-50%);font-family:'Outfit',sans-serif;font-weight:900;font-size:16px}
.gal-thumb .pill{position:absolute;left:-19px;bottom:-13px;font-family:'Space Mono',monospace;font-size:6px;letter-spacing:.3px;text-transform:uppercase;color:#fff;padding:1px 3px;border-radius:4px;font-weight:700;display:none}
/* As letras V/A/L/O/R sao TEXTO pequeno sobre a galeria clara: usam as versoes
   escurecidas das cores (medidas, minimo 4.5:1). As pastilhas (.pill) sao
   fundo com texto branco por cima e seguem com a cor cheia da paleta. */
.vl.c-orange{color:#C64701} .pill.c-orange{background:var(--orange)}
.vl.c-gold{color:#A66003} .pill.c-gold{background:var(--gold)}
.vl.c-red{color:#DF1E32} .pill.c-red{background:var(--red)}
.vl.c-purple{color:var(--purple)} .pill.c-purple{background:var(--purple)}
.vl.c-blue{color:var(--blue)} .pill.c-blue{background:var(--blue)}
.gal-thumb.empty{border-style:dashed} .gal-thumb.empty .vl{filter:grayscale(1);opacity:.45}
.gal-main{position:relative;border:1px solid var(--pdp-line);border-radius:10px;background:#fff;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;cursor:zoom-in}
.gal-main img{width:100%;height:100%;object-fit:contain;padding:22px}
.gal-zoom{position:absolute;top:10px;right:10px;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.5px;color:var(--pdp-muted);background:#fff;border:1px solid var(--pdp-line);border-radius:20px;padding:3px 9px}

/* Centro: marca, titulo, rating, comprados, preco, sobre-este-item */
.pdp-brand-line{font-size:13px;color:var(--pdp-muted);margin-bottom:6px}
.pdp-brand-line b{color:var(--pdp-text);font-weight:600}
.pdp-title{font-size:24px;font-weight:500;line-height:1.32;color:var(--pdp-text);margin-bottom:8px}
.pdp-highlights{font-size:13px;color:#2a2a2a;line-height:1.5;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--pdp-line)}
.pdp-rating{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--pdp-link);margin-bottom:4px}
.pdp-rating .stars{color:#B45B14;font-size:15px}
.pdp-rating .cnt{color:var(--pdp-link)}
.pdp-sold{font-size:12.5px;color:var(--pdp-muted);margin-bottom:14px}
.pdp-sold b{color:var(--pdp-text);font-weight:700}
.pdp-hr{border:0;border-top:1px solid var(--pdp-line);margin:14px 0}
.pdp-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
/* Selos regulatorios e de atributo: informacao de rotulo, nao conteudo Salll.
   Saem do laranja e ficam neutros. O laranja e a cor da marca e da aula (os
   rotulos VALOR, os blocos de explicacao); gasta-lo em selo de embalagem tira
   forca de onde ele precisa aparecer. */
.pdp-badge{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.5px;text-transform:uppercase;font-weight:700;padding:4px 9px;border-radius:6px;background:var(--bg-deep);color:var(--muted);border:1px solid var(--line)}
.pdp-price-c{margin-bottom:4px}
.pdp-price-c .cur{font-size:13px;color:var(--pdp-text);vertical-align:top;position:relative;top:3px}
.pdp-price-c .big{font-family:'Outfit',sans-serif;font-size:30px;font-weight:800;color:var(--pdp-text)}
.pdp-price-note{font-size:12px;color:var(--pdp-muted);margin-bottom:16px}
.about-h{font-family:'Outfit',sans-serif;font-size:15px;font-weight:800;color:var(--pdp-text);margin-bottom:10px}
.pdp-bullets{list-style:none;display:flex;flex-direction:column;gap:8px}
.pdp-bullets li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.5;color:#2a2a2a}
.pdp-bullets li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--pdp-text)}
.pdp-bullets li b{font-weight:700}

/* Buy box (direita, Amazon) */
.buybox{border:1px solid var(--pdp-line);border-radius:12px;padding:18px;position:sticky;top:80px}
.buybox .bb-price{font-family:'Outfit',sans-serif;font-size:24px;font-weight:800;color:var(--pdp-text);margin-bottom:8px}
.buybox .bb-price .cur{font-size:12px;vertical-align:top;position:relative;top:2px;font-weight:600}
.buybox .bb-ship{font-size:12.5px;color:#2a2a2a;line-height:1.5;margin-bottom:6px}
.buybox .bb-ship b{color:var(--pdp-text)}
.buybox .bb-loc{font-size:12px;color:var(--blue);margin-bottom:12px}
.buybox .bb-stock{font-size:15px;color:var(--green-d,#1FA958);font-weight:700;margin-bottom:12px}
.buybox .bb-qty{font-size:12.5px;color:var(--pdp-muted);border:1px solid var(--pdp-line);border-radius:8px;padding:8px 12px;margin-bottom:12px;display:inline-block}
.bb-btn{display:block;width:100%;text-align:center;font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;padding:12px;border-radius:22px;text-decoration:none;cursor:pointer;border:none;margin-bottom:9px}
.bb-cart{background:var(--gold);color:#3a2a00}
.bb-buy{background:var(--orange);color:#fff}
.buybox .bb-meta{font-size:11.5px;color:var(--pdp-muted);line-height:1.7;margin-top:12px;border-top:1px solid var(--pdp-line);padding-top:12px}
.buybox .bb-meta b{color:var(--pdp-text)}

/* Ficha tecnica (Amazon: Informacoes do produto) */
.pdp-specs{margin-top:28px;border-top:1px solid var(--pdp-line);padding-top:22px}
.pdp-specs h3,.pdp-desc h3{font-family:'Outfit',sans-serif;font-size:17px;font-weight:800;color:var(--pdp-text);margin-bottom:14px}
.spec-table{width:100%;border-collapse:collapse;font-size:13px}
.spec-table td{padding:8px 12px;border:1px solid var(--pdp-line);vertical-align:top}
.spec-table td:first-child{background:#f7f7f7;font-weight:700;color:var(--pdp-text);width:38%}
.spec-table td:last-child{color:#333}

/* Descricao */
.pdp-desc{margin-top:28px;border-top:1px solid var(--pdp-line);padding-top:22px}
.pdp-desc p{font-size:14px;line-height:1.7;color:#333;margin-bottom:12px;max-width:var(--measure)}
.pdp-desc p b{color:var(--pdp-text)}

/* ===== A+ Conteudo Enriquecido (modulos-template reais, 3 destinos) ===== */
/* Conteudo enriquecido: 80% da largura, centralizado. E assim que o A+ aparece
   na Amazon — uma faixa mais estreita que o resto da pagina, dentro da MESMA
   folha branca da PDP, nao um bloco separado. Antes ocupava a largura inteira
   e lia como outra secao. */
.pdp-aplus{margin:30px auto 0;width:80%;border-top:1px solid var(--pdp-line);padding-top:26px}
@media(max-width:760px){.pdp-aplus{width:100%}}
.aplus-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.aplus-head h3{font-size:19px;font-weight:700;color:var(--pdp-text)}
.aplus-tag{font-size:12px;color:var(--pdp-muted)}
.aplus-tabs{display:inline-flex;gap:4px;background:#f2f2f2;border-radius:10px;padding:4px;margin:14px 0 20px}
.aplus-tab{border:none;background:transparent;color:var(--pdp-muted);font-size:12px;font-weight:600;padding:8px 16px;border-radius:7px;cursor:pointer}
.aplus-tab.active{background:#fff;color:var(--pdp-text);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.aplus-target{display:none} .aplus-target.active{display:block}
/* modulo generico */
.amod{border:1px solid var(--pdp-line);border-radius:12px;overflow:hidden;margin-bottom:16px;background:#fff}
/* Faixa de zona do conteudo enriquecido. As cores por zona (marrom/azul/verde)
   sairam em 2026-07-26: nao significavam nada — nao eram os pilares, nem o
   VALOR, nem a marca — e roubavam atencao da imagem logo abaixo, que e o que
   o modulo tem pra mostrar. A informacao (Topo/Meio/Base) fica no texto. */
.amod-zone{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);background:var(--bg-deep);border-bottom:1px solid var(--line);padding:6px 14px;font-weight:700;display:flex;justify-content:space-between;gap:12px}
.amod-zone span:first-child{color:var(--text)}

/* Selos SEMPRE quebram linha (nao mais nowrap forcado no desktop). A regra
   antiga assumia so 2-3 rotulos curtos; com 4 selos mais longos (ex: "Uso
   veterinario MAPA" no frontmax-coleira) o nowrap cortava o ultimo selo atras
   da barra da aula, escondido, bug real independente do tamanho de fonte. */
.pdp-badges{gap:8px}
.pdp-badge{white-space:nowrap;font-size:9.5px;padding:4px 9px;letter-spacing:.5px}
@media(max-width:1040px){
  .pdp-badges{flex-wrap:wrap;gap:8px}
  .pdp-badge{padding:4px 9px;letter-spacing:.5px}
}
.amod-body{padding:18px 20px}
.amod-body h4{font-size:17px;font-weight:700;color:var(--pdp-text);margin-bottom:6px}
.amod-body p{font-size:13.5px;color:#444;line-height:1.6}
/* hero overlay (970x300 / 1464x600) */
.amod-hero{position:relative;aspect-ratio:970/300;background:#e9e6e0;display:flex;align-items:center}
.amod-hero.premium{aspect-ratio:1464/600}
.amod-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.amod-hero .ov{position:relative;z-index:2;max-width:60%;padding:26px 30px;color:#fff}
.amod-hero .ov.dark{color:#111} .amod-hero .ov h4{font-size:20px;margin-bottom:8px;color:inherit}
.amod-hero .ov p{color:inherit;opacity:.95}
.amod-hero .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#999;font-size:11px;background:repeating-linear-gradient(45deg,#eee 0 12px,#e4e4e4 12px 24px)}
/* banner publicitario (primeira peca do enriquecido) */
.amod-hero.banner{aspect-ratio:16/7}
.amod-hero.banner .ov{max-width:56%;padding:38px 42px}
.amod-hero.banner .ov h4{font-family:'Outfit',sans-serif;font-size:clamp(24px,2.9vw,40px);font-weight:800;line-height:1.08;letter-spacing:-.9px;margin-bottom:13px}
.amod-hero.banner .ov p{font-size:15px;line-height:1.6;max-width:92%}
@media(max-width:760px){
  .amod-hero.banner{aspect-ratio:auto}
  .amod-hero.banner .ov{max-width:100%;padding:16px 18px 20px}
  .amod-hero.banner .ov h4{font-size:22px;letter-spacing:-.5px}
  .amod-hero.banner .ov p{font-size:13.5px;max-width:100%}
}
/* trio 300x300 */
.amod-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px 20px}
.amod-trio .cell img,.amod-trio .cell .ph{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:#f0f0f0;display:block}
.amod-trio .cell .ph{display:flex;align-items:center;justify-content:center;color:#aaa;font-size:10px}
.amod-trio .cell p{font-size:12.5px;color:#333;margin-top:8px;line-height:1.5}
/* quad icon+text (composicao / FAQ, HTML puro) */
.amod-quad{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:18px 20px}
.aq-cell{display:flex;gap:12px;align-items:flex-start;background:#faf9f7;border:1px solid var(--pdp-line);border-radius:10px;padding:14px}
.aq-cell .ico{width:34px;height:34px;flex-shrink:0;border-radius:8px;background:#8a6d3b;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
.aq-cell.faq .ico{background:#31708f}
.aq-cell p{font-size:13px;color:#333;line-height:1.5}
.aq-cell p b{color:var(--pdp-text)}
/* ===== Modulos com ritmo: split 50/50, faixa de numeros, citacao ===== */
.amod-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.amod-split.rev .as-media{order:2}
.as-media{position:relative;min-height:300px;background:#efeeeb;overflow:hidden}
.as-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.as-text{padding:28px 30px;display:flex;flex-direction:column;justify-content:center}
.as-text h4{font-family:'Outfit',sans-serif;font-size:21px;font-weight:800;color:var(--pdp-text);margin-bottom:9px;line-height:1.2}
.as-text p{font-size:13.5px;color:#444;line-height:1.65}
.as-text p b{color:var(--pdp-text)}
.as-kicker{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#8a6d3b;font-weight:700;margin-bottom:9px}
@media(max-width:760px){
  .amod-split{grid-template-columns:1fr}
  .amod-split.rev .as-media{order:0}
  .as-media{min-height:0}
  .as-media img{position:relative;inset:auto;height:auto;aspect-ratio:4/3;display:block}
  .as-media.has-mob img{aspect-ratio:4/5}
  .as-text{padding:18px 18px 20px}
}
.amod-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--pdp-line)}
.amod-stats .st{background:#fff;padding:22px 14px;text-align:center}
.amod-stats .stn{font-family:'Outfit',sans-serif;font-weight:800;font-size:clamp(22px,2.4vw,30px);color:var(--pdp-text);line-height:1}
.amod-stats .stl{font-size:11px;color:var(--pdp-muted);margin-top:7px;display:block;line-height:1.4}
@media(max-width:760px){.amod-stats{grid-template-columns:repeat(2,1fr)}}
/* A+ standard e claro: modulo em fundo branco, texto escuro. O bloco preto
   destoava do resto da folha e fazia a citacao parecer peca de campanha, nao
   modulo de PDP. */
.amod-quote{background:var(--bg-deep);padding:36px 30px;text-align:center}
.amod-quote p{font-family:'Outfit',sans-serif;font-weight:800;font-size:clamp(18px,2.3vw,26px);line-height:1.3;color:var(--pdp-text);letter-spacing:-.4px;max-width:660px;margin:0 auto}
.amod-quote p b{color:#B45B14}
.amod-quote .src{display:block;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--pdp-muted);margin-top:15px}

/* video / clip */
.amod-videoel{display:block;width:100%;aspect-ratio:16/9;background:#000;object-fit:cover}
.amod-video{aspect-ratio:16/9;background:var(--bg-deep);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--pdp-muted);font-size:11px}
.amod-video.clip{aspect-ratio:9/16;max-height:420px;margin:0 auto}
.amod-video .play{width:56px;height:56px;border-radius:50%;background:#DE7921;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;padding-left:4px}
/* galeria meli */
.meli-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.meli-gal .g{aspect-ratio:1;border:1px solid var(--pdp-line);border-radius:8px;overflow:hidden;position:relative;background:#fff}
.meli-gal .g img{width:100%;height:100%;object-fit:cover}
.meli-gal .g .num{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;padding:2px 7px;border-radius:10px}
.meli-gal .g.white .num{background:#25D366}

/* CAMADA AULA (por que assim) */
.why{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:10px;padding:18px 20px;margin:14px 0}
.why summary{cursor:pointer;font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;letter-spacing:.5px;color:var(--text);list-style:none;display:flex;align-items:center;gap:10px}
.why summary::-webkit-details-marker{display:none}
.why summary::before{content:"+";font-family:'Space Mono',monospace;color:var(--orange);font-weight:700}
.why[open] summary::before{content:"−"}
.why .cite{display:inline-block;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);background:var(--bg-deep);padding:2px 8px;border-radius:5px;margin-left:auto}
.why-body{font-size:14px;color:var(--muted);line-height:1.65;margin-top:12px}
.why-body b{color:var(--text)}

/* Reviews didatico (NAO reviews falsas) */
.rev-teach{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px}
.rev-teach h3{font-family:'Outfit',sans-serif;font-size:19px;font-weight:800;margin-bottom:10px}
.rev-teach .note{font-size:13px;color:var(--dim);font-style:italic;margin-bottom:16px}
.rev-teach ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.rev-teach li{padding-left:20px;position:relative;font-size:14px;color:var(--muted)}
.rev-teach li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--blue)}

/* CTA opt-in */
.cta{background:linear-gradient(135deg,var(--bg-alt),var(--bg-deep));border:1px solid var(--line-h);border-radius:16px;padding:44px 34px;text-align:center;margin:40px 0}
.cta h2{font-family:'Outfit',sans-serif;font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.8px;margin-bottom:12px}
.cta p{color:var(--muted);max-width:520px;margin:0 auto 26px}
.cta-form{display:flex;gap:10px;max-width:460px;margin:0 auto 20px;flex-wrap:wrap;justify-content:center}
.cta-form input{flex:1;min-width:220px;background:var(--card);border:1px solid var(--line-h);border-radius:8px;padding:14px 16px;color:var(--text);font-family:'Inter',sans-serif;font-size:14px}
.cta-form button{background:var(--orange);color:#fff;border:none;border-radius:8px;padding:14px 26px;font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.cta-follow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.cta-follow a{display:inline-flex;align-items:center;gap:8px;font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;letter-spacing:.5px;color:var(--text);text-decoration:none;border:1px solid var(--line-h);border-radius:8px;padding:11px 18px;transition:border-color .2s}
.cta-follow a:hover{border-color:var(--orange)}

/* 3 pilares da Salll */
.pillars{margin:48px 0 0}
.pillars h2{font-family:'Outfit',sans-serif;font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.7px;margin-bottom:8px;color:var(--text)}
.pillars .lead{color:var(--muted);max-width:660px;font-size:14.5px;line-height:1.6}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
@media(max-width:760px){.pillars-grid{grid-template-columns:1fr}}
/* Cor de pilar nao e decoracao: e o codigo do sistema (theme/tokens.css).
   Conformidade = teal, Competitividade = azul-2, Performance = laranja. Os
   estudos usavam laranja/gold/vermelho e nao batiam com o site nem com o deck. */
:root{--pilar-conformidade:#17A398;--pilar-competitividade:#6E7BD8;--pilar-performance:#FE7021}
.pillar{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;border-top:3px solid var(--pilar-conformidade);box-shadow:0 8px 26px rgba(20,22,28,.05)}
.pillar.p2{border-top-color:var(--pilar-competitividade)} .pillar.p3{border-top-color:var(--pilar-performance)}
.pillar .pn{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:#6C7584;font-weight:700}
.pillar h3{font-family:'Outfit',sans-serif;font-size:19px;font-weight:800;margin:9px 0 8px;color:var(--text)}
.pillar p{font-size:13.5px;color:var(--muted);line-height:1.6}
.pillar p b{color:var(--text)}

/* =========================================================================
   VIRADA PRA AREA INSTITUCIONAL — faixa laranja viva, 2026-07-26

   Tratamento trazido do deck standalone catalogo-amazon (.svc-vivid.v-orange):
   gradiente diagonal + massa organica desfocada animada por tras. Serve de
   corte: acima e a aula sobre a PDP, abaixo e a Salll se apresentando.

   O gradiente do deck termina claro (#ffd3a8) na quina inferior direita. La
   funciona porque o slide e alto e o texto fica centralizado; aqui a faixa e
   larga e baixa, e o claro cairia justamente sob o titulo. Por isso os stops
   foram reancorados: o claro para em 88% e nao passa de #E8873F, mantendo o
   branco do texto acima de 4.5:1 em qualquer ponto da faixa.
   ========================================================================= */
.inst-break{position:relative;overflow:hidden;margin-top:56px;padding:52px 0 56px;
  background:#0B0B0E}
/* Mesma massa organica da capa do deck (.ci-blob.blob-1): quatro radiais da
   paleta, desfoque alto, mascara radial pra dissolver a borda. E a cor da
   marca sem virar bloco chapado de laranja. */
.inst-break .ib-blob{position:absolute;z-index:0;pointer-events:none;
  width:1180px;height:1080px;right:-280px;top:-200px;
  border-radius:42% 58% 63% 37% / 55% 45% 63% 37%;
  filter:blur(48px) saturate(1.4);opacity:.82;
  -webkit-mask:radial-gradient(58% 58% at 54% 50%, #000 34%, transparent 78%);
  mask:radial-gradient(58% 58% at 54% 50%, #000 34%, transparent 78%);
  background:
    radial-gradient(52% 56% at 30% 28%, #FE7021, transparent 72%),
    radial-gradient(46% 50% at 70% 40%, #E4384A, transparent 70%),
    radial-gradient(54% 56% at 56% 74%, #5E50C1, transparent 72%),
    radial-gradient(42% 46% at 80% 70%, #FBA839, transparent 68%);
  animation:ib-morph 15s ease-in-out infinite, ib-live 26s ease-in-out infinite alternate}
.inst-break .ib-content{position:relative;z-index:1}
@keyframes ib-morph{
  0%,100%{border-radius:42% 58% 63% 37% / 55% 45% 63% 37%}
  25%{border-radius:68% 32% 38% 62% / 42% 64% 36% 58%}
  50%{border-radius:34% 66% 57% 43% / 66% 36% 64% 34%}
  75%{border-radius:58% 42% 30% 70% / 38% 66% 42% 58%}
}
@keyframes ib-live{
  0%{transform:translate(0,0) rotate(0deg) scale(1)}
  50%{transform:translate(-7%,5%) rotate(16deg) scale(1.1)}
  100%{transform:translate(5%,-4%) rotate(-10deg) scale(1.04)}
}
@media(prefers-reduced-motion:reduce){.inst-break .ib-blob{animation:none}}

/* Cabecalho da faixa em branco; os cards seguem brancos e passam a flutuar
   sobre o laranja, entao o texto dentro deles nao muda. */
/* Kicker em gold, igual a capa do deck. Contraste medido sobre #0B0B0E:
   gold 10.07:1, branco 19.65:1, corpo a 74% 10.80:1. */
.inst-break .pillars{margin:0}
.inst-break .pillars .label{color:var(--gold)}
.inst-break .pillars h2{color:#FFF}
.inst-break .pillars .lead{color:rgba(255,255,255,.80)}

/* Cards em OUTLINE: so contorno sobre o fundo escuro, sem preenchimento. O
   card branco competia com a massa colorida; vazado, a cor continua sendo o
   fundo e o bloco vira so a estrutura da informacao. */
.inst-break .pillar{background:transparent;border:1px solid rgba(255,255,255,.22);
  box-shadow:none;border-top:2px solid var(--pilar-conformidade);transition:border-color .25s,background .25s}
.inst-break .pillar:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.34)}
.inst-break .pillar.p2{border-top-color:var(--pilar-competitividade)}
.inst-break .pillar.p3{border-top-color:var(--pilar-performance)}
.inst-break .pillar .pn{color:rgba(255,255,255,.58)}
.inst-break .pillar h3{color:#FFF}
.inst-break .pillar p{color:rgba(255,255,255,.74)}
.inst-break .pillar p b{color:#FFF}

/* O fecho: a frase que o estudo inteiro estava construindo. */
.inst-break .ib-fecho{margin-top:30px;font-family:'Outfit',sans-serif;font-weight:800;
  font-size:clamp(21px,2.6vw,30px);line-height:1.25;letter-spacing:-.6px;color:#FFF}
.inst-break .ib-fecho .hl{color:var(--gold)}
.inst-break .ib-fecho + .ib-sub{margin-top:10px;font-size:14.5px;line-height:1.6;
  color:rgba(255,255,255,.72);max-width:640px}

/* Perfil do autor (Caio) */
.author{display:grid;grid-template-columns:210px 1fr;gap:34px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px;margin:44px 0;box-shadow:0 12px 40px rgba(20,22,28,.06)}
@media(max-width:640px){.author{grid-template-columns:1fr;text-align:center;justify-items:center}}
.author-photo{width:100%;border-radius:14px;overflow:hidden;background:#141414;aspect-ratio:1/1;max-width:210px}
.author-photo img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
.author-info h2{font-family:'Outfit',sans-serif;font-size:30px;font-weight:800;letter-spacing:-.6px;margin:8px 0 3px;color:var(--text)}
.author-role{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#CC4A01;font-weight:700;margin-bottom:14px}
.author-info p{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:18px;max-width:580px}
.author-contact{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:640px){.author-contact{justify-content:center}}
.author-contact a{display:inline-flex;align-items:center;gap:7px;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--text);text-decoration:none;border:1px solid var(--line-h);border-radius:8px;padding:10px 15px;transition:border-color .2s,color .2s}
.author-contact a:hover{border-color:var(--orange);color:var(--orange)}
.cta-consent{font-size:11px;color:var(--dim);margin-top:14px}

/* Nota metodologica */
.disclaimer{background:var(--bg-deep);border:1px solid var(--line);border-radius:12px;padding:24px;font-size:13px;color:var(--muted);line-height:1.7}
.disclaimer h4{font-family:'Outfit',sans-serif;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#D11C2F;margin-bottom:10px}
.disclaimer b{color:var(--text)}

/* Cookie (herdado) */
/* A entrada e por opacidade + 14px de deslocamento, NAO por translateY(140%).
   Motivo (bug medido no celular): com 140% a barra nasce inteira ABAIXO da
   viewport e depende da transicao terminar pra voltar. Quando a transicao nao
   completava, o botao Aceitar ficava fora da tela (bottom 977 numa viewport de
   866) e nao havia como clicar. Agora o pior caso e 14px de erro, nunca a
   altura da barra. visibility+pointer-events evitam que a barra invisivel
   engula o toque destinado a folha da aula. */
.cookie-bar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(14px);opacity:0;pointer-events:none;z-index:990;width:calc(100% - 32px);max-width:680px;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--line-h);border-radius:12px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px;box-shadow:0 18px 48px rgba(0,0,0,.16);transition:transform .32s cubic-bezier(.2,.9,.3,1),opacity .32s ease}
/* pointer-events NAO entra na transicao (propriedade discreta): o botao passa a
   aceitar toque no instante em que .show entra, mesmo se a animacao travar. */
.cookie-bar.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.cookie-bar p{font-size:12.5px;color:var(--muted);flex:1;line-height:1.55}
.cookie-bar p strong{color:var(--text);font-weight:600}
.cookie-bar>div{display:flex;gap:8px;flex-shrink:0}
.ck-btn{padding:8px 16px;font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;border-radius:6px;border:none;cursor:pointer;transition:all .2s}
.ck-rej{background:transparent;color:var(--muted);border:1px solid var(--line-h)}
.ck-rej:hover{color:var(--text);border-color:var(--text)}
.ck-acc{background:#CC4A01;color:#fff}
/* No celular os dois botoes dividem a largura toda: alvo de toque grande, sem
   depender de mira no polegar. */
@media(max-width:560px){.cookie-bar{flex-direction:column;align-items:stretch;text-align:center}.cookie-bar>div{justify-content:center}.cookie-bar>div .ck-btn{flex:1 1 0;min-width:0}}

/* Footer (herdado) */
footer{text-align:center;padding:32px 24px;font-size:11px;color:var(--dim);border-top:1px solid var(--line);letter-spacing:.4px;background:var(--bg);font-family:'Outfit',sans-serif;font-weight:500}
footer .sep{margin:0 10px;color:var(--line-h)}
footer a{color:var(--muted);text-decoration:none}

/* Lightbox simples */
.lb{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:1000;display:none;align-items:center;justify-content:center;padding:40px}
.lb.open{display:flex}
.lb img{max-width:90vw;max-height:90vh;object-fit:contain}
.lb .x{position:absolute;top:20px;right:26px;color:#fff;font-size:34px;cursor:pointer;font-family:'Outfit',sans-serif}

/* Selo +18 inline na PDP (jeito marketplace, NAO pop-up) · categoria bebida */
.age-badge{display:inline-flex;align-items:center;gap:7px;background:#fdecec;border:1px solid #f2c4c4;color:#b02020;font-family:'Space Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:5px 10px;border-radius:6px;margin-bottom:14px}
.age-badge b{background:#b02020;color:#fff;padding:1px 6px;border-radius:4px}
/* Aviso legal dentro da PDP (bloco de e-commerce, sob os bullets) */
.pdp-legal{margin-top:16px;padding:12px 14px;background:#fafafa;border:1px solid var(--pdp-line);border-radius:8px;font-size:11px;line-height:1.5;color:var(--pdp-muted)}
.pdp-legal b{color:#b02020}

/* Advertencia legal fixa (bebida) */
.legal-strip{background:var(--bg-deep);border-top:1px solid var(--line);text-align:center;padding:12px 16px;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:1px;color:var(--muted)}
.legal-strip b{color:#D11C2F}

/* ===== Wrap largo (so a pagina do estudo) ===== */
/* min(1560px,96vw): num monitor grande o estudo tem mais espaco pra dar, e o
   quadro da aula e a peca que mais sofria com largura curta. Em 1440 da 1382,
   em 1920 da 1560. Nao passa disso: a coluna de bullets vira linha longa. */
/* 1560/96vw era "a tela toda": em monitor grande a pagina nao tinha limite e a
   leitura ia junto. 1280 e o teto que ainda deixa a PDP e a trilha lateral
   respirarem lado a lado. O teto de LINHA (--measure) continua valendo por
   dentro: container largo nao autoriza paragrafo largo. */
.wrap.wide{max-width:min(1280px,94vw)}

/* ===== Estudo split: PDP (esq) + aula ao lado (dir) ===== */
/* A legenda alinha pelo centro dos botoes. O .lens-toggle traz margin-bottom:8px
   herdado de quando vivia empilhado; aqui ele e zerado, senao empurra a caixa
   8px pra cima do centro da linha. */
.study-toggle-row{display:flex;align-items:center;gap:22px 26px;flex-wrap:wrap;margin-bottom:26px}
.study-toggle-row .lens-toggle{margin-bottom:0}
.toggle-cap{font-size:12.5px;color:var(--muted);max-width:420px;line-height:1.55}
.toggle-cap b{color:var(--text)}
/* clamp em vez de 316px fixo: em monitor grande o quadro da aula cresce com a
   pagina em vez de virar uma coluna estreita ao lado de uma PDP larga. */
.study-split{display:grid;grid-template-columns:minmax(0,1fr) clamp(316px,24vw,440px);gap:32px;align-items:stretch}
@media(max-width:1040px){.study-split{grid-template-columns:1fr}}
.study-left{min-width:0}
.study-left .pdp{margin:0}
/* PDP dentro do split: galeria/buybox menores pra o centro (titulo/bullets) respirar */
.study-left .pdp-grid{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:30px}
.study-left .pdp.antes .pdp-grid{grid-template-columns:minmax(0,400px) minmax(0,1fr)}
.study-left .gal{grid-template-columns:46px minmax(0,1fr);gap:10px}
.study-left .gal-thumb{width:46px;height:46px}
@media(max-width:1040px){.study-left .pdp-grid,.study-left .pdp.antes .pdp-grid{grid-template-columns:1fr}}

/* ===== Interacao galeria: highlight + tooltip ===== */
/* Quando o leitor clica/toca nos thumbs, o bloco inteiro ganha sombra e brilho
   pra atracar o olho. O tooltip guia "olhe ali", repetindo a mensagem do design. */
.study-left.gal-active{
  position:relative;
  box-shadow:0 0 0 3px rgba(254,112,33,.20), 0 12px 48px rgba(254,112,33,.18);
  border-radius:16px;
}
/* Tooltip que aparece nos thumbs quando estao selecionados */
.gal-thumb-tooltip{
  position:absolute;
  bottom:-42px;left:50%;transform:translateX(-50%);
  background:#141414;color:#FFF;font-size:11px;font-weight:600;
  padding:6px 12px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s;
  z-index:50;
  font-family:'Space Mono',monospace;letter-spacing:.3px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.gal-thumb-tooltip::after{
  content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-bottom:6px solid #141414;
}
.gal-thumb.active .gal-thumb-tooltip{opacity:1}

/* ===== ABAS DA AULA (duplica trilha em qualquer resolução) =====
   Namespace .aula-tab* proprio (NAO .teach-tab*): a folha inferior do
   mobile (.teach-rail) ja usa .teach-tab/.teach-tabs-wrap pra chips do
   proprio JS, num fundo escuro. Reaproveitar o mesmo nome aqui vazava
   estilo (bug medido: fundo cinza claro e padding vazando pro strip de
   chips dentro da folha escura, texto quase invisivel). Nome proprio
   elimina a colisao de vez, em vez de escopar regra por regra. */
.aula-tabs-wrap{
  display:block;background:var(--bg-alt);border:1px solid var(--line);
  border-radius:16px;padding:22px 24px 26px;
}
.aula-tabs-header{margin-bottom:16px}
.ttab-label{font-family:'Outfit',sans-serif;font-size:15px;font-weight:800;color:var(--text);margin-bottom:14px;letter-spacing:.3px}
.aula-tabs-nav{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;border-bottom:1px solid var(--line-h)}
.aula-tab{
  background:transparent;border:none;color:var(--muted);font-family:'Outfit',sans-serif;
  font-weight:700;font-size:12px;letter-spacing:.4px;padding:10px 14px;
  border-bottom:2px solid transparent;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0
}
.aula-tab:hover{color:var(--text)}
.aula-tab.active{color:var(--orange);border-bottom-color:var(--orange)}
.aula-tabs-content{padding:20px 0 0}
.aula-tab-pane{display:none;animation:fadeIn .25s ease-in}
.aula-tab-pane.active{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media(max-width:900px){.aula-tab-pane.active{display:block}}
@keyframes fadeIn{from{opacity:0};to{opacity:1}}
/* o recorte real da PDP, reproduzido dentro da aba: usa a MESMA moldura
   branca (.pdp) da pagina de verdade, so que solto sobre o fundo cinza.
   Ao lado da explicacao (grid 50/50): preenche a coluna, sem max-width fixo. */
.ttab-demo{margin:0 0 20px}
.ttab-demo .gal{max-width:520px;margin:0 auto}
@media(min-width:901px){.ttab-demo{margin:0}.ttab-demo .gal{max-width:none;margin:0}}
/* explicacao: mesma tipografia do .teach-step claro (fora do painel escuro),
   mas sempre aberta aqui — sem o comportamento de accordion do desktop. */
.ttab-explain{border-left:2px solid var(--orange);padding:2px 0 2px 18px}
.ttab-explain .ts-body{max-height:none!important;opacity:1!important;margin-top:8px!important}
/* link na trilha lateral que traz o leitor ate aqui embaixo */
.ts-full-link{display:inline-block;margin-top:12px;font-family:'Outfit',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.3px;color:var(--orange);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.ts-full-link:hover{border-bottom-color:var(--orange)}
.teach-sticky .ts-full-link{color:#FFB27A}
.teach-sticky .ts-full-link:hover{border-bottom-color:#FFB27A}

/* trilha aula (sticky, acompanha a rolagem da PDP) */
.teach-rail{position:static}
.teach-sticky{position:sticky;top:84px;max-height:calc(100vh - 104px);overflow-y:auto;scrollbar-width:thin}
@media(max-width:1040px){.teach-rail{position:static;margin-top:26px}}
.rail-head{font-family:'Outfit',sans-serif;font-size:14px;font-weight:800;letter-spacing:.3px;color:var(--text);margin-bottom:3px}
.rail-sub{font-size:11.5px;color:var(--dim);margin-bottom:18px;line-height:1.5}
.teach-step{border-left:2px solid var(--line-h);padding:9px 0 9px 16px;transition:border-color .3s}
.teach-step .ts-title{font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;color:var(--muted);display:flex;gap:9px;align-items:baseline;transition:color .3s}
.teach-step .ts-n{font-family:'Space Mono',monospace;font-size:10px;color:var(--dim);transition:color .3s}
.teach-step .ts-body{font-size:12.5px;color:var(--muted);line-height:1.62;max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease,opacity .3s,margin-top .3s;margin-top:0}
.teach-step .ts-body b{color:var(--text)}
.teach-step .ts-cite{display:block;font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);margin-top:9px}
.teach-step.active{border-left-color:var(--orange)}
.teach-step.active .ts-title{color:var(--text)}
.teach-step.active .ts-n{color:var(--orange)}
.teach-step.active .ts-body{max-height:820px;opacity:1;margin-top:10px}
@media(max-width:1040px){.teach-step .ts-body{max-height:none;opacity:1;margin-top:10px}.teach-step{border-left-color:var(--orange)}}
/* Funil VALOR na trilha (conteudo rico: barras por slot) */
.valor-funnel{margin:12px 0 4px;display:flex;flex-direction:column;gap:2px}
.vrow{display:grid;grid-template-columns:18px 1fr 58px 32px;gap:9px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.vrow:last-child{border-bottom:0}
.vrow .vlet{font-family:'Outfit',sans-serif;font-weight:900;font-size:17px;line-height:1;text-align:center}
/* Justificativa por letra: por que ESSA imagem entrou nessa posicao. */
.valor-why{margin:12px 0 4px;display:flex;flex-direction:column;gap:9px}
.why-row{display:flex;gap:10px;align-items:flex-start}
.why-row .vlet{font-family:'Outfit',sans-serif;font-weight:900;font-size:15px;line-height:1.35;flex-shrink:0;width:16px;text-align:center}
.why-row p{font-size:12px;line-height:1.55;color:var(--muted);margin:0}
.why-row p b{color:var(--text)}
.vmid b{font-size:12px;color:var(--text);display:block;line-height:1.15}
.vmid small{font-size:10px;color:var(--muted)}
.vbar{height:8px;background:var(--card-hi);border-radius:5px;overflow:hidden}
.vfill{display:block;height:100%;border-radius:5px}
.vrow .vpct{font-family:'Space Mono',monospace;font-size:11.5px;font-weight:700;text-align:right;color:var(--text)}
/* Nas abas (container largo) o funil vai 50/50: texto e barra dividem o espaco igual */
.ttab-explain .vrow{grid-template-columns:18px 1fr 1fr 40px}
.c-orange{color:var(--orange)} .c-gold{color:var(--gold-d)} .c-red{color:var(--red)} .c-purple{color:var(--purple)} .c-blue{color:var(--blue)}
.vfill.c-orange{background:var(--orange)} .vfill.c-gold{background:var(--gold)} .vfill.c-red{background:var(--red)} .vfill.c-purple{background:var(--purple)} .vfill.c-blue{background:var(--blue)}
.ts-micro{font-size:10.5px;color:var(--dim);line-height:1.5;margin:8px 0 2px}
.ts-body .ts-h{display:block;font-family:'Outfit',sans-serif;font-weight:800;color:var(--text);margin-top:14px;margin-bottom:4px;font-size:11px;letter-spacing:.4px;text-transform:uppercase}
.ts-stat{display:flex;gap:14px;background:var(--card-hi);border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-top:6px}
.ts-stat .st{flex:1}
.ts-stat .stn{font-family:'Outfit',sans-serif;font-weight:800;font-size:20px;color:var(--orange);line-height:1}
.ts-stat .stl{font-size:10.5px;color:var(--muted);line-height:1.4;margin-top:3px;display:block}
.ts-opt{border:1px dashed var(--line-h);border-radius:8px;padding:10px 12px;margin-top:12px;background:var(--card-hi)}
.ts-opt .ts-h{margin-top:0}
.ts-opt b{color:var(--text)}
/* card conformidade no rail */
.teach-conf{background:var(--blue-tint);border:1px solid rgba(94,80,193,.3);border-radius:12px;padding:18px 20px}
.teach-conf .tag{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue2);font-weight:700;display:block;margin-bottom:9px}
.teach-conf p{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:10px}
.teach-conf p:last-child{margin-bottom:0}
.teach-conf b{color:var(--text)}
.teach-conf .miss{color:#c98}

/* =========================================================================
   AULA AO LADO · painel escuro flutuante (desktop) — 2026-07-26

   Antes a trilha era texto solto sobre o branco da pagina: lia como parte do
   estudo, e nao como comentario sobre ele. Agora e uma caixa escura, com
   borda e sombra, e uma seta na lateral esquerda apontando pra dentro do
   conteudo. A seta nasce do passo ATIVO, entao ela sobe e desce conforme o
   leitor rola a PDP: o painel aponta pro elemento que esta explicando.

   2026-07-26: o escuro passou a valer TAMBEM no mobile, por pedido explicito
   ("a parte de explicacao que fica embaixo tem que ser igual esta no desktop,
   preto"). Por isso as regras de COR sairam do media query e valem em qualquer
   largura; dentro do media query ficou so o que e layout de desktop (sticky,
   borda, sombra, padding e a seta lateral). A folha inferior recebe o mesmo
   #141414 mais adiante, no bloco mobile.

   Todas as cores de texto daqui foram medidas sobre #141414: minimo 4.5:1.
   As letras V/A/L/O/R usam variantes clareadas porque red, purple e blue da
   paleta reprovam sobre fundo escuro (4.35, 3.64 e 2.98:1).
   ========================================================================= */
@media(min-width:1041px){
  .teach-sticky{
    /* top:20px e nao 84px: os 84 reservavam a altura da topbar+nav fixas, que
       nao existem mais. Com 84 o painel colava 64px abaixo do topo e perdia
       altura util de graca. */
    position:sticky;top:20px;
    border:1px solid rgba(254,112,33,.30);
    border-radius:14px;
    box-shadow:0 18px 44px rgba(16,18,24,.28), 0 2px 6px rgba(16,18,24,.10);
    padding:20px 20px 22px;
    /* sem overflow: a seta do passo ativo precisa vazar pela borda esquerda.
       Um so passo abre por vez, entao a altura nao dispara. */
    max-height:none;overflow:visible;
  }
  /* a seta: triangulo encostado na borda esquerda do painel, na altura do
     passo aberto. `left` cobre o padding do painel + a espessura da borda. */
  .teach-sticky .teach-step.active::before{
    content:"";position:absolute;left:-31px;top:14px;
    width:0;height:0;
    border-top:9px solid transparent;border-bottom:9px solid transparent;
    border-right:11px solid #141414;
    filter:drop-shadow(-2px 0 0 rgba(254,112,33,.30));
  }
}

/* --- paleta escura do painel: vale em TODA largura (desktop e folha mobile) --- */
.teach-sticky{background:#141414}
  .teach-sticky .rail-head{color:#F0F0F0}
  .teach-sticky .rail-sub{color:rgba(240,240,240,.68)}

  .teach-sticky .teach-step{position:relative;border-left-color:rgba(255,255,255,.13)}
  .teach-sticky .teach-step .ts-title{color:rgba(240,240,240,.72)}
  .teach-sticky .teach-step .ts-n{color:rgba(240,240,240,.5)}
  .teach-sticky .teach-step .ts-body{color:rgba(240,240,240,.80)}
  .teach-sticky .teach-step .ts-body b{color:#FFF}
  .teach-sticky .teach-step .ts-cite{color:rgba(240,240,240,.55)}
  .teach-sticky .teach-step.active{border-left-color:var(--orange)}
  .teach-sticky .teach-step.active .ts-title{color:#FFF}
  .teach-sticky .teach-step.active .ts-n{color:var(--orange)}
  .teach-sticky .teach-step .ts-title:hover{color:#FFF}

  .teach-sticky .ts-micro{color:rgba(240,240,240,.62)}
  .teach-sticky .ts-body .ts-h{color:#FFF}
  .teach-sticky .vmid b{color:#FFF}
  .teach-sticky .vmid small{color:rgba(240,240,240,.70)}
  .teach-sticky .vrow .vpct{color:rgba(240,240,240,.90)}
  .teach-sticky .vbar{background:rgba(255,255,255,.10)}
  .teach-sticky .ts-stat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
  .teach-sticky .ts-stat .stl{color:rgba(240,240,240,.72)}
  .teach-sticky .ts-opt{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
  .teach-sticky .ts-opt b{color:#FFF}

  /* variantes clareadas: so dentro do painel escuro, a galeria da PDP segue
     com as cores originais sobre o branco. */
  .teach-sticky .vlet.c-red{color:#E64A5A}
  .teach-sticky .vlet.c-purple{color:#9177B1}
  .teach-sticky .vlet.c-blue{color:#8277CF}
  .teach-sticky .vfill.c-red{background:#E64A5A}
  .teach-sticky .vfill.c-purple{background:#9177B1}
  .teach-sticky .vfill.c-blue{background:#8277CF}

  .teach-sticky .teach-conf{background:rgba(94,80,193,.16);border-color:rgba(130,119,207,.42)}
  .teach-sticky .teach-conf .tag{color:#9E96DD}
  .teach-sticky .teach-conf p{color:rgba(240,240,240,.80)}
  .teach-sticky .teach-conf b{color:#FFF}
  .teach-sticky .teach-conf .miss{color:#E8B07A}
.teach-hide{display:none}

/* trilha clicavel + outline Salll (translucido) no bloco em foco */
.teach-step{cursor:pointer}
.teach-step .ts-title:hover{color:var(--text)}
/* scroll-margin-top:28px (era 100px, altura da topbar+nav fixas que sairam).
   28 e o minimo pra o chip "0X · ..." em top:-11px nao encostar na borda de cima
   da viewport. */
[data-teach]{position:relative;scroll-margin-top:28px;border-radius:12px;transition:box-shadow .3s ease,background .3s ease}
[data-teach].teach-focus{box-shadow:0 0 0 2px var(--orange),0 0 0 9px rgba(254,112,33,.15);background:rgba(254,112,33,.05)}
[data-teach].teach-focus::before{content:attr(data-label);position:absolute;top:-11px;left:16px;z-index:6;background:var(--orange);color:#fff;font-family:'Space Mono',monospace;font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:4px 10px;border-radius:20px;white-space:nowrap;box-shadow:0 4px 12px rgba(254,112,33,.4)}

/* Modal de entrada (storytelling, texto animado, auto-close) */
.intro{position:fixed;inset:0;z-index:3000;background:#0E0E10;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8vw;opacity:0;transition:opacity .6s ease;cursor:pointer}
.intro.show{opacity:1}
.intro.hide{opacity:0;pointer-events:none}
.intro-inner{max-width:920px;width:100%}
.intro-line{font-family:'Outfit',sans-serif;font-weight:800;color:#F4F4F5;font-size:clamp(21px,3.3vw,37px);line-height:1.26;letter-spacing:-.5px;opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease;margin-bottom:24px}
.intro-line.in{opacity:1;transform:none}
.intro-line b{color:var(--orange)}
.intro-line.eyebrow{font-family:'Space Mono',monospace;font-weight:700;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.intro-skip{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.38);opacity:0;transition:opacity .6s}
.intro.show .intro-skip{opacity:1;transition-delay:1.2s}

/* ===== Galeria: thumbs MAIORES e EMBAIXO da principal (desktop + mobile) ===== */
.study-left .gal{display:flex;flex-direction:column}
.study-left .gal-main{width:100%;order:1}
.study-left .gal-thumbs{order:2;flex-direction:row;flex-wrap:nowrap;gap:12px;margin-top:30px}
.study-left .gal-thumb{width:68px;height:68px;flex:0 0 auto}
.study-left .gal-thumb .vl{left:50%;top:-20px;bottom:auto;transform:translateX(-50%);font-size:15px}
.study-left .gal-thumb .pill{display:none}

/* ===== Abas da folha mobile (JS injeta dentro de .teach-rail; escopado pra
   nao colidir com .teach-tab/.teach-tabs-wrap das abas de aula fixas embaixo
   da pagina, que sao outro componente e vivem fora de .teach-rail) ===== */
.teach-tabs{display:none}
.teach-rail .teach-tab{flex:0 0 auto;border:1px solid var(--line-h);background:transparent;color:var(--muted);font-family:'Outfit',sans-serif;font-weight:700;font-size:12px;padding:11px 15px;min-height:44px;border-radius:22px;cursor:pointer;white-space:nowrap;scroll-snap-align:start}
.teach-rail .teach-tab.active{background:var(--orange);border-color:var(--orange);color:#fff}

/* ===== Elementos so-mobile, injetados pelo estudo.js ===== */
/* Ficam ocultos no desktop; o CSS mobile abaixo os liga. */
.teach-peek{display:none}
/* rede de seguranca: se algum HTML antigo ainda trouxer o trilho fixo de
   lente, ele nao volta a grudar no topo. */
.lens-dock{display:none!important}

/* =========================================================================
   MOBILE (<=1040px): a aula vira FOLHA INFERIOR (bottom sheet), nao barra
   no topo. Motivo: no topo ela custava 97% da viewport (medido: 693px de
   773px) e ficava fora do alcance do polegar. Embaixo custa 60px fechada,
   abre em 62vh, e a pagina continua rolando atras: e o lado-a-lado do
   desktop girado 90 graus, nao um modal que esconde a PDP.
   ========================================================================= */
@media(max-width:1040px){
  .study-split{display:flex;flex-direction:column}
  .study-left{min-width:0;width:100%}
  /* min-width:0 obrigatorio: sem ele o nowrap das abas estoura a largura da pagina */
  /* .teach-sticky e o elo do meio entre a folha e o corpo da aula: sem
     flex:1 + min-height:0 aqui, o conteudo vaza da folha em vez de rolar. */
  .teach-sticky{position:static;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;max-height:none;overflow:hidden}

  /* --- a folha --- */
  /* #141414, o mesmo do painel de desktop (pedido: "tem que ser igual esta no
     desktop, preto"). A paleta de texto do painel escuro ja vale em qualquer
     largura; o que este bloco resolve e o CHROME da folha — fundo, alca, barra
     de contexto, abas e o esfumado da direita, que existem so no mobile e
     estavam pintados pra fundo claro. */
  .teach-rail{
    order:-1;position:fixed;left:0;right:0;bottom:0;z-index:900;width:100%;min-width:0;
    margin:0;padding:0;background:#141414;border:0;border-top:1px solid rgba(254,112,33,.30);
    border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(10,11,14,.46);
    max-height:min(58vh,540px);display:flex;flex-direction:column;overflow:hidden;
    transform:translateY(calc(100% - 60px));
    transition:transform .34s cubic-bezier(.22,.9,.3,1);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .teach-rail.open{transform:translateY(0)}
  .rail-head,.rail-sub{display:none}

  /* --- barra de contexto (sempre visivel, 60px, alcance do polegar) --- */
  .teach-peek{
    display:flex;align-items:center;gap:12px;flex:0 0 auto;height:60px;padding:0 16px;
    cursor:pointer;background:transparent;border:0;width:100%;text-align:left;
    font-family:'Outfit',sans-serif;
  }
  .teach-peek::before{
    content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:3px;background:rgba(255,255,255,.26);
  }
  .teach-peek .pk-n{
    font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:1px;
    color:#fff;background:var(--orange);border-radius:7px;padding:5px 8px;flex:0 0 auto;
  }
  /* medidos sobre #141414: #F0F0F0 = 14.2:1, rgba(240,240,240,.66) = 5.0:1 */
  .teach-peek .pk-t{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:#F0F0F0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .teach-peek .pk-t small{display:block;font-family:'Space Mono',monospace;font-size:9.5px;
    font-weight:400;letter-spacing:1.1px;text-transform:uppercase;color:rgba(240,240,240,.66)}
  .teach-peek .pk-x{flex:0 0 auto;width:30px;height:30px;border-radius:50%;
    background:rgba(255,255,255,.09);color:rgba(240,240,240,.80);display:flex;align-items:center;
    justify-content:center;font-size:15px;transition:transform .3s}
  .teach-rail.open .teach-peek .pk-x{transform:rotate(180deg)}
  .teach-rail{position:fixed}
  .teach-peek{position:relative}

  /* --- corpo rolavel da folha --- */
  .teach-tabs{
    display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;padding:2px 16px 12px;scrollbar-width:none;flex:0 0 auto;
  }
  .teach-tabs::-webkit-scrollbar{display:none}
  /* abas sobre o #141414 da folha: rgba(240,240,240,.78) = 8.6:1.
     Escopado a .teach-rail: sem isso a regra vazava pras abas de aula fixas
     no fim da pagina (fundo claro), deixando o texto quase branco sobre
     cinza claro — ilegivel ("fonte branca" reportado no mobile). */
  .teach-rail .teach-tab{border-color:rgba(255,255,255,.18);color:rgba(240,240,240,.78)}
  .teach-rail .teach-tab.active{background:var(--orange);border-color:var(--orange);color:#fff}
  /* cadeia flex ate o corpo rolavel: sem flex:1 + min-height:0 em cada elo, o
     conteudo da aula (661px medidos) vaza pra fora da folha em vez de rolar. */
  #rail-perf,#rail-conf{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden}
  #rail-perf.teach-hide,#rail-conf.teach-hide{display:none}
  /* Escopado a .teach-rail: sem isso, essas regras (pensadas pra folha
     inferior) tambem escondiam o titulo (ts-title) e mudavam o layout do
     .ttab-explain — o mesmo .teach-step reaproveitado nas abas fixas do
     fim da pagina. */
  .teach-rail .teach-step{border-left:0;padding:0 16px 18px;display:none;cursor:default}
  .teach-rail .teach-step.active{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .teach-rail .teach-step .ts-title{display:none}
  /* especificidade .teach-step.active .ts-body para vencer a regra de 820px
     do desktop (media query nao soma especificidade: era esse o bug que
     deixava a aula com 693px de altura no celular). */
  .teach-rail .teach-step.active .ts-body{max-height:none;overflow:visible;opacity:1;margin-top:4px}
  .teach-conf{margin:0 16px 18px;overflow-y:auto;min-height:0}

  /* fechada: so a barra responde ao toque */
  .teach-rail:not(.open) .teach-tabs,
  .teach-rail:not(.open) .teach-step,
  .teach-rail:not(.open) .teach-conf{opacity:0;pointer-events:none}
  .teach-rail .teach-tabs,.teach-rail .teach-step,.teach-rail .teach-conf{transition:opacity .2s}

  /* a folha ocupa o rodape: o conteudo do fim da pagina precisa de folga */
  body{padding-bottom:64px}
  /* A barra de cookie tem que subir acima da folha, senao cai dentro dela.
     env(safe-area-inset-bottom): a folha reserva a barra de gestos do iPhone
     no proprio padding, entao os 74px tem que somar a mesma folga, senao a
     barra encosta no peek em tela com home bar. */
  .cookie-bar{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .sheet-open .cookie-bar{bottom:calc(min(58vh,540px) + 14px + env(safe-area-inset-bottom,0px))}

  /* O trilho de lente fixo no topo foi REMOVIDO: o toggle vive no fluxo da
     pagina. Nao ha mais nada fixo no topo alem da nav. */

  /* nada mais e fixo no topo: o bloco em foco so precisa nao encostar na borda */
  [data-teach]{scroll-margin-top:24px}
  [data-teach].teach-focus::before{top:-10px;left:12px;font-size:8.5px;padding:3px 9px}

  /* alvos de toque (minimo 44px) */
  .nav-cta{padding:14px 18px}
  .lens-btn{min-height:52px;justify-content:center}
  .ck-btn{padding:14px 18px}
  .gal-thumb{width:56px;height:56px}

  /* a tira de abas rola na horizontal e as ultimas ficavam invisiveis:
     a borda esfumada e o unico aviso de que ha mais coisa a direita.
     Escopado a .teach-rail: sem isso, o fade escuro (#141414) e o
     position:relative vazavam pro bloco de abas de aula no fim da pagina
     (fundo claro), que usa a MESMA classe .teach-tabs-wrap pra outro fim. */
  .teach-rail .teach-tabs-wrap{position:relative;flex:0 0 auto;min-width:0}
  .teach-rail .teach-tabs-wrap::after{
    content:"";position:absolute;top:0;right:0;bottom:12px;width:44px;z-index:3;
    pointer-events:none;
    /* #141414 e nao var(--card): a folha e escura, o esfumado tem que morrer
       na cor dela, senao aparece uma faixa branca no canto direito das abas. */
    background:linear-gradient(90deg,rgba(20,20,20,0) 0%,#141414 78%);
  }
  /* some quando a tira chega ao fim */
  .teach-rail .teach-tabs-wrap.at-end::after{opacity:0;transition:opacity .2s}
}

/* ===== Conteudo enriquecido adaptado pro mobile ===== */
@media(max-width:760px){
  /* hero A+: imagem em cima, texto embaixo (overlay em tela pequena nao le) */
  .amod-hero{aspect-ratio:auto;display:block;background:#fff}
  .amod-hero.premium{aspect-ratio:auto}
  .amod-hero img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
  .amod-hero .ph{position:relative;inset:auto;aspect-ratio:4/3}
  .amod-hero.has-mob img{aspect-ratio:4/5}
  .amod-hero .ov,.amod-hero .ov.dark{position:relative;z-index:2;max-width:100%;padding:14px 16px 16px;color:var(--pdp-text)}
  .amod-hero .ov h4{color:var(--pdp-text);font-size:17px}
  .amod-hero .ov p{color:#444;opacity:1}
  .amod-trio{grid-template-columns:1fr;gap:18px}
  .amod-quad{grid-template-columns:1fr}
  .aplus-head{flex-direction:column;gap:4px}
  .pdp{padding:18px 16px 22px;border-radius:12px}
  .study-left .gal-thumbs{gap:10px}
  /* Os 5 thumbs DIVIDEM a largura da linha em vez de morar num quadrado fixo de
     58px. Em 430px de tela cada um sai de 58 pra ~86px — a lata da pra ver, e o
     alvo de toque triplica de area. max-width segura o crescimento em tablet,
     onde 5 quadrados de 140px pareceriam outra galeria. */
  .study-left .gal-thumb{flex:1 1 0;min-width:0;width:auto;height:auto;aspect-ratio:1/1;max-width:112px}
  .study-left .gal-thumb img{padding:7px}
  .pdp-title{font-size:20px}
  /* mesma proporcao do desktop: um degrau abaixo do titulo, nao legenda */
  .tsw-destaques{font-size:15px}
  .wrap{padding:0 16px}
  .author{padding:22px}
  .intro{padding:10vw 7vw}
}

/* ===== SELETOR DE ARQUETIPO DE TITULO =====
   O mesmo SKU rende tres titulos diferentes. O radio troca o titulo da PDP ao
   vivo pra mostrar que nao existe titulo universal: o canal decide o slot 01. */
.title-switch{margin:0}
.tsw-lab{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:700;margin-bottom:7px}
/* Seta ligando o radio ao bloco de titulo. Fica DENTRO do .title-switch, e o
   bloco de titulo abaixo carrega margin-top:26px — e essa margem que da ar pro
   chip "02 · TITULO", que e posicionado em top:-11px e antes caia por cima das
   pilulas do radio. */
.tsw-arrow{display:flex;align-items:center;gap:7px;margin:9px 0 0;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);font-weight:700}
.tsw-caret{flex:0 0 auto;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--orange);margin-left:2px}
.tsw-opts{display:flex;flex-wrap:wrap;gap:6px}
.tsw-opts label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:'Outfit',sans-serif;font-weight:600;font-size:11.5px;padding:6px 12px;border:1px solid var(--line-h);border-radius:99px;color:var(--muted);background:#fff;transition:all .15s;line-height:1}
.tsw-opts label:hover{border-color:var(--orange);color:var(--text)}
.tsw-opts input{position:absolute;opacity:0;pointer-events:none}
.tsw-opts input:checked + label,.tsw-opts label.on{background:var(--orange);border-color:var(--orange);color:#fff}
.tsw-opts .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5}
.tsw-opts label.on .dot{opacity:1}
.tsw-meta{margin-top:8px;font-size:11.5px;color:var(--muted);line-height:1.5}
.tsw-meta b{color:var(--text)}
.tsw-count{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.06em;color:var(--dim);margin-left:6px}
/* Destaques do Produto (campo 2026): fragmentos separados por barra vertical */
/* Bloco de titulo = h1 + Destaques do Produto. Os Destaques nao sao corpo de
   texto: sao a parte do titulo que a Amazon mandou pra outro campo a partir de
   27/07/2026. Por isso herdam o layout do titulo (mesma familia, mesmo peso,
   mesma cor, um degrau abaixo no tamanho) em vez de virarem legenda. */
/* margin-top:26px NAO e decoracao: o chip [data-teach].teach-focus::before mora
   em top:-11px e precisa dessa faixa livre, senao escreve por cima das pilulas
   do seletor de titulo (era o bug reportado). */
.pdp-title-block{padding:2px 0;margin-top:26px}
.tsw-destaques{margin-top:7px;font-size:17px;font-weight:500;line-height:1.38;color:var(--pdp-text);display:none}
.tsw-destaques.on{display:block}
.tsw-destaques .dq-lab{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d);font-weight:700;display:block;margin-bottom:4px}
.tsw-destaques .pipe{color:var(--gold-d);font-weight:700;margin:0 7px}
@media print{.tsw-opts label:not(.on){display:none}}

/* =========================================================================
   GATE DE CAPTURA · 2026-07-26
   Mesmo mecanismo dos ebooks (_shared/ebook.css): abre depois que o visitante
   RECEBEU valor, nunca na chegada. Aqui o gatilho e 35% de leitura + 20s na
   pagina, as duas condicoes juntas. Uma vez resolvido, nunca mais aparece.

   z-index 2000: acima da barra de cookie (990) e da folha da aula (900),
   abaixo do modal de entrada (3000) — o intro tem que terminar primeiro, e
   como ele sai em ~7s e o gate so pode abrir em 20s, nao ha disputa.

   Contraste medido sobre o #fff da caixa: headline 15.6:1, sub 5.9:1,
   "continuar sem informar" 3.9:1 no cinza --dim, que reprovaria como texto
   corrido; aqui vai em --muted (5.9:1) mesmo sendo a acao secundaria.
   ========================================================================= */
.gate-overlay{position:fixed;inset:0;z-index:2000;background:rgba(10,10,12,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px}
.gate-overlay[hidden]{display:none}
.gate-box{background:#fff;color:var(--text);border-radius:18px;max-width:460px;width:100%;padding:38px 34px 30px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.gate-close{position:absolute;top:10px;right:12px;width:40px;height:40px;background:none;border:0;font-size:26px;color:var(--muted);cursor:pointer;line-height:1;border-radius:50%}
.gate-close:hover{background:var(--card-hi);color:var(--text)}
.gate-eyebrow{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#CC4A01;font-weight:700;margin-bottom:8px}
.gate-headline{font-family:'Outfit',sans-serif;font-weight:800;font-size:24px;line-height:1.2;margin-bottom:10px;letter-spacing:-.4px}
.gate-sub{font-size:14px;color:var(--muted);margin-bottom:20px;line-height:1.6}
.gate-form{display:grid;gap:10px}
.gate-form input{font-family:'Inter',sans-serif;font-size:15px;padding:13px 16px;border:1.5px solid var(--line-h);border-radius:10px;outline:none;color:var(--text);background:#fff;width:100%}
.gate-form input::placeholder{color:var(--muted)}
.gate-form input:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-tint)}
.gate-form input.gate-input-error{border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint)}
.gate-cta{font-family:'Outfit',sans-serif;font-weight:700;font-size:15px;background:linear-gradient(103deg,#8E1E4B 0%,#B0300F 44%,#CC4A01 100%);color:#fff;border:0;border-radius:10px;padding:14px;cursor:pointer;min-height:48px}
.gate-cta:hover{filter:brightness(1.08)}
.gate-skip{display:block;margin:16px auto 0;background:none;border:0;font-size:12.5px;color:var(--muted);text-decoration:underline;cursor:pointer;padding:8px 12px;min-height:40px;font-family:'Inter',sans-serif}
.gate-skip:hover{color:var(--text)}
.gate-ok{font-size:14px;color:var(--muted);line-height:1.6}
.gate-ok b{color:var(--text)}
html.gate-open,body.gate-open{overflow:hidden}
@media(max-width:560px){
  .gate-box{padding:30px 20px 22px;border-radius:14px}
  .gate-headline{font-size:20px}
}
@media print{.gate-overlay{display:none!important}}

/* ============================================================================
   A+ · MODULOS-TEMPLATE OFICIAIS
   Adicionado 2026-07-27 (estudo frontmax-coleira).
   O enriquecido dos estudos deixa de ser layout livre e passa a mostrar o
   modulo-template REAL da Amazon: nome oficial do modulo, dimensao em px do
   slot de imagem, zona (topo/meio/base) e a funcao cognitiva Salll (M1-M7).
   Fonte dos px: salll-image-generator/aplus/aplus_modules.py, lido do
   Standard_A_Module_Templates.pdf da Amazon.
   ========================================================================== */

/* Barra de identificacao do modulo-template, no topo de cada .amod */
.amod-tpl{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:#f6f6f4;border-bottom:1px solid var(--pdp-line);padding:8px 14px;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;line-height:1.4}
.amod-tpl .tn{background:#1E1E1E;color:#fff;border-radius:4px;padding:2px 7px;font-weight:700;flex-shrink:0}
.amod-tpl .tname{color:var(--pdp-text);font-weight:700}
.amod-tpl .tpx{color:var(--pdp-muted)}
.amod-tpl .tz{border-radius:999px;padding:2px 9px;font-weight:700;color:#fff;flex-shrink:0}
.amod-tpl .tz.z-topo{background:#FE7021}
.amod-tpl .tz.z-meio{background:#7F61A4}
.amod-tpl .tz.z-base{background:#5E50C1}
.amod-tpl .tfn{margin-left:auto;color:var(--pdp-muted)}
@media(max-width:640px){.amod-tpl .tfn{margin-left:0;width:100%}}

/* Alt-text exposto. Nesta categoria o alt e o que indexa (o corpo do modulo
   nao entra na busca interna da Amazon), entao o estudo mostra o alt na tela. */
.amod-alt{padding:9px 14px 11px;background:#fcfcfb;border-top:1px dashed var(--pdp-line);font-family:'Space Mono',monospace;font-size:10px;color:var(--pdp-muted);line-height:1.6}
.amod-alt b{color:var(--pdp-text);letter-spacing:.6px;text-transform:uppercase;font-size:9px}
.amod-alt .cc{opacity:.7}

/* Header proprio do modulo trio (o slot "header" do Standard Three Images) */
.amod-trio-h{padding:16px 20px 0}
.amod-trio-h h4{font-family:'Outfit',sans-serif;font-size:19px;font-weight:800;color:var(--pdp-text);letter-spacing:-.3px}

/* Standard Comparison Chart · colunas de 150x300, so SKUs da mesma marca */
.amod-compare{padding:16px 20px 20px;overflow-x:auto}
.cmp-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:460px}
.cmp-table th,.cmp-table td{border:1px solid var(--pdp-line);padding:9px 12px;text-align:left;color:#3a3a3a;vertical-align:middle}
.cmp-table thead th{background:#faf9f7;color:var(--pdp-text);font-weight:700;text-align:center;vertical-align:bottom;padding:12px}
.cmp-table thead th:first-child{background:transparent;border:0}
.cmp-table tbody th{background:#faf9f7;font-weight:600;color:var(--pdp-muted);width:158px}
.cmp-table tbody td{text-align:center}
.cmp-table tbody tr.cmp-hi td{background:#fff8f0;font-weight:700;color:var(--pdp-text)}
.cmp-col-img{width:100%;max-width:118px;aspect-ratio:1/2;object-fit:contain;display:block;margin:0 auto 9px;background:#fff}
.cmp-col-ph{width:100%;max-width:118px;aspect-ratio:1/2;margin:0 auto 9px;border-radius:6px;background:repeating-linear-gradient(45deg,#eee 0 10px,#e5e5e5 10px 20px)}
.cmp-col-name{display:block;font-size:12.5px;line-height:1.3}

/* Nota de limite do canal (5 modulos no Basic, 7 no Premium) */
.aplus-limit{display:flex;gap:12px;align-items:flex-start;background:#faf9f7;border:1px solid var(--pdp-line);border-left:3px solid #FE7021;border-radius:10px;padding:13px 16px;margin-bottom:16px;font-size:12.5px;color:#444;line-height:1.6}
.aplus-limit b{color:var(--pdp-text)}
.aplus-limit .lc{font-family:'Space Mono',monospace;font-size:22px;font-weight:700;color:#FE7021;line-height:1;flex-shrink:0}

/* Modulo que NAO coube nos 5 do Basic: mostrado apagado, com o motivo */
.amod.amod-out{opacity:.55;border-style:dashed}
.amod.amod-out .amod-tpl{background:#f2f2f0}
.amod.amod-out .amod-tpl .tn{background:#9a9a9a}
.amod-outnote{padding:12px 16px;font-size:12px;color:var(--pdp-muted);line-height:1.6;background:#fafafa}
.amod-outnote b{color:var(--pdp-text)}

/* Lista de specs do Premium / ML na aba correspondente */
.aplus-plan{display:grid;gap:10px;margin-bottom:16px}
.apl-row{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;background:#fff;border:1px solid var(--pdp-line);border-radius:10px;padding:13px 15px}
.apl-n{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;color:#fff;background:#1E1E1E;border-radius:5px;text-align:center;padding:4px 0}
.apl-row h5{font-family:'Outfit',sans-serif;font-size:14.5px;font-weight:700;color:var(--pdp-text);margin-bottom:3px}
.apl-row .apl-px{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--pdp-muted);display:block;margin-bottom:5px}
.apl-row p{font-size:12.5px;color:#444;line-height:1.6}

/* Antes com mais de uma imagem (estudo de PDP real, nao reconstruida).
   Adicionado 2026-07-27 (frontmax-coleira): o "antes" deixa de ser 1 foto e
   passa a mostrar a galeria real do ASIN, inclusive o que ha de errado nela. */
.antes-extra{order:3;margin-top:14px}
.antes-extra .ax-cap{font-family:'Space Mono',monospace;font-size:10px;line-height:1.7;color:#D11C2F}
.antes-extra .ax-cap b{color:#b02020}
/* Galeria do "antes": mesmo componente da galeria VALOR, sem as letras. No
   lugar da letra vai o numero da imagem, e a que esta fora de spec ganha borda
   vermelha. O clique e o zoom funcionam igual aos da lente com metodo. */
.gal-antes .gal-thumb .ax-n{position:absolute;left:50%;top:-19px;transform:translateX(-50%);font-family:'Space Mono',monospace;font-size:11px;font-weight:700;color:var(--pdp-muted)}
.gal-antes .gal-thumb.active{border:2px solid var(--pdp-muted);box-shadow:0 0 0 1px var(--pdp-muted)}
.gal-antes .gal-thumb.active .ax-n{color:var(--pdp-text)}
.gal-antes .gal-thumb.bad{border-color:#D11C2F;border-style:dashed}
.gal-antes .gal-thumb.bad.active{border:2px solid #D11C2F;box-shadow:0 0 0 1px #D11C2F}
.gal-antes .gal-thumb.bad .ax-n{color:#D11C2F}
.gal-antes .gal-thumbs{margin-top:26px}

/* Correcoes 2026-07-27 (frontmax-coleira):
   1) o label do modulo-template nao pode estourar a largura do card;
   2) modulo de overlay CLARO precisa de scrim garantido: texto branco sobre
      foto sem escurecimento falha contraste em metade das cenas. */
.amod-tpl{min-width:0}
.amod-tpl .tfn{min-width:0;overflow-wrap:anywhere;text-align:right}
.amod-hero.scrim::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.42) 46%,rgba(0,0,0,0) 78%)}
@media(max-width:760px){.amod-hero.scrim::before{display:none}}
/* o letter-spacing do ultimo glifo do .tfn estava sendo cortado pela borda */
.amod-tpl{padding-right:18px}
.amod-tpl .tfn{flex:0 1 auto;padding-left:10px}

/* ============================================================================
   DESPADRONIZACAO CROSS-VAREJO
   Adicionado 2026-07-27 (frontmax-coleira). O mesmo produto, mesma marca,
   catalogado de forma independente por varejo, sem fonte central. A secao
   mostra o mesmo achado da PDP principal (VALOR/Words/Rich fraco) repetido
   em escala: nao e um problema da Amazon, e um problema de governanca de
   catalogo que atravessa o varejo inteiro.
   ========================================================================== */
.cross-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:22px 0}
.cross-card{background:#fff;border:1px solid var(--pdp-line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.cross-card.cross-bad{border-color:rgba(228,56,74,.35);box-shadow:0 0 0 1px rgba(228,56,74,.12)}
.cross-card .cc-img{aspect-ratio:1/1;background:#fafafa;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cross-card .cc-img img{width:100%;height:100%;object-fit:contain;padding:14px}
.cross-card .cc-body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.cross-card .cc-store{font-family:'Outfit',sans-serif;font-weight:800;font-size:15px;color:var(--pdp-text)}
.cross-card .cc-meta{display:flex;gap:10px;font-family:'Space Mono',monospace;font-size:10.5px;color:var(--pdp-muted);letter-spacing:.3px}
.cross-card .cc-meta b{color:var(--pdp-text)}
.cross-card .cc-find{font-size:12.5px;line-height:1.5;color:#333;margin-top:2px}
.cross-card .cc-find b{color:#b02020}
.cross-card.cross-bad .cc-find b{color:#b02020}

/* Faixa "mesma foto, muda o fundo" (Mercado Livre): 5 imagens lado a lado,
   sem card, sem legenda por item — o ponto e a repeticao visual imediata. */
.cross-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0 6px}
.cross-strip img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fafafa;border:1px solid var(--pdp-line);border-radius:8px;padding:6px}
@media(max-width:640px){.cross-strip{grid-template-columns:repeat(3,1fr)}}

.cross-quote{background:#fff8f0;border:1px solid rgba(254,112,33,.3);border-left:3px solid #FE7021;border-radius:10px;padding:14px 16px;margin:14px 0;font-size:13.5px;line-height:1.6;color:#333}
.cross-quote b{color:#b02020}
.cross-quote .cq-src{display:block;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--pdp-muted);margin-top:8px}

/* Cards cross-varejo funcionais: imagem clicavel (zoom no lightbox global),
   link real "Ver na loja" pra conferir ao vivo. Adicionado 2026-07-27. */
.cross-card .cc-img{position:relative;cursor:zoom-in}
.cross-card .cc-img:hover img{transform:scale(1.04)}
.cross-card .cc-img img{transition:transform .25s ease}
.cc-zoom{position:absolute;bottom:8px;right:8px;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:rgba(20,20,20,.72);padding:3px 8px;border-radius:20px;opacity:0;transition:opacity .2s;pointer-events:none}
.cross-card .cc-img:hover .cc-zoom{opacity:1}
.cross-strip .cc-zoom{font-size:8.5px;padding:2px 6px;bottom:6px;right:6px}
.cc-link{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-family:'Outfit',sans-serif;font-weight:700;font-size:11.5px;color:var(--orange);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s;align-self:flex-start}
.cc-link:hover{border-bottom-color:var(--orange)}
.cc-link .cc-arrow{font-size:11px;transition:transform .15s}
.cc-link:hover .cc-arrow{transform:translate(2px,-2px)}
.cross-card .cc-link{margin-top:auto;padding-top:6px}
/* video (Petz): thumbnail + play badge, link direto pro youtube (nao lightbox) */
a.cc-video{display:flex;text-decoration:none;cursor:pointer}
a.cc-video img{width:100%;height:100%;object-fit:cover}
.cc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(20,20,20,.72);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;padding-left:3px;transition:background .2s}
a.cc-video:hover .cc-play{background:var(--orange)}
/* cabecalho do bloco Mercado Livre com o link "ver no ar" alinhado a direita */
.cross-meli-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cross-meli-head .cc-link-lg{margin-top:0;font-size:13px;flex-shrink:0}

/* Badge de video no canto do card (Cobasi/Petlove: foto + link de video
   separado, diferente do Petz onde o card inteiro E o video). */
.cc-vidbadge{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:4px;font-family:'Outfit',sans-serif;font-weight:700;font-size:10.5px;color:#fff;background:rgba(20,20,20,.78);padding:4px 9px 4px 7px;border-radius:20px;text-decoration:none;z-index:2;transition:background .15s}
.cc-vidbadge:hover{background:var(--orange)}

/* Tabela titulo+descricao lado a lado, 7 varejos. Prova a despadronizacao no
   nivel do texto (nao so achado pontual): nenhum repete a mesma formula.
   Adicionado 2026-07-27. */
.titles-table{width:100%;border-collapse:collapse;font-size:12.5px;margin:16px 0 20px}
.titles-table th{text-align:left;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--pdp-muted);font-weight:700;padding:0 12px 8px;border-bottom:2px solid var(--pdp-line)}
.titles-table td{padding:12px;border-bottom:1px solid var(--pdp-line);vertical-align:top;color:#333;line-height:1.55}
.titles-table tr:last-child td{border-bottom:none}
.titles-table .tt-store{width:120px;font-family:'Outfit',sans-serif;font-weight:800;font-size:13px;color:var(--pdp-text);white-space:nowrap}
.titles-table .tt-title{width:30%;font-weight:600;color:var(--pdp-text)}
.titles-table .tt-desc{color:#444}
.titles-table tr.tt-twin td{background:#fff5f5}
.titles-table tr.tt-twin .tt-title{color:#b02020}

/* ============================================================
   .hero-vs — comparativo da imagem 1 (antes x depois) lado a lado.
   Os dois slots sao QUADRADOS do MESMO tamanho de proposito: e o quadro
   que o marketplace da pra imagem principal. Arte deitada nao preenche ele,
   e a area branca sobrando E o argumento. Nao trocar por object-fit:cover.
   Criado no estudo yakult-morango (2026-07-31), vale pra todos.
   ============================================================ */
.hero-vs{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.hvs-card{border:1px solid var(--pdp-line);border-radius:10px;overflow:hidden;background:#fff}
.hvs-tag{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;padding:9px 14px;font-weight:700}
.hvs-card.bad .hvs-tag{background:var(--ink,#1E1E1E)}
.hvs-card.good .hvs-tag{background:var(--orange)}
.hvs-slot{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:#fff;padding:14px}
.hvs-slot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.hvs-cap{padding:12px 16px 16px;font-size:12.5px;line-height:1.5;color:var(--pdp-muted);
  border-top:1px solid var(--pdp-line)}
.hvs-cap b{color:var(--ink,#1E1E1E)}
.hvs-note{margin-top:18px;padding:16px 18px;border-left:3px solid var(--orange);
  background:rgba(254,112,33,.05);font-size:13.5px;line-height:1.62;border-radius:0 8px 8px 0}
@media (max-width:760px){
  .hero-vs{grid-template-columns:1fr;gap:16px}
}

/* ============================================================
   MEDICAO CONTINUA — preco, bula e busca coletados por robo.
   Nasceu no estudo frontmax-coleira (2026-08-03), na segunda rodada de
   captura. A secao cross-varejo original (27/07) foi feita a mao, olhando
   pagina por pagina; esta aqui vem do motor de coleta, o que muda o que da
   pra afirmar: preco do MESMO EAN lado a lado, presenca de claim da bula
   canal a canal, e posicao na busca. Vale pra qualquer estudo que tenha
   coleta por tras.
   ============================================================ */

/* Escada de preco: uma barra por canal, mesmo EAN. O piso e o teto ganham
   cor porque o argumento e a DISTANCIA entre eles, nao o valor de cada um. */
.pladder{display:flex;flex-direction:column;gap:2px;margin:20px 0 4px}
.pl-row{display:grid;grid-template-columns:150px 1fr auto;gap:14px;align-items:center;
  padding:9px 2px;border-bottom:1px solid var(--pdp-line)}
.pl-row:last-child{border-bottom:none}
.pl-name{font-family:'Outfit',sans-serif;font-weight:800;font-size:13.5px;color:var(--pdp-text);line-height:1.25}
.pl-name small{display:block;font-family:'Space Mono',monospace;font-weight:400;
  font-size:10px;letter-spacing:.4px;color:var(--pdp-muted);margin-top:3px}
.pl-bar{height:13px;background:var(--bg-deep);border-radius:2px;position:relative;overflow:hidden}
.pl-bar i{position:absolute;inset:0 auto 0 0;display:block;background:var(--slate);border-radius:2px}
.pl-row.pl-floor .pl-bar i{background:var(--teal)}
.pl-row.pl-peak .pl-bar i{background:var(--red)}
.pl-val{font-family:'Space Mono',monospace;font-size:14px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--pdp-text);white-space:nowrap}
.pl-row.pl-floor .pl-val{color:var(--teal)}
.pl-row.pl-peak .pl-val{color:var(--red)}

/* Numeros-sintese da rodada. Reaproveitam a linha de leitura dos stats do A+
   mas com tipografia de dado (tabular), porque aqui sao medicoes. */
.mx-stats{display:flex;flex-wrap:wrap;gap:22px 40px;margin:22px 0 6px;
  padding-top:18px;border-top:1px solid var(--pdp-line)}
.mx-stat{display:flex;flex-direction:column;gap:4px}
.mx-stat b{font-family:'Space Mono',monospace;font-size:clamp(24px,3.4vw,32px);
  font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--pdp-text)}
.mx-stat.alarm b{color:var(--red)}
.mx-stat span{font-size:11.5px;line-height:1.45;color:var(--pdp-muted);max-width:23ch}

/* Matriz bula x canal. Celula colorida em vez de icone: a leitura util e o
   PADRAO das colunas (uma linha inteira vermelha = ninguem publica aquilo). */
.bulax{width:100%;border-collapse:collapse;font-size:12.5px;margin:16px 0 8px;min-width:560px}
.bulax th{text-align:left;font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--pdp-muted);font-weight:700;padding:0 12px 8px;
  border-bottom:2px solid var(--pdp-line);white-space:nowrap}
.bulax td{padding:10px 12px;border-bottom:1px solid var(--pdp-line);text-align:center;
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.4px}
.bulax tbody th{text-align:left;font-family:'Outfit',sans-serif;font-size:12.5px;
  font-weight:600;color:var(--pdp-text);text-transform:none;letter-spacing:0;
  border-bottom:1px solid var(--pdp-line);padding:10px 12px;white-space:normal}
.bulax .bx-yes{background:rgba(23,163,152,.10);color:#0F7B72}
.bulax .bx-no{background:rgba(228,56,74,.10);color:#b02020}
.bulax tr.bx-critical th{color:#b02020}
.bulax tr.bx-critical .bx-no{background:rgba(228,56,74,.20);font-weight:700}

/* Duas SERPs lado a lado. Linha da marca destacada; o resto e contexto. */
.serp-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px;margin:20px 0}
.serp-card{border:1px solid var(--pdp-line);border-radius:12px;padding:16px 18px 18px;background:#fff}
.serp-card h4{font-family:'Outfit',sans-serif;font-size:14.5px;font-weight:800;
  color:var(--pdp-text);margin:0 0 3px}
.serp-q{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.4px;
  color:var(--pdp-muted);margin-bottom:12px}
.serp-list{display:flex;flex-direction:column;gap:1px}
.serp-item{display:grid;grid-template-columns:26px 1fr auto;gap:9px;align-items:baseline;
  font-size:12.5px;padding:5px 0;border-bottom:1px dotted var(--pdp-line);color:#444}
.serp-item .si-n{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--pdp-muted);
  font-variant-numeric:tabular-nums}
.serp-item .si-p{font-family:'Space Mono',monospace;font-size:11px;color:var(--pdp-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.serp-item.si-own{font-weight:700;color:var(--pdp-text)}
.serp-item.si-own .si-n{color:var(--orange);font-weight:700}
.serp-foot{font-size:12px;line-height:1.55;color:var(--pdp-muted);margin-top:12px;
  padding-top:12px;border-top:1px solid var(--pdp-line)}
.serp-foot b{color:var(--pdp-text)}

@media (max-width:760px){
  .pl-row{grid-template-columns:110px 1fr auto;gap:10px}
  .pl-name{font-size:12.5px}
  .mx-stats{gap:18px 26px}
}

/* ============================================================
   LAYOUT EM BLOCOS (index-blocos.html) · 2026-08-03
   Motivo: o mock lado a lado nao convencia como simulacao de
   e-commerce nem ajudava a acompanhar. Aqui a pagina assume que
   e material didatico: um bloco por elemento da PDP, cada um com
   subtitulo de divisao, o antes e o depois lado a lado e a
   explicacao logo abaixo. Nada de toggle: tudo visivel na ordem.
   ============================================================ */
/* Quando os blocos vivem como TERCEIRA LENTE dentro do estudo (frontmax em
   diante), esta linha abre a lente: ela nao tem o `.label` da versao
   standalone, que ali era o titulo da pagina inteira. */
.blk-lead{font-size:15px;line-height:1.65;color:#5b5f66;max-width:82ch;margin:0 0 22px}
.blk-lead b{color:var(--text,#1E1E1E)}
.blk{border-top:2px solid var(--ink,#1E1E1E);padding-top:0;margin:0 0 64px}
.blk-head{display:flex;align-items:flex-start;gap:18px;padding:18px 0 22px}
.blk-n{font-family:'Space Mono',monospace;font-size:13px;font-weight:700;color:#fff;background:var(--ink,#1E1E1E);
  border-radius:8px;padding:7px 11px;letter-spacing:1px;flex:0 0 auto}
.blk-head .blk-tt{flex:1;min-width:0}
.blk-title{font-family:'Outfit',sans-serif;font-size:clamp(22px,2.4vw,30px);font-weight:900;letter-spacing:-.02em;
  line-height:1.1;color:var(--ink,#1E1E1E);margin:0 0 6px}
.blk-title .hl{color:var(--orange,#FE7021)}
.blk-sub{font-size:14.5px;line-height:1.55;color:#5b5f66;margin:0;max-width:76ch}
.blk-badge{font-family:'Space Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  color:#8a8c91;border:1px solid #dcdee3;border-radius:999px;padding:5px 11px;white-space:nowrap;flex:0 0 auto}

/* comparativo do bloco: hoje | com metodo */
.blk-cmp{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:900px){.blk-cmp{grid-template-columns:1fr}}
.blk-side{border:1px solid var(--pdp-line,#e6e8ec);border-radius:14px;background:#fff;overflow:hidden;
  display:flex;flex-direction:column}
.blk-side.is-hoje{background:#fbfbfc}
.blk-side-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;
  font-family:'Space Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;font-weight:700}
.is-hoje .blk-side-head{background:#eceef2;color:#4a4d54}
.is-salll .blk-side-head{background:var(--orange,#FE7021);color:#fff}
.blk-side-head .bs-tag{font-size:9.5px;letter-spacing:.1em;opacity:.85;text-transform:none}
.blk-side-body{padding:18px 18px 20px;flex:1}
.blk-side-body>:first-child{margin-top:0}

/* quando o bloco nao e comparativo (so o metodo) */
.blk-single .blk-cmp{grid-template-columns:1fr}

/* a explicacao, largura cheia embaixo do comparativo */
/* A explicacao e ESCURA de proposito: contrasta com os dois cards claros do
   comparativo e e o mesmo tratamento da trilha do index (.teach-sticky), o que
   faz o funil VALOR, os .ts-stat e as citacoes continuarem legiveis aqui —
   eles foram desenhados pra fundo escuro. */
.blk-why{margin-top:22px;background:#141414;border-radius:14px;padding:26px 30px 28px;
  box-shadow:0 14px 40px rgba(20,22,28,.16)}
.blk-why::before{content:"Por que";display:inline-block;font-family:'Space Mono',monospace;font-size:10px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange,#FE7021);
  border:1px solid rgba(254,112,33,.4);border-radius:999px;padding:4px 11px;margin-bottom:16px}
.blk-why h4{font-family:'Outfit',sans-serif;font-size:17px;font-weight:800;color:#fff;margin:0 0 12px;line-height:1.25}
/* A explicacao vem da trilha, que e clara; dentro do card preto o `.ts-opt`
   ficava branco no branco e sumia. Mesmo tratamento que ele ja recebe na
   versao escura da trilha (.teach-sticky). */
.blk-why .ts-opt{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18)}
.blk-why .ts-opt b,.blk-why .ts-opt .ts-h{color:#fff}
.blk-why,.blk-why p,.blk-why li{font-size:14px;line-height:1.7;color:rgba(240,240,240,.82)}
.blk-why p{margin:0 0 11px;max-width:var(--measure)}
.blk-why p:last-child{margin-bottom:0}
.blk-why b{color:#fff}
.blk-why i,.blk-why em{color:rgba(240,240,240,.92)}

/* componentes da trilha, reaproveitados dentro do painel escuro */
.blk-why .ts-h{display:block;font-family:'Outfit',sans-serif;font-weight:800;color:#fff;
  margin-top:20px;margin-bottom:7px;font-size:11.5px;letter-spacing:.5px;text-transform:uppercase}
.blk-why .ts-cite{display:block;margin-top:16px;padding-top:13px;font-size:11px;
  border-top:1px solid rgba(255,255,255,.12);color:rgba(240,240,240,.5)}
.blk-why .ts-micro{font-size:11.5px;color:rgba(240,240,240,.55);margin-top:8px}
.blk-why .ts-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:14px 16px;margin:14px 0 4px;gap:20px}
.blk-why .ts-stat .stn{font-size:26px}
.blk-why .ts-stat .stl{color:rgba(240,240,240,.6);font-size:11px}
.blk-why .vbar{background:rgba(255,255,255,.10)}
.blk-why .vmid b{color:#fff}
.blk-why .vmid small,.blk-why .vpct{color:rgba(240,240,240,.6)}
.blk-why .valor-funnel{margin:16px 0 6px}
.blk-why .why-row p{color:rgba(240,240,240,.78);font-size:13px;max-width:var(--measure)}
.blk-why .why-row p b{color:#fff}
.blk-why .valor-why{margin-top:12px;display:flex;flex-direction:column;gap:11px}
.blk-why a{color:#FFB27A}
@media(max-width:900px){.blk-why{padding:22px 20px 24px}}

/* o achado forte do bloco, quando existe */
.blk-flag{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:13px 16px;
  background:#fdf1ef;border:1px solid #f6d0c8;border-radius:10px}
.blk-flag .bf-i{font-family:'Space Mono',monospace;font-size:10px;font-weight:700;color:#b0301a;
  background:#fff;border:1px solid #f0bdb2;border-radius:6px;padding:4px 8px;white-space:nowrap;flex:0 0 auto}
.blk-flag p{font-size:13.5px;line-height:1.6;color:#5c2b22;margin:0}

/* indice do topo */
.blk-toc{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:22px 0 46px}
.blk-toc a{display:flex;align-items:center;gap:10px;border:1px solid var(--pdp-line,#e6e8ec);border-radius:10px;
  padding:11px 13px;text-decoration:none;background:#fff;transition:border-color .15s,transform .15s}
.blk-toc a:hover{border-color:var(--orange,#FE7021);transform:translateY(-2px)}
.blk-toc .t-n{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;color:var(--orange,#FE7021)}
.blk-toc .t-l{font-size:13.5px;font-weight:600;color:var(--ink,#1E1E1E);line-height:1.25}

/* dentro do bloco a PDP perde a moldura: o bloco JA e a moldura */
.blk .pdp{margin:0;padding:0;border:0;box-shadow:none;background:transparent;border-radius:0}
.blk .pdp-specs,.blk .pdp-desc{margin-top:0;border-top:0;padding-top:0}
/* A galeria aparece nos dois lados do bloco, e o markup do "hoje" e do
   "metodo" tem ordem diferente entre si. Ancorar cada parte na sua celula
   resolve os dois sem depender da ordem: thumbs na coluna estreita, imagem
   grande na larga, e a legenda ocupando a linha inteira embaixo. */
.blk .gal{grid-template-columns:56px minmax(0,1fr);align-items:start}
.blk .gal-thumb{width:56px;height:56px}
.blk .gal-thumbs{grid-column:1;grid-row:1}
.blk .gal-main{grid-column:2;grid-row:1}
.blk .antes-extra,.blk .gal>.ax-cap{grid-column:1/-1;grid-row:2;margin-top:14px}
.blk .antes-extra .ax-cap{font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.6}
@media(max-width:900px){
  .blk .gal{display:flex;flex-direction:column}
  .blk .gal-main{order:1}
  .blk .gal-thumbs{order:2;flex-direction:row;flex-wrap:wrap;margin-top:14px}
}
.blk-cmp.blk-1col{grid-template-columns:1fr}
.blk-cmp.blk-1col{grid-template-columns:1fr}
/* o achado dentro do painel escuro */
.blk-why .blk-flag{margin-top:18px;background:rgba(228,56,74,.12);border:1px solid rgba(228,56,74,.35);border-radius:12px}
.blk-why .blk-flag .bf-i{background:rgba(0,0,0,.35);border-color:rgba(228,56,74,.5);color:#FF9B8A}
.blk-why .blk-flag p{color:rgba(255,225,220,.9);margin:0}
.camadas-table td:first-child{width:20%;font-size:14px}
.camadas-table .cm-sub{font-family:'Space Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--pdp-muted);font-weight:400}

/* Carrossel do anuncio do varejo (secao cross-varejo). Mesma marcacao .gal do
   mock de PDP, mas fora dele: aqui a principal e maior e os thumbs sao
   horizontais embaixo, porque o bloco e largo e nao imita uma pagina de
   produto. */
.gal-meli{grid-template-columns:1fr;gap:10px;max-width:560px}
.gal-meli .gal-thumbs{flex-direction:row;order:2}
.gal-meli .gal-thumb{width:64px;height:64px}
.gal-meli .gal-main{order:1;padding:0}
.gal-meli .gal-main img{padding:14px}
@media(max-width:520px){.gal-meli .gal-thumb{width:52px;height:52px}}

/* "Como foi feito" nasce FECHADO: a aula e opcional, e aberta ela empurra o
   fim da pagina (CTA, autor, nota metodologica) uns 2.000px pra baixo. Quem
   quiser a aula clica; quem quiser so o estudo, segue. */
.aula-toggle{width:100%;display:flex;align-items:center;gap:12px;background:transparent;border:0;padding:16px 0;cursor:pointer;text-align:left;font-family:inherit}
.aula-toggle .ttab-label{margin:0}
.aula-toggle .at-hint{flex:1;font-size:12.5px;color:var(--muted)}
.aula-toggle .at-chev{font-size:13px;color:var(--muted);transition:transform .2s}
.aula-toggle[aria-expanded="true"] .at-chev{transform:rotate(180deg)}
.aula-toggle:hover .at-hint,.aula-toggle:hover .at-chev{color:var(--text)}
.aula-tabs-body[hidden]{display:none}
@media(max-width:640px){.aula-toggle .at-hint{display:none}}