/* ═══════════════════════════════════════════════════
   DREAM EXPERIENCE — Novo site em breve
   Cores extraídas da marca: azul #0095DA · laranja #F99D34
   ═══════════════════════════════════════════════════ */

:root{
  /* ── cores da marca: iguais nos dois temas ── */
  --azul:#0095DA;
  --azul-dim:#0076AE;
  --laranja:#F99D34;

  /* Versões para TEXTO. No escuro são as cores de marca puras; no
     claro escurecem, porque o azul e o laranja originais ficam com
     contraste baixo demais sobre fundo claro. Os usos gráficos
     (fundo do botão, pulso do chip) continuam com a cor de marca. */
  --azul-txt:var(--azul);
  --laranja-txt:var(--laranja);

  --texto-filtro:saturate(var(--texto-saturacao)) brightness(var(--texto-brilho)) contrast(var(--texto-nitidez));

  --ff:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(20px,5vw,80px);
  --ease:cubic-bezier(.19,1,.22,1);

  /* ── TEMA ESCURO (padrão — é a identidade da marca) ──
     --fg-rgb e --veu-rgb são listas cruas para uso em rgba().  */
  --bg:#000;
  --bg-alt:#0A0C0E;
  --fg:#fff;
  --fg-rgb:255,255,255;
  --muted:#8D97A0;
  --veu-rgb:0,0,0;          /* cor que entra por cima do vídeo */
  --grain-blend:overlay;
  --grain-op:.055;
  --glow-blend:screen;
  --glow:rgba(0,149,218,.18);
  --chapa:.25;              /* opacidade das chapas translúcidas */
  --titulo-hero:#000;       /* "NOVO SITE" — invertido em relação ao tema */
  --titulo-contorno:.028em; /* espessura do contorno azul de "NOVO SITE" */

  /* ── DESTAQUE DO TEXTO DO HERO — mexa só aqui ─────────────────
     Não é uma chapa de cor por cima: são filtros aplicados ao
     próprio vídeo, só na região atrás do texto, com as bordas
     dissolvidas. O texto ganha contraste e o resto do vídeo
     continua intacto.
        --texto-saturacao  1 = cores do vídeo como estão · <1 lava
        --texto-brilho     1 = neutro · <1 escurece · >1 clareia
        --texto-nitidez    1 = neutro · >1 endurece as bordas
        --texto-area       o quanto a região se espalha (0–100%)  */
  --texto-saturacao:.6;
  --texto-brilho:.45;
  --texto-nitidez:1.08;
  --texto-area:58%;

  /* Texto do hero sem sombra, a pedido: nada de halo em volta das
     letras. Para reativar, troque por algo como
     0 0 .3em rgba(0,0,0,.5) no escuro / rgba(255,255,255,.9) no claro. */
  --sombra-hero:none;

  /* ── VÍDEO DO HERO — mexa só aqui ─────────────────────────────
     Os quatro primeiros são o filtro aplicado no próprio vídeo.
     --veu é o quanto de cor entra por cima do vídeo:
        0   = vídeo limpo (é o que o tema claro usa)
        .55 = equilíbrio do tema escuro
        1   = bem coberto
     A base do hero tem cobertura fixa, fora deste token, para
     disfarçar a emenda com a seção seguinte.                    */
  --video-brilho:1.22;      /* brightness */
  --video-saturacao:1.45;   /* saturate   */
  --video-contraste:1.14;   /* contrast   */
  --video-opacidade:1;      /* opacity    */
  --veu:.55;
}

/* ── TEMA CLARO ──
   O vídeo fica sem véu, em cor cheia, e o texto do hero não tem
   halo. A única cobertura é a da base do hero, para emendar com a
   seção seguinte. */
:root[data-theme="light"]{
  --bg:#F4F6F8;
  --bg-alt:#E4E9ED;
  --fg:#0A0C0E;
  --fg-rgb:10,12,14;
  --muted:#5A646E;
  --veu-rgb:255,255,255;
  --grain-blend:multiply;
  --grain-op:.04;
  --glow-blend:multiply;
  --glow:rgba(0,149,218,.10);

  --azul-txt:#00618F;
  --laranja-txt:#9A5600;
  --chapa:.62;
  --titulo-hero:#fff;

  /* no claro o destaque clareia em vez de escurecer */
  --texto-saturacao:.45;
  --texto-brilho:1.75;
  --texto-nitidez:1.05;
  --texto-area:58%;

  --video-brilho:1.08;
  --video-saturacao:1.5;
  --video-contraste:1.02;

  /* vídeo sem véu no claro — a cobertura fica só na base, que é
     fixa e independe deste token, para disfarçar a emenda com a
     seção seguinte */
  --veu:0;
}

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

html{-webkit-text-size-adjust:100%;overflow-x:clip}

body{
  font-family:var(--ff);
  background:var(--bg);
  color:var(--fg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color .5s var(--ease),color .5s var(--ease);
}
body.is-loading{overflow:hidden;height:100vh}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
em{font-style:italic;font-weight:300}

.wrap{width:min(1280px,100% - var(--gutter)*2);margin-inline:auto}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

::selection{background:var(--azul);color:#fff}

/* ── grão ────────────────────────────────────────── */
.grain{
  position:fixed;inset:-150%;z-index:9998;pointer-events:none;
  opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 700ms steps(1) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}      20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}   100%{transform:translate(0,0)}
}

/* ── cursor ──────────────────────────────────────────
   Seta branca em difference: inverte tudo que cobre.
   A deformação vem do JS, pela velocidade.

   Fica branca nos dois temas de propósito — em difference
   o branco inverte o que está atrás, então ela se resolve
   sozinha tanto no claro quanto no escuro.

   O transform-origin é 0 0 — a ponta da seta — para que ela
   gire e estique a partir do ponto exato que o mouse aponta,
   e cresça sempre "para trás".                              */
.cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;mix-blend-mode:difference;opacity:0}
@media (hover:hover) and (pointer:fine){ .cursor{opacity:1} }

.cursor__arrow{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
.cursor__arrow svg{display:block;width:30.4px;height:48px;transform-origin:0 0;will-change:transform}
.cursor__arrow path{fill:#fff}

/* o cursor nativo só some depois que o JS assume */
html.has-cursor,html.has-cursor *{cursor:none}

/* ── botão de tema ───────────────────────────────────
   Fica fixo no canto inferior porque a topbar corre para
   fora no scroll — ali ele ficaria inalcançável. */
.theme{
  position:fixed;right:var(--gutter);bottom:clamp(18px,3vh,32px);z-index:80;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(var(--fg-rgb),.22);
  background:rgba(var(--veu-rgb),var(--chapa));
  backdrop-filter:blur(10px);
  color:var(--fg);
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease);
}
.theme:hover{transform:scale(1.08);border-color:var(--azul-txt)}
.theme:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
.theme svg{
  width:19px;height:19px;display:block;fill:none;
  stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
/* Mostra o ícone do tema que o clique vai ativar.
   Os seletores levam .theme junto de propósito: sem isso ficam com
   especificidade menor que `.theme svg{display:block}` acima e os
   dois ícones aparecem empilhados. */
.theme .theme__moon{display:none}
[data-theme="light"] .theme .theme__sun{display:none}
[data-theme="light"] .theme .theme__moon{display:block}

/* ── logo: uma versão por tema ───────────────────────
   O PNG claro tem o texto branco, que sumiria no tema claro.
   A variante escura troca só os pixels brancos, mantendo o
   azul do símbolo e o laranja do X. */
.logo-light{display:none}
[data-theme="light"] .logo-dark{display:none}
[data-theme="light"] .logo-light{display:block}

/* ── loader ──────────────────────────────────────── */
.loader{position:fixed;inset:0;z-index:9990;background:var(--bg);display:grid;place-items:center}
.loader__bars{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr)}
.loader__bars i{background:var(--bg-alt);transform-origin:bottom}
.loader__meta{
  position:relative;display:flex;align-items:baseline;gap:clamp(14px,3vw,36px);
  font-size:clamp(10px,1.4vw,13px);letter-spacing:.42em;font-weight:500;
}
.loader__pct{
  font-weight:900;letter-spacing:0;font-size:clamp(34px,8vw,80px);
  color:var(--azul-txt);font-variant-numeric:tabular-nums;line-height:1;
}
.loader__pct::after{content:'%';font-size:.35em;color:var(--fg);margin-left:.12em}

/* ── topbar ──────────────────────────────────────── */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2.6vw,30px) var(--gutter);
  /* a logo e o chip saem pelas laterais no scroll — o clip garante
     que a saída deles nunca vire barra de rolagem */
  overflow:clip;
}
.topbar__logo{will-change:transform}
.topbar__logo img{width:clamp(108px,12vw,168px)}
.chip{
  display:inline-flex;align-items:center;gap:9px;
  font-size:clamp(9px,1.1vw,11px);font-weight:700;letter-spacing:.34em;
  padding:9px 16px;border:1px solid rgba(var(--fg-rgb),.22);border-radius:999px;
  backdrop-filter:blur(8px);background:rgba(var(--veu-rgb),var(--chapa));white-space:nowrap;
  will-change:transform;
}
.chip__pulse{width:6px;height:6px;border-radius:50%;background:var(--laranja);animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(249,157,52,.6)}50%{opacity:.55;box-shadow:0 0 0 9px rgba(249,157,52,0)}}

/* ═══════════ HERO ═══════════ */
/* minmax(0,1fr) + min-width:0 impedem o track de crescer até o
   max-content do título e empurrar o conteúdo para fora da tela */
.hero{
  position:relative;min-height:100svh;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1fr);place-items:center;
}

/* parede de vídeo — colunas, como no site original */
.hero__wall{position:absolute;inset:0;z-index:-3;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.hero__col{position:relative;overflow:hidden;will-change:transform}
.hero__col video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:var(--video-opacidade);
  filter:
    brightness(var(--video-brilho))
    saturate(var(--video-saturacao))
    contrast(var(--video-contraste));
}
.hero__col::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 .5px rgba(var(--fg-rgb),.05)}

/* Cada parada é multiplicada por --veu, então o token controla a
   cobertura inteira. As duas últimas do gradiente vertical são
   fixas: a base precisa fundir no fundo da página para emendar na
   seção seguinte, mesmo com --veu em 0. */
.hero__veil{
  position:absolute;inset:0;z-index:-2;
  transition:background .5s var(--ease);
  background:
    radial-gradient(120% 90% at 50% 42%,
      rgba(var(--veu-rgb),calc(.22 * var(--veu))) 0%,
      rgba(var(--veu-rgb),calc(.62 * var(--veu))) 52%,
      rgba(var(--veu-rgb),calc(.92 * var(--veu))) 100%),
    linear-gradient(180deg,
      rgba(var(--veu-rgb),calc(.78 * var(--veu))) 0%,
      rgba(var(--veu-rgb),calc(.16 * var(--veu))) 34%,
      rgba(var(--veu-rgb),calc(.34 * var(--veu))) 64%,
      rgba(var(--veu-rgb),.58) 86%,
      var(--bg) 100%);
}
.hero__glow{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 45% at 50% 52%, var(--glow) 0%, transparent 70%);
  mix-blend-mode:var(--glow-blend);
}

.hero__inner{position:relative;z-index:2;text-align:center;padding:0 var(--gutter);width:100%;min-width:0}

/* Região de destaque: trata o vídeo que está atrás do texto.
   A máscara radial dissolve as bordas, senão viraria um retângulo
   visível no meio do hero. */
.hero__inner::before{
  content:'';position:absolute;inset:-12% -4%;z-index:-1;pointer-events:none;
  -webkit-backdrop-filter:var(--texto-filtro);
  backdrop-filter:var(--texto-filtro);
  -webkit-mask-image:radial-gradient(ellipse 66% var(--texto-area) at 50% 50%,#000 38%,transparent 76%);
  mask-image:radial-gradient(ellipse 66% var(--texto-area) at 50% 50%,#000 38%,transparent 76%);
}

.hero__eyebrow{overflow:hidden;margin-bottom:clamp(18px,3vw,34px)}
.hero__eyebrow span{
  display:inline-block;font-size:clamp(9px,1.25vw,12px);font-weight:500;
  letter-spacing:.44em;text-transform:uppercase;
  /* branco nos dois temas: fica sobre o vídeo, não sobre o fundo da página */
  color:#fff;
  text-shadow:var(--sombra-hero);
}

.hero__title{
  font-weight:900;line-height:.87;letter-spacing:-.025em;
  font-size:clamp(3rem,13.5vw,12rem);
  text-transform:uppercase;
  text-shadow:var(--sombra-hero);
}
.hero__title .line{display:block;overflow:hidden;padding-block:.035em;max-width:100%}
.hero__title .char{display:inline-block;will-change:transform}
/* palavra: mantém as letras juntas, a quebra só acontece entre palavras */
.w{display:inline-block;white-space:nowrap}
/* "EM BREVE" recebe um degradê letra a letra, aplicado no JS —
   background-clip:text não sobrevive aos spans com transform. */
/* "NOVO SITE" vai contra o tema: preto no escuro, branco no claro.
   Sobre o vídeo isso recorta a palavra em vez de deixá-la se
   confundir com o resto do texto da página.

   O contorno azul segue o desenho de cada letra. paint-order joga
   o traço para FORA da letra; sem ele o traço nasce no meio do
   contorno e come o preenchimento, engordando a tipografia. */
.hero__title .line:first-child{
  color:var(--titulo-hero);
  -webkit-text-stroke:var(--titulo-contorno) var(--azul);
  paint-order:stroke fill;
}
.hero__title .line:last-child{color:var(--azul-txt)}

.hero__tagline{
  margin-top:clamp(22px,3.4vw,40px);
  font-size:clamp(1rem,2.05vw,1.65rem);
  font-weight:300;line-height:1.45;color:var(--fg);
  text-shadow:var(--sombra-hero);
}
.hero__tagline em{color:var(--laranja-txt);font-weight:400}
.hero__tagline .word{display:inline-block;will-change:transform,opacity}

/* ═══════════ MANIFESTO ═══════════ */
.manifesto{padding:clamp(110px,18vh,220px) 0}

.kicker{
  font-size:clamp(9px,1.15vw,11px);letter-spacing:.44em;font-weight:700;
  text-transform:uppercase;color:var(--azul-txt);margin-bottom:clamp(26px,4vw,48px);
}
.kicker::before{content:'';display:inline-block;width:clamp(28px,4vw,56px);height:1px;background:var(--azul-txt);vertical-align:middle;margin-right:16px}

.morph{
  font-size:clamp(1.9rem,6.4vw,5.4rem);
  font-weight:900;line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;
}
.morph__static{display:block}
.morph__slot{
  display:block;min-height:1.12em;color:var(--azul-txt);
  text-transform:none;font-weight:300;letter-spacing:-.01em;
  position:relative;                 /* base da palavra que entra */
}
/* a palavra que entra fica sobreposta à que sai enquanto o rolo gira */
.morph__slot .morph__in{position:absolute;left:0;top:0}
.morph__slot em{display:inline-block;font-style:italic}
/* preserve-3d deixa o giro das letras acontecer em profundidade;
   sem isso o navegador achata tudo e o rolo vira um fade */
.morph__slot em,.morph__slot .w{transform-style:preserve-3d}
.morph__slot .char{
  display:inline-block;will-change:transform,opacity;
  backface-visibility:hidden;
}
.morph__accent{
  display:block;color:var(--laranja-txt);text-transform:none;
  font-weight:300;font-style:italic;letter-spacing:-.01em;
}

.manifesto__note{
  margin-top:clamp(36px,5vw,64px);max-width:60ch;
  font-size:clamp(.98rem,1.55vw,1.2rem);line-height:1.72;
  font-weight:300;color:var(--muted);
}
/* No claro estes textos corridos vão a preto, e não no cinza dos
   secundários. Ficam juntos para não divergirem depois. */
[data-theme="light"] .manifesto__note,
[data-theme="light"] .contact__lead,
[data-theme="light"] .foot__addr,
[data-theme="light"] .foot__copy{color:var(--fg)}

/* ═══════════ MARQUEE ═══════════ */
.marquee-sec{padding:clamp(18px,3vw,34px) 0;border-block:1px solid rgba(var(--fg-rgb),.1)}
.marquee{overflow:hidden}
.marquee__track{
  display:flex;align-items:center;gap:clamp(24px,4vw,52px);width:max-content;
  font-size:clamp(.82rem,1.5vw,1.05rem);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(var(--fg-rgb),.3);white-space:nowrap;
}
.marquee__track i{color:var(--azul-txt);font-style:normal}
/* no claro a faixa inverte: os nomes em azul, os separadores em cinza */
[data-theme="light"] .marquee__track{color:var(--azul-txt)}
[data-theme="light"] .marquee__track i{color:var(--muted)}

/* ═══════════ CONTAGEM ═══════════ */
.count{padding:clamp(110px,18vh,210px) 0;text-align:center}
.count .kicker::before{display:none}

.clock{
  display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(6px,1.6vw,26px);flex-wrap:nowrap;
}
.clock__cell{display:grid;gap:10px;justify-items:center;min-width:clamp(62px,13vw,168px)}
.clock__cell b{
  font-size:clamp(2.6rem,11vw,9rem);font-weight:900;line-height:.86;
  font-variant-numeric:tabular-nums;letter-spacing:-.04em;
  background:linear-gradient(180deg,
    rgba(var(--fg-rgb),1) 0%,
    rgba(var(--fg-rgb),1) 48%,
    rgba(var(--fg-rgb),.28) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* no claro os números vão sólidos: o esmaecido da base, que no escuro
   dá profundidade, aqui some no fundo claro e parece número cortado.
   Precisa anular o clip e o text-fill, não só o background. */
[data-theme="light"] .clock__cell b{
  background:none;
  -webkit-background-clip:border-box;background-clip:border-box;
  color:var(--fg);
  -webkit-text-fill-color:var(--fg);
}
.clock__cell span{
  font-size:clamp(8px,1.1vw,11px);letter-spacing:.34em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}
.clock__sep{
  font-size:clamp(1.6rem,6vw,5rem);font-weight:300;color:var(--azul-txt);
  line-height:1;margin-top:.06em;animation:blink 1s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.18}}

.count__note{
  margin-top:clamp(34px,5vw,58px);font-size:clamp(.9rem,1.5vw,1.1rem);
  font-weight:300;color:var(--muted);
}
.count__note strong{color:var(--fg);font-weight:500}

/* ═══════════ CONTATO ═══════════ */
.contact{padding:clamp(100px,16vh,190px) 0 clamp(80px,12vh,140px)}
.contact__title{
  font-size:clamp(2.4rem,9vw,7rem);font-weight:900;line-height:.92;
  letter-spacing:-.03em;text-transform:uppercase;
}
.contact__title em{color:var(--azul-txt);text-transform:none}
.contact__lead{
  margin-top:clamp(20px,3vw,34px);max-width:46ch;
  font-size:clamp(.95rem,1.55vw,1.15rem);font-weight:300;line-height:1.7;color:var(--muted);
}

.notify{margin-top:clamp(34px,5vw,56px);display:flex;flex-wrap:wrap;gap:14px;align-items:stretch;max-width:720px}
.notify input{
  flex:1 1 260px;min-width:0;
  background:transparent;border:1px solid rgba(var(--fg-rgb),.24);border-radius:999px;
  padding:clamp(15px,2vw,20px) clamp(20px,2.6vw,28px);
  font-family:inherit;font-size:clamp(.9rem,1.4vw,1rem);font-weight:300;color:var(--fg);
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.notify input::placeholder{color:rgba(var(--fg-rgb),.4)}
.notify input:focus{outline:none;border-color:var(--azul-txt);background:rgba(0,149,218,.06)}
.notify input:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
.notify input.is-bad{border-color:var(--laranja-txt)}

.btn{
  position:relative;overflow:hidden;cursor:pointer;flex:0 0 auto;
  border:none;border-radius:999px;background:var(--azul);color:#fff;
  padding:clamp(15px,2vw,20px) clamp(26px,3.4vw,40px);
  font-family:inherit;font-size:clamp(10px,1.2vw,12px);font-weight:700;letter-spacing:.2em;
  will-change:transform;
}
.btn__txt{position:relative;z-index:2}
.btn__fill{
  position:absolute;inset:0;z-index:1;background:var(--laranja);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.btn:hover .btn__fill,.btn:focus-visible .btn__fill{transform:scaleX(1)}
.btn:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

.notify__msg{flex:1 0 100%;font-size:.86rem;font-weight:300;color:var(--azul-txt);min-height:1.3em;padding-left:4px}
.notify__msg.is-bad{color:var(--laranja-txt)}

/* ═══════════ FOOTER ═══════════ */
.foot{border-top:1px solid rgba(var(--fg-rgb),.1);padding:clamp(44px,7vw,80px) 0}
.foot__grid{display:grid;gap:clamp(22px,3vw,34px);align-items:center}
.foot__logo{width:clamp(118px,13vw,180px);opacity:.85}
.foot__addr{font-style:normal;font-size:clamp(.82rem,1.3vw,.95rem);font-weight:300;line-height:1.75;color:var(--muted)}
.foot__copy{font-size:clamp(.72rem,1.1vw,.82rem);color:rgba(var(--fg-rgb),.4);font-weight:300}

@media (min-width:860px){
  .foot__grid{grid-template-columns:auto 1fr auto;gap:clamp(30px,5vw,70px)}
  .foot__copy{text-align:right}
}

/* ═══════════ RESPONSIVO ═══════════ */

/* telas médias: menos colunas de vídeo */
@media (max-width:1100px){ .hero__col:nth-child(n+4){display:none} }
@media (max-width:760px){
  .hero__col:nth-child(n+2){display:none}
  /* 12.5vw mantém "NOVO SITE" numa linha só até 320px */
  .hero__title{font-size:clamp(1.9rem,12.5vw,5rem)}

  /* a palavra mais longa ocupa duas linhas aqui; a altura fica
     reservada para as duas, senão o bloco pula a cada virada */
  .morph__slot{min-height:2.32em}

  .clock__cell{min-width:0}
  .clock__sep{display:none}
  /* as quatro unidades numa linha só; o gap encolhe junto com a tela
     para que dias/horas/min/seg caibam lado a lado até 320px */
  .clock{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(4px,1.6vw,12px)}
  .clock__cell b{font-size:clamp(1.9rem,14.5vw,4.5rem)}
  /* o letter-spacing do desktop não cabe numa coluna de ~80px */
  .clock__cell span{font-size:clamp(7px,2.1vw,10px);letter-spacing:.14em}

  .notify{flex-direction:column}
  /* Em coluna o eixo principal é o vertical, então o flex-basis de
     260px do desktop viraria ALTURA e o campo virava um balão. */
  .notify input{flex:0 0 auto}
  .btn{width:100%}
  /* o padding sozinho deixava o botão em 43px: abaixo do alvo de toque */
  .btn,.notify input{min-height:48px}

  /* 46px mantém o alvo de toque acima do mínimo de 44 */
  .theme{width:46px;height:46px;bottom:16px}
  /* o botão flutua sobre o rodapé: abre espaço para ele não cobrir
     a linha de copyright */
  .foot{padding-bottom:calc(46px + 40px)}

  /* o respiro do desktop vira buraco numa tela estreita */
  .manifesto,.count{padding:clamp(72px,12vh,130px) 0}
  .contact{padding:clamp(64px,10vh,110px) 0 clamp(48px,8vh,80px)}

  /* ── leitura da esquerda para a direita, sem quebras forçadas ──
     Centralizado, cada linha começa num ponto diferente e o olho
     precisa reencontrar o início a cada linha. Numa tela estreita
     isso pesa, então tudo passa a ter margem esquerda comum. */
  .hero__inner{text-align:left}
  .count{text-align:left}

  /* A região de destaque atrás do texto é uma elipse centrada. Com o
     texto alinhado à esquerda ela deixa de coincidir com ele e vira
     uma mancha no meio do hero — e backdrop-filter ainda é caro num
     celular. Fora daqui. */
  .hero__inner::before{display:none}
  .clock{justify-items:start}
  .clock__cell{justify-items:start}

  /* os <br> foram pensados para a medida do desktop; aqui eles
     cortam a frase em lugar errado — o texto flui sozinho */
  .hero__tagline br,
  .foot__addr br{display:none}
  /* ...menos o do "NÃO QUER / esperar?", que é quebra de composição */

  /* nenhuma palavra parte no meio nem estoura a linha */
  .hero__inner,.manifesto,.count,.contact,.foot{
    overflow-wrap:break-word;hyphens:none;
  }
}
@media (max-width:420px){
  .chip{padding:7px 11px;letter-spacing:.24em}
  .hero__eyebrow span{letter-spacing:.3em}
}

/* telas baixas e deitadas */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:120svh}
}

/* ── acessibilidade: movimento reduzido ─────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .grain{animation:none}
  .cursor{display:none}
  .loader{display:none}
  body.is-loading{overflow:auto;height:auto}
}