/* UNPACED · protótipo de marca e loja (conceito). Tudo local, nada publicado. */
:root{
  --ink:#0d0d0c; --paper:#efebe3; --paper-2:#e4dfd4; --asfalto:#1b1a18;
  /* UX v3 (contraste AA): cinza de texto secundário. #66625b dá 5,1:1 no paper e 4,56:1 no paper-2 (o antigo #7a766e dava 3,8:1).
     Em fundo escuro o mesmo token vira --mut-escuro (regra logo abaixo). */
  --mut:#66625b; --mut-escuro:#8b867c;
  --sol:#ff5b1f; /* nascer do sol: só no risco, no badge e em 1 detalhe por dobra */
  --sol-txt:#b83a0a; /* UX v3: laranja para TEXTO pequeno em fundo claro (4,84:1). O --sol fica para risco, traço, fundo, botão e texto sobre preto (6,27:1). */
  --risco:#ff5b1f;
  --f-display:'Archivo',sans-serif; --f-mono:'JetBrains Mono',monospace; --f-mao:'Permanent Marker',cursive;
  --ease:cubic-bezier(.16,1,.3,1);
  /* escala de espaço (v3-02, Squad Layout): um só ritmo para todo o site */
  --gutter:clamp(16px,3.6vw,48px);          /* respiro lateral: 16 no celular, 48 no desktop */
  --wrap-max:1440px;                        /* container: em 1920 sobra 240 de cada lado, não 280 */
  --sec-y:clamp(56px,3.2vw + 40px,96px);    /* padding vertical de seção: 56 (celular) a 96 (1920) */
  --cab-gap:clamp(24px,2.4vw,40px);         /* título de seção até o conteúdo */
  --tit-sec:clamp(44px,5.6vw,96px);         /* títulos de seção (antes iam até 120) */
  --tit-pag:clamp(52px,7vw,120px);          /* título principal de página interna */
}
/* fundos escuros: o cinza de texto volta a ser o claro (5,4:1 sobre o preto) */
.aviso,.frases,.hero,.uso,.manifesto,.form,footer,.ess-sec,.faixa-lote,.ck-resumo,.vt-lb{--mut:var(--mut-escuro)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--f-display);font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a,button{color:inherit;text-decoration:none;font:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.mao{font-family:var(--f-mao);font-weight:400}
.wrap{width:min(var(--wrap-max),100% - 2 * var(--gutter));margin-inline:auto}
/* grão de filme sobre tudo */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- faixa de aviso ---------- */
.aviso{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;padding:8px 0}
.aviso .trilho{display:inline-flex;gap:48px;animation:corre 40s linear infinite}
.aviso span{display:inline-flex;gap:48px}
@keyframes corre{to{transform:translateX(-50%)}}

/* ---------- navegação ---------- */
nav.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid #0d0d0c14}
nav.top .wrap{display:flex;align-items:center;gap:32px;height:64px}
.logo{display:inline-flex;align-items:baseline;font-weight:900;font-variation-settings:"wdth" 125;font-size:22px;letter-spacing:-.02em;position:relative}
.logo .paced{position:relative}
.logo svg{position:absolute;left:0;top:38%;width:112%;height:40%;overflow:visible}
.logo path{stroke:var(--risco);stroke-width:5;fill:none;stroke-linecap:round;stroke-dasharray:140;stroke-dashoffset:140;animation:risca .9s .4s var(--ease) forwards}
@keyframes risca{to{stroke-dashoffset:0}}
nav.top .links{display:flex;gap:24px;margin-left:auto}
nav.top .links a{font-size:14px;font-weight:600;opacity:.75;transition:opacity .2s}
nav.top .links a:hover{opacity:1}
.btn-sacola{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;border:1.5px solid var(--ink);border-radius:999px;padding:7px 14px}
.btn-sacola b{background:var(--ink);color:var(--paper);border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;font-size:12px}
.btn-sacola.pulsa b{animation:pulsa .5s var(--ease)}
@keyframes pulsa{50%{transform:scale(1.35);background:var(--sol)}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:max(480px,min(calc(100svh - 98px),880px));color:var(--paper);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--asfalto)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;transform:scale(1.06);animation:respira 18s ease-in-out infinite alternate}
@keyframes respira{to{transform:scale(1)}}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#0d0d0c66 0%,#0d0d0c00 30%,#0d0d0c00 50%,#0d0d0ccc 100%)}
.hero .wrap{position:relative;z-index:2;padding-bottom:44px;display:grid;grid-template-columns:1fr 340px;gap:20px 48px;align-items:end}
.hero h1{font-weight:900;font-variation-settings:"wdth" 62;font-size:clamp(56px,9.4vw,152px);line-height:.84;letter-spacing:-.02em;text-transform:uppercase}
.hero h1 .riscado{position:relative;display:inline-block}
.hero h1 .riscado svg{position:absolute;left:-3%;top:42%;width:106%;height:30%;overflow:visible}
.hero h1 .riscado path{stroke:var(--risco);stroke-width:10;fill:none;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:1200;animation:risca 1.1s 1s var(--ease) forwards}
.hero .anot{font-family:var(--f-mao);font-size:clamp(22px,2.6vw,36px);color:var(--paper);transform:rotate(-4deg);display:inline-block;margin:6px 0 0 4px;opacity:0;animation:aparece .6s 1.9s forwards}
@keyframes aparece{to{opacity:1}}
.hero .lado{display:flex;flex-direction:column;gap:18px;max-width:340px;padding-bottom:10px}
.hero .lado p{font-size:17px;line-height:1.45;opacity:.92}
.ctas{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:15px;padding:14px 22px;border-radius:999px;transition:transform .3s var(--ease),background .2s}
.btn:hover{transform:translateY(-2px)}
.btn.claro{background:var(--paper);color:var(--ink)}
.btn.vazado{border:1.5px solid currentColor}
.btn.escuro{background:var(--ink);color:var(--paper)}
.pace-morto{position:absolute;z-index:2;top:28px;right:24px;text-align:right;color:var(--paper)}
.pace-morto .num{font-family:var(--f-mono);font-size:30px;font-weight:600;position:relative;display:inline-block}
.pace-morto .num::after{content:"";position:absolute;left:-6px;right:-6px;top:52%;height:3px;background:var(--risco);transform:rotate(-6deg)}
.pace-morto .mono{opacity:.7;display:block;margin-top:4px}

/* ---------- marquee de frases ---------- */
.frases{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;padding:22px 0;border-block:1px solid #ffffff14}
.frases .trilho{display:inline-flex;animation:corre 60s linear infinite}
.frases span{font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(26px,3.4vw,44px);text-transform:uppercase;letter-spacing:-.01em;padding-right:44px;display:inline-flex;align-items:center;gap:44px}
.frases span i{font-style:normal;font-family:var(--f-mao);font-weight:400;text-transform:none;color:var(--sol);font-size:.8em}

/* ---------- títulos de seção ---------- */
.sec{padding:var(--sec-y) 0}
.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:var(--cab-gap);flex-wrap:wrap}
.cab h2{font-weight:900;font-variation-settings:"wdth" 62;font-size:var(--tit-sec);line-height:.85;text-transform:uppercase;letter-spacing:-.01em}
.cab h2 small{display:block;font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.08em;margin-bottom:14px;opacity:.6}
.cab p{max-width:380px;font-size:16px;line-height:1.5;color:#3a3833}

/* ---------- loja ---------- */
.filtros{display:flex;gap:6px}
.filtros button{font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px;border:1.5px solid #0d0d0c33;transition:all .2s}
.filtros button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.grade{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 18px}
.card{display:flex;flex-direction:column;gap:12px;cursor:pointer}
.card .foto{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:4px;background:var(--paper-2)}
.card .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s var(--ease),transform .9s var(--ease)}
.card .foto img.alt{opacity:0}
.card:hover .foto img.alt{opacity:1}
.card:hover .foto img.base{transform:scale(1.04)}
/* camiseta: no hover, aproxima as costas */
.card.tee .foto img.alt{transform:scale(1.9);transform-origin:76% 42%}
.card .num{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--f-mono);font-size:11px;background:var(--paper);padding:3px 7px;border-radius:3px}
.card .tag{position:absolute;top:10px;right:10px;z-index:2;font-family:var(--f-mao);font-size:14px;color:var(--paper);background:var(--ink);padding:2px 9px;border-radius:3px;transform:rotate(3deg)}
.card h3{font-weight:800;font-variation-settings:"wdth" 110;font-size:17px;text-transform:uppercase;letter-spacing:-.005em}
.card .linha{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card .frase{font-size:14px;color:#55524b;line-height:1.4}
.cores{display:flex;gap:6px}
.cores button{width:18px;height:18px;border-radius:50%;border:1.5px solid #0d0d0c55;position:relative}
.cores button[aria-pressed="true"]{outline:1.5px solid var(--ink);outline-offset:2px}
.cores .preto{background:#111}.cores .branco{background:#f3efe6}
.preco{font-family:var(--f-mono);font-size:12px;color:var(--mut)}

/* ---------- em uso (lookbook) ---------- */
.uso{background:var(--asfalto);color:var(--paper)}
.uso .cab p{color:#b9b4aa}
.colagem{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:110px;gap:14px}
.colagem figure{position:relative;overflow:hidden;border-radius:4px}
.colagem img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.colagem figure:hover img{transform:scale(1.04)}
.colagem figcaption{position:absolute;left:12px;bottom:10px;font-family:var(--f-mao);font-size:20px;color:var(--paper);text-shadow:0 1px 10px #0008}
.c1{grid-column:1/8;grid-row:span 5}.c2{grid-column:8/13;grid-row:span 3}.c3{grid-column:8/13;grid-row:span 4}.c4{grid-column:1/8;grid-row:span 2}
.c4 img{object-position:center 30%}

/* ---------- manifesto ---------- */
.manifesto{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.manifesto ol{list-style:none;display:flex;flex-direction:column;gap:4px;counter-reset:l}
.manifesto li{font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(38px,6.4vw,96px);line-height:.95;letter-spacing:-.01em;opacity:.12;transition:opacity .7s var(--ease),transform .7s var(--ease);transform:translateX(-14px)}
.manifesto li.on{opacity:1;transform:none}
.manifesto li.fraco{color:#8b867c}
.manifesto li .r{position:relative}
.manifesto li .r::after{content:"";position:absolute;left:-2%;right:-2%;top:50%;height:.09em;background:var(--risco);transform:rotate(-2deg) scaleX(0);transform-origin:left;transition:transform .8s .25s var(--ease)}
.manifesto li.on .r::after{transform:rotate(-2deg) scaleX(1)}
.manifesto .assina{margin-top:44px;font-family:var(--f-mao);font-size:28px;color:var(--sol);transform:rotate(-3deg);display:inline-block}

/* ---------- drop 01 · ilha ---------- */
.ilha{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.ilha .texto p{font-size:18px;line-height:1.55;margin-bottom:14px;color:#2c2a26}
.ilha .texto p strong{color:var(--ink)}
.mapa{position:relative;background:var(--paper-2);border-radius:4px;aspect-ratio:4/5;overflow:hidden}
.mapa svg{position:absolute;inset:0;width:100%;height:100%}
.mapa .rota{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:2400;stroke-dashoffset:2400;transition:stroke-dashoffset 3.2s var(--ease)}
.mapa.on .rota{stroke-dashoffset:0}
.mapa .contorno{fill:none;stroke:#0d0d0c33;stroke-width:1.4;stroke-dasharray:4 6}
.mapa .ponto{fill:var(--sol)}
.mapa .rot{font-family:var(--f-mono);font-size:13px;fill:var(--ink);letter-spacing:.04em}
.mapa .rot-mao{font-family:var(--f-mao);font-size:26px;fill:var(--ink)}
.mapa .km{position:absolute;right:18px;bottom:16px;text-align:right}
.mapa .km b{display:block;font-weight:900;font-variation-settings:"wdth" 62;font-size:120px;line-height:.8}

/* ---------- a carta (newsletter) ---------- */
.carta{background:var(--sol);color:var(--ink);position:relative;overflow:hidden}
.carta .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:end}
.carta h2{font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(44px,5.8vw,86px);line-height:.88}
.carta p{font-size:18px;line-height:1.5;margin:18px 0 0;max-width:520px}
.form{background:var(--ink);color:var(--paper);border-radius:6px;padding:28px}
.form h3{font-weight:900;font-variation-settings:"wdth" 110;font-size:24px;text-transform:uppercase;margin-bottom:6px}
.form p{font-size:14px;color:#b9b4aa;margin:0 0 18px}
.campo{display:flex;gap:8px;background:#ffffff10;border-radius:999px;padding:5px}
.campo input{flex:1;background:none;border:0;color:var(--paper);font:500 15px var(--f-display);padding:0 14px;outline:none;min-width:0}
.campo input::placeholder{color:#8b867c}
.campo button{background:var(--paper);color:var(--ink);font-weight:800;border-radius:999px;padding:11px 18px}
.form .ok{margin-top:12px;font-family:var(--f-mao);color:var(--sol);font-size:18px;min-height:24px}

/* ---------- rodapé ---------- */
footer{background:var(--ink);color:var(--paper);padding:clamp(48px,5vw,72px) 0 30px;overflow:hidden}
.gigante{font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(56px,13.6vw,220px);line-height:.8;letter-spacing:-.04em;position:relative;display:inline-block;white-space:nowrap}
.gigante .paced{position:relative}
.gigante svg{position:absolute;left:1%;top:40%;width:106%;height:30%;overflow:visible}
.gigante path{stroke:var(--risco);stroke-width:9;fill:none;stroke-linecap:round}
footer .base{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid #ffffff1f;color:#b9b4aa;font-size:14px}

/* ---------- linha que nunca termina ---------- */
.altimetria{display:block;width:100%;height:70px}
.altimetria path{fill:none;stroke:currentColor;stroke-width:2}

/* ---------- produto (painel) e sacola ---------- */
.veu{position:fixed;inset:0;background:#0d0d0c99;z-index:80;opacity:0;pointer-events:none;transition:opacity .35s}
.veu.on{opacity:1;pointer-events:auto}
.painel{position:fixed;z-index:90;background:var(--paper);transition:transform .55s var(--ease),visibility 0s .55s}
.painel.on{transition:transform .55s var(--ease),visibility 0s}
.pp{visibility:hidden;inset:auto 0 0 0;max-height:92svh;border-radius:14px 14px 0 0;transform:translateY(102%);overflow:auto}
.pp.on{transform:none;visibility:visible}
.pp .in{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;padding:28px;max-width:1360px;margin:0 auto}
.pp .galeria{display:grid;gap:10px}
.pp .galeria img{width:100%;border-radius:4px;background:var(--paper-2)}
.pp h3{font-weight:900;font-variation-settings:"wdth" 62;font-size:clamp(44px,5vw,76px);line-height:.88;text-transform:uppercase;margin:8px 0 14px}
.pp .efeito{font-family:var(--f-mao);font-size:22px;color:var(--ink);margin-bottom:14px;transform:rotate(-1.5deg);display:inline-block}
.pp .desc{font-size:16px;line-height:1.55;color:#3a3833;margin-bottom:16px}
.pp ul{list-style:none;display:grid;gap:6px;margin-bottom:22px}
.pp li{font-size:14px;padding-left:18px;position:relative}
.pp li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:2px;background:var(--sol)}
.opc{margin-bottom:18px}
.opc .mono{display:block;margin-bottom:8px;color:var(--mut)}
.opc .row{display:flex;gap:8px;flex-wrap:wrap}
.opc button{border:1.5px solid #0d0d0c33;border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px}
.opc button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.prevenda{font-size:13px;color:#55524b;background:var(--paper-2);border-radius:6px;padding:12px 14px;margin:16px 0 0;line-height:1.45}
.fechar{position:sticky;top:0;float:right;font-family:var(--f-mono);font-size:12px;padding:8px 12px;border:1.5px solid var(--ink);border-radius:999px;background:var(--paper);z-index:2}
.sac{visibility:hidden;top:0;right:0;bottom:0;width:min(440px,100%);transform:translateX(102%);display:flex;flex-direction:column}
.sac.on{transform:none;visibility:visible}
.sac header{display:flex;justify-content:space-between;align-items:center;padding:22px;border-bottom:1px solid #0d0d0c18}
.sac header h3{font-weight:900;font-variation-settings:"wdth" 110;text-transform:uppercase;font-size:22px}
.sac .itens{flex:1;overflow:auto;padding:12px 22px;display:flex;flex-direction:column;gap:14px}
.item{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center}
.item img{width:96px;aspect-ratio:3/2;object-fit:cover;border-radius:3px}
.item b{display:block;font-size:14px;text-transform:uppercase}
.item small{color:var(--mut);font-size:12px}
.item button{font-family:var(--f-mono);font-size:11px;color:var(--mut)}
.vazio{margin:auto;text-align:center;padding:40px 10px}
.vazio b{display:block;font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:40px;line-height:.9;margin-bottom:8px}
.sac footer{all:unset;padding:20px 22px;border-top:1px solid #0d0d0c18;display:grid;gap:10px}
.sac .estado{font-family:var(--f-mao);font-size:18px;color:var(--ink)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:999px;z-index:95;font-weight:700;transition:transform .5s var(--ease)}
.toast.on{transform:translate(-50%,0)}

/* ---------- entrada no scroll ---------- */
.rev{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rev.on{opacity:1;transform:none}

/* ---------- responsivo ---------- */
@media (max-width:1000px){
  .hero .lado{max-width:520px}
  .grade{grid-template-columns:repeat(2,1fr)}
  .ilha,.carta .wrap,.pp .in{grid-template-columns:1fr}
  .hero .wrap{grid-template-columns:1fr}
  nav.top .links{display:none}
  .btn-sacola{margin-left:auto}
  .colagem{grid-auto-rows:70px}
}
@media (max-width:600px){
  .grade{grid-template-columns:1fr}
  .colagem{grid-template-columns:1fr;grid-auto-rows:auto}
  .colagem figure{grid-column:auto!important;grid-row:auto!important;aspect-ratio:3/2}
  .pace-morto{display:none}
  .hero h1{font-size:clamp(36px,11.2vw,56px)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.logo path,.hero h1 .riscado path{stroke-dashoffset:0}.rev,.manifesto li{opacity:1;transform:none}.hero .anot{opacity:1}}
:focus-visible{outline:2px solid var(--sol);outline-offset:3px}

/* ======================================================================
   CAMADA DE LAYOUT (v3-02 · Squad Layout, 30/10)
   Espaço e responsividade do site inteiro numa camada só. Os seletores
   começam com "html" para valer por cima dos CSS que carregam depois
   (site, lista, lote, info, home), sem mexer na ordem dos arquivos.
   Fora daqui: votação (vt-*) e o painel.
   ====================================================================== */
/* hero: entre 1001 e 1320 o título e a coluna lateral cabem sem cortar a lateral */
@media (min-width:1001px) and (max-width:1320px){
  html .hero h1{font-size:clamp(56px,7.4vw,152px)}
  html .hero .wrap{grid-template-columns:minmax(0,1fr) 280px}
}
/* páginas internas: topo e títulos proporcionais */
html .topo-pag{padding-top:clamp(32px,4vw,56px)}
html .pag-sobre,html .pag-manif{padding-top:clamp(32px,4vw,56px)}
html .pag-tit{font-size:var(--tit-pag)}
html .sobre-topo,html .tres,html .pag-manif .pag-abre{margin-bottom:clamp(32px,3.5vw,56px)}
html .sobre-fecho{margin-top:clamp(32px,3.5vw,56px)}
html .lh-txt h2{font-size:var(--tit-sec)}
/* produto */
html .pdp{padding-bottom:var(--sec-y)}
html .info h1{font-size:clamp(44px,5vw,88px)}
html .card .frase{max-width:68ch}
/* grade com um card só (ex.: "Só mais um?" no produto): título e card lado a lado */
@media (min-width:768px){
  html .wrap:has(> .cab + .grade > .card:only-child){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center}
  html .wrap:has(> .cab + .grade > .card:only-child) > .cab{margin:0;flex-direction:column;align-items:flex-start}
  html .wrap:has(> .cab + .grade > .card:only-child) > .grade{grid-template-columns:1fr}
}
/* lote 01: o texto acompanha as fotos (sem buraco embaixo da coluna) */
html .lt-topo{padding-bottom:var(--sec-y)}
html .lt-txt h1{font-size:clamp(72px,9vw,160px)}
@media (min-width:1001px){ html .lt-txt{position:sticky;top:88px;align-self:start} }
/* obrigado e 404: sem altura forçada exagerada, título que cabe em 360 */
html .obrigado,html .erro{min-height:min(56vh,600px)}
html .obrigado h1{font-size:clamp(56px,10vw,150px)}
html .erro h1{font-size:clamp(56px,9vw,140px)}
/* páginas legais: medida de leitura e respiros */
html .legal{padding-bottom:var(--sec-y)}
html .lg-cab{margin:clamp(16px,2vw,28px) 0 clamp(28px,3vw,40px)}
html .lg-cab h1{font-size:var(--tit-pag)}
html .lg-txt p,html .lg-txt li{max-width:68ch}
/* rodapé */
html footer.rod{padding-top:clamp(48px,5vw,72px)}
html footer.rod .rod-forn{max-width:70ch}
/* texto de corpo mínimo 14px */
html .prevenda,html .ck-frase,html .ck-dica,html .ck-ver{font-size:14px}
html .aceite{font-size:13px}
/* alvos de toque no celular (44px) */
@media (max-width:1000px){
  html .menu-btn,html nav.top .btn-sacola{min-height:44px}
  html .sb-btn{width:44px;height:44px}
  html .lg-toc ol a{min-height:44px;align-items:center}
  html .opc button{min-height:44px}
  html .info details{padding:2px 0}
  html .info summary{min-height:44px;align-items:center}
  html .ck-passos button{min-width:44px;justify-content:center}
}
@media (max-width:1000px){
  html .lg-outras a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:1000px){
  html .rod-topo{flex-direction:column;align-items:flex-start}
  html .rod-frase{text-align:left}
  html .rod-cols>*{gap:0}
  html .rod-cols a{min-height:44px;display:inline-flex;align-items:center}
  html .rod-cols .mono{margin-bottom:6px}
  html .rod-legal nav a{display:inline-flex;align-items:center;min-height:44px}
}
/* links de texto soltos: área de toque maior sem mudar o desenho */
html .link-seta,html .migalha a,html .ck-ver,html .card h3 a{position:relative}
html .link-seta::before,html .migalha a::before,html .ck-ver::before,html .card h3 a::before{content:"";position:absolute;inset:-12px -4px}
html .cores{gap:12px}
html .cores button::before{content:"";position:absolute;inset:-12px}
/* checkout: campos e botões com 44px de altura certinhos */
html .lt-check input:not([type=radio]):not([type=checkbox]):not([name=site]),html .lt-check select,html .lt-check button.btn{min-height:44px}

/* ======================================================================
   UX v3 (fase 2 · Squad UX, 30/10): alvos de toque de 44px sem mudar o desenho
   ====================================================================== */
/* bolinhas de cor (18px + 13px de cada lado = 44px) e links de texto do checkout */
html .cores{gap:26px;padding:0 4px}
html .cores button::before{inset:-13px}   /* 44x44 sem sobrepor a vizinha (gap 26 = 13 + 13) */
html .ck-ver::before{inset:-13px -6px}
html .ck-rev h4 button{position:relative;min-height:44px}
html .ck-rev h4 button::before{content:"";position:absolute;inset:0 -8px}
/* legenda da foto de abertura: diz que o boné da foto é o Enjoy The Ride visto de costas */
.hero-leg{position:absolute;z-index:2;top:24px;left:var(--gutter);font-size:11px;letter-spacing:.06em;color:var(--paper);display:flex;align-items:center;gap:8px;text-shadow:0 1px 6px #0d0d0c80}
.hero-leg::before{content:"";width:18px;height:2px;background:var(--sol);flex:none}
.hero-leg a{display:inline-flex;align-items:center;min-height:44px;opacity:.9}
.hero-leg a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){.hero-leg{top:12px}}