/* ============================================================
   DupreeCreative — landing page
   Paleta e tipografia derivadas do layout original (Canva).
   ============================================================ */

/* Open Sauce Sans — self-hospedada (SIL OFL), baixada do repositório
   oficial github.com/marcologous/Open-Sauce-Fonts */
@font-face{
  font-family:'Open Sauce Sans';src:url('../fonts/OpenSauceSans-Regular.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Open Sauce Sans';src:url('../fonts/OpenSauceSans-Italic.otf') format('opentype');
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Open Sauce Sans';src:url('../fonts/OpenSauceSans-Medium.otf') format('opentype');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Open Sauce Sans';src:url('../fonts/OpenSauceSans-SemiBold.otf') format('opentype');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Open Sauce Sans';src:url('../fonts/OpenSauceSans-Bold.otf') format('opentype');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Open Sauce Sans';src:url('../fonts/OpenSauceSans-ExtraBold.otf') format('opentype');
  font-weight:800;font-style:normal;font-display:swap;
}

:root{
  /* cores */
  --teal-900:#083A40;
  --teal-800:#0B464C;
  --teal-700:#0E5054;   /* fundo das seções escuras / header */
  --teal-600:#14636B;
  --teal-500:#1C707A;
  --sage:#4E8285;       /* script no fundo claro */
  --sand:#D6D8D3;       /* fundo das seções claras */
  --sand-2:#C9CCC6;
  --cream:#DCDCD8;      /* texto claro */
  --white:#F2F3F0;

  /* tipografia */
  --sans:'Open Sauce Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --script:'Sriracha','Kaushan Script','Brush Script MT',cursive;

  /* ritmo */
  --wrap:1180px;
  --pad:clamp(20px,5vw,48px);
  --sec-y:clamp(72px,11vw,148px);
  --abertura-y:clamp(80px,10vw,120px);   /* respiro das duas seções de abertura */
  --r-lg:28px;
  --r-md:18px;

  /* movimento — easing "apple" */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --hdr-h:66px;
}

/* ── reset ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,figure,ul,blockquote{margin:0}
ul{padding:0;list-style:none}
img,video,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 12px)}

body{
  font-family:var(--sans);
  background:var(--sand);
  color:var(--teal-800);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.skip{
  position:fixed;top:-100px;left:16px;z-index:200;
  padding:12px 18px;border-radius:12px;
  background:var(--teal-700);color:var(--white);
  transition:top .2s var(--ease);
}
.skip:focus{top:12px}

:focus-visible{outline:2.5px solid var(--sage);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

/* ── header ───────────────────────────────────────────────── */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  height:var(--hdr-h);
  background:color-mix(in srgb,var(--teal-700) 88%,transparent);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  color:var(--cream);
  transition:height .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease);
}
.hdr.is-stuck{height:56px;box-shadow:0 8px 30px rgba(0,0,0,.22)}
.hdr__in{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
}
/* barra de progresso da leitura */
.hdr__prog{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
}
.hdr__prog::after{
  content:"";position:absolute;left:0;top:0;height:100%;
  width:100%;transform:scaleX(var(--scroll,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--sage),var(--cream));
}

.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand__mark{
  width:34px;height:34px;object-fit:contain;
  transition:transform .6s var(--ease);
}
.brand:hover .brand__mark{transform:rotate(-8deg) scale(1.06)}
.brand__txt{
  font-weight:800;letter-spacing:-.02em;font-size:1.02rem;
  color:var(--white);white-space:nowrap;
}
.brand__txt span{color:var(--sage);filter:brightness(1.35)}

.nav{position:relative;display:flex;align-items:center;gap:4px}
.nav__a{
  position:relative;z-index:1;
  padding:9px 16px;border-radius:999px;
  font-weight:600;font-size:.95rem;
  color:color-mix(in srgb,var(--cream) 72%,transparent);
  transition:color .35s var(--ease);
}
.nav__a:hover{color:var(--white)}
.nav__a.is-active{color:var(--teal-900)}
.nav__pill{
  position:absolute;z-index:0;top:50%;left:0;
  height:36px;width:0;border-radius:999px;
  background:var(--cream);
  transform:translateY(-50%);
  transition:transform .55s var(--ease),width .55s var(--ease),opacity .3s;
  opacity:0;
}
.nav__pill.is-on{opacity:1}

.burger{display:none;width:42px;height:42px;position:relative;border-radius:12px}
.burger span{
  position:absolute;left:11px;width:20px;height:2px;border-radius:2px;background:var(--cream);
  transition:transform .45s var(--ease),opacity .3s var(--ease);
}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:24px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ── seções ───────────────────────────────────────────────── */
.sec{position:relative;padding-block:var(--sec-y);overflow:hidden}
.sec--sand{background:var(--sand);color:var(--teal-800)}
.sec--teal{background:var(--teal-700);color:var(--cream)}

/* grão sutil, como no layout original */
.sec::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  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%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
/* textura de fundo (input/Dupree/TEXTURA111.png, otimizada pra web) */
.sec::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.1;
  background-image:url("../img/texture.jpg");
  background-repeat:repeat;
}
.sec > *{position:relative;z-index:1}

/* ── tipografia ───────────────────────────────────────────── */
.eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sage);margin-bottom:18px;
}
.h-display{
  font-size:clamp(2.6rem,6.9vw,4.75rem);
  font-weight:800;line-height:.78;letter-spacing:-.035em;
  color:var(--teal-800);
}
.h-display--sm{font-size:clamp(2.3rem,6.2vw,4.2rem)}
.h-display .line,.h-sec .line{display:block}

/* linhas que sobem por trás de uma máscara — o padding/margin compensados
   dão folga pros ascendentes e descendentes do script não serem cortados */
/* no título quem anima são as linhas, não o bloco inteiro */
.split.reveal{opacity:1;transform:none}
.split .line{
  display:block;overflow:hidden;
  padding:.2em 0 .34em;margin:-.2em 0 -.34em;
}
.split .line > i{
  display:block;font-style:normal;
  transform:translateY(115%);
  transition:transform 1.05s var(--ease);
}
.split.is-in .line:nth-child(1) > i{transform:none;transition-delay:.04s}
.split.is-in .line:nth-child(2) > i{transform:none;transition-delay:.14s}
.split.is-in .line:nth-child(3) > i{transform:none;transition-delay:.24s}

/* o script tem x-height baixa: sobe o corpo pra casar com o sans ao lado */
.script{
  font-family:var(--script);font-style:normal;font-weight:400;
  color:var(--sage);
  font-size:1.24em;line-height:.86;
  display:inline-block;
  padding-right:.08em;
  transform:translateY(.04em);
}
.script--cream{color:var(--cream)}

.h-sec{
  font-size:clamp(2.2rem,5.6vw,3.6rem);
  font-weight:800;line-height:.78;letter-spacing:-.03em;
  color:var(--white);margin-bottom:26px;
}
.h-block{
  font-size:clamp(2rem,4.6vw,3rem);
  font-weight:800;letter-spacing:-.03em;line-height:1;
}
.sec--teal .h-block{color:var(--white)}
.sec--sand .h-block{color:var(--teal-700)}

.lead{font-size:clamp(1.02rem,1.5vw,1.18rem);max-width:52ch}
.lead b{font-weight:800}
.sec--sand .lead{color:color-mix(in srgb,var(--teal-800) 88%,transparent)}

/* ── botões ───────────────────────────────────────────────── */
.btn{
  --bg:transparent;--fg:var(--teal-800);--bd:currentColor;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:999px;
  font-weight:700;font-size:1rem;letter-spacing:-.01em;
  background:var(--bg);color:var(--fg);
  border:1.8px solid var(--bd);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),
             background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}

.btn--ghost{--bg:transparent;--fg:var(--teal-800);--bd:var(--teal-700)}
.btn--ghost:hover{--bg:var(--teal-700);--fg:var(--white);box-shadow:0 12px 30px rgba(14,80,84,.26)}

.btn--solid{
  --fg:var(--white);--bd:transparent;
  background:linear-gradient(115deg,var(--teal-500),var(--teal-700));
  box-shadow:0 10px 26px rgba(14,80,84,.3);
}
.btn--solid:hover{box-shadow:0 16px 38px rgba(14,80,84,.4)}

.btn--light{--bg:var(--cream);--fg:var(--teal-800);--bd:transparent}
.btn--light:hover{--bg:var(--white);box-shadow:0 14px 34px rgba(0,0,0,.24)}

.btn--full{width:100%}
.btn--wa .wa{width:20px;height:20px;fill:currentColor}

.btn__arrow{
  width:16px;height:2px;background:currentColor;position:relative;border-radius:2px;
  transition:transform .45s var(--ease);
}
.btn__arrow::after{
  content:"";position:absolute;right:0;top:50%;width:8px;height:2px;border-radius:2px;
  background:currentColor;transform-origin:right center;
  transform:translateY(-50%) rotate(45deg);
  box-shadow:0 0 0 0 currentColor;
}
.btn__arrow::before{
  content:"";position:absolute;right:0;top:50%;width:8px;height:2px;border-radius:2px;
  background:currentColor;transform-origin:right center;
  transform:translateY(-50%) rotate(-45deg);
}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* ── hero ─────────────────────────────────────────────────── */
.hero{
  min-height:100svh;
  display:flex;align-items:center;
  padding-top:calc(var(--hdr-h) + var(--abertura-y));
  padding-bottom:var(--abertura-y);
}
.hero__mascot{
  position:absolute;z-index:0;
  top:6%;left:28%;width:min(58vw,760px);
  opacity:.055;pointer-events:none;
  filter:grayscale(1);
}
.hero__grid{
  display:grid;gap:clamp(36px,6vw,72px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
}
.hero__copy{min-width:0}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,4vw,40px)}
.lead{margin-top:22px}

/* álbum do hero — vai passando os trabalhos sozinho */
.album{
  position:relative;
  aspect-ratio:1/1.02;
  /* nunca mais alta que o bloco livre do hero (1.02 = a própria proporção),
     senão em tela baixa ela empurra a seção pra fora do 100svh */
  max-width:calc((100svh - var(--hdr-h) - var(--abertura-y) * 2) / 1.02);
  margin-inline:auto;
  background:var(--teal-700);
  border:5px solid var(--teal-600);
  border-radius:var(--r-lg);
  box-shadow:0 30px 70px -24px rgba(8,58,64,.55);
  overflow:hidden;
}
.album__slide{
  position:absolute;inset:0;margin:0;
  opacity:0;transition:opacity 1.2s var(--ease);
}
.album__slide.is-active{opacity:1;z-index:1}
.album__slide img{width:100%;height:100%;object-fit:cover}

.album__dots{
  position:absolute;left:50%;bottom:16px;z-index:2;
  transform:translateX(-50%);
  display:flex;gap:8px;
}
.album__dots i{
  width:6px;height:6px;border-radius:50%;
  background:var(--cream);opacity:.4;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.album__dots i.is-active{opacity:1;transform:scale(1.3)}

.scroll-cue{
  position:absolute;left:50%;bottom:26px;z-index:2;
  transform:translateX(-50%);
  opacity:.55;transition:opacity .3s var(--ease),transform .5s var(--ease);
}
.scroll-cue:hover{opacity:1;transform:translateX(-50%) translateY(3px)}
.scroll-cue__mouse{
  display:block;width:24px;height:38px;border-radius:14px;
  border:2px solid currentColor;position:relative;
}
.scroll-cue__mouse i{
  position:absolute;left:50%;top:8px;width:3px;height:7px;border-radius:2px;
  background:currentColor;transform:translateX(-50%);
  animation:cue 1.8s var(--ease) infinite;
}
@keyframes cue{0%,100%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}70%{opacity:0;transform:translate(-50%,11px)}}

/* ── sobre ────────────────────────────────────────────────── */
/* mesma caixa vertical do hero: no PDF as duas seções de abertura
   são slides do mesmo tamanho */
.about{
  min-height:100svh;
  display:grid;align-content:center;
  padding-block:var(--abertura-y);
}
.about__grid{
  display:grid;gap:clamp(24px,3vw,40px);
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  align-items:center;
}
.about__copy p{margin-bottom:18px;max-width:46ch;color:color-mix(in srgb,var(--cream) 92%,transparent)}
.about__copy b{color:var(--white);font-weight:800}

/* a foto sangra pra direita; 1.341 é a proporção do PNG (1050×783) e trava a
   largura pra altura nunca estourar o bloco da seção */
.about__art{position:relative}
/* brilho + sombra de chão atrás da equipe — sem isso os três parecem flutuando.
   a sombra sai por baixo da própria foto (bottom negativo) pra aparecer contra
   o fundo teal liso; em cima da própria foto ela não se via de jeito nenhum */
.about__art::before{
  content:"";position:absolute;z-index:0;
  left:0;right:-8%;bottom:-6%;height:60%;
  background:radial-gradient(60% 60% at 50% 100%,color-mix(in srgb,var(--sage) 65%,transparent),transparent 74%);
  filter:blur(6px);
}
.about__art::after{
  content:"";position:absolute;z-index:1;
  left:12%;right:12%;bottom:-16px;height:clamp(22px,3.4vw,38px);
  background:radial-gradient(ellipse,rgba(2,18,20,.7),transparent 72%);
  filter:blur(3px);
}
.team{
  position:relative;z-index:2;
  width:min(132%,calc((100svh - var(--abertura-y) * 2) * 1.341));
  max-width:none;height:auto;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.28));
}

/* ── cabeçalho dos blocos ─────────────────────────────────── */
.block__head{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  column-gap:20px;
  margin-bottom:clamp(30px,4.5vw,52px);
}
.block__meta{
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;opacity:.62;
}
.block__head .rule{grid-column:1/-1}

/* ── stories & vertical ───────────────────────────────────── */
/* carrossel: a lista de trabalhos cresce, então rola em vez de quebrar linha */
.verticals__wrap{position:relative}
.verticals{
  display:flex;gap:clamp(14px,2vw,26px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--pad);
  scrollbar-width:none;
}
.verticals::-webkit-scrollbar{display:none}
.vcell{margin:0;flex:0 0 auto;width:min(230px,60vw);scroll-snap-align:start}
.vcell__screen{
  position:relative;display:block;width:100%;padding:0;
  aspect-ratio:9/16;
  border-radius:22px;overflow:hidden;
  background:var(--teal-900);
  border:2px solid var(--sage);
  box-shadow:0 22px 48px -22px rgba(0,0,0,.55);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .45s var(--ease);
}
.sec--sand .vcell__screen{border-color:var(--teal-700)}
.vcell:hover .vcell__screen{transform:translateY(-6px);box-shadow:0 30px 60px -24px rgba(0,0,0,.65)}
.vcell__screen img,.vcell__screen video{width:100%;height:100%;object-fit:cover}
.vcell__screen img{transition:transform 1.1s var(--ease)}
.vcell:hover .vcell__screen img{transform:scale(1.05)}
.vcell figcaption{
  margin-top:14px;display:flex;flex-direction:column;gap:2px;
}
.vcell figcaption b{font-weight:700;font-size:.96rem}
.vcell figcaption span{font-size:.76rem;letter-spacing:.06em;opacity:.62}

/* setas do carrossel */
.verticals__nav{
  position:absolute;top:42%;z-index:2;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  font-size:1.7rem;line-height:1;
  color:var(--teal-700);
  background:color-mix(in srgb,var(--sand) 92%,transparent);
  border:1.5px solid color-mix(in srgb,var(--teal-700) 28%,transparent);
  box-shadow:0 14px 30px -16px rgba(8,58,64,.4);
  transform:translateY(-50%);
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),opacity .3s var(--ease);
}
.verticals__nav:hover{background:var(--teal-700);color:var(--white)}
.verticals__nav--prev{left:clamp(-10px,-2vw,-22px)}
.verticals__nav--next{right:clamp(-10px,-2vw,-22px)}
.verticals__nav[disabled]{opacity:.3;pointer-events:none}

/* botão de som dos vídeos */
.v__sound{
  position:absolute;right:10px;bottom:10px;z-index:2;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(8,58,64,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.v__sound:hover{background:rgba(8,58,64,.8);transform:scale(1.06)}
.v__sound svg{width:22px;height:22px;fill:var(--white);stroke:var(--white);stroke-width:0}
.v__sound .ic-x{stroke-width:2;stroke-linecap:round;fill:none}
.v__sound.is-on .ic-x{display:none}

/* mascote decorativo no canto */
.mascot-tag{
  position:absolute;right:clamp(16px,3vw,48px);bottom:clamp(16px,3vw,40px);
  width:clamp(54px,7vw,84px);opacity:.9;z-index:1;pointer-events:none;
}
.mascot-tag--dark{opacity:.85}

/* ── contato ──────────────────────────────────────────────── */
.contact__mascot{
  position:absolute;left:-6%;top:4%;width:min(46vw,540px);
  opacity:.05;filter:grayscale(1);pointer-events:none;z-index:0;
}
.contact__grid{
  display:grid;gap:clamp(34px,5vw,64px);
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  align-items:center;
}
/* estica a coluna de texto pra altura do card e empurra o botão de WhatsApp
   pro rodapé — sem isso ele fica colado no texto, alto demais */
.contact__copy{align-self:stretch;display:flex;flex-direction:column}
.contact__wa{margin-top:auto;padding-top:28px}

.card{
  background:var(--teal-700);
  border-radius:var(--r-lg);
  padding:clamp(24px,3.4vw,38px);
  box-shadow:0 34px 70px -28px rgba(8,58,64,.6);
  color:var(--cream);
}
.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-weight:700;font-size:.94rem;color:var(--white)}
.field input,.field textarea{
  width:100%;padding:14px 16px;border-radius:12px;
  background:color-mix(in srgb,var(--teal-900) 45%,transparent);
  border:1.5px solid rgba(255,255,255,.24);
  color:var(--white);
  transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
  resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.4)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--cream);
  background:color-mix(in srgb,var(--teal-900) 62%,transparent);
  box-shadow:0 0 0 4px rgba(255,255,255,.08);
}
.field.is-bad input,.field.is-bad textarea{border-color:#E98A7A}
.err{min-height:0;font-size:.8rem;color:#F0A99B;display:none}
.field.is-bad .err{display:block}
.form__note{font-size:.76rem;opacity:.6;text-align:center;margin-top:2px}

/* assinatura da equipe fechando a página, no lugar do antigo rodapé */
.credit{
  grid-column:1/-1;
  margin-top:clamp(28px,4vw,50px);padding-top:22px;
  border-top:1px solid color-mix(in srgb,var(--teal-700) 20%,transparent);
  font-size:.82rem;letter-spacing:.04em;
  opacity:.6;
}

/* ── WhatsApp flutuante ───────────────────────────────────── */
.wa-float{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:120;
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:#25D366;color:#fff;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.45);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.wa-float .wa{width:27px;height:27px;fill:currentColor}
.wa-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 20px 42px -12px rgba(0,0,0,.55)}

/* ── lightbox ─────────────────────────────────────────────── */
.lb{
  position:fixed;inset:0;z-index:150;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  padding:clamp(16px,4vw,48px);
  background:rgba(6,32,36,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transition:opacity .4s var(--ease);
}
.lb[hidden]{display:none}
.lb.is-open{opacity:1}
.lb__fig{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  min-width:0;max-height:100%;
}
.lb__fig img{
  max-height:80vh;width:auto;border-radius:16px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  transform:scale(.96);opacity:0;
  transition:transform .5s var(--ease),opacity .4s var(--ease);
}
.lb.is-open .lb__fig img{transform:none;opacity:1}
.lb__fig figcaption{color:var(--cream);font-size:.9rem;opacity:.75}
.lb__close{
  position:absolute;top:clamp(12px,2.4vw,26px);right:clamp(12px,2.4vw,26px);
  width:44px;height:44px;border-radius:50%;font-size:1.8rem;line-height:1;
  color:var(--cream);background:rgba(255,255,255,.08);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.lb__close:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}
.lb__nav{
  width:52px;height:52px;border-radius:50%;font-size:2.1rem;line-height:1;
  color:var(--cream);background:rgba(255,255,255,.07);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.lb__nav:hover{background:rgba(255,255,255,.18);transform:scale(1.07)}

/* ── animações de entrada ─────────────────────────────────── */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}

.parallax{will-change:transform}

/* ── construção ligada ao scroll ──────────────────────────────
   O JS escreve --p (0 → 1) em cada [data-build] conforme ele
   atravessa a viewport. Sem JS, --p vale 1 e tudo fica montado. */
[data-build]{--p:1;will-change:transform,opacity}

[data-build="frame"]{
  opacity:calc(.25 + var(--p) * .75);
  transform:scale(calc(.93 + var(--p) * .07));
}
[data-build="rise"]{
  opacity:var(--p);
  transform:translate3d(0,calc((1 - var(--p)) * 58px),0) scale(calc(.965 + var(--p) * .035));
}
[data-build="card"]{
  opacity:var(--p);
  transform:translate3d(0,calc((1 - var(--p)) * 76px),0) scale(calc(.94 + var(--p) * .06));
}
[data-build="cell"]{
  clip-path:inset(calc((1 - var(--p)) * 100%) 0 0 0 round var(--r-md));
  transform:translate3d(0,calc((1 - var(--p)) * 36px),0);
}

/* filete que se desenha embaixo do título do bloco */
.rule{
  display:block;height:1px;margin-top:26px;
  background:currentColor;opacity:.2;
  transform:scaleX(var(--p));transform-origin:0 50%;
}

/* ── responsivo ───────────────────────────────────────────── */

/* laptop de tela baixa: aperta o respiro pra hero e sobre continuarem
   cabendo em 100svh, do contrário o hero estoura e as duas desalinham */
@media (min-width:981px) and (max-height:860px){
  :root{--abertura-y:clamp(44px,7vh,72px)}
}

/* janela bem baixa (ex.: 1024×600): só apertar o respiro não basta, o próprio
   bloco de texto do hero é maior que a sobra — a display encolhe junto */
@media (min-width:981px) and (max-height:680px){
  .h-display{font-size:clamp(2.2rem,5.4vw,3.4rem)}
  .eyebrow{margin-bottom:12px}
  .lead{margin-top:16px}
  .cta{margin-top:22px}
}

@media (max-width:980px){
  .hero__grid,.about__grid,.contact__grid{grid-template-columns:minmax(0,1fr)}
  .hero,.about{min-height:auto}
  .hero__art{max-width:440px;margin-inline:auto}
  .about__art{max-width:520px;margin-inline:auto}
  .team{width:100%}
}

/* celular deitado: tela baixíssima, os títulos passam a se medir pela altura
   (svh) em vez da largura, senão a display sozinha ocupa a dobra inteira */
@media (max-width:980px) and (max-height:520px){
  :root{--abertura-y:clamp(28px,6vh,52px)}
  .h-display{font-size:min(clamp(2.6rem,7.4vw,5.1rem),13svh)}
  .h-sec{font-size:min(clamp(2.2rem,5.6vw,3.6rem),10svh)}
  .hero__art{max-width:300px}
  .about__art{max-width:360px}
}

@media (max-width:720px){
  :root{--hdr-h:60px}
  .burger{display:block}
  .nav{
    position:fixed;inset:var(--hdr-h) 0 auto;
    flex-direction:column;align-items:stretch;gap:0;
    padding:14px var(--pad) 26px;
    background:var(--teal-700);
    box-shadow:0 24px 40px -20px rgba(0,0,0,.5);
    border-bottom:1px solid rgba(255,255,255,.14);
    transform:translateY(-120%);opacity:0;pointer-events:none;
    transition:transform .5s var(--ease),opacity .35s var(--ease);
  }
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav__a{padding:14px 4px;font-size:1.08rem;border-radius:10px}
  .nav__a.is-active{color:var(--white)}
  .nav__pill{display:none}

  .vcell{width:min(200px,58vw)}
  .verticals__nav{width:38px;height:38px;font-size:1.4rem}
  .block__head{grid-template-columns:1fr}
  .block__meta{grid-column:1;justify-self:start;padding-top:8px}
  .cta .btn{flex:1 1 100%}
  .lb{grid-template-columns:1fr}
  .lb__nav{position:absolute;bottom:20px}
  .lb__nav--prev{left:22px}
  .lb__nav--next{right:22px}
}

/* ── acessibilidade de movimento ──────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  .split .line > i{transform:none}
  .parallax{transform:none !important}
  [data-build]{--p:1 !important}
  [data-build="cell"]{clip-path:none}
}