/* ============================================================
   Horizon Film Lab
   Uma familia (Archivo, variavel em peso E largura), branco puro,
   e a terracota carregando os dois blocos que importam.
   ============================================================ */

:root{
  --bg:         oklch(1 0 0);
  --surface:    oklch(0.981 0.004 40);
  --ink:        oklch(0.21 0.014 40);
  --ink-2:      oklch(0.45 0.013 40);
  --ink-3:      oklch(0.528 0.013 40);
  --line:       oklch(0.905 0.006 40);
  --line-soft:  oklch(0.945 0.005 40);

  --brand:      oklch(0.50 0.151 40);
  --brand-deep: oklch(0.335 0.102 38);
  --brand-ink:  oklch(0.42 0.138 40);
  --brand-tint: oklch(0.966 0.018 40);

  --wrap: 1140px;
  --r: 10px;
  --out: cubic-bezier(.22,1,.36,1);

  --z-sticky: 100;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.62; font-weight:400;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.025em; text-wrap:balance; font-stretch:112%}
p{margin:0; text-wrap:pretty}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:3px}

.wrap{width:min(100% - 44px, var(--wrap)); margin-inline:auto}
section[id]{scroll-margin-top:84px}

/* ---------- topo ---------- */
.top{
  position:sticky; top:0; z-index:var(--z-sticky);
  background:color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.top__in{display:flex; align-items:center; gap:36px; height:66px}
.mark{display:flex; align-items:center; gap:10px; font-weight:800; font-size:16.5px;
  letter-spacing:-.022em; font-stretch:108%; margin-right:auto}
.mark svg{flex:none}
.nav{display:flex; gap:28px; font-size:15px; color:var(--ink-2); font-weight:500}
.nav a{position:relative; padding:4px 0; transition:color .18s var(--out)}
.nav a:hover{color:var(--ink)}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--brand); transition:right .28s var(--out)}
.nav a:hover::after{right:0}

/* ---------- botoes ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:var(--r); font-weight:600; font-size:15.5px;
  font-family:inherit; cursor:pointer; border:1px solid transparent;
  transition:background .18s var(--out), color .18s var(--out), border-color .18s var(--out)}
.btn--solid{background:var(--brand); color:#fff}
.btn--solid:hover{background:var(--brand-ink)}
.btn--line{border-color:var(--line); color:var(--ink)}
.btn--line:hover{border-color:var(--ink); background:var(--ink); color:#fff}
.btn--sm{padding:10px 18px; font-size:14.5px}

/* ---------- hero ---------- */
.hero{padding:clamp(52px,7vw,92px) 0 clamp(56px,7vw,96px)}
.hero__in{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(36px,5vw,72px); align-items:center}
.hero h1{font-size:clamp(40px,5.6vw,68px); line-height:1.04; max-width:13ch}
.hero__lead{margin-top:24px; font-size:19px; line-height:1.6; color:var(--ink-2); max-width:46ch}
.hero__cta{margin-top:34px; display:flex; gap:12px; flex-wrap:wrap}
.hero__note{margin-top:26px; font-size:14.5px; color:var(--ink-3); max-width:44ch; line-height:1.55}
.hero__note b{color:var(--ink-2); font-weight:600}
.hero__fig{position:relative; border-radius:var(--r); overflow:hidden; background:var(--surface)}
.hero__fig img{width:100%; height:clamp(360px,46vw,540px); object-fit:cover; object-position:center 32%}
.hero__tag{position:absolute; left:18px; bottom:18px; background:var(--bg); color:var(--ink);
  padding:9px 15px; border-radius:7px; font-size:13.5px; font-weight:600; letter-spacing:-.008em}

/* ---------- blocos ---------- */
.band{padding:clamp(56px,7vw,94px) 0; border-top:1px solid var(--line)}
.band--tint{background:var(--surface)}
.band__head{max-width:62ch}
.band h2{font-size:clamp(28px,3.5vw,40px); line-height:1.12}
.band__lead{margin-top:18px; font-size:18px; color:var(--ink-2); max-width:60ch}

/* ---------- a sequencia (angle > shoot > cut > files) ---------- */
.flow{margin-top:46px; display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1.5px solid var(--ink)}
.flow__s{padding:26px 26px 30px 0; border-right:1px solid var(--line)}
.flow__s:last-child{border-right:0; padding-right:0}
.flow__n{font-size:13px; font-weight:700; color:var(--brand); font-variant-numeric:tabular-nums}
.flow__s h3{margin-top:12px; font-size:21px; letter-spacing:-.022em}
.flow__s p{margin-top:9px; font-size:15px; color:var(--ink-2); line-height:1.55}
.flow__when{margin-top:14px; font-size:13.5px; color:var(--ink-3); font-weight:500}

/* ---------- catalogo ---------- */
.cat{margin-top:44px; border-top:1.5px solid var(--ink)}
.cat__row{
  display:grid; grid-template-columns:74px minmax(0,1fr) 132px 78px 86px;
  gap:22px; align-items:center; padding:20px 0;
  border-bottom:1px solid var(--line-soft);
  transition:background .18s var(--out);
}
.cat__row:hover{background:var(--brand-tint)}
.cat__code{font-size:13px; font-weight:700; color:var(--brand); letter-spacing:.02em}
.cat__name{font-weight:650; font-size:16.5px; letter-spacing:-.016em; font-stretch:106%}
.cat__desc{margin-top:4px; font-size:14.5px; color:var(--ink-2); line-height:1.5}
.cat__fmt{font-size:13.5px; color:var(--ink-3)}
.cat__price{font-size:19px; font-weight:700; text-align:right; letter-spacing:-.025em}
.cat__buy{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 0; width:100%; border-radius:8px; border:1px solid var(--line);
  font-size:14px; font-weight:600; color:var(--ink);
  transition:background .16s var(--out), border-color .16s var(--out), color .16s var(--out);
}
.cat__buy:hover{background:var(--brand); border-color:var(--brand); color:#fff}
.cat__foot{margin-top:26px; font-size:14.5px; color:var(--ink-3); display:flex; gap:26px; flex-wrap:wrap}

/* ---------- bloco drenched ---------- */
.drench{background:var(--brand-deep); color:#fff; padding:clamp(56px,7vw,92px) 0}
.drench h2{font-size:clamp(27px,3.4vw,38px); max-width:20ch; line-height:1.14}
.drench__grid{margin-top:46px; display:grid; grid-template-columns:repeat(3,1fr); gap:0}
.drench__c{padding:0 32px 0 0; border-right:1px solid rgb(255 255 255 / .22)}
.drench__c:last-child{border-right:0; padding-right:0}
.drench__c h3{font-size:19px; letter-spacing:-.02em; line-height:1.3}
.drench__c p{margin-top:12px; font-size:15.5px; line-height:1.62; color:rgb(255 255 255 / .82)}

/* ---------- como roda ---------- */
.run{margin-top:46px; display:grid; grid-template-columns:1fr 410px; gap:clamp(36px,5vw,64px); align-items:start}
.steps{border-top:1.5px solid var(--ink)}
.step{display:grid; grid-template-columns:40px 1fr 92px; gap:20px; align-items:baseline;
  padding:21px 0; border-bottom:1px solid var(--line-soft)}
.step__n{font-size:13px; font-weight:700; color:var(--brand)}
.step h3{font-size:17.5px; letter-spacing:-.018em}
.step p{margin-top:7px; font-size:15px; color:var(--ink-2); line-height:1.55}
.step__w{font-size:13.5px; color:var(--ink-3); text-align:right; font-weight:500}
.run__fig{border-radius:var(--r); overflow:hidden; position:sticky; top:96px}
.run__fig img{width:100%; height:480px; object-fit:cover}

/* ---------- perguntas ---------- */
.qa{margin-top:40px; max-width:76ch; border-top:1.5px solid var(--ink)}
.qa details{border-bottom:1px solid var(--line-soft)}
.qa summary{
  list-style:none; cursor:pointer; padding:19px 40px 19px 0; position:relative;
  font-weight:600; font-size:16.5px; letter-spacing:-.014em;
  transition:color .16s var(--out);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--brand-ink)}
.qa summary::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:11px;
  margin-top:-7px; border-right:1.8px solid var(--ink-3); border-bottom:1.8px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .24s var(--out);
}
.qa details[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.qa p{padding:0 48px 22px 0; font-size:15.5px; color:var(--ink-2); line-height:1.65}

/* ---------- paginas de texto ---------- */
.doc{padding:clamp(48px,6vw,78px) 0 clamp(60px,7vw,92px); max-width:70ch}
.doc h1{font-size:clamp(31px,4vw,44px); line-height:1.1}
.doc .upd{margin-top:14px; font-size:14.5px; color:var(--ink-3)}
.doc h2{margin-top:40px; font-size:20px; letter-spacing:-.02em}
.doc p{margin-top:14px; color:var(--ink-2); font-size:16.5px}
.doc ul{margin-top:14px; padding-left:20px; color:var(--ink-2); font-size:16.5px}
.doc li{margin-top:9px}
.doc strong{color:var(--ink); font-weight:650}
.doc a{color:var(--brand-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px}

/* ---------- rodape ---------- */
.foot{border-top:1px solid var(--line); padding:54px 0 42px; background:var(--surface)}
.foot__cols{display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:40px}
.foot h4{font-size:14px; letter-spacing:-.012em; font-weight:700}
.foot__cols p{margin-top:12px; font-size:14.5px; color:var(--ink-2); max-width:38ch; line-height:1.6}
.foot__cols a{display:block; margin-top:10px; font-size:14.5px; color:var(--ink-2);
  transition:color .16s var(--out)}
.foot__cols a:hover{color:var(--brand-ink)}
.foot__legal{margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--ink-3); line-height:1.75}

/* ---------- entrada ---------- */
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.hero h1,.hero__lead,.hero__cta,.hero__note{animation:rise .62s var(--out) both}
.hero__lead{animation-delay:.06s} .hero__cta{animation-delay:.12s} .hero__note{animation-delay:.18s}
.hero__fig{animation:rise .72s var(--out) .08s both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ---------- telas menores ---------- */
@media (max-width:1000px){
  .hero__in{grid-template-columns:1fr; gap:38px}
  .hero__fig img{height:min(60vh,420px); object-position:center 28%}
  .flow{grid-template-columns:repeat(2,1fr)}
  .flow__s{padding:24px 24px 26px 0; border-bottom:1px solid var(--line)}
  .flow__s:nth-child(2n){border-right:0; padding-right:0}
  .flow__s:nth-child(n+3){border-bottom:0}
  .run{grid-template-columns:1fr}
  .run__fig{position:static; order:-1}
  .run__fig img{height:300px}
  .drench__grid{grid-template-columns:1fr; gap:30px}
  .drench__c{padding:0 0 30px; border-right:0; border-bottom:1px solid rgb(255 255 255 / .22)}
  .drench__c:last-child{padding-bottom:0; border-bottom:0}
  .foot__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .wrap{width:min(100% - 32px, var(--wrap))}
  .nav{display:none}
  .top__in{gap:16px}
  .hero__lead{font-size:17.5px}
  .cat__row{grid-template-columns:1fr auto; gap:5px 16px; padding:20px 0}
  .cat__code{grid-column:1/-1}
  .cat__main{grid-column:1/-1}
  .cat__fmt{grid-column:1; align-self:center}
  .cat__price{grid-column:2; grid-row:3; text-align:right}
  .cat__buy{grid-column:1/-1; margin-top:12px; padding:11px 0}
  .step{grid-template-columns:34px 1fr; gap:14px}
  .step__w{grid-column:2; text-align:left; margin-top:8px}
  .foot__cols{grid-template-columns:1fr; gap:30px}
}