/* ==========================================================================
   Blue — linguagem dos slides e dos posts de redes do Blue Design System:
   camo denso com borda reta, dither Bayer como degradê, tipo grande e apertado.
   ========================================================================== */

:root{
  --royal:#0028F8;
  --royal-600:#0020C8;
  --royal-800:#00147E;
  --navy:#000840;
  --yellow:#F0F858;
  --yellow-600:#C8D22A;
  --sky:#80F8F0;
  --ice:#F0F8F8;
  --white:#FFFFFF;

  --display:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;

  --header-h:58px;
  --wrap:1200px;
  --gutter:20px;
  --ease:cubic-bezier(.2,.6,.3,1);
}

/* ---------- esquemas ---------- */

[data-scheme="primary"]{
  --bg:var(--royal); --fg:rgba(255,255,255,.94); --heading:var(--white);
  --accent:var(--yellow); --label:var(--white); --hairline:rgba(255,255,255,.34);
}
[data-scheme="primary-dark"]{
  --bg:var(--navy); --fg:rgba(128,248,240,.88); --heading:var(--white);
  --accent:var(--royal); --label:var(--sky); --hairline:rgba(128,248,240,.26);
}
[data-scheme="tertiary-dark"]{
  --bg:var(--navy); --fg:rgba(128,248,240,.88); --heading:var(--white);
  --accent:var(--yellow); --label:var(--yellow); --hairline:rgba(240,248,88,.3);
  --card:var(--navy); --card-hover:var(--yellow);
}
[data-scheme="ice"]{
  --bg:var(--ice); --fg:rgba(0,8,64,.78); --heading:var(--navy);
  --accent:var(--yellow); --label:var(--royal); --hairline:rgba(0,40,248,.24);
}
[data-scheme="secondary"]{
  --bg:var(--sky); --fg:rgba(0,8,64,.8); --heading:var(--navy);
  --accent:var(--navy); --label:var(--royal); --hairline:rgba(0,8,64,.24);
}
[data-scheme="secondary-yellow"]{
  --bg:var(--yellow); --fg:rgba(0,8,64,.82); --heading:var(--royal);
  --accent:var(--navy); --label:var(--royal); --hairline:rgba(0,8,64,.26);
  --card:var(--royal); --card-line:var(--royal); --card-hover:var(--white);
  --card-heading:var(--white); --card-fg:rgba(255,255,255,.86);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;background:var(--navy);color:var(--ice);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:800}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}

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

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--yellow);color:var(--navy);padding:10px 16px;font-family:var(--display);font-weight:700}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

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

.display{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  line-height:.9;letter-spacing:-.03em;color:var(--heading);text-wrap:balance;
}
.display-xl{font-size:clamp(36px,8.6vw,76px)}
.display-lg{font-size:clamp(32px,8.4vw,66px)}
.display-md{font-size:clamp(25px,6.2vw,48px);line-height:.96}
.display-sm{font-size:clamp(18px,4.4vw,26px);line-height:1.05}

.label{
  display:flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:300;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--label);margin-bottom:18px;
}
.label .sq{width:8px;height:8px;flex:none;background:var(--accent)}

/* Sobre textura o eyebrow some: ganha um bloco royal e texto amarelo. */
.label-chip{
  display:inline-flex;background:var(--royal);color:var(--yellow);
  padding:11px 16px;margin-bottom:24px;
}
.label-chip .sq{background:var(--yellow)}

.band-sub{margin-top:18px;max-width:52ch;font-size:clamp(15px,4vw,18px);color:var(--fg)}
/* Em "O que fazemos" este paragrafo perdeu o headline em cima e virou a
   entrada da secao: corpo grande, bold e medida larga, para pesar como
   declaracao em vez de legenda. Usado so ali. */
.band-sub-lg{margin-top:26px;max-width:none;font-size:clamp(19px,5.2vw,30px);font-weight:700;line-height:1.3;text-wrap:pretty}
.prose{display:flex;flex-direction:column;gap:18px;max-width:62ch;color:var(--fg)}
.prose p{font-size:clamp(15px,4vw,17px)}
.rule-accent{display:block;width:76px;height:5px;background:var(--accent);margin:26px 0 0}

/* ---------- faixas ---------- */

.band{
  position:relative;overflow:hidden;
  background:var(--bg);color:var(--fg);
  padding:84px 0;scroll-margin-top:var(--header-h);
}
.band>.wrap{position:relative;z-index:2}

/* ---------- texturas ---------- */

.tex{position:absolute;pointer-events:none;z-index:0}
.tex-fill{inset:0;width:100%;height:100%}
.tex-hero{right:0;bottom:0;width:100%;height:26%}
.tex-base{left:0;bottom:0;width:100%;height:120px}
.tex-dither-stop{left:0;top:0;width:100%;height:260px}
.tex-dither-top{top:0;left:0;width:100%;height:120px}
[data-tex="camo-navy-deep"]{opacity:.9}
[data-tex="camo-royal-fill"]{opacity:.5}

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

.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);display:flex;align-items:center;background:var(--bg)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav{display:none}

/* ---------- idioma ---------- */

/* idioma e contato andam juntos no canto direito; no celular o menu some mas
   estes dois ficam, porque trocar de idioma precisa estar sempre a mao */
.header-dir{display:flex;align-items:center;gap:10px;flex:none}
.langs{display:flex;align-items:center;gap:1px}
.lang{
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.08em;
  padding:8px 8px;line-height:1;color:rgba(255,255,255,.6);
  transition:color 160ms var(--ease),background 160ms var(--ease);
}
.lang:hover,.lang:focus-visible{color:var(--white)}
.lang.is-atual{color:var(--navy);background:var(--sky)}
.lang.is-atual:hover{color:var(--navy)}
@media (max-width:519px){
  /* aperta para caber logo + PT EN ES + Contato numa tela de 360px */
  .header-dir{gap:6px}
  .lang{padding:7px 5px;font-size:10px;letter-spacing:.04em}
  .header-dir .btn{padding:11px 13px;font-size:11px;letter-spacing:.06em}
}

/* ---------- marca ---------- */

.brand{display:flex;align-items:center}
.brand img{display:none;width:auto;height:26px}
.brand.has-logo img{display:block}
.brand.has-logo .brand-type{display:none}
.brand-type{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.045em;color:var(--heading);line-height:1}
.brand-lg img{height:40px}
.brand-lg .brand-type{font-size:40px}

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

.btn{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;padding:12px 20px;border:2px solid transparent;
  transition:background 160ms var(--ease),border-color 160ms var(--ease),color 160ms var(--ease);
}
.btn-accent{background:var(--yellow);border-color:var(--yellow);color:var(--navy)}
.btn-accent:hover{background:var(--yellow-600);border-color:var(--yellow-600)}

/* ---------- 1. abertura ----------
   O véu royal é translúcido: com um vídeo em assets/video/hero.mp4 ele aparece
   por baixo; sem vídeo, o véu cai sobre o royal da faixa e nada muda.          */

.hero{display:flex;align-items:flex-end;padding-top:56px;padding-bottom:0;min-height:calc(82svh - var(--header-h))}
.hero-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;z-index:1;background:rgba(0,40,248,.7)}
.hero .tex{z-index:1}
.hero-inner{padding-bottom:124px}
/* a headline nova tem o dobro de caracteres da antiga: 11ch dava cinco linhas */
.hero h1{max-width:17ch}
.hero-sub{margin-top:26px;max-width:46ch;font-size:clamp(16px,4.2vw,19px);line-height:1.5;color:rgba(255,255,255,.95)}

/* ---------- 2. o que fazemos ---------- */

.services{display:grid;gap:12px;margin-top:40px}
.service{
  border:2px solid var(--hairline);background:rgba(0,40,248,.2);
  transition:border-color 180ms var(--ease),background 180ms var(--ease);
}
.service-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;padding:20px 18px}
.service-num{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.06em;color:var(--accent)}
.service-title{font-family:var(--display);font-weight:700;font-size:clamp(16px,4.2vw,20px);line-height:1.12;letter-spacing:-.025em;text-transform:uppercase;color:var(--heading)}
.service-sign{position:relative;width:16px;height:16px;flex:none}
.service-sign::before,.service-sign::after{content:"";position:absolute;left:50%;top:50%;background:var(--accent);transform:translate(-50%,-50%);transition:opacity 180ms var(--ease)}
.service-sign::before{width:14px;height:2px}
.service-sign::after{width:2px;height:14px}
.service-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 200ms var(--ease)}
.service-body>p{overflow:hidden;color:var(--fg);font-size:15px;padding:0 18px;transition:padding 200ms var(--ease)}
.service:hover,.service:focus-within,.service.is-open{border-color:var(--accent);background:rgba(0,40,248,.42)}
.service:hover .service-body,.service:focus-within .service-body,.service.is-open .service-body{grid-template-rows:1fr}
.service:hover .service-body>p,.service:focus-within .service-body>p,.service.is-open .service-body>p{padding-bottom:20px}
.service:hover .service-sign::after,.service:focus-within .service-sign::after,.service.is-open .service-sign::after{opacity:0}

/* ---------- 3 e 4. creators ---------- */

.creators{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;margin-top:44px}
/* o li estica para a altura da fileira; sem height:100% no botao os cards
   ficavam de alturas diferentes conforme o nome quebrava em 1, 2 ou 3 linhas */
.creators>li{display:flex}
.creator{
  display:flex;flex-direction:column;gap:12px;width:100%;height:100%;
  transition:transform 160ms var(--ease);
}
.creator .avatar{flex:none}
.creator:hover{transform:translateY(-3px)}
.avatar{
  position:relative;display:grid;place-items:center;aspect-ratio:1;
  background:var(--royal);overflow:hidden;
  transition:background 160ms var(--ease);
}
/* Cartão royal com quadrado navy: no hover os dois trocam de cor, senão o
   quadrado acendendo em royal sumiria dentro do cartão. */
#creators .creator:hover,
#creators .creator:focus-visible{background:var(--navy)}
#creators .creator:hover .avatar,
#creators .creator:focus-visible .avatar{background:var(--royal)}
#creators .creator:hover .mono,
#creators .creator:focus-visible .mono{color:var(--white)}
[data-scheme="primary-dark"] .avatar,[data-scheme="tertiary-dark"] .avatar{background:var(--royal-800)}
[data-scheme="secondary"] .avatar,[data-scheme="secondary-yellow"] .avatar{background:var(--navy)}
.mono{font-family:var(--display);font-weight:800;font-size:clamp(26px,8vw,40px);letter-spacing:-.045em;color:var(--white)}
[data-scheme="tertiary-dark"] .mono{color:var(--sky)}
[data-scheme="secondary-yellow"] .mono{color:var(--yellow)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.creator-name{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.15;text-transform:uppercase;letter-spacing:-.025em;color:var(--heading);overflow-wrap:break-word}
.creator-niche{font-size:13px;color:var(--fg);line-height:1.35}

/* caixas flutuantes, separadas do fundo */
.band-floating .creator{
  background:var(--card,var(--bg));border:2px solid var(--card-line,var(--hairline));
  padding:14px 14px 18px;gap:14px;
  transition:transform 160ms var(--ease),border-color 160ms var(--ease),background 160ms var(--ease);
}
.band-floating .creator:hover,
.band-floating .creator:focus-visible{border-color:var(--card-hover,var(--accent))}
.band-floating .creator-name{color:var(--card-heading,var(--heading))}
.band-floating .creator-niche{color:var(--card-fg,var(--fg))}
.band-floating .creator-name,.band-floating .creator-niche{padding:0 2px}

/* ---------- 5. números — fundo liso ---------- */

.numbers h2{max-width:16ch}

.total{display:flex;flex-direction:column;gap:10px;margin-top:44px}
/* entrelinha curta demais derrama a virgula do 12,2 por cima do rotulo */
.total-value{
  font-family:var(--display);font-weight:800;
  font-size:clamp(72px,20vw,168px);line-height:.88;letter-spacing:-.055em;
  color:var(--white);font-variant-numeric:tabular-nums;
}
.total-label{
  font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--white);
}

.figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px;margin-top:52px}
.figure{display:flex;flex-direction:column;gap:6px}
.figure-value{
  font-family:var(--display);font-weight:800;
  font-size:clamp(34px,9.5vw,58px);line-height:.84;letter-spacing:-.05em;
  color:var(--white);font-variant-numeric:tabular-nums;
}
.figures .figure:nth-child(2) .figure-value{color:var(--sky)}
.figures .figure:nth-child(3) .figure-value{color:var(--yellow)}
.figures .figure:nth-child(4) .figure-value{color:var(--sky)}
.figure-unit{font-size:.36em;letter-spacing:-.02em;margin-left:.1em;vertical-align:.52em}
.figure dd{font-size:13px;color:var(--fg);line-height:1.35;max-width:22ch}
.figure dd strong{
  display:block;font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--white);margin-bottom:1px;
}

.periodo{margin-top:60px;padding-top:40px;border-top:2px solid var(--hairline)}
.periodo .label{margin-bottom:0}
.figures-duplas{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:26px}
.figures-duplas .figure-value{font-size:clamp(44px,13vw,86px)}
.figures-duplas .figure:nth-child(2) .figure-value{color:var(--yellow)}

/* ---------- 6. frase ---------- */

.statement{padding:112px 0}
/* 19ch empilhava a frase em 5 ou 6 linhas; 38ch fecha em 3 */
.statement .display{max-width:38ch}

/* ---------- 7. parceiros ---------- */

.partners{display:grid;gap:14px;margin-top:38px}
/* cartao solido, nao translucido: em cima do dither o branco a 40% deixava a
   textura passar por tras do texto */
.partner{border:2px solid var(--hairline);background:#fff;transition:border-color 160ms var(--ease)}
.partner.is-open,.partner:hover{border-color:var(--royal)}
/* a logo entra como miniatura; quem manda na caixa e o texto.
   As logos vem sobre fundo proprio (Cali em preto, MOA em roxo), nao sao
   recortes, entao a miniatura e preenchida por elas. */
.partner-tile{display:flex;align-items:center;gap:15px;width:100%;padding:15px 16px}
/* a marca da MOA e preta sobre transparencia: miniatura em fundo claro,
   com contain para nenhuma das duas logos ser cortada */
.partner-thumb{
  flex:none;width:84px;aspect-ratio:16/9;overflow:hidden;
  background:var(--white);display:grid;place-items:center;padding:7px;
}
.partner-thumb img{display:none;width:100%;height:100%;object-fit:contain}
.partner-tile.has-logo .partner-thumb img{display:block}
/* sem arquivo de logo nao sobra um quadrado vazio */
.partner-tile:not(.has-logo) .partner-thumb{display:none}
.partner-name{
  font-family:var(--display);font-weight:800;font-size:clamp(17px,4.6vw,24px);
  line-height:1.08;letter-spacing:-.035em;text-transform:uppercase;color:var(--heading);
}
.partner-sinal{position:relative;flex:none;margin-left:auto;width:34px;height:34px;background:var(--royal)}
.partner-sinal::before,.partner-sinal::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--white);
  transform:translate(-50%,-50%);transition:opacity 180ms var(--ease);
}
.partner-sinal::before{width:14px;height:2px}
.partner-sinal::after{width:2px;height:14px}
.partner.is-open .partner-sinal::after{opacity:0}
.partner-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 200ms var(--ease)}
.partner-body>p{overflow:hidden;padding:0 16px;color:var(--fg);font-size:16px;line-height:1.55;transition:padding 200ms var(--ease)}
.partner.is-open .partner-body{grid-template-rows:1fr}
.partner.is-open .partner-body>p{padding-bottom:18px}

/* ---------- 8. marcas ---------- */

.marcas{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;margin-top:30px;
}
/* Cada logo vem com proporcao e margem propria. A caixa branca de altura fixa
   com contain e o que alinha a fileira mesmo com a Lavo, que e quadrada, no
   meio de marcas deitadas. */
/* bloco, e nao grid: como item de grid a altura em % da imagem resolvia contra
   uma trilha automatica e a Lavo, que e quadrada, estourava a borda. Num bloco
   de altura fixa o 100% fecha certo e o contain centraliza sozinho. */
.marcas li{
  display:block;height:92px;padding:16px 20px;
  background:#fff;border:2px solid var(--hairline);
}
.marcas img{display:block;width:100%;height:100%;object-fit:contain}
@media (max-width:519px){
  /* duas colunas fixas; o auto-fill de 140px caia para uma so coluna em tela
     estreita e as logos ficavam gigantes */
  .marcas{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /* mantem os 92px de altura e aperta a margem interna: e o que da ar para as
     logos altas, como a CCAA e a Lavo, sem esticar as deitadas */
  .marcas li{padding:12px 14px}
}

/* ---------- 9. rodapé ---------- */

.site-footer{padding:92px 0 48px}
.footer-inner{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
/* nao e mais link: sem sublinhado de hover */
.footer-mail{color:var(--sky)}
.footer-legal{font-family:var(--display);font-weight:300;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(128,248,240,.6)}

/* ---------- perfil do creator ---------- */

.modal{
  border:0;padding:0;background:none;color:inherit;
  width:min(100% - 32px,920px);max-height:88svh;overflow:visible;
}
.modal::backdrop{background:rgba(0,8,64,.82)}
/* No celular e pilha, nao grade: com uma coluna so, o grid jogava a foto e o
   texto na mesma celula e a foto cobria a bio. Flex empilha e deixa rolar. */
.modal-inner{
  position:relative;display:flex;flex-direction:column;gap:0;
  background:var(--bg);color:var(--fg);
  border:2px solid var(--royal);max-height:88svh;overflow-y:auto;
  /* o dedo rola dentro do popup sem arrastar a pagina atras dele */
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.modal-media{position:relative;flex:none;display:grid;place-items:center;aspect-ratio:1;background:var(--royal-800);overflow:hidden}
.modal-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modal-media img[hidden]{display:none}
.modal-media .mono{font-size:clamp(52px,16vw,96px)}
.modal-body{padding:26px 22px 30px;display:flex;flex-direction:column;gap:14px}
.modal-body .label{margin-bottom:0}
.modal-bio{color:var(--fg);font-size:15px;max-width:46ch}
/* cada rede e um botao: nome, numero de seguidores e link */
/* auto-fill mantem todo box do mesmo tamanho, tendo o creator 1 ou 5 redes.
   As trilhas sobrando ficam vazias e invisiveis — o container nao tem fundo. */
.modal-redes{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:8px;margin-top:10px;
}
.rede{
  display:flex;flex-direction:column;gap:1px;
  background:var(--bg);border:2px solid var(--hairline);padding:13px 15px 15px;
  transition:background 160ms var(--ease),border-color 160ms var(--ease);
}
.rede:hover,.rede:focus-visible{border-color:var(--royal)}
.rede:hover,.rede:focus-visible{background:var(--royal)}
.rede-nome{
  font-family:var(--display);font-weight:300;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--label);
}
.rede-seg{
  font-family:var(--display);font-weight:800;font-size:clamp(20px,5.4vw,28px);
  line-height:1.05;letter-spacing:-.04em;color:var(--white);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.rede-perfil{font-size:11px;line-height:1.3;color:var(--fg);overflow-wrap:anywhere}
.rede:hover .rede-nome,.rede:hover .rede-perfil,
.rede:focus-visible .rede-nome,.rede:focus-visible .rede-perfil{color:rgba(255,255,255,.86)}
.modal-bio[hidden]{display:none}

/* ---------- frentes, links e contato no perfil ---------- */

.modal-frentes[hidden],.modal-links[hidden],.modal-contato[hidden]{display:none}
.modal-sub{
  font-family:var(--display);font-weight:300;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--label);
  margin-bottom:9px;
}
/* as frentes sao o amarelo da marca: e o que a Blue faz por este creator */
.frentes{display:flex;flex-wrap:wrap;gap:7px}
.frentes li{
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.02em;
  text-transform:uppercase;padding:7px 11px;
  color:var(--navy);background:var(--yellow);
}
.modal-links{display:flex;flex-wrap:wrap;gap:8px}
.modal-link{
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;padding:11px 15px;
  color:var(--white);border:2px solid var(--sky);
  transition:background 160ms var(--ease),color 160ms var(--ease);
}
.modal-link:hover,.modal-link:focus-visible{background:var(--sky);color:var(--navy)}
.modal-contato{color:var(--fg);font-size:14px;line-height:1.5;max-width:46ch}
.modal-email{color:var(--sky);overflow-wrap:anywhere}
.modal-close{
  position:absolute;top:0;right:0;z-index:3;width:48px;height:48px;
  display:grid;place-items:center;background:var(--royal);
  transition:background 160ms var(--ease);
}
.modal-close:hover{background:var(--yellow)}
.modal-close span{position:relative;width:16px;height:16px;display:block}
.modal-close span::before,.modal-close span::after{
  content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;background:var(--white);
}
.modal-close span::before{transform:translate(-50%,-50%) rotate(45deg)}
.modal-close span::after{transform:translate(-50%,-50%) rotate(-45deg)}
.modal-close:hover span::before,.modal-close:hover span::after{background:var(--navy)}

/* ---------- movimento ---------- */

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hero .label,.hero .display,.hero .rule-accent,.hero-sub{animation:fadeUp 560ms var(--ease) both}
  .hero .display{animation-delay:60ms}
  .hero .rule-accent{animation-delay:120ms}
  .hero-sub{animation-delay:180ms}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- tablet ---------- */

@media (min-width:720px){
  :root{--header-h:70px;--gutter:32px}
  .band{padding:112px 0}
  .brand img{height:30px}
  .brand-type{font-size:30px}
  .brand-lg img{height:44px}
  .brand-lg .brand-type{font-size:44px}
  .hero{min-height:calc(86svh - var(--header-h))}
  .hero-inner{padding-bottom:0}
  .tex-hero{top:0;bottom:auto;width:40%;height:100%}
  .hero h1{max-width:62%}
  .tex-base{height:150px}
  .tex-dither-top{height:150px}
  .services{grid-template-columns:repeat(2,1fr)}
  .creators{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px}
  .figures{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 20px}
  .figures-duplas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .partners{grid-template-columns:repeat(2,1fr);gap:18px}
  .statement{padding:140px 0}
  /* a partir daqui volta a ser grade: foto a esquerda, texto a direita */
  .modal-inner{display:grid;grid-template-columns:300px 1fr}
  .modal-media{aspect-ratio:auto;height:100%;min-height:340px}
  .modal-body{padding:34px 34px 36px}
  .footer-inner{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px 40px}
  .footer-mail{justify-self:end}
  .footer-legal{grid-column:1/-1;padding-top:20px;border-top:2px solid var(--hairline)}
}

/* ---------- so tablet ----------
   Entre 768 e 999 o 8.6vw do display-xl da ~72px numa tela estreita. Com a
   headline presa a esquerda da textura, isso sobrava "EM" e "QUE" sozinhos
   na linha. Fechado em 999 para nao vazar no desktop. */

@media (min-width:768px) and (max-width:999px){
  .hero h1{font-size:clamp(34px,6.4vw,58px)}
}

/* ---------- desktop ---------- */

@media (min-width:1000px){
  .band{padding:136px 0}
  .nav{display:flex;gap:30px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--heading)}
  .nav a{opacity:.86;transition:opacity 160ms var(--ease)}
  .nav a:hover{opacity:1}
  .hero{min-height:calc(90svh - var(--header-h))}
  .hero h1{max-width:64%}
  .tex-hero{width:36%}
  .services{grid-template-columns:repeat(3,1fr)}
  .creators{gap:38px 24px}
  .figures{grid-template-columns:repeat(5,minmax(0,1fr))}
  .figures-duplas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .statement{padding:168px 0}
  .modal-inner{grid-template-columns:360px 1fr}
}

/* ---------- monitor wide ----------
   Sem isto o conteudo fica preso em 1200px no meio de uma tela de 2560,
   com margens enormes e o tipo pequeno demais para a distancia. */

@media (min-width:1500px){
  :root{--wrap:1400px;--gutter:48px}
  .band{padding:152px 0}
  .display-xl{font-size:92px}
  .display-lg{font-size:76px}
  .display-md{font-size:56px}
  .hero h1{max-width:64%}
  .hero-sub{font-size:21px;max-width:50ch}
  /* o wrap vai a 1400px aqui: sem teto a linha passava de 80 caracteres */
  .band-sub-lg{max-width:68ch}
  .creators{gap:44px 28px}
  .statement{padding:190px 0}
  .total-value{font-size:188px}
  .figures{gap:36px 26px}
  .figures .figure-value{font-size:64px}
  .figures-duplas .figure-value{font-size:96px}
  .brand img{height:34px}
  .brand-type{font-size:34px}
  .nav{gap:38px;font-size:13px}
  .modal{width:min(100% - 64px,1100px)}
  .modal-inner{grid-template-columns:420px 1fr}
}

@media (min-width:1920px){
  :root{--wrap:1560px}
  .display-xl{font-size:104px}
  .display-lg{font-size:84px}
  .total-value{font-size:208px}
}