/* =========================================================
   Brainstorm — landing page
   Identidade visual: manual da marca.
   Preto #171717, amarelo #ffc627, dourado #966702.
   Devices: caixa delimitadora de software, luz/lens flare,
   o raio como símbolo integrado.
   ========================================================= */

/* ---------------------------------------------------------
   FONTES DA MARCA
   Coloque os arquivos em assets/fonts/ com estes nomes e elas
   assumem sozinhas. Enquanto não existirem, a página usa as
   substitutas do Google (Archivo Black, Poppins, EB Garamond).
   --------------------------------------------------------- */
@font-face{
  font-family:"TAN Kulture";
  src:url("../fonts/TAN-Kulture.woff2") format("woff2"),
      url("../fonts/TAN-Kulture.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Metropolis";
  src:url("../fonts/Metropolis-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Metropolis";
  src:url("../fonts/Metropolis-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Metropolis";
  src:url("../fonts/Metropolis-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Apple Garamond";
  src:url("../fonts/AppleGaramond.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* Cor da marca */
  --ink:        #171717;
  --ink-2:      #1F1F1F;
  --ink-3:      #2A2A28;
  --yellow:     #ffc627;
  --gold:       #966702;
  --gold-deep:  #6B4A02;

  /* Neutros de apoio */
  --paper:      #F7F5F0;
  --on-dark:    #F5F2EA;
  --on-dark-mu: #A29D92;
  --on-light-mu:#5C5240;
  --line-dark:  rgba(245,242,234,.14);
  --line-yell:  rgba(255,198,39,.26);
  --line-light: rgba(23,23,23,.22);

  /* Tipo */
  --display: "TAN Kulture", "Archivo Black", "Segoe UI", system-ui, sans-serif;
  --body:    "Metropolis", "Poppins", "Segoe UI", system-ui, sans-serif;
  --serif:   "Apple Garamond", "EB Garamond", Georgia, serif;
  --mono:    "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Ritmo */
  --gut: clamp(20px, 5vw, 48px);
  --sec: clamp(40px, 4.4vw, 60px);
  --r:   6px;

  /* O raio da marca, como máscara. São duas formas separadas,
     por isso não dá para desenhar com clip-path: um polígono
     só não consegue representar duas peças soltas. */
  --raio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1129 1963'%3E%3Cpath d='M990 10 575 855 700 975 405 1265 5 845Z'/%3E%3Cpath d='M745 1015 1125 1385 230 1940Z'/%3E%3C/svg%3E");
}

/* qualquer marcador que use o raio herda a cor do texto */
.raio,
.eyebrow::before,
.ticker__in span::after,
.plan__list li::before,
.form__marks li::before,
.regras__nome::before{
  background:currentColor;
  -webkit-mask:var(--raio) center / contain no-repeat;
  mask:var(--raio) center / contain no-repeat;
  clip-path:none;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--yellow); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:3px;
}

.skip{
  position:absolute; left:-999px; top:0; z-index:100;
  background:var(--yellow); color:var(--ink);
  padding:12px 18px; font-family:var(--mono); font-size:13px;
}
.skip:focus{ left:8px; top:8px; }

/* ---------- estrutura ---------- */

.wrap{ width:100%; max-width:1220px; margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:820px; }

.section{ padding-block:var(--sec); position:relative; }
.section--tight{ padding-block:clamp(32px,3.6vw,46px); }

/* seções invertidas: fundo amarelo, o "fator WOW" do manual */
.section--yellow{
  background:var(--yellow);
  color:var(--ink);
  background-image:
    radial-gradient(120% 90% at 15% 0%, rgba(255,255,255,.5) 0%, transparent 55%),
    radial-gradient(100% 80% at 100% 100%, rgba(150,103,2,.42) 0%, transparent 60%);
}
.section--band{ background:var(--ink-2); }
.section--dark{ background:var(--ink); border-top:1px solid var(--line-dark); }

/* textura: ruído leve, como pede o manual */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- caixa delimitadora (device do manual) ---------- */

.bbox{ position:relative; }
.bbox::before,
.bbox::after{
  content:""; position:absolute;
  width:20px; height:20px;
  border:2px solid var(--yellow);
  pointer-events:none;
}
.bbox::before{ top:-14px; left:-14px; border-right:0; border-bottom:0; }
.bbox::after{ bottom:-14px; right:-14px; border-left:0; border-top:0; }
.section--yellow .bbox::before,
.section--yellow .bbox::after{ border-color:var(--ink); }

/* ---------- tipografia ---------- */

.display{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.55rem, 2.85vw, 2.2rem);
  line-height:1.02;
  letter-spacing:-.012em;
  text-transform:uppercase;
  margin:.24em 0 .46em;
  text-wrap:balance;
}

.h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.18rem, 1.8vw, 1.48rem);
  line-height:1.06;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:.16em 0 .36em;
  text-wrap:balance;
}

.eyebrow{
  font-family:var(--mono);
  font-size:.67rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--yellow);
  margin:0;
  display:flex; align-items:center; gap:9px;
}
.eyebrow::before{
  content:""; width:9px; height:16px; flex:none;
  background:currentColor;
}
.section--yellow .eyebrow{ color:var(--gold-deep); }

.lead{
  font-size:clamp(.97rem, 1.1vw, 1.05rem);
  color:var(--on-dark-mu);
  max-width:47ch;
  margin:0 0 2rem;
}

.shead{ max-width:58ch; margin-bottom:clamp(20px,2.4vw,28px); }
.shead__sub{ color:var(--on-dark-mu); margin:0; max-width:56ch; }
.section--yellow .shead__sub{ color:var(--on-light-mu); }

/* frase de destaque em serifada: o terceiro nível de informação */
.serif{ font-family:var(--serif); font-style:italic; }

/* ---------- botões ---------- */

.btn{
  --bg:var(--yellow); --fg:var(--ink); --bd:var(--yellow);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  background:var(--bg); color:var(--fg);
  border:2px solid var(--bd);
  border-radius:var(--r);
  padding:.72em 1.3em;
  font-family:var(--body); font-weight:600; font-size:.97rem;
  letter-spacing:.005em;
  text-decoration:none; cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(255,198,39,.28); }
.btn:active{ transform:translateY(0); }
.btn--ghost{ --bg:transparent; --fg:var(--on-dark); --bd:var(--line-dark); }
.btn--ghost:hover{ --bd:var(--yellow); --fg:var(--yellow); box-shadow:none; }
.section--yellow .btn{ --bg:var(--ink); --fg:var(--yellow); --bd:var(--ink); }
.section--yellow .btn:hover{ box-shadow:0 10px 26px rgba(23,23,23,.3); }
.btn--sm{ padding:.52em 1em; font-size:.82rem; }
.btn--full{ width:100%; }
.btn--big{ padding:.86em 1.3em; font-size:.96rem; }

/* ---------- header ---------- */

.head{
  position:sticky; top:0; z-index:40;
  background:rgba(23,23,23,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-dark);
}
.head__in{ display:flex; align-items:center; gap:22px; height:58px; }
.head__nav{ display:flex; gap:24px; margin-left:auto; }
.head__nav a{
  font-size:.9rem; color:var(--on-dark-mu); text-decoration:none;
  padding-bottom:3px; border-bottom:2px solid transparent;
}
.head__nav a:hover{ color:var(--on-dark); border-bottom-color:var(--yellow); }

.mark{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.mark__bolt{ width:15px; height:auto; color:var(--yellow); flex:none; }
.mark__name{
  font-family:var(--display); font-weight:400;
  font-size:.95rem; letter-spacing:.005em; text-transform:uppercase;
}
.mark--foot .mark__bolt{ width:24px; }
.mark--foot .mark__name{ font-size:1.6rem; }

/* ---------- hero ---------- */

.hero{
  padding-top:clamp(48px,6vw,88px);
  position:relative;
  overflow:hidden;
}
/* lens flare: a luz que o raio traz */
.hero::before{
  content:""; position:absolute; z-index:0;
  width:min(900px,110vw); aspect-ratio:1/1;
  right:-14%; top:-32%;
  background:radial-gradient(circle, rgba(255,198,39,.24) 0%, rgba(150,103,2,.10) 38%, transparent 66%);
  pointer-events:none;
}
.hero__in{
  position:relative; z-index:2;
  display:flex; align-items:center;
  min-height:clamp(400px, 56vh, 540px);
  padding-block:clamp(28px,3.8vw,52px);
}
.hero__text{ max-width:600px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.hero__note{
  font-family:var(--mono); font-size:.78rem; color:var(--on-dark-mu);
  margin:1.5rem 0 0; max-width:44ch; line-height:1.55;
}


/* foto da equipe: sangra da direita até a borda da tela,
   e o degradê traz o preto por cima para a copy poder deitar em cima dela */
.hero__foto{
  position:absolute; z-index:1;
  inset:0 0 0 26%;
  margin:0;
  overflow:hidden;
  pointer-events:none;
}
/* mais larga que a moldura: empurra os três para longe da headline */
.hero__foto img{
  width:116%; height:100%;
  object-fit:cover; object-position:center 30%;
}
.hero__foto::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      var(--ink) 0%,
      var(--ink) 14%,
      rgba(23,23,23,.72) 38%,
      rgba(23,23,23,.28) 64%,
      rgba(23,23,23,.06) 88%,
      transparent 100%),
    linear-gradient(0deg, var(--ink) 0%, rgba(23,23,23,.35) 16%, transparent 38%),
    linear-gradient(180deg, rgba(23,23,23,.55) 0%, transparent 22%);
}

.stamp{
  position:absolute; right:0; bottom:clamp(24px,6vw,64px); z-index:3;
  display:grid; place-content:center; text-align:center;
  width:74px; height:74px;
  background:var(--yellow); color:var(--ink);
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  rotate:-6deg;
  box-shadow:0 0 44px rgba(255,198,39,.5);
}
.stamp__n{ display:block; font-family:var(--display); font-size:1.5rem; line-height:1; }
.stamp__l{ display:block; font-family:var(--mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.14em; margin-top:2px; }

/* ticker */
.ticker{
  position:relative; z-index:1;
  border-block:2px solid var(--ink);
  background:var(--yellow);
  color:var(--ink);
  overflow:hidden;
  padding-block:8px;
}
.ticker__in{ display:flex; width:max-content; animation:slide 38s linear infinite; }
.ticker__in span{
  font-family:var(--mono); font-size:.71rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em;
  white-space:nowrap; padding-inline:22px;
  display:inline-flex; align-items:center; gap:22px;
}
.ticker__in span::after{
  content:""; width:8px; height:14px; flex:none;
  background:var(--ink);
}
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker__in{ animation:none; } }

/* ---------- portfólio ---------- */

.pf{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(9px,1.1vw,14px);
}
.pf__item{
  margin:0; position:relative;
  border:1px solid var(--line-dark);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--ink-2);
  transition:border-color .2s ease, transform .2s ease;
}
.pf__item:hover{ border-color:var(--yellow); transform:translateY(-3px); }
.pf__item--sq{ aspect-ratio:1/1; }
.pf__item--por{ aspect-ratio:4/5; }
.pf__item--story{ aspect-ratio:9/16; }
/* carrossel: os quatro slides lado a lado, como saem do Supabase */
.pf__item--car{ grid-column:1 / -1; aspect-ratio:16/5; }
.pf__strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2px; width:100%; height:100%;
}
.pf__strip img{ width:100%; height:100%; object-fit:cover; }
.pf__item--car.is-empty .pf__strip{ display:none; }
.pf__item img{ width:100%; height:100%; object-fit:cover; }
.pf__item figcaption{
  position:absolute; left:0; bottom:0;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.06em;
  background:var(--yellow); color:var(--ink);
  padding:3px 9px;
}
.pf__item.is-empty img{ display:none; }
.pf__item.is-empty{
  background:
    repeating-linear-gradient(45deg, var(--ink-2) 0 10px, var(--ink-3) 10px 20px);
}
.pf__item.is-empty::after{
  content:"vaga para peça";
  position:absolute; inset:0;
  display:grid; place-content:center;
  font-family:var(--mono); font-size:.68rem; color:var(--on-dark-mu);
}
.pf__item--car.is-empty::after{ content:"vaga para o carrossel inteiro"; }

/* divisórias dos slides na vaga do carrossel, para dar a medida */
.pf__item--car.is-empty{
  background-image:
    repeating-linear-gradient(45deg, var(--ink-2) 0 10px, var(--ink-3) 10px 20px),
    linear-gradient(90deg, transparent calc(25% - 1px), var(--line-yell) calc(25% - 1px) 25%, transparent 25%),
    linear-gradient(90deg, transparent calc(50% - 1px), var(--line-yell) calc(50% - 1px) 50%, transparent 50%),
    linear-gradient(90deg, transparent calc(75% - 1px), var(--line-yell) calc(75% - 1px) 75%, transparent 75%);
}

/* ---------- números ---------- */

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
}
.stat{ padding:clamp(16px,1.8vw,20px) 16px; border-left:1px solid rgba(23,23,23,.2); }
.stat:first-child{ border-left:0; }
.stat__n{
  font-family:var(--display);
  font-size:clamp(1.25rem,1.6vw,1.45rem); line-height:1;
  margin:0 0 8px; color:var(--ink);
}
.stat__l{ margin:0; font-size:.86rem; color:var(--on-light-mu); }

/* o número que está vivo agora: ponto pulsando ao lado */
.stat--vivo .stat__n{ display:inline-flex; align-items:center; gap:11px; }
.stat--vivo .stat__n::after{
  content:""; flex:none;
  width:11px; height:11px; border-radius:50%;
  background:var(--ink);
  animation:pulso 2.2s cubic-bezier(.3,0,.3,1) infinite;
}
@keyframes pulso{
  0%   { box-shadow:0 0 0 0 rgba(23,23,23,.45); }
  70%  { box-shadow:0 0 0 13px rgba(23,23,23,0); }
  100% { box-shadow:0 0 0 0 rgba(23,23,23,0); }
}
@media (prefers-reduced-motion: reduce){
  .stat--vivo .stat__n::after{ animation:none; }
}

/* ---------- o que conta como um criativo ---------- */

.regras{ list-style:none; padding:0; margin:0; border-top:1px solid var(--line-dark); }
.regras li{
  display:grid;
  grid-template-columns:150px 1fr auto 110px;
  align-items:center; gap:18px;
  padding:15px 0;
  border-bottom:1px solid var(--line-dark);
}
.regras__nome{
  font-family:var(--display); font-size:.92rem;
  text-transform:uppercase; letter-spacing:-.005em;
  display:flex; align-items:center; gap:9px;
}
.regras__nome::before{
  content:""; width:8px; height:14px; flex:none;
  background:var(--yellow);
}
.regras__d{ color:var(--on-dark-mu); font-size:.93rem; }
.regras__spec{
  font-family:var(--mono); font-size:.68rem;
  background:var(--ink-3); color:var(--on-dark-mu);
  padding:3px 9px; border-radius:3px;
}
.regras__conta{
  font-family:var(--mono); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--yellow); text-align:right;
}

@media (max-width: 640px){
  .regras li{
    grid-template-columns:1fr auto;
    gap:4px 12px; padding:13px 0;
  }
  .regras__nome{ grid-column:1; }
  .regras__spec{ grid-column:2; grid-row:1; justify-self:end; }
  .regras__d{ grid-column:1; font-size:.86rem; }
  .regras__conta{ grid-column:2; grid-row:2; }
}

/* ---------- planos ---------- */

.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,26px); }
.plan{
  position:relative;
  display:flex; flex-direction:column;
  border:1px solid var(--line-dark);
  border-radius:var(--r);
  background:var(--ink-2);
  padding:clamp(18px,1.8vw,22px);
}
.plan--best{
  background:var(--yellow); color:var(--ink);
  border-color:var(--yellow);
  box-shadow:0 0 60px rgba(255,198,39,.22);
}
.plan__flag{
  position:absolute; top:-12px; left:clamp(22px,2.4vw,30px);
  font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.12em;
  background:var(--ink); color:var(--yellow);
  padding:4px 11px; border-radius:3px;
  margin:0;
}
.plan__count{ font-family:var(--mono); font-size:.82rem; color:var(--on-dark-mu); margin:0 0 15px; text-transform:uppercase; letter-spacing:.08em; }
.plan--best .plan__count{ color:var(--gold-deep); }
.plan__count b{
  font-family:var(--display); font-size:1.15rem;
  color:var(--on-dark); margin-right:4px; letter-spacing:0;
}
.plan--best .plan__count b{ color:var(--ink); }

/* grade de peças: o volume do plano, em peças */
.plan__grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:5px;
  width:100%; max-width:168px; margin-bottom:18px;
}
.plan__grid i{
  display:block; aspect-ratio:1/1; border-radius:1px;
  background:var(--yellow);
  opacity:0; transform:scale(.5);
  transition:opacity .3s ease, transform .3s ease;
}
.plan--best .plan__grid i{ background:var(--ink); }
.plan__grid.is-on i{ opacity:.9; transform:scale(1); }

/* espaços que o plano não cobre */
.plan__grid i.is-off{
  background:transparent;
  border:1px solid rgba(255,198,39,.16);
  opacity:1; transform:none;
}
.plan--best .plan__grid i.is-off{ border-color:rgba(23,23,23,.2); }

@media (prefers-reduced-motion: reduce){
  .plan__grid i{ opacity:.9; transform:none; transition:none; }
  .plan__grid i.is-off{ opacity:1; }
}

.plan__price{
  font-family:var(--display);
  font-size:clamp(1.55rem,2vw,1.75rem); line-height:1;
  margin:0 0 6px;
}
.plan__cur{ font-size:.44em; vertical-align:.5em; margin-right:5px; }
.plan__per{ font-size:.3em; vertical-align:.3em; color:var(--on-dark-mu); font-family:var(--body); font-weight:500; }
.plan--best .plan__per{ color:var(--gold-deep); }
.plan__unit{
  font-family:var(--mono); font-size:.8rem; color:var(--yellow);
  margin:0 0 14px; text-transform:uppercase; letter-spacing:.07em;
}
.plan--best .plan__unit{ color:var(--gold-deep); }

/* o que muda de um plano para o outro */
.plan__save{
  margin:0 0 22px; padding:12px 14px;
  font-size:.86rem; line-height:1.42;
  background:rgba(255,198,39,.09);
  border-left:3px solid var(--yellow);
  border-radius:0 4px 4px 0;
  color:var(--on-dark);
}
.plan--best .plan__save{
  background:rgba(23,23,23,.09);
  border-left-color:var(--ink);
  color:var(--ink);
}

/* rótulo do que é igual em todos os planos */
.plan__all{
  font-family:var(--mono); font-size:.68rem;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--on-dark-mu);
  margin:0 0 14px; padding-top:16px;
  border-top:1px solid var(--line-dark);
}
.plan--best .plan__all{ color:var(--gold-deep); border-top-color:rgba(23,23,23,.24); }

.plan__list{ list-style:none; padding:0; margin:0 0 26px; }
.plan__list li{
  position:relative; padding-left:24px; margin-bottom:10px;
  font-size:.93rem; color:var(--on-dark-mu);
}
.plan--best .plan__list li{ color:var(--on-light-mu); }
.plan__list li::before{
  content:""; position:absolute; left:2px; top:.42em;
  width:9px; height:15px;
  background:var(--yellow);
}
.plan--best .plan__list li::before{ background:var(--ink); }
.plan .btn{ margin-top:auto; }
.plan--best .btn{ --bg:var(--ink); --fg:var(--yellow); --bd:var(--ink); }

/* ---------- quadro (processo) ---------- */

.board{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(9px,1.1vw,13px);
}
.board__col{
  background:var(--ink-2);
  border:1px solid var(--line-dark);
  border-radius:var(--r);
  padding:13px 12px 11px;
  display:flex; flex-direction:column; gap:10px;
}
.board__h{
  font-family:var(--mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.15em; color:var(--yellow); margin:0 0 2px;
}
.card{
  background:var(--ink-3);
  border:1px solid var(--line-dark);
  border-radius:4px;
  padding:11px 12px;
}
.card p{ margin:7px 0 0; font-size:.88rem; line-height:1.38; }
.card__tag{
  display:inline-block;
  font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.12em;
  padding:2px 8px; border-radius:3px;
}
.card__tag--pink{ background:var(--yellow); color:var(--ink); }
.card__tag--blue{ background:var(--gold); color:var(--on-dark); }
.card__tag--ok{ background:transparent; color:var(--yellow); border:1px solid var(--yellow); }
.card__due{
  display:inline-block; margin-top:9px;
  font-family:var(--mono); font-size:.66rem; color:var(--on-dark-mu);
}
.card--done{ opacity:.7; }
.board__note{
  margin:auto 0 0; padding-top:8px;
  font-size:.79rem; color:var(--on-dark-mu); line-height:1.42;
}

/* ---------- botão de seção ---------- */

.seccta{
  display:flex; justify-content:center;
  margin-top:clamp(22px,2.4vw,32px);
}
.seccta .btn{ min-width:220px; }

/* ---------- mural de prints ---------- */

/* colunas, não grade: print de conversa nunca tem altura igual */
.mural{
  column-count:4;
  column-gap:clamp(12px,1.4vw,18px);
}
.mural__item{
  break-inside:avoid;
  margin:0 0 clamp(12px,1.4vw,18px);
  position:relative;
  border:1px solid var(--line-dark);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--ink);
  cursor:zoom-in;
  transition:border-color .2s ease, translate .2s ease;
}
.mural__item:hover{ border-color:var(--yellow); translate:0 -3px; }
.mural__item img{ width:100%; height:auto; display:block; }

/* vagas com alturas diferentes, para o mural já nascer com cara de mural */
.mural__item.is-empty{
  cursor:default;
  background:repeating-linear-gradient(45deg, var(--ink) 0 10px, var(--ink-3) 10px 20px);
}
.mural__item.is-empty:hover{ border-color:var(--line-dark); translate:0 0; }
.mural__item.is-empty img{ display:none; }
.mural__item.is-empty::after{
  content:"vaga para print";
  display:grid; place-content:center; height:100%;
  font-family:var(--mono); font-size:.66rem; color:var(--on-dark-mu);
}
.mural__item.is-empty:nth-child(3n+1){ height:220px; }
.mural__item.is-empty:nth-child(3n+2){ height:300px; }
.mural__item.is-empty:nth-child(3n+3){ height:170px; }

/* ---------- ampliar o print ---------- */

.zoom{
  border:0; padding:0; background:transparent;
  max-width:min(560px, 92vw); max-height:92vh;
  overflow:visible;
}
.zoom::backdrop{ background:rgba(10,10,10,.88); backdrop-filter:blur(3px); }
.zoom__img{
  width:100%; height:auto; max-height:88vh; object-fit:contain;
  border:1px solid var(--line-yell); border-radius:var(--r);
}
.zoom__fechar{
  position:absolute; top:-14px; right:-14px;
  width:38px; height:38px; border-radius:50%;
  border:0; cursor:pointer;
  background:var(--yellow); color:var(--ink);
  font-size:1.5rem; line-height:1;
}

/* ---------- faq ---------- */

.faq{ border-top:2px solid var(--yellow); }
.fq{ border-bottom:1px solid var(--line-dark); }
.fq summary{
  list-style:none; cursor:pointer;
  padding:15px 40px 15px 0; position:relative;
  font-weight:600; font-size:.94rem;
}
.fq summary::-webkit-details-marker{ display:none; }
.fq summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:13px; height:13px; margin-top:-6px;
  background:
    linear-gradient(var(--yellow) 0 0) center/100% 2px no-repeat,
    linear-gradient(var(--yellow) 0 0) center/2px 100% no-repeat;
  transition:transform .22s ease;
}
.fq[open] summary::after{ transform:rotate(45deg); }
.fq summary:hover{ color:var(--yellow); }
.fq__body{ padding:0 8% 22px 0; }
.fq__body p{ margin:0; color:var(--on-dark-mu); }

/* ---------- formulário ---------- */

.form__wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(20px,2.6vw,38px);
  align-items:start;
}
.form__d{ color:var(--on-light-mu); margin:0 0 18px; font-size:.92rem; }
.form__marks{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.form__marks li{
  font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  position:relative; padding-left:20px;
}
.form__marks li::before{
  content:""; position:absolute; left:0; top:.3em;
  width:9px; height:16px;
  background:var(--ink);
}

.form{
  background:var(--ink);
  color:var(--on-dark);
  border:2px solid var(--ink);
  border-radius:var(--r);
  padding:clamp(15px,1.6vw,20px);
  max-width:520px;
  box-shadow:0 24px 60px rgba(23,23,23,.35);
}
.field{ margin-bottom:11px; }
.fieldset{ border:0; padding:0; margin-inline:0; }
.field label,
.field legend{
  display:block; font-size:.72rem; font-weight:600;
  margin-bottom:5px; padding:0;
  text-transform:uppercase; letter-spacing:.05em;
}
.opt{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--on-dark-mu); }
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field select,
.field textarea{
  width:100%;
  font-family:var(--body); font-size:.9rem; color:var(--on-dark);
  background:var(--ink-2);
  border:1px solid var(--line-dark);
  border-radius:4px;
  padding:.52em .7em;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.field textarea{ resize:vertical; min-height:52px; }
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--yellow) 50%),linear-gradient(135deg,var(--yellow) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:2.4em;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--yellow);
  box-shadow:0 0 0 3px rgba(255,198,39,.18);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 11px; }

.checks{ display:flex; flex-wrap:wrap; gap:6px; }
.check{ margin:0; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check span{
  display:inline-block;
  border:1px solid var(--line-dark); border-radius:4px;
  padding:.36em .75em; font-size:.8rem; cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.check input:checked + span{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); }
.check input:focus-visible + span{ outline:2px solid var(--yellow); outline-offset:2px; }

/* o campo de plano pisca quando chega preenchido pelo botão do plano */
#campo-plano{
  border-radius:6px;
  margin-inline:-8px; padding:8px;
  margin-bottom:4px;
}
#campo-plano.is-filled{ animation:planoPreenchido 1.1s ease; }
@keyframes planoPreenchido{
  0%   { background:rgba(255,198,39,.22); }
  100% { background:transparent; }
}
@media (prefers-reduced-motion: reduce){
  #campo-plano.is-filled{ animation:none; }
}

.consent{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--ink-2); border:1px solid var(--line-yell);
  border-radius:4px; padding:10px 12px; margin:4px 0 14px;
  cursor:pointer; font-size:.82rem;
}
.consent input{ width:16px; height:16px; margin:1px 0 0; accent-color:var(--yellow); flex:none; }
.consent:hover{ border-color:var(--yellow); }

.err{
  margin:4px 0 0;
  font-family:var(--mono); font-size:.66rem; color:#FF6B5A;
}
.field.is-bad input,
.field.is-bad select{ border-color:#FF6B5A; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__legal{ font-size:.68rem; color:var(--on-dark-mu); margin:10px 0 0; line-height:1.45; }
.form__status{ margin:14px 0 0; font-size:.91rem; font-weight:600; }
.form__status.is-ok{ color:var(--yellow); }
.form__status.is-bad{ color:#FF6B5A; }
/* o card do formulário é preto, então o botão dentro dele volta a ser amarelo */
.section--yellow .form .btn{ --bg:var(--yellow); --fg:var(--ink); --bd:var(--yellow); }
.section--yellow .form .btn:hover{ box-shadow:0 10px 26px rgba(255,198,39,.28); }

.form.is-sent{ text-align:center; }
.form.is-sent .eyebrow{ justify-content:center; }
.form.is-sent .form__d{ color:var(--on-dark-mu); }

/* ---------- rodapé ---------- */

.foot{
  background:var(--ink); color:var(--on-dark);
  padding-block:clamp(28px,3.2vw,42px);
  border-top:1px solid var(--line-dark);
}
.foot__in{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.foot__d{ margin:0; color:var(--on-dark-mu); }
.foot__c{ margin:16px 0 0; font-family:var(--mono); font-size:.73rem; color:var(--on-dark-mu); }

/* =========================================================
   MOVIMENTO
   Regra: todo movimento tem função. Nada atrasa o carregamento
   e nada disputa atenção com o botão. Só opacity, transform,
   translate e scale, que rodam na GPU. Zero biblioteca.
   ========================================================= */

/* âncoras não ficam escondidas atrás do header fixo */
section[id]{ scroll-margin-top:86px; }

/* ---------- 1. abertura da página ---------- */

/* o título sobe palavra por palavra, atrás de uma máscara */
.display .w{
  display:inline-block; overflow:hidden;
  vertical-align:bottom; padding-bottom:.08em;
}
.display .w i{
  display:inline-block; font-style:normal;
  translate:0 105%;
  animation:palavraSobe .66s cubic-bezier(.19,.85,.24,1) forwards;
}
@keyframes palavraSobe{ to{ translate:0 0; } }

/* o resto do hero entra depois do título */
.js .hero__text > :not(.display){
  opacity:0;
  animation:entra .6s ease forwards;
}
.js .hero__text > .eyebrow{ animation-delay:.05s; }
.js .hero__text > .lead{ animation-delay:.42s; }
.js .hero__text > .hero__cta{ animation-delay:.52s; }
.js .hero__text > .hero__note{ animation-delay:.62s; }
@keyframes entra{ from{ opacity:0; translate:0 14px; } to{ opacity:1; translate:0 0; } }

/* a foto entra, e o selo de 24h fecha */
.js .hero__foto,
.js .hero .stamp{
  opacity:0; scale:.96;
  animation:pecaEntra .8s cubic-bezier(.19,.85,.24,1) forwards;
}
.js .hero__foto{ animation-delay:.24s; }
.js .hero .stamp{ animation-delay:.7s; animation-duration:.5s; }
@keyframes pecaEntra{ to{ opacity:1; scale:1; } }

/* a luz do fundo cresce junto */
.js .hero::before{ opacity:0; animation:luz 1.6s ease .1s forwards; }
@keyframes luz{ to{ opacity:1; } }

/* ---------- 2. paralaxe do ponteiro na prancheta ---------- */

.hero__foto img,
.hero .stamp{
  transition:translate .5s cubic-bezier(.2,.7,.2,1);
  will-change:translate;
}

/* ---------- 3. revelação no scroll ---------- */

.js .reveal{ opacity:0; translate:0 20px; }
.js .reveal.is-in{
  opacity:1; translate:0 0;
  transition:opacity .6s ease var(--d,0ms), translate .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms);
}

/* os cantos da caixa delimitadora dão o "clique" depois do bloco assentar */
.js .bbox::before,
.js .bbox::after{ opacity:0; scale:.35; }
.js .bbox.is-in::before,
.js .bbox.is-in::after{
  opacity:1; scale:1;
  transition:opacity .3s ease .3s, scale .4s cubic-bezier(.2,1.3,.4,1) .3s;
}
.js .bbox::before{ transform-origin:top left; }
.js .bbox::after{ transform-origin:bottom right; }

/* ---------- 4. micro-interações ---------- */

/* a faixa amarela para quando o visitante quer ler */
.ticker:hover .ticker__in{ animation-play-state:paused; }

/* header encolhe depois do primeiro scroll */
.head__in{ transition:height .25s ease; }
.head.is-scrolled{ background:rgba(23,23,23,.94); border-bottom-color:var(--line-yell); }
.head.is-scrolled .head__in{ height:56px; }

/* cartões respondem ao ponteiro */
.plan{ transition:translate .25s ease, border-color .25s ease; }
.plan:hover{ translate:0 -4px; border-color:var(--line-yell); }
.plan--best:hover{ border-color:var(--yellow); }
.card{ transition:translate .2s ease, border-color .2s ease; }
.board__col:hover .card{ border-color:var(--line-yell); }

/* resposta de abertura na dúvida */
.fq[open] .fq__body{ animation:fqAbre .3s ease; }
@keyframes fqAbre{ from{ opacity:0; translate:0 -6px; } }

/* números contam quando entram na tela (o JS cuida do valor) */
.stat__n{ font-variant-numeric:tabular-nums; }

/* ---------- 5. quem pediu menos movimento, recebe menos ---------- */

@media (prefers-reduced-motion: reduce){
  .js .reveal,
  .js .hero__text > :not(.display),
  .js .hero__foto,
  .js .hero .stamp,
  .js .bbox::before,
  .js .bbox::after,
  .js .hero::before{
    opacity:1; translate:0 0; scale:1; animation:none; transition:none;
  }
  .display .w i{ translate:0 0; animation:none; }
  .ticker__in{ animation:none; }
  .plan:hover,
  .btn:hover{ transform:none; }
}

/* ---------- responsivo ---------- */

@media (max-width: 980px){
  .hero__in{ grid-template-columns:1fr; }
  .hero__foto{ inset:0; }
  .hero__in{ min-height:clamp(440px,66vh,600px); }
  .hero__text{ max-width:none; }
  .head__nav{ display:none; }
  .pf{ grid-template-columns:repeat(2,1fr); }
  .plans{ grid-template-columns:1fr; }
  .board{ grid-template-columns:repeat(2,1fr); }
  .mural{ column-count:3; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(odd){ border-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid rgba(23,23,23,.2); }
  .form__wrap{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  body{ font-size:16px; }
  .mural{ column-count:2; }
  .board{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .stamp{ width:78px; height:78px; }
  .stamp__n{ font-size:1.2rem; }
  .hero__cta .btn{ width:100%; }
  .bbox::before{ top:-10px; left:-10px; }
  .bbox::after{ bottom:-10px; right:-10px; }
}

/* =========================================================
   MENU DO MOBILE
   ========================================================= */

.sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

.head__menu{ display:none; }
.head__nav-cta{ display:none; }

@media (max-width: 980px){
  .head__menu{
    display:grid; place-items:center;
    width:42px; height:42px; flex:none;
    background:transparent; cursor:pointer;
    border:1px solid var(--line-dark);
    border-radius:var(--r);
    color:var(--on-dark);
  }
  .head__menu-linhas{ display:grid; gap:4px; width:18px; }
  .head__menu-linhas i{
    height:2px; background:currentColor; border-radius:2px;
    transition:translate .2s ease, rotate .2s ease, opacity .2s ease;
  }
  .head__menu[aria-expanded="true"]{ border-color:var(--yellow); color:var(--yellow); }
  .head__menu[aria-expanded="true"] i:nth-child(1){ translate:0 6px; rotate:45deg; }
  .head__menu[aria-expanded="true"] i:nth-child(2){ opacity:0; }
  .head__menu[aria-expanded="true"] i:nth-child(3){ translate:0 -6px; rotate:-45deg; }

  /* o painel: um item por linha, alvo grande para o dedo */
  .head__nav{
    display:block;
    position:absolute; top:100%; left:0; right:0;
    background:var(--ink);
    border-bottom:1px solid var(--line-yell);
    padding:8px var(--gut) 22px;
    max-height:calc(100dvh - 66px);
    overflow-y:auto;
    translate:0 -8px; opacity:0; visibility:hidden;
    transition:translate .22s ease, opacity .22s ease, visibility .22s;
  }
  .head__nav.is-open{ translate:0 0; opacity:1; visibility:visible; }
  .head__nav a{
    display:block; padding:15px 0;
    font-size:1.02rem; color:var(--on-dark);
    border-bottom:1px solid var(--line-dark);
  }
  .head__nav a:hover{ border-bottom-color:var(--line-dark); }
  .head__nav a.head__nav-cta{
    display:flex; margin-top:20px;
    border-bottom:0; padding:.95em 1.5em;
    color:var(--ink);
  }
  .head__cta{ display:none; }
  body.menu-aberto{ overflow:hidden; }
}

/* =========================================================
   AJUSTES DO MOBILE
   Menos peso de tipo, mais respiro entre blocos.
   ========================================================= */

@media (max-width: 640px){

  :root{ --gut:22px; --sec:66px; }

  /* tipografia: o título deixa de ocupar meia tela */
  .display{ font-size:1.52rem; line-height:1.1; margin:.5em 0 .55em; }
  .h2{ font-size:1.26rem; line-height:1.14; }
  .lead{ font-size:.95rem; line-height:1.6; margin-bottom:1.6rem; }
  .shead__sub{ font-size:.92rem; }
  .plan__price{ font-size:1.85rem; }
  .stat__n{ font-size:1.5rem; }
  .fq summary{ font-size:.92rem; padding:17px 40px 17px 0; }
  .fq__body{ padding-right:0; }
  .fq__body p{ font-size:.9rem; }

  /* etiqueta de seção em uma linha só, com o raio alinhado ao texto */
  .eyebrow{ font-size:.62rem; letter-spacing:.12em; align-items:flex-start; gap:7px; }
  .eyebrow::before{ width:7px; height:12px; margin-top:2px; }

  /* respiro entre os blocos de cada seção */
  .shead{ margin-bottom:30px; }
  .section{ padding-block:var(--sec); }

  /* hero: os dois botões dividem a linha, o selo sai de cima do texto */
  .hero__in{ min-height:auto; padding-block:44px 40px; }
  .hero__cta{ gap:10px; }
  .hero__cta .btn{ width:auto; flex:1 1 0; padding-inline:.6em; font-size:.9rem; }
  .hero__note{ font-size:.72rem; margin-top:1.2rem; }
  .stamp{ top:14px; right:0; bottom:auto; width:66px; height:66px; }
  .stamp__n{ font-size:1.05rem; }
  .stamp__l{ font-size:.5rem; }

  /* faixa amarela mais discreta */
  .ticker{ padding-block:9px; }
  .ticker__in span{ font-size:.68rem; padding-inline:16px; gap:16px; }

  /* mural: dois por linha, coladinhos, para ler como mural mesmo */
  .mural{ column-gap:8px; }
  .mural__item{ margin-bottom:8px; }

  /* planos: a grade de peças não precisa dominar o cartão */
  .plan{ padding:22px 20px; }
  .plan__grid{ max-width:168px; gap:4px; margin-bottom:20px; }
  .plan__list li{ font-size:.88rem; margin-bottom:8px; }
  .plan__save{ font-size:.82rem; padding:10px 12px; }

  /* quadro do processo */
  .board__col{ padding:14px 13px 12px; }
  .card p{ font-size:.85rem; }

  /* formulário */
  .form{ padding:16px 15px; max-width:none; }
  .field{ margin-bottom:10px; }
  .field label, .field legend{ font-size:.7rem; }
  .form__marks li{ font-size:.74rem; }
  .btn--big{ font-size:.98rem; padding:.95em 1.4em; }
  .form__legal{ font-size:.72rem; }

  /* cantos da caixa delimitadora encostam menos na borda */
  .bbox::before{ top:-8px; left:-8px; }
  .bbox::after{ bottom:-8px; right:-8px; }
}

/* telas bem estreitas */
@media (max-width: 380px){
  .display{ font-size:1.4rem; }
  .hero__cta{ flex-direction:column; }
  .hero__cta .btn{ width:100%; }
}