/* ===========================================================
   MÁQUINA DE CARROSSEL — Tech Editorial v5 (@orafaelsena)
   Colagem analógica: papel rasgado · grade · scribbles · azul Twitter
   =========================================================== */
:root{
  --bg:#F4F1E8;
  --bg2:#EFEBDF;
  --blue:#1C9CF0;
  --blue-deep:#0d83d8;
  --ink:#0A0A0A;
  --ink-soft:#524E45;
  --gray:#D8D3C7;
  --paper:#FBFAF5;
  --tape:rgba(214,201,170,.62);
  --maxw:1120px;
  --shadow-card:0 1px 0 rgba(10,10,10,.05), 0 18px 40px -18px rgba(10,10,10,.28);
  --shadow-soft:0 10px 30px -16px rgba(10,10,10,.22);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg);
  background-image:
    radial-gradient(120% 80% at 100% 0%, rgba(28,156,240,.05), transparent 55%),
    radial-gradient(120% 90% at 0% 100%, rgba(10,10,10,.035), transparent 50%);
  color:var(--ink);
  font-family:"Geist","Inter",system-ui,sans-serif;
  font-size:16px; line-height:1.5; overflow-x:hidden;
  overscroll-behavior-y:contain;
  padding-bottom:env(safe-area-inset-bottom);
}
img{display:block; max-width:100%}
button,a{font-family:inherit}
a{color:inherit; text-decoration:none}
[hidden]{display:none !important}

/* grão de papel global */
.grain{position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.05; mix-blend-mode:multiply}
.grain::before{content:""; position:absolute; inset:0; filter:url(#grain)}

/* ---------- topbar ---------- */
.topbar{position:sticky; top:0; z-index:30; background:rgba(244,241,232,.82); backdrop-filter:blur(12px) saturate(1.1); border-bottom:1px solid var(--gray); padding-top:env(safe-area-inset-top)}
.topbar__inner{max-width:var(--maxw); margin:0 auto; height:58px; display:flex; align-items:center; gap:12px; padding:0 18px}
.brand{display:flex; align-items:center; gap:9px; margin-right:auto}
.brand__mark{color:var(--blue); animation:spin 28s linear infinite}
.brand__name{font-weight:800; letter-spacing:-.02em; font-size:16px}
.brand__tag{font-family:"Geist Mono",monospace; font-size:11px; letter-spacing:.12em; color:var(--ink-soft)}
.backbtn{display:inline-flex; align-items:center; gap:5px; min-height:44px; padding:0 12px 0 8px; background:none; border:none; color:var(--ink); font-weight:700; cursor:pointer; border-radius:10px; margin-left:-8px}
.backbtn:hover{background:rgba(10,10,10,.06)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- layout ---------- */
.view{max-width:var(--maxw); margin:0 auto; padding:26px 18px 70px; position:relative; z-index:2}

/* ---------- HERO ---------- */
.hero{position:relative; padding:30px 0 40px; margin-bottom:34px; border-bottom:1.5px dashed var(--gray)}
.hero__deco{position:absolute; inset:0; pointer-events:none}
.deco-grid{position:absolute; top:-6px; right:0; width:168px; height:124px; opacity:.55; transform:rotate(4deg); filter:url(#torn2)}
.deco-tape{position:absolute; top:30px; right:118px; width:78px; height:26px; background:var(--tape); box-shadow:var(--shadow-soft); transform:rotate(-16deg); border-left:1px dashed rgba(10,10,10,.12); border-right:1px dashed rgba(10,10,10,.12)}
.deco-aster{position:absolute; top:42px; right:42px; width:60px; height:60px; color:var(--blue); opacity:.9; animation:spin 36s linear infinite reverse}
.deco-scribble{position:absolute; right:8px; bottom:18px; width:118px; height:58px; opacity:.85}
.hero__eyebrow{font-family:"Geist Mono",monospace; font-size:11.5px; letter-spacing:.2em; color:var(--blue); margin:0 0 18px; font-weight:600; position:relative}
.hero__title{font-size:clamp(34px,8.5vw,68px); line-height:1.0; font-weight:900; letter-spacing:-.035em; margin:0; max-width:13ch}
.hero__title .u{position:relative; color:var(--blue); white-space:nowrap}
.u__line{position:absolute; left:-2%; bottom:-.16em; width:104%; height:.34em; overflow:visible}
.u__line path{stroke-dasharray:320; stroke-dashoffset:320; animation:draw 1.1s .35s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero__sub{color:var(--ink-soft); max-width:42ch; margin:20px 0 0; font-size:17px; line-height:1.55}

/* ---------- GRID de carrosséis (recortes na bancada) ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:30px 24px}
.card{
  position:relative; background:var(--paper); border-radius:6px; cursor:pointer; text-align:left; padding:12px 12px 16px;
  box-shadow:var(--shadow-card); border:1px solid rgba(10,10,10,.06);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s; will-change:transform;
  animation:rise .6s both;
}
.card::before{ /* masking tape segurando o recorte */
  content:""; position:absolute; top:-13px; left:50%; width:104px; height:28px; transform:translateX(-50%) rotate(-3deg);
  background:var(--tape); box-shadow:0 4px 10px -4px rgba(10,10,10,.3);
  border-left:1px dashed rgba(10,10,10,.12); border-right:1px dashed rgba(10,10,10,.12); z-index:2;
}
.card:nth-child(odd){transform:rotate(-1.4deg)}
.card:nth-child(even){transform:rotate(1.2deg)}
.card:nth-child(3n){transform:rotate(.6deg)}
.card:hover{transform:rotate(0deg) translateY(-6px); box-shadow:0 1px 0 rgba(10,10,10,.05), 0 30px 60px -22px rgba(28,156,240,.5)}
.card:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
.card__thumb{position:relative; aspect-ratio:1/1; border-radius:3px; overflow:hidden; background:var(--gray); box-shadow:inset 0 0 0 1px rgba(10,10,10,.06)}
.card__thumb img{width:100%; height:100%; object-fit:cover}
.card__tag{position:absolute; top:9px; left:9px; background:var(--blue); color:#fff; font-family:"Geist Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border-radius:5px; font-weight:600; box-shadow:0 4px 12px -4px rgba(28,156,240,.7)}
.card__count{position:absolute; bottom:9px; right:9px; background:rgba(10,10,10,.82); color:var(--bg); font-family:"Geist Mono",monospace; font-size:10px; letter-spacing:.06em; padding:4px 8px; border-radius:5px; font-weight:500}
.card__body{padding:14px 4px 2px}
.card__title{font-weight:900; font-size:21px; letter-spacing:-.025em; line-height:1.05; margin:0}
.card__meta{display:flex; gap:7px; align-items:center; color:var(--ink-soft); font-family:"Geist Mono",monospace; font-size:11.5px; margin-top:9px; flex-wrap:wrap}
.card__meta .sep{width:3px;height:3px;border-radius:50%;background:var(--blue)}
.card__cta{display:flex; align-items:center; gap:6px; margin-top:13px; font-weight:700; font-size:13px; color:var(--blue)}
.card__cta svg{transition:transform .25s}
.card:hover .card__cta svg{transform:translateX(4px)}
@keyframes rise{from{opacity:0; transform:translateY(26px) rotate(0)}}

/* ---------- DETALHE ---------- */
.detail__head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:26px}
.detail__eyebrow{font-family:"Geist Mono",monospace; font-size:11.5px; letter-spacing:.18em; color:var(--blue); margin:0 0 8px; font-weight:600; text-transform:uppercase}
.detail__title{font-size:clamp(30px,7vw,52px); font-weight:900; letter-spacing:-.035em; margin:0; line-height:1}
.detail__sub{color:var(--ink-soft); margin:8px 0 0; font-size:15px}

/* reel horizontal: slides como recortes */
.reel{display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:14px 18px 22px; margin:0 -18px; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--gray) transparent}
.reel::-webkit-scrollbar{height:8px}
.reel::-webkit-scrollbar-thumb{background:var(--gray); border-radius:8px}
.reel__item{position:relative; flex:0 0 76%; max-width:340px; scroll-snap-align:center}
.reel__item img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:5px; background:var(--paper); box-shadow:var(--shadow-card); border:1px solid rgba(10,10,10,.07)}
.reel__item:nth-child(odd){transform:rotate(-1deg)}
.reel__item:nth-child(even){transform:rotate(1deg)}
.reel__n{position:absolute; top:10px; left:10px; background:var(--blue); color:#fff; font-family:"Geist Mono",monospace; font-size:11px; font-weight:600; padding:3px 8px; border-radius:5px}

/* régua-seção com rótulo (estilo recorte) */
.rule{display:flex; align-items:center; gap:14px; margin:42px 0 18px}
.rule::after{content:""; flex:1; height:1.5px; background:repeating-linear-gradient(90deg,var(--gray) 0 8px,transparent 8px 14px)}
.rule__label{font-family:"Geist Mono",monospace; font-size:12px; letter-spacing:.18em; color:var(--ink-soft); font-weight:600; background:var(--blue); color:#fff; padding:5px 10px; border-radius:5px}

/* grade de slides */
.slides{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:18px}
.slide{position:relative; background:var(--paper); border-radius:5px; overflow:hidden; box-shadow:var(--shadow-card); border:1px solid rgba(10,10,10,.06)}
.slide img{width:100%; aspect-ratio:1/1; object-fit:cover; cursor:zoom-in; transition:filter .2s}
.slide:hover img{filter:brightness(.97)}
.slide__bar{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px}
.slide__n{font-family:"Geist Mono",monospace; font-size:11.5px; color:var(--ink-soft); font-weight:600}
.slide__dl{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 13px; background:var(--ink); color:var(--bg); border:none; border-radius:9px; cursor:pointer; font-weight:700; font-size:12.5px; letter-spacing:.02em; transition:background .2s; touch-action:manipulation}
.slide__dl:hover{background:var(--blue)}

/* notepad (legenda) — folha de caderno */
.notepad{position:relative; background:
   linear-gradient(var(--paper),var(--paper)) padding-box,
   repeating-linear-gradient(transparent 0 33px, rgba(28,156,240,.12) 33px 34px);
  background-color:var(--paper); border:1px solid var(--gray); border-radius:10px; padding:22px 22px 24px; box-shadow:var(--shadow-card)}
.notepad::before{content:""; position:absolute; left:42px; top:0; bottom:0; width:1.5px; background:rgba(229,80,80,.25)}
.notepad__row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; padding-left:8px}
.notepad__row--hash{margin-top:22px; padding-top:18px; border-top:1px dashed var(--gray)}
.notepad__name{font-weight:800; font-size:15px; padding-left:18px}
.notepad__name em{font-style:normal; color:var(--ink-soft); font-weight:500; font-family:"Geist Mono",monospace; font-size:12px}
.notepad__text{white-space:pre-wrap; word-break:break-word; font-family:inherit; font-size:15.5px; line-height:1.62; margin:0; padding-left:26px; color:var(--ink)}
.notepad__hash{color:var(--blue); font-size:14px; line-height:1.75; margin:0; padding-left:26px; word-break:break-word; font-weight:500}

/* ---------- pílulas (botões marca) ---------- */
.pill{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; font-family:"Geist Mono",monospace; font-weight:600; font-size:12.5px; letter-spacing:.06em; cursor:pointer; border:1.5px solid var(--ink); background:transparent; color:var(--ink); transition:background .2s,color .2s,transform .1s; touch-action:manipulation}
.pill:active{transform:translateY(1px)}
.pill__dot{width:9px; height:9px; border-radius:50%; background:var(--blue)}
.pill--solid{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.pill--solid:hover{background:var(--blue); border-color:var(--blue)}
.pill--solid:disabled{opacity:.55; cursor:default}
.pill--ghost:hover{background:var(--ink); color:var(--bg)}
.pill--ghost:hover .pill__dot{background:var(--bg)}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px}

/* ---------- footer ---------- */
.foot{max-width:var(--maxw); margin:0 auto; padding:26px 18px 44px; display:flex; align-items:center; gap:9px; color:var(--ink-soft); font-family:"Geist Mono",monospace; font-size:11.5px; letter-spacing:.04em; border-top:1px solid var(--gray); position:relative; z-index:2}
.foot__mark{color:var(--blue)}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:calc(26px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--bg); padding:13px 20px; border-radius:999px; font-family:"Geist Mono",monospace; font-weight:600; font-size:13px; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:50; box-shadow:0 14px 40px -10px rgba(0,0,0,.4); display:flex; align-items:center; gap:8px}
.toast::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--blue)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- lightbox ---------- */
.lightbox{position:fixed; inset:0; background:rgba(10,10,10,.93); display:flex; align-items:center; justify-content:center; z-index:60; padding:22px; cursor:zoom-out; animation:fade .2s}
.lightbox img{max-width:100%; max-height:100%; border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.6)}
@keyframes fade{from{opacity:0}}

/* ---------- responsivo ---------- */
@media (max-width:600px){
  .reel__item{flex-basis:84%}
  .detail__head{align-items:flex-start}
  #downloadAll{width:100%; justify-content:center}
  .slides{grid-template-columns:repeat(2,1fr); gap:14px}
  .deco-aster{width:46px; height:46px; top:30px; right:24px}
  .deco-grid{width:120px; height:90px}
  .deco-tape,.deco-scribble{display:none}
  .notepad__text,.notepad__hash{padding-left:22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .u__line path{stroke-dashoffset:0}
  .card{transform:none !important}
}