/* Conceito: catálogo editorial — muito papel em branco, tipografia grande, linhas finas e uma faixa laranja como ponto alto. */
:root{
  --paper: #FAF8F3;
  --orange: #F05A28;
  --orange-2: #D9481A;
  --coal: #24272B;
  --sand: #EAE4DA;
  --blue: #406D96;
  --white: #FFFFFF;
  --line: rgba(36,39,43,.16);
  --muted: #6B675F;
  --title: 'Manrope', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--paper); color:var(--coal); font-family:var(--body); font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; font-family:var(--title); text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
.wrap{ max-width:1200px; margin:0 auto; padding-inline:20px; }
.skip{ position:absolute; left:-9999px; top:8px; background:var(--coal); color:var(--white); padding:8px 14px; z-index:100; }
.skip:focus{ left:12px; }
.ic{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* botões */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--title); font-weight:800; letter-spacing:.05em; text-decoration:none; white-space:nowrap; border-radius:999px; transition:background .15s, transform .2s, gap .2s; }
.btn:hover{ transform:translateY(-2px); gap:14px; }
.btn-orange{ background:var(--orange); color:var(--white); }
.btn-orange:hover{ background:var(--orange-2); }
.btn-dark{ background:var(--coal); color:var(--white); }
.btn-paper{ background:var(--paper); color:var(--coal); }
.btn-paper:hover{ background:var(--white); }
.btn-sm{ padding:9px 16px; font-size:12.5px; }
.btn-sm:hover{ gap:10px; }
.btn-lg{ padding:18px 30px; font-size:15.5px; min-height:60px; }
.btn-block{ width:100%; padding:16px; font-size:15px; min-height:54px; }
.btn-block:hover{ transform:none; }

/* topo */
.topbar{ position:sticky; top:env(safe-area-inset-top, 0px); z-index:30; background:rgba(250,248,243,.92); border-bottom:1px solid var(--line); }
.topbar-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:66px; }
.logo{ font-family:var(--title); font-weight:800; font-size:22px; letter-spacing:-.03em; text-decoration:none; white-space:nowrap; }
.logo span{ color:var(--orange); margin-left:4px; }
.nav{ display:none; gap:32px; font-size:15px; }
.nav a{ text-decoration:none; color:var(--muted); position:relative; }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px; background:var(--orange); transition:right .2s; }
.nav a:hover{ color:var(--coal); }
.nav a:hover::after{ right:0; }
@media (min-width:880px){ .nav{ display:flex; } }

/* hero */
.hero{ position:relative; overflow:hidden; padding-block:28px 40px; }
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-areas:"head" "video" "body"; gap:26px; }
.hero-head{ grid-area:head; min-width:0; }
.hero-video{ grid-area:video; margin:0; }
.hero-body{ grid-area:body; min-width:0; }
@media (min-width:960px){
  .hero{ padding-block:76px 40px; }
  .hero-grid{ grid-template-columns:1.3fr .7fr; grid-template-areas:"head video" "body video"; column-gap:80px; row-gap:34px; }
  .hero-head{ align-self:end; }
  .hero-body{ align-self:start; }
}
.eyebrow, .kicker{ font-family:var(--title); font-weight:800; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--orange); margin-bottom:20px; display:flex; align-items:center; gap:12px; }
.eyebrow::before, .kicker::before{ content:""; width:32px; height:1px; background:currentColor; }
.hero h1{ font-weight:800; font-size:clamp(40px, 8.4vw, 86px); line-height:.96; letter-spacing:-.045em; }
.hero h1 em{ font-style:normal; color:var(--orange); }
.lead{ font-size:clamp(17px, 2vw, 20px); color:var(--muted); max-width:40ch; margin-bottom:28px; }
.micro{ margin-top:14px; font-size:14px; color:var(--muted); }
@media (max-width:959px){ .hero-body .btn-lg{ width:100%; } }

.hero-video{ position:relative; width:min(100%, 270px); margin-inline:auto; }
@media (min-width:960px){ .hero-video{ width:100%; max-width:330px; margin:0 0 0 auto; } }
.sticker{ position:absolute; z-index:2; top:-14px; right:-12px; transform:rotate(8deg); background:var(--orange); color:var(--white); font-family:var(--title); font-weight:800; font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:8px 14px; border-radius:999px; box-shadow:0 10px 20px -10px rgba(240,90,40,.8); }
.hero-video figcaption{ display:flex; align-items:center; gap:10px; padding-top:12px; margin-top:14px; border-top:1px solid var(--coal); font-size:14px; color:var(--muted); }
.hero-video figcaption span{ font-family:var(--title); font-weight:800; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--coal); }
.video{ position:relative; aspect-ratio:9 / 16; background:var(--coal); border-radius:22px; overflow:hidden; box-shadow:0 40px 70px -40px rgba(36,39,43,.7); }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-poster{ position:absolute; inset:0; padding:0; border:0; background:var(--coal); cursor:pointer; }
.video-poster img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.video-poster:hover img{ transform:scale(1.04); }
.play{ position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:10px; background:var(--paper); color:var(--coal); border-radius:999px; padding:8px 18px 8px 8px; font-family:var(--title); font-weight:800; font-size:13px; letter-spacing:.04em; transition:transform .2s; }
.play::before{ content:""; width:32px; height:32px; border-radius:50%; background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4.5v7l5.5-3.5z' fill='%23fff'/%3E%3C/svg%3E") center/18px no-repeat; }
.video-poster:hover .play{ transform:translateY(-3px); }

.hero-word{ position:relative; z-index:0; margin:20px 0 0; font-family:var(--title); font-weight:800; font-size:clamp(80px, 23vw, 330px); line-height:.8; letter-spacing:-.06em; color:var(--sand); white-space:nowrap; text-align:center; user-select:none; }

/* seções */
section{ padding-block:64px; }
@media (min-width:960px){ section{ padding-block:112px; } }
.sec-head{ margin-bottom:38px; }
h2{ font-weight:800; font-size:clamp(32px, 5.2vw, 56px); line-height:1.02; letter-spacing:-.035em; }

/* 02 catálogo — blocos divididos, cada um com uma composição gráfica (sem produtos inventados) */
.catalog{ padding-top:24px; }
.cat-grid{ display:grid; gap:12px; }
@media (min-width:760px){
  .cat-grid{ grid-template-columns:1.2fr 1fr; gap:14px; }
  .cat-a{ grid-row:span 2; min-height:500px; }
  .cat-d{ grid-column:span 2; }
}
.cat{ position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; gap:18px; padding:24px; min-height:240px; border-radius:24px; text-decoration:none; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.cat:hover{ transform:translateY(-5px); box-shadow:0 30px 50px -32px rgba(36,39,43,.55); }
.cat-label{ align-self:flex-start; font-family:var(--title); font-size:11px; font-weight:800; letter-spacing:.16em; padding:5px 11px; border-radius:999px; border:1px solid currentColor; opacity:.8; font-variant-numeric:tabular-nums; }
.cat-foot{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.cat-name{ font-family:var(--title); font-weight:800; font-size:clamp(26px, 3.4vw, 42px); line-height:.98; letter-spacing:-.03em; }
.cat-go{ display:inline-flex; align-items:center; gap:10px; flex:none; font-family:var(--title); font-weight:800; font-size:13px; letter-spacing:.03em; }
.cat-go-ic{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid currentColor; transition:transform .3s, background .3s, color .3s, border-color .3s; }
.cat:hover .cat-go-ic{ transform:rotate(-45deg); }
@media (max-width:520px){ .cat-go-t{ display:none; } }

.cat-a{ background:var(--orange); color:var(--white); }
.cat-a:hover .cat-go-ic{ background:var(--white); color:var(--orange); }
.cat-b{ background:var(--sand); color:var(--coal); }
.cat-b:hover .cat-go-ic{ background:var(--coal); color:var(--sand); }
.cat-c{ background:var(--coal); color:var(--paper); }
.cat-c:hover .cat-go-ic{ background:var(--orange); border-color:var(--orange); color:var(--white); }
.cat-d{ background:var(--blue); color:var(--white); flex-direction:row; align-items:center; gap:22px; min-height:0; padding:20px 24px; }
.cat-d:hover .cat-go-ic{ background:var(--white); color:var(--blue); }
.cat-b .cat-name, .cat-c .cat-name{ font-size:clamp(26px, 2.8vw, 36px); }
.cat-d-text{ display:flex; flex-direction:column; gap:10px; margin-right:auto; }
.cat-d .cat-name{ font-size:clamp(26px, 3vw, 36px); }

/* Novidades: cartões de catálogo empilhados */
.art-stack{ position:absolute; z-index:-1; right:12%; top:13%; width:min(46%, 240px); aspect-ratio:3 / 4; }
.art-stack i{ position:absolute; inset:0; border-radius:18px; background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.55); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.art-stack i:nth-child(1){ transform:rotate(-14deg) translate(-16%, 5%); }
.art-stack i:nth-child(2){ transform:rotate(-5deg) translate(-6%, 2%); }
.art-stack i:nth-child(3){ background:var(--paper); border-color:var(--paper); transform:rotate(6deg); box-shadow:0 24px 40px -20px rgba(0,0,0,.35); }
.art-stack i:nth-child(3)::before{ content:""; position:absolute; left:11%; right:11%; top:8%; bottom:32%; border-radius:12px; background:var(--sand); }
.art-stack i:nth-child(3)::after{ content:""; position:absolute; left:11%; bottom:10%; width:56%; height:8%; border-radius:6px; background:var(--orange); box-shadow:0 -18px 0 -3px var(--sand); }
.cat-a:hover .art-stack i:nth-child(1){ transform:rotate(-20deg) translate(-24%, 7%); }
.cat-a:hover .art-stack i:nth-child(3){ transform:rotate(10deg) translateY(-4%); }
@media (max-width:759px){ .cat-a{ min-height:340px; } .art-stack{ top:12%; right:10%; width:42%; } }

/* Modelos disponíveis: cartela de amostras */
.art-rack{ position:absolute; z-index:-1; right:16px; top:12px; width:min(74%, 380px); height:auto; overflow:visible; }
.art-rack .rod{ fill:none; stroke:var(--coal); stroke-width:3; stroke-linecap:round; }
.art-rack .hanger{ fill:none; stroke:var(--coal); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.art-rack .kit-line{ fill:none; stroke:var(--coal); stroke-width:1.8; stroke-linejoin:round; }
.art-rack .f-w{ fill:var(--white); } .art-rack .f-o{ fill:var(--orange); } .art-rack .f-c{ fill:var(--coal); } .art-rack .f-b{ fill:var(--blue); }
.art-rack .s-c{ fill:none; stroke:var(--coal); stroke-linecap:round; }
.art-rack .kit{ transform-box:view-box; transition:transform .7s cubic-bezier(.3,1.6,.5,1); }
.cat-b:hover .art-rack .kit:nth-of-type(odd){ transform:rotate(4deg); }
.cat-b:hover .art-rack .kit:nth-of-type(even){ transform:rotate(-4deg); }

/* Oportunidades: etiqueta */
.art-tag{ position:absolute; z-index:-1; right:-22px; top:30px; width:170px; height:92px; border-radius:12px; clip-path:polygon(20% 0, 100% 0, 100% 100%, 20% 100%, 0 50%); background:rgba(250,248,243,.1); transform:rotate(-16deg); transition:transform .4s; }
.art-tag::before{ content:""; position:absolute; left:13%; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; background:var(--orange); }
.art-tag::after{ content:""; position:absolute; left:34%; right:14%; top:34%; height:3px; border-radius:2px; background:rgba(250,248,243,.45); box-shadow:0 12px 0 rgba(250,248,243,.28), 0 24px 0 rgba(250,248,243,.16); }
.cat-c:hover .art-tag{ transform:rotate(-8deg) translateX(-8px); }

/* Reposições: caixas empilhadas */
.art-boxes{ flex:none; width:92px; height:auto; overflow:visible; }
.art-boxes .box{ fill:rgba(255,255,255,.12); stroke:var(--white); stroke-width:2; }
.art-boxes .lid{ fill:none; stroke:var(--white); stroke-width:2; }
.art-boxes .tape{ fill:rgba(255,255,255,.6); }
.art-boxes .bx-top .box{ fill:var(--white); }
.art-boxes .bx-top .lid{ stroke:var(--blue); }
.art-boxes .bx-top .tape{ fill:var(--blue); }
.art-boxes .bx-top{ transform-box:fill-box; transition:transform .35s; }
.cat-d:hover .art-boxes .bx-top{ transform:translateY(-5px); }
@media (max-width:520px){ .art-boxes{ width:56px; } }
/* prateleira de caixinhas no meio da faixa (só em telas largas) */
.shelf{ display:none; }
@media (min-width:900px){
  .cat-d-text{ margin-right:0; }
  .shelf{ display:block; flex:1; max-width:360px; height:auto; margin-inline:auto; overflow:visible; }
  .shelf .shelf-line{ fill:none; stroke:rgba(255,255,255,.45); stroke-width:2; stroke-dasharray:6 6; stroke-linecap:round; }
  .shelf .box{ fill:rgba(255,255,255,.1); stroke:rgba(255,255,255,.7); stroke-width:2; }
  .shelf .lid{ fill:none; stroke:rgba(255,255,255,.7); stroke-width:2; }
  .shelf .tape{ fill:rgba(255,255,255,.45); }
  .shelf .bx-new .box{ fill:var(--white); stroke:var(--white); }
  .shelf .bx-new .lid{ stroke:var(--blue); }
  .shelf .bx-new .tape{ fill:var(--blue); }
  .shelf .bx-new{ transform-box:fill-box; transition:transform .45s cubic-bezier(.3,1.5,.5,1); }
  .cat-d:hover .shelf .bx-new{ transform:translate(-6px, -6px) rotate(-6deg); }
}

/* 03 — os três verbos em tipografia grande, em escada (sem caixas nem linhas) */
.consult{ background:var(--white); border-block:1px solid var(--line); }
.consult-grid{ display:grid; gap:40px; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.consult-cols{ display:grid; gap:14px; }
.col{ display:flex; flex-wrap:wrap; align-items:flex-end; column-gap:28px; row-gap:10px; }
.col:nth-child(2){ padding-left:9%; }
.col:nth-child(3){ padding-left:18%; }
.col h3{ font-weight:800; font-size:clamp(42px, 7.6vw, 108px); letter-spacing:-.05em; line-height:.86; color:var(--coal); }
.col:nth-child(2) h3{ color:var(--orange); }
.col:nth-child(3) h3{ color:var(--blue); }
.col p{ display:flex; align-items:flex-start; gap:10px; max-width:24ch; padding-bottom:.35em; color:var(--muted); font-size:16px; line-height:1.45; }
.col-ic{ flex:none; width:22px; height:22px; margin-top:1px; fill:none; stroke:var(--coal); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.col:nth-child(2) .col-ic{ stroke:var(--orange); }
.col:nth-child(3) .col-ic{ stroke:var(--blue); }

/* 04 */
.app-grid{ display:grid; gap:40px; align-items:center; }
@media (min-width:960px){ .app-grid{ grid-template-columns:.75fr 1.25fr; gap:48px; } }
.app-visual{ display:grid; justify-items:center; gap:18px; }
@media (min-width:640px){ .app-visual{ grid-template-columns:1fr auto 1fr; align-items:center; gap:0; } }
.screen{ position:relative; width:250px; max-width:100%; aspect-ratio:736 / 1600; border-radius:36px; border:9px solid var(--coal); background:var(--coal); overflow:hidden; box-shadow:0 40px 70px -40px rgba(36,39,43,.7); }
.screen img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.notes{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.notes li{ font-family:var(--title); font-weight:800; font-size:12px; letter-spacing:.18em; padding:6px 12px; border:1px solid var(--coal); border-radius:999px; }
@media (min-width:640px){
  .notes{ flex-direction:column; gap:130px; }
  .notes li{ border:0; border-radius:0; padding:0; position:relative; }
  .notes-left{ justify-self:end; text-align:right; }
  .notes-left li{ padding-right:64px; }
  .notes-left li::after{ content:""; position:absolute; right:6px; top:50%; width:48px; border-top:1px dashed var(--coal); }
  .notes-right li{ padding-left:64px; }
  .notes-right li::before{ content:""; position:absolute; left:6px; top:50%; width:48px; border-top:1px dashed var(--coal); }
  .notes li::marker{ content:""; }
  .notes-left li:first-child, .notes-right li:last-child{ color:var(--orange); }
}

/* 05 */
.journey{ border-top:1px solid var(--line); }
.journey-grid{ display:grid; gap:44px; }
@media (min-width:960px){ .journey-grid{ grid-template-columns:.6fr 1.4fr; align-items:center; } }
.journey-title{ font-size:clamp(46px, 8vw, 92px); line-height:.95; }
.journey-title em{ font-style:normal; color:var(--orange); }
.path{ list-style:none; margin:0; padding:0; display:grid; }
.path li{ position:relative; font-family:var(--title); font-weight:800; font-size:clamp(20px, 2.6vw, 26px); letter-spacing:.02em; padding:18px 0 18px 40px; border-bottom:1px solid var(--line); }
.path li::before{ content:""; position:absolute; left:2px; top:50%; width:20px; height:20px; transform:translateY(-50%); border-radius:50%; border:1.5px solid var(--coal); background:var(--paper); }
.path li:last-child{ color:var(--orange); border-bottom:0; }
.path li:last-child::before{ background:var(--orange); border-color:var(--orange); box-shadow:0 0 0 6px rgba(240,90,40,.18); }
@media (min-width:960px){
  .path{ grid-template-columns:auto auto auto 1.3fr; gap:0; }
  .path li{ border-bottom:0; border-top:1.5px solid var(--coal); padding:34px 34px 0 0; font-size:22px; }
  .path li::before{ left:0; top:0; }
  .path li:not(:last-child)::after{ content:"→"; position:absolute; right:12px; top:-17px; font-family:var(--body); font-weight:400; font-size:20px; background:var(--paper); padding:0 6px; }
}

/* CTA final */
.final{ background:var(--orange); color:var(--white); position:relative; overflow:hidden; }
.final::after{ content:"app"; position:absolute; right:-2vw; bottom:-6vw; font-family:var(--title); font-weight:800; font-size:clamp(140px, 26vw, 360px); letter-spacing:-.06em; line-height:1; color:rgba(255,255,255,.1); pointer-events:none; }
.final-grid{ position:relative; z-index:1; display:grid; gap:32px; align-items:center; }
.final h2{ font-size:clamp(34px, 5.8vw, 66px); max-width:14ch; margin-bottom:16px; }
.final p{ font-size:19px; color:rgba(255,255,255,.88); max-width:38ch; margin-bottom:30px; }
@media (max-width:959px){ .final .btn-lg{ width:100%; } }
.qr{ display:none; }
@media (min-width:960px){
  .final-grid{ grid-template-columns:1fr auto; gap:56px; }
  .qr{ display:flex; flex-direction:column; align-items:center; gap:12px; background:var(--white); color:var(--coal); border-radius:22px; padding:22px 22px 18px; box-shadow:0 30px 60px -30px rgba(36,39,43,.6); }
  .qr-code svg{ width:168px; height:168px; display:block; }
  .qr p{ font-size:13px; color:var(--muted); text-align:center; max-width:20ch; margin:0; }
}

/* FAQ */
.faq-grid{ display:grid; gap:8px; }
@media (min-width:960px){ .faq-grid{ grid-template-columns:.7fr 1.3fr; gap:64px; } .faq-grid .sec-head{ position:sticky; top:120px; align-self:start; } }
.faq-list details{ border-bottom:1px solid var(--line); }
.faq-list details:first-child{ border-top:1px solid var(--coal); }
.faq-list summary{ list-style:none; cursor:pointer; padding:22px 50px 22px 0; font-family:var(--title); font-weight:700; font-size:19px; letter-spacing:-.01em; position:relative; transition:color .15s; }
.faq-list summary:hover{ color:var(--orange); }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:""; position:absolute; right:4px; top:50%; width:30px; height:30px; transform:translateY(-50%); border-radius:50%; border:1px solid var(--line); background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%23F05A28' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat; transition:transform .2s; }
.faq-list details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq-list details p{ padding:0 0 22px; color:var(--muted); max-width:58ch; }

/* rodapé */
.footer{ background:var(--coal); color:#BDB8AF; padding-block:48px 120px; font-size:14px; }
@media (min-width:960px){ .footer{ padding-bottom:52px; } }
.footer .logo{ color:var(--white); }
.footer-in{ display:grid; gap:28px; }
@media (min-width:860px){ .footer-in{ grid-template-columns:1fr 1fr auto; align-items:start; } }
.footer-note{ margin-top:8px; }
.footer-company strong{ color:var(--white); font-weight:500; }
.footer-links{ display:flex; flex-direction:column; gap:10px; }
.footer-links a{ color:var(--white); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.25); align-self:flex-start; }
.footer-links a:hover{ border-color:var(--orange); }

/* CTA fixo no celular */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:40; padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background:rgba(250,248,243,.95); border-top:1px solid var(--line); }
@media (min-width:960px){ .sticky-cta{ display:none; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

/* ---------- complementos ---------- */

/* faixa de categorias no topo */
.index{ position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-top:34px; padding-top:22px; border-top:1px solid var(--line); }
.index-label{ font-family:var(--title); font-weight:800; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-right:6px; }
.index a{ text-decoration:none; font-family:var(--title); font-weight:700; font-size:14px; padding:8px 16px; border:1px solid var(--coal); border-radius:999px; transition:background .15s, color .15s; }
.index a:hover{ background:var(--coal); color:var(--paper); }
.index a:first-of-type{ background:var(--orange); border-color:var(--orange); color:var(--white); }
@media (min-width:960px){ .index{ margin-top:56px; } }

/* botão no fim de "consultar" */

/* faixa editorial */
.quote{ background:var(--sand); padding-block:48px; border-block:1px solid var(--line); }
@media (min-width:960px){ .quote{ padding-block:64px; } }
.quote-in{ display:grid; gap:26px; align-items:center; }
@media (min-width:960px){ .quote-in{ grid-template-columns:1fr auto; gap:48px; } }
.quote-text{ font-family:var(--title); font-weight:800; font-size:clamp(30px, 5.2vw, 60px); line-height:1.02; letter-spacing:-.04em; max-width:18ch; padding-left:22px; border-left:6px solid var(--orange); text-wrap:balance; }
.quote-text em{ font-style:normal; color:var(--orange); }
@media (max-width:959px){ .quote .btn{ width:100%; } }

.app{ padding-top:64px; }
@media (min-width:960px){ .app{ padding-top:88px; } }

/* seção do app */
.app-text{ color:var(--muted); font-size:18px; max-width:32ch; margin:18px 0 26px; }
@media (max-width:959px){ .app-btn{ width:100%; } }
.app-visual .notes{ position:relative; z-index:2; }

/* legendas da jornada */
.path li b{ display:block; font-weight:800; }
.path li span{ display:block; font-family:var(--body); font-weight:400; font-size:15px; letter-spacing:0; color:var(--muted); margin-top:4px; max-width:24ch; }
.path li::before{ top:30px; }
@media (min-width:960px){ .path li::before{ top:0; } .path li span{ font-size:14.5px; } }

/* ---------- toque humano (v9): papel, lápis, fotos reais ---------- */
:root{ --hand:'Caveat', 'Segoe Print', cursive; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body::after{ content:""; position:fixed; inset:0; z-index:200; pointer-events:none; background-image:var(--grain); opacity:.06; mix-blend-mode:multiply; }
.pencil{ font-family:var(--hand); font-weight:600; color:var(--blue); line-height:1.1; letter-spacing:0; text-transform:none; }

/* hero */
.hero{ padding-bottom:72px; }
@media (min-width:960px){ .hero{ padding-bottom:110px; } }
.hero-video .video{ transform:rotate(1.2deg); }
.hero-note{ position:absolute; left:-118px; top:34%; display:flex; flex-direction:column; align-items:flex-end; font-size:26px; transform:rotate(-6deg); }
.hero-note svg{ width:84px; height:48px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; margin-top:2px; transform:rotate(-8deg); }
@media (max-width:959px){ .hero-note{ display:none; } }

/* catálogo */
.cat-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 32px; }
.cat-hint{ font-size:24px; transform:rotate(-2deg); max-width:16ch; }
.cat{ justify-content:flex-end; }
.prints{ position:absolute; z-index:-1; right:8%; top:9%; width:min(58%, 300px); aspect-ratio:1 / 1.05; }
.print{ position:absolute; width:62%; height:auto; aspect-ratio:auto; object-fit:cover; background:#fff; padding:8px 8px 26px; box-shadow:0 22px 34px -20px rgba(0,0,0,.45); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.print-1{ left:0; top:10%; transform:rotate(-7deg); }
.print-2{ right:0; top:0; transform:rotate(5deg); }
.cat-a:hover .print-1{ transform:rotate(-10deg) translateX(-6px); }
.cat-a:hover .print-2{ transform:rotate(8deg) translateY(-6px); }
.print-note{ position:absolute; z-index:2; left:-64%; top:50%; color:var(--white); font-size:25px; transform:rotate(-4deg); }
@media (max-width:759px){ .prints{ top:7%; right:6%; width:66%; } .cat-a{ min-height:380px; } .print-note{ display:none; } }
.cat-foot{ position:relative; z-index:1; }

/* verbos: círculo feito à mão */
.ringed{ position:relative; display:inline-block; }
.ringed svg{ position:absolute; left:-8%; top:-14%; width:116%; height:132%; fill:none; stroke:var(--coal); stroke-width:2.2; stroke-linecap:round; overflow:visible; pointer-events:none; }

/* app: anotações a lápis */
.notes li{ font-family:var(--hand); font-weight:600; font-size:26px; letter-spacing:0; text-transform:lowercase; color:var(--blue); border-color:var(--blue); }
@media (min-width:640px){
  .notes li::after, .notes li::before{ border-top:0 !important; height:14px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9c14-5 34-7 56-3' fill='none' stroke='%23406D96' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; top:40% !important; }
  .notes-left li:nth-child(2){ transform:rotate(-4deg); }
  .notes-right li:first-child{ transform:rotate(3deg); }
  .notes-left li:first-child, .notes-right li:last-child{ color:var(--orange); }
}

/* jornada: foto da campanha */
.journey-side{ display:flex; flex-direction:column; gap:36px; }
.snap{ margin:0; width:210px; background:#fff; padding:9px 9px 0; transform:rotate(-3deg); box-shadow:0 26px 40px -26px rgba(36,39,43,.55); }
.snap img{ width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; object-position:center 30%; }
.snap figcaption{ padding:8px 2px 12px; font-size:20px; color:var(--coal); text-align:center; }
@media (max-width:959px){ .snap{ width:180px; align-self:flex-end; margin-top:-80px; } }

/* revisão: etiqueta do topo como anotação a lápis; cartões sem levantar */
.hero .eyebrow.pencil{ font-family:var(--hand); font-weight:600; font-size:26px; letter-spacing:0; text-transform:none; color:var(--blue); transform:rotate(-2deg); transform-origin:left center; }
.hero .eyebrow.pencil::before{ display:none; }
.cat:hover{ transform:none; box-shadow:none; }


/* ---------- revisão: regras de interface (toque, âncoras, foco) ---------- */
html{ touch-action:manipulation; -webkit-tap-highlight-color:rgba(240,90,40,.18); }
main [id]{ scroll-margin-top:84px; }
@media (max-width:959px){ html{ scroll-padding-bottom:96px; } }

/* chamado final: botão secundário do canal no WhatsApp */
.final-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.btn-ghost{ background:transparent; color:var(--white); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); }
@media (max-width:959px){ .final-actions .btn{ width:100%; } }