/* ==========================================================================
   DROP Water Academy · Sistema visual v3 · fundo escuro
   Estudio Sandro Rosa Design Systems · 02/09/2026

   Base de cor medida do cartao da cliente. O azul da marca #17375D deixa de ser
   detalhe e passa a ser superficie. Nenhum valor solto: tudo token.
   Poppins mantida por pedido da cliente, trabalhada so em 300, 400 e 500.
   Regras da casa: ingles britanico na copy, sem preto puro, WCAG AA como piso.
   ========================================================================== */

/* --- 1. COR ------------------------------------------------------------- */
:root{
  /* Marca. Medidos do cartao. Nao alterar. */
  --c-navy-900:#17375D;
  --c-navy-700:#2D4E75;
  --c-navy-500:#4B5D82;

  /* Derivados. Ferramenta, nao cor de marca. */
  /* Tom clareado em 05/09. Ines pediu na rodada 1 ("a shiny navy") e Alina na
     rodada 2 ("still a bit too dark"). Duas pessoas, duas rodadas. O chao sobe
     de #0D1E33 para #13294A, quase o dobro de luminancia, e o azul da marca
     acima continua intocado. */
  --c-ink:#13294A;        /* fundo da pagina */
  --c-navy-950:#183355;   /* superficie elevada, um degrau acima do chao */
  --c-navy-300:#9CA6BA;
  --c-navy-050:#F6F7F9;
  --c-grey-700:#5D738E;
  --c-mist:#C8D0DC;

  /* Semanticos. E DAQUI que se usa cor, nunca das linhas acima. */
  --bg:var(--c-ink);
  --bg-lift:var(--c-navy-900);      /* cards: a marca vira superficie */
  --bg-deep:var(--c-navy-950);
  --fg:var(--c-navy-050);           /* 16.1:1 sobre --bg */
  --fg-2:var(--c-mist);             /* 10.4:1 */
  --fg-3:var(--c-navy-300);         /*  6.9:1 */
  /* --fg-dim saiu. Ele apontava para --c-grey-400, que nunca foi definida:
     a declaracao era invalida, herdava, e na pratica tudo caia em --fg-3.
     Descoberto em 04/09 ao clarear o rodape. Com o rodape em #17375D nao ha
     folga para um degrau mais apagado: --fg-3 ja fica em 4,93:1 ali. Entao o
     degrau deixa de existir de verdade, em vez de existir so no nome. */

  --rule:rgba(246,247,249,.22);
  --rule-soft:rgba(246,247,249,.10);
  --veil:rgba(19,41,74,.62);        /* sobre foto */
  --veil-strong:rgba(19,41,74,.80);

  --error:#F2A0A5;
  --error-bg:rgba(163,36,43,.18);
}

/* --- 2. TIPOGRAFIA ------------------------------------------------------ */
:root{
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;

  --t-display: clamp(2.5rem, 1.15rem + 5.4vw, 4rem);      /* 40 -> 64 */
  --t-h2:      clamp(1.875rem, 0.95rem + 3.7vw, 3.125rem); /* 30 -> 50 */
  --t-h3:      clamp(1.375rem, 1.10rem + 1.1vw, 1.75rem);  /* 22 -> 28 */
  --t-lead:    clamp(1.125rem, 1.03rem + 0.38vw, 1.375rem);/* 18 -> 22 */
  --t-body:    1.0625rem;                                  /* 17 */
  --t-small:   0.875rem;                                   /* 14 */
  --t-micro:   0.75rem;                                    /* 12 */
  --t-numeral: clamp(4rem, 2rem + 8vw, 7.5rem);            /* 64 -> 120 */

  /* Entrelinha e entreletra abertas em 03/09. Texto claro sobre fundo escuro
     parece mais apertado e mais pesado que o mesmo texto em fundo claro:
     abrir os dois compensa e a leitura fica menos blocada. */
  --lh-display:1.08; --lh-h2:1.14; --lh-h3:1.30;
  --lh-lead:1.45;    --lh-body:1.68; --lh-micro:1.40;

  --ls-display:-.02em; --ls-h2:-.016em; --ls-h3:-.008em;
  --ls-lead:-.004em;   --ls-body:.005em; --ls-micro:.04em;

  --fw-light:300; --fw-regular:400; --fw-medium:500;
  --measure:34em;
}

/* --- 3. ESPACO E GRID --------------------------------------------------- */
:root{
  /* Escala de espaco na base 10, herdada da referencia. Decisao do Sandro em
     02/09: mantida como esta, no lugar da base 8 do estudio. E um sistema
     coerente, so nao e o mesmo dos outros clientes. */
  --s4:4px; --s5:5px; --s10:10px; --s20:20px; --s30:30px;
  --s50:50px; --s75:75px; --s100:100px; --s150:150px;

  --margin:20px;
  --gutter:20px;
  --sidebar:clamp(140px, 14.6vw, 240px);
  --header-h:62px;
  --bw:1px;

  --block:clamp(60px, 4vw + 40px, 150px);   /* respiro entre secoes */
}

/* --- 4. RESET ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg-3);
  font-family:var(--font);font-size:var(--t-body);font-weight:var(--fw-light);
  line-height:var(--lh-body);letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:0}
::selection{background:var(--c-navy-500);color:var(--fg)}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:80;background:var(--fg);color:var(--bg);padding:var(--s10) var(--s20)}
.skip:focus{left:var(--s20);top:var(--s10)}

/* --- 5. PRIMITIVAS TIPOGRAFICAS ---------------------------------------- */
.t-display{font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--fw-light);color:var(--fg)}
.t-h2{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);font-weight:var(--fw-light);color:var(--fg)}
.t-h3{font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:var(--fw-light);color:var(--fg)}
.t-lead{font-size:var(--t-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);font-weight:var(--fw-light);color:var(--fg-2)}
.t-small{font-size:var(--t-small);line-height:1.5}
.t-measure{max-width:var(--measure)}
strong,b{font-weight:var(--fw-regular);color:var(--fg)}
em{font-style:normal;color:var(--fg)}

/* Rotulo micro. O marcador quadrado e a assinatura do sistema. */
.label{
  display:flex;align-items:center;gap:var(--s10);
  font-size:var(--t-micro);line-height:var(--lh-micro);letter-spacing:var(--ls-micro);
  font-weight:var(--fw-medium);text-transform:uppercase;color:var(--fg-3);
}
/* A abelha da marca no lugar do quadrado. Pedido da cliente em 03/09, sete vezes.
   Mascara, e nao <img>, para o simbolo herdar a cor de cada contexto via currentColor. */
.label::before{
  content:"";width:12px;height:12px;flex:0 0 12px;background:currentColor;
/* O caminho e absoluto de proposito. Quando o CSS morava dentro do
   index.html, "assets/symbol.svg" resolvia a partir do documento. Com o
   CSS num arquivo dentro de assets/, o relativo viraria
   assets/assets/symbol.svg, daria 404 e a abelha sumiria de todos os
   rotulos. Pego na comparacao pixel a pixel exigida pela diretriz. */
  -webkit-mask:url("/assets/symbol.svg") center/contain no-repeat;
          mask:url("/assets/symbol.svg") center/contain no-repeat;
}
.label--plain::before{display:none}
.label--bright{color:var(--fg)}

/* --- 5b. QUEBRA DE LINHA ---------------------------------------------------
   Regra da casa: nenhuma linha final com uma palavra sozinha.
   `balance` equilibra o comprimento das linhas em bloco curto (ate 6 linhas):
   e o certo para titulo, rotulo e cargo. `pretty` cuida do texto corrido,
   puxando a penultima palavra para baixo quando a ultima ficaria sozinha.
   Onde o navegador nao suporta, a pagina apenas nao ganha a melhoria. */
h1,h2,h3,
.t-display,.t-h2,.t-h3,
.card__title,.statement,
.person__name,.person__role,.person__theme,
.theme__name,.theme__desc,.aud__who,
.fact b,.card__meta b,
.quote p,.foot__tag,
.hero__lead,.label,
.t-lead,.qa__q,.qa h3{
  text-wrap:balance;
}
p,.aud__line,.detail__note,
.qa__a p,.step p,.field__help,.done p{
  text-wrap:pretty;
}
/* Nao se quebra linha entre numero e unidade, nem dentro de data ou preco. */
.card__meta b,.fact b,.deadline{white-space:normal}

/* --- 6. LAYOUT ---------------------------------------------------------- */
.layout{
  width:100%;padding:0 var(--margin);
  display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);gap:var(--gutter);
}
.layout__side{padding-left:var(--gutter)}
.layout__main{min-width:0}
.cols{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:var(--gutter)}
.c-3{grid-column:span 3}.c-4{grid-column:span 4}.c-5{grid-column:span 5}
.c-6{grid-column:span 6}.c-7{grid-column:span 7}.c-8{grid-column:span 8}.c-10{grid-column:span 10}

/* A trama das 12 colunas saiu em 05/09. Ela vinha da referencia e dava textura
   de engenharia, mas a cliente pediu a remocao tres vezes em duas rodadas, a
   ultima ja vendo a versao suavizada. Nao foi mal-entendido: ela viu e insistiu. */

.section{position:relative;z-index:1;padding-block:var(--block)}
.section--flush{padding-block:0}
.section__rule{height:var(--bw);background:var(--rule-soft);margin:0 var(--margin)}

/* --- 7. CABECALHO ------------------------------------------------------- */
.head{
  position:fixed;z-index:30;top:0;left:0;width:100%;height:var(--header-h);
  display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);gap:var(--gutter);
  padding:0 var(--margin);align-items:center;
  background:linear-gradient(to bottom,rgba(19,41,74,.92),rgba(19,41,74,0));
  transition:background .4s ease;
}
/* Sem backdrop-filter. O desfoque obriga o navegador a reamostrar tudo que
   passa atras do cabecalho fixo, a cada quadro, e com foto animada por baixo e
   dai que vinham os retangulos claros que nao repintavam e a cintilacao.
   A 97% de opacidade o desfoque nao era percebido: o custo era so risco. */
.head.is-solid{background:rgba(19,41,74,.97);border-bottom:var(--bw) solid var(--rule-soft)}
.head__mark{display:flex;align-items:center;height:100%;padding-left:var(--gutter);min-width:0}
.head__mark svg{height:20px;width:auto;color:var(--fg)}
.head__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s20);height:100%}
.nav{display:flex;align-items:center;gap:var(--s10);font-size:var(--t-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;font-weight:var(--fw-medium)}
.nav a{text-decoration:none;color:var(--fg-3);transition:color .25s ease;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:24px}
.nav a:hover{color:var(--fg)}
.nav .sep{color:var(--fg-3)}
.nav__first{display:flex;align-items:center;gap:var(--s10);color:var(--fg)}
.nav__first::before{
  content:"";width:11px;height:11px;flex:0 0 11px;background:currentColor;
  -webkit-mask:url("/assets/symbol.svg") center/contain no-repeat;
          mask:url("/assets/symbol.svg") center/contain no-repeat;
}
.head__cta{display:flex;align-items:center;gap:0}
.head .btn--micro{border-left:var(--bw) solid var(--rule-soft)}

/* --- 8. BOTOES ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s10);
  min-height:52px;padding:0 var(--s30);border:var(--bw) solid var(--fg);border-radius:0;
  background:var(--fg);color:var(--bg);
  font-size:var(--t-small);font-weight:var(--fw-medium);letter-spacing:.02em;
  text-decoration:none;cursor:pointer;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.btn:hover{background:transparent;color:var(--fg)}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--rule)}
.btn--ghost:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn--micro{
  min-height:var(--header-h);padding:0 var(--s20);border:0;background:transparent;color:var(--fg);
  font-size:var(--t-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;
}
.btn--micro:hover{background:var(--fg);color:var(--bg)}
.btn--block{width:100%}

/* Link com regua. Substitui o sublinhado. */
.tlink{
  display:inline-flex;align-items:center;gap:var(--s10);text-decoration:none;
  font-size:var(--t-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;
  font-weight:var(--fw-medium);color:var(--fg);
  padding-bottom:var(--s10);border-bottom:var(--bw) solid var(--rule);
  transition:border-color .3s ease;
}
.tlink:hover{border-color:var(--fg)}
.tlink::after{content:"";width:14px;height:var(--bw);background:currentColor;transition:width .3s ease}
.tlink:hover::after{width:22px}
a.inline{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--rule)}
a.inline:hover{text-decoration-color:var(--fg)}

/* --- 9. ABERTURA -------------------------------------------------------- */
/* A abertura em duas camadas. O texto fica preso no topo e a foto sobe por
   cima dele, puxando o resto da pagina junto. E a mesma mecanica dos cards:
   assim a abertura deixa de ser a unica dobra fora do sistema. */
.hero{position:relative;z-index:1}
.hero__intro{
  position:sticky;top:0;z-index:1;
  min-height:clamp(380px, 54svh, 620px);display:flex;flex-direction:column;
  padding-top:calc(var(--header-h) + var(--s50));padding-bottom:var(--s50);
}
.hero__top{padding-bottom:var(--s30);will-change:transform}
.hero__wordmark{height:clamp(28px,3.4vw,44px);width:auto;color:var(--fg)}
/* Conjunto de marca: logotipo, barra fina, nome. A barra tem a altura da caixa
   alta do logotipo, nao a altura toda, para nao competir com ele. */
.lockup{display:flex;align-items:center;gap:var(--s10)}
/* O logo nao encolhe: com o artigo ao lado o flex chegou a esmaga-lo de 48px para 10px. */
.lockup svg{flex:0 0 auto}
/* O artigo antes da marca. A cliente pediu em 03/09 que o conjunto lesse
   "The DROP Water Academy" e nao apenas "Water Academy". */
.lockup__the{
  font-size:clamp(0.9rem, 0.495rem + 0.765vw, 1.35rem);font-weight:var(--fw-light);
  letter-spacing:.05em;color:var(--fg-2);line-height:1;
}
.lockup--sm .lockup__the{font-size:var(--t-micro);letter-spacing:.04em;color:var(--fg-3)}
/* O conjunto de marca e link para o topo. Nao pode parecer link: sem
   sublinhado, cor herdada, e alvo com a altura do cabecalho. */
a.lockup{text-decoration:none;color:inherit;transition:opacity .3s ease}
a.lockup:hover{opacity:.72}
.head__mark a.lockup{align-self:stretch;min-height:44px}
.head__logo-mobile{display:flex;align-items:center;align-self:stretch;min-height:44px;transition:opacity .3s ease}
.head__logo-mobile:hover{opacity:.72}
.lockup__name{
  font-size:clamp(0.9rem, 0.495rem + 0.765vw, 1.35rem);font-weight:var(--fw-light);
  letter-spacing:.05em;color:var(--fg-2);white-space:nowrap;line-height:1;
}
/* No cabecalho a marca tem 20px. A proporcao do conjunto grande nao serve nessa
   escala: o nome sobe para 12px, que e o corpo do proprio cabecalho. */
.lockup--sm{gap:var(--s10);flex-wrap:nowrap}
.lockup--sm .lockup__name{font-size:var(--t-micro);letter-spacing:.04em;color:var(--fg-3)}
/* Abaixo de 1280 a coluna lateral encolhe e o conjunto colidiria com o menu.
   Nessa faixa o cabecalho fica so com a marca. */
@media (max-width:79.99rem){
  .lockup--sm .lockup__name,.lockup--sm .lockup__the{display:none}
}
.hero__statement{padding-bottom:var(--s50);will-change:transform,opacity}
.hero__statement .t-display{max-width:22ch}
.hero__statement .t-display .soft{color:var(--fg-3)}
.hero__media{
  position:relative;z-index:2;width:100%;min-height:clamp(430px,70svh,860px);
  overflow:hidden;border-top:var(--bw) solid var(--rule);background:var(--bg);
  display:flex;align-items:flex-end;
}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.04);
  transform-origin:center 58%;will-change:transform;
  animation:heroPush 14s ease-in-out infinite alternate}
@keyframes heroPush{
  from{transform:scale(1.06) translate3d(-2%,1%,0)}
  to{transform:scale(1.22) translate3d(2%,-1%,0)}}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--veil) 0%,rgba(19,41,74,.30) 38%,rgba(19,41,74,.80) 100%)}
.hero__over{position:relative;z-index:2;width:100%;display:flex;align-items:flex-end;padding:var(--s75) 0 var(--s75);
  background:linear-gradient(to bottom,rgba(19,41,74,0) 0%,rgba(19,41,74,.55) 38%,rgba(19,41,74,.92) 100%)}
.hero__lead{max-width:26ch}
.hero__dates{display:flex;flex-direction:column;gap:var(--s10);padding-top:var(--s20);border-top:var(--bw) solid var(--rule)}
.hero__dates li{display:flex;flex-direction:column;gap:var(--s4);font-size:var(--t-small);color:var(--fg-2)}
.hero__dates li span:last-child{color:var(--fg-3);font-size:var(--t-micro);letter-spacing:.02em}
.hero__partner{font-size:var(--t-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--fg-3)}
/* Aviso de rolagem: no alto da faixa de foto, onde o olho cai depois da
   manchete, e com seta apontando para onde se deve ir. */
/* Centralizado na horizontal, que e onde o olho procura um aviso de rolagem.
   Fica no alto da foto, como o Sandro pediu em 03/09: no meio vertical
   competiria com a propria imagem, que ali e o assunto. */
.hero__scroll{
  position:absolute;z-index:3;
  top:var(--s30);left:50%;transform:translateX(-50%);
  margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--s20);
  font-size:var(--t-micro);line-height:1;letter-spacing:.24em;
  text-transform:uppercase;color:var(--fg-3);
}
/* A entreletra larga deixa um vao depois da ultima letra e joga a palavra para
   a esquerda do centro. O recuo devolve o centro optico. */
.hero__scroll span{text-indent:.24em}
/* Traco mais longo e mais lento, com a ponta acendendo na descida: le como
   gesto, e nao como icone piscando. */
.hero__scroll svg{width:9px;height:38px;overflow:visible;animation:scrollNudge 3.2s ease-in-out infinite}
@keyframes scrollNudge{
  0%   {transform:translateY(-3px);opacity:.30}
  55%  {transform:translateY(5px); opacity:1}
  100% {transform:translateY(-3px);opacity:.30}}

/* --- 10. VISAO E MISSAO ------------------------------------------------- */
.vm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter) var(--s50)}
.vm__item{display:flex;flex-direction:column;gap:var(--s10);padding-top:var(--s20);border-top:var(--bw) solid var(--rule-soft)}
.vm__item p:last-child{color:var(--fg-2);max-width:44ch}
/* Visao e missao ganharam texto tres vezes maior no B1: o corpo desce de 21px
   para 18px, senao a medida de linha cai para 40 caracteres. */
.vm__item .t-lead{font-size:1.125rem;line-height:var(--lh-lead)}

/* --- 11. DECLARACOES QUE ACENDEM --------------------------------------- */
.statements{display:flex;flex-direction:column;gap:var(--s50)}
.statement{
  font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);
  font-weight:var(--fw-light);opacity:.1;transition:opacity .45s ease;
}
.statement[data-i="0"]{color:var(--fg-3)}
.statement[data-i="1"]{color:var(--fg-2)}
.statement[data-i="2"]{color:var(--fg)}
.statement[data-i="3"]{color:var(--fg-2)}

/* --- 12. CARDS QUE SE SOBREPOEM ---------------------------------------- */
.stack{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:flex-start}
.stack__over{position:relative;z-index:2;width:100%;background:var(--bg)}
.stack .card{position:sticky;top:0}
.card{
  width:100%;min-height:100svh;height:auto;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:calc(var(--header-h) + var(--s75)) 0 var(--s50);
  border-top:var(--bw) solid var(--rule);overflow:hidden;background:var(--bg);
}
.card__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.card__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) contrast(1.05);
  transform-origin:center 55%;will-change:transform;transform:scale(1.05)}
/* Aproximacao de camera, continua e sem salto. */
.card__bg img{animation:bgPush 16s ease-in-out infinite alternate}
@keyframes bgPush{
  from{transform:scale(1.05) translate3d(1.6%,-.8%,0)}
  to{transform:scale(1.20) translate3d(-1.6%,.8%,0)}}
/* O veu volta a fechar no pe do card. Antes terminava em .30, entao a ultima
   faixa visivel antes de o card ser coberto era a parte MAIS clara da foto, e o
   bloco seguinte entrava por cima dela com borda dura. Era a faixa que o Sandro
   apontou em 04/09 no card 05. */
/* Muitas paradas, formando uma curva sem canto. Com poucas paradas o gradiente
   ficava quase plano ate 30% e despencava depois: a mudanca brusca de
   inclinacao vira uma borda visivel, e em movimento ela cintila. Foi o que o
   Sandro viu no card 05 em 04/09, sempre na mesma altura, 30% do card. */
.card__bg .shade{position:absolute;inset:0;transform:translateZ(0);
  background:linear-gradient(to bottom,
    rgba(19,41,74,.93) 0%,  rgba(19,41,74,.905) 8%, rgba(19,41,74,.875) 16%,
    rgba(19,41,74,.84) 24%, rgba(19,41,74,.80) 32%, rgba(19,41,74,.755) 40%,
    rgba(19,41,74,.71) 48%, rgba(19,41,74,.665) 56%, rgba(19,41,74,.635) 64%,
    rgba(19,41,74,.63) 70%, rgba(19,41,74,.655) 76%, rgba(19,41,74,.715) 82%,
    rgba(19,41,74,.80) 89%, rgba(19,41,74,.885) 95%, rgba(19,41,74,.93) 100%)}
.card--tint{background:var(--bg-lift)}
/* Nos cards de curso a imagem precisa ser vista: a cliente pediu fundo de
   imagem justamente porque a metade de baixo lia como vazio. O topo segue
   escuro para o texto nao perder contraste. */
/* A cliente pediu imagem de fundo nos dois cards de curso porque a metade da
   direita lia como vazio. Em vez de foto sangrando por baixo do texto, a foto
   e mascarada e so existe da direita do bloco de texto para fora: a coluna de
   leitura continua em fundo chapado e nenhuma linha perde contraste. Medido:
   com a foto sangrando, o pior pixel sob o texto dava 2,08:1. */
#card-march .card__bg,#card-june .card__bg{
  -webkit-mask:linear-gradient(to right,transparent 0%,transparent 46%,#000 74%,#000 100%);
          mask:linear-gradient(to right,transparent 0%,transparent 46%,#000 74%,#000 100%);
}
#card-march .card__bg .shade,#card-june .card__bg .shade{
  background:linear-gradient(to bottom,
    rgba(19,41,74,.84) 0%,  rgba(19,41,74,.805) 10%, rgba(19,41,74,.765) 20%,
    rgba(19,41,74,.72) 30%, rgba(19,41,74,.675) 40%, rgba(19,41,74,.64) 50%,
    rgba(19,41,74,.625) 58%, rgba(19,41,74,.64) 66%, rgba(19,41,74,.70) 76%,
    rgba(19,41,74,.79) 86%, rgba(19,41,74,.87) 94%, rgba(19,41,74,.91) 100%)
}
/* Abaixo de 1024 a foto DEIXAVA DE EXISTIR, e a cliente reclamou em 07/09:
   "on my phone I don't see pictures here, but on my PC I do". O corte tinha
   motivo e nao foi descuido: com o texto ocupando a largura toda, a foto
   passava por baixo das linhas e o pior pixel sob o texto dava 2,08:1.
   Esconder salvava o contraste e matava o pedido dela.
   A saida veio da propria cliente, que apontou o card 04 como o certo: ali a
   foto sangra no fundo e o veu do sistema a rebaixa, com leitura limpa por
   cima. O Sandro fechou por esse padrao em 07/09.
   So repetir o card 04 nao bastava: a foto dele e naturalmente escura, e
   bg-march e bg-june tem ceu e reflexo claros exatamente onde ficam os
   rotulos pequenos. Repetindo o veu dele tal e qual, o pior caso parava em
   3,19:1, ainda abaixo do minimo. Tres ajustes medidos, e nao chutados,
   resolvem sem apagar a foto:
     1. a mascara lateral sai, que so faz sentido com texto em meia largura;
     2. o veu do card 04 sobe 0,06 e a foto perde 8% de brilho;
     3. os rotulos minusculos sobem um degrau, de --fg-3 para --fg-2, e
        continuam mais apagados que os valores acima deles.
   Resultado medido no pixel real das duas fotos, com o veu e o filtro
   aplicados: pior caso 5,10:1 contra o minimo de 4,5. A foto fica com 20,7%
   de presenca, ante 26,7% do card 04. */
@media (max-width:63.99rem){
  #card-march .card__bg,#card-june .card__bg{-webkit-mask:none;mask:none}
  #card-march .card__bg img,#card-june .card__bg img{
    filter:saturate(.55) brightness(.92) contrast(1.05)
  }
  #card-march .card__meta span,#card-june .card__meta span{color:var(--fg-2)}
  #card-march .card__bg .shade,#card-june .card__bg .shade{
    background:linear-gradient(to bottom,
      rgba(19,41,74,.96) 0%,  rgba(19,41,74,.96) 8%,  rgba(19,41,74,.935) 16%,
      rgba(19,41,74,.90) 24%, rgba(19,41,74,.86) 32%, rgba(19,41,74,.815) 40%,
      rgba(19,41,74,.77) 48%, rgba(19,41,74,.725) 56%, rgba(19,41,74,.695) 64%,
      rgba(19,41,74,.69) 70%, rgba(19,41,74,.715) 76%, rgba(19,41,74,.775) 82%,
      rgba(19,41,74,.86) 89%, rgba(19,41,74,.945) 95%, rgba(19,41,74,.96) 100%)
  }
}
.card--deep{background:var(--bg-deep)}
.card__inner{position:relative;z-index:2;width:100%}
/* Paralaxe: numeral e texto andam em ritmos diferentes. Ver o script no fim. */
.card__num{
  will-change:transform;
  font-size:var(--t-numeral);line-height:.9;font-weight:var(--fw-light);
  color:var(--rule);letter-spacing:-.04em;
}
.card__body{display:flex;flex-direction:column;gap:var(--s20);will-change:transform,opacity}
.card__title{max-width:18ch}
.card__meta{display:flex;flex-wrap:wrap;gap:var(--s10) var(--s30);padding-top:var(--s20);border-top:var(--bw) solid var(--rule)}
.card__meta div{display:flex;flex-direction:column;gap:var(--s4);min-width:140px}
.card__meta b{font-weight:var(--fw-regular);color:var(--fg);font-size:var(--t-lead);letter-spacing:var(--ls-lead)}
.card__meta span{font-size:var(--t-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--fg-3)}
.card__actions{display:flex;flex-wrap:wrap;gap:var(--s20);align-items:center;padding-top:var(--s10)}
/* will-change:opacity poe o veu numa camada propria: a opacidade passa a ser
   trabalho do compositor e o navegador para de repintar a area do card a cada
   quadro da rolagem. */
.card__veil{position:absolute;inset:0;z-index:3;background:var(--bg);opacity:0;
  pointer-events:none;will-change:opacity}
/* Faixa de retratos do card dos professores */
.card__faces{position:absolute;z-index:1;inset:auto 0 0 0;height:52%;opacity:.5;overflow:hidden}
/* Trilho continuo. O conjunto dos oito entra duas vezes, entao o laco nao tem salto.
   Anda da esquerda para a direita, 85s por volta. */
.card__faces-track{display:flex;width:200%;height:100%;animation:facesDrift 85s linear infinite}
.card__faces img{flex:0 0 6.25%;min-width:0;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
@keyframes facesDrift{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.card__faces::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--bg) 0%,rgba(19,41,74,.62) 38%,rgba(19,41,74,.28) 100%)}

/* --- 13. DETALHE DOS CURSOS -------------------------------------------- */
.detail{display:flex;flex-direction:column;gap:var(--s50)}
/* Os oito temas sao outro tipo de conteudo, nao mais uma nota. So espaco,
   sem regua: a regua atravessa a largura toda enquanto o texto de cima esta
   numa coluna estreita, e fica solta. */
/* Fundo de imagem numa dobra inteira. Mesmo tratamento dos cards: imagem
   dessaturada sob um veu escuro, para o texto continuar no piso AA. */
.section--bg{position:relative;overflow:hidden;background:var(--bg-deep)}
.section__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.section__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) contrast(1.05);
  transform-origin:center 55%;will-change:transform;animation:bgPush 16s ease-in-out infinite alternate}
.section__bg .shade{position:absolute;inset:0;transform:translateZ(0);
  background:linear-gradient(to bottom,rgba(19,41,74,.90) 0%,rgba(19,41,74,.84) 40%,rgba(19,41,74,.90) 100%)}
.section--bg .layout{position:relative;z-index:1}
/* Sobre a imagem a celula do tema fica translucida, senao a foto some atras dela. */
.section--bg .theme{background:rgba(19,41,74,.82)}
.section--bg .themes{background:var(--rule-soft)}

/* O texto de conteudo do curso, que a cliente pediu em 03/09 para subir
   da secao de detalhe para o proprio card. */
.card__overview{color:var(--fg-2);max-width:56ch}
.detail__row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:var(--gutter);padding-top:var(--s30);border-top:var(--bw) solid var(--rule-soft)}
.detail__note{color:var(--fg-3);font-size:var(--t-small);max-width:var(--measure)}
.detail__note + .detail__note{margin-top:var(--s10)}
.chip{
  display:inline-block;padding:var(--s10) var(--s10);
  border:var(--bw) solid var(--rule);color:var(--fg-2);
  font-size:var(--t-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;
}
.deadline{font-size:var(--t-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--fg-3)}

/* Oito temas */
.themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--bw);background:var(--rule-soft);border:var(--bw) solid var(--rule-soft)}
.theme{background:var(--bg);padding:var(--s30);display:flex;flex-direction:column;gap:var(--s10);min-height:160px}
.theme__num{font-size:var(--t-micro);letter-spacing:var(--ls-micro);color:var(--fg-3)}
.theme__name{color:var(--fg);font-size:var(--t-body);line-height:1.3}
.theme__desc{font-size:var(--t-small);color:var(--fg-3)}

/* --- 14. METODO --------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.step{display:flex;flex-direction:column;gap:var(--s10);padding-top:var(--s20);border-top:var(--bw) solid var(--rule)}
.step__num{font-size:var(--t-micro);letter-spacing:var(--ls-micro);color:var(--fg-3)}
.step p{color:var(--fg-3)}
/* A citacao atravessa a coluna inteira. Antes tinha 26ch e lia como uma
   quarta coluna dos passos, que foi o apontamento da cliente em 03/09. */
.quote{padding:var(--s50) 0 0;margin-top:var(--s75);border-top:var(--bw) solid var(--rule)}
.quote p{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);color:var(--fg);font-weight:var(--fw-light);max-width:none}
.quote cite{display:block;margin-top:var(--s10);font-style:normal;font-size:var(--t-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--fg-3)}

/* --- 15. PROFESSORES ---------------------------------------------------- */
.people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter) var(--gutter)}
.person{display:flex;flex-direction:column;gap:var(--s10)}
.person__frame{display:block;overflow:hidden;background:var(--bg-deep)}
.person__photo{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--bg-deep);
  filter:grayscale(1) contrast(1.06);
  transition:filter .6s ease, transform .9s cubic-bezier(.16,1,.3,1)}
.person:hover .person__photo,.person:focus-within .person__photo{filter:grayscale(0) contrast(1);transform:scale(1.05)}
.person__name{color:var(--fg);font-size:var(--t-body);line-height:1.3}
.person__role{font-size:var(--t-small);color:var(--fg-3)}
/* Tema que a pessoa ensina. Mesmo tamanho e tracking do pais, um tom mais
   claro, para o tema pesar mais que o pais e menos que o cargo. O respiro
   extra em cima separa o cargo do bloco de metadados; o gap do .person ja
   cuida do espaco entre tema e pais. */
.person__theme{font-size:var(--t-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--fg-2);margin-top:var(--s10)}
.person__country{font-size:var(--t-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--fg-3)}

/* --- 16. PUBLICO -------------------------------------------------------- */
.aud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.aud__item{padding:var(--s20) 0;border-top:var(--bw) solid var(--rule-soft);display:flex;flex-direction:column;gap:var(--s5)}
.aud__who{color:var(--fg);font-size:var(--t-body)}
.aud__line{font-size:var(--t-small);color:var(--fg-3)}
@media (min-width:64rem){ .aud{column-gap:var(--s50)} }

/* --- 17. PERGUNTAS ------------------------------------------------------ */
.qa{border-top:var(--bw) solid var(--rule-soft)}
.qa:last-child{border-bottom:var(--bw) solid var(--rule-soft)}
.qa__q{
  width:100%;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s20);
  padding:var(--s20) 0;background:none;border:0;cursor:pointer;text-align:left;
  font-size:var(--t-body);font-weight:var(--fw-light);color:var(--fg);
}
.qa__q:hover{color:var(--fg-2)}
.qa__q .ico{position:relative;flex:0 0 12px;width:12px;height:12px;margin-top:.45em}
.qa__q .ico::before,.qa__q .ico::after{content:"";position:absolute;background:currentColor;transition:transform .3s ease,opacity .3s ease}
.qa__q .ico::before{top:5px;left:0;width:12px;height:var(--bw)}
.qa__q .ico::after{top:0;left:5px;width:var(--bw);height:12px}
.qa__q[aria-expanded="true"] .ico::after{transform:scaleY(0);opacity:0}
.qa__a{padding:0 0 var(--s20);max-width:var(--measure);color:var(--fg-3)}
.qa__a p + p{margin-top:var(--s10)}

/* --- 18. WEBINAR -------------------------------------------------------- */
.webinar{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:var(--gutter);align-items:end}
.webinar__when{display:flex;flex-direction:column;gap:var(--s20);padding-top:var(--s20);border-top:var(--bw) solid var(--rule)}
.fact{display:flex;flex-direction:column;gap:var(--s4)}
.fact b{font-weight:var(--fw-regular);color:var(--fg);font-size:var(--t-lead);letter-spacing:var(--ls-lead)}
.fact span{font-size:var(--t-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--fg-3)}

/* --- 19. RODAPE --------------------------------------------------------- */
/* Rodape no azul da marca, para fechar a pagina como bloco separado. A propria
   troca de cor faz a divisao, entao a regua de cima sai: duas separacoes no
   mesmo lugar viram borda dupla. */
.foot{position:relative;z-index:1;padding-top:var(--block);padding-bottom:var(--s50);background:var(--bg-lift)}
.foot__grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:var(--gutter)}
.foot__mark{height:34px;width:auto;color:var(--fg);margin-bottom:var(--s20)}
.foot__tag{color:var(--fg-2);max-width:26ch}
.foot__contact{display:flex;flex-direction:column;gap:var(--s5)}
.foot__contact a{text-decoration:none;color:var(--fg-2)}
.foot__contact a:hover{color:var(--fg)}

/* O aviso de privacidade. Corpo menor e medida curta: e para ser lido por quem
   procura, sem disputar atencao com o resto da pagina. */
/* Divide por tom, nao por linha. A cliente apontou em 05/09 que a abertura e o
   Proposito corriam juntos: a foto terminava dissolvendo na mesma cor da dobra
   seguinte. E a mesma solucao do rodape. */
/* Dobra propria pede respiro proprio: em superficie fechada, o que numa dobra
   solta parece folga, aqui parece aperto. E o pe leva mais que o topo porque a
   celula ja tem 20px de padding em cima: com padding simetrico o texto fica
   visivelmente mais perto da base. */
.section--surface{
  background:var(--bg-deep);
  padding-block:calc(var(--block) + var(--s30)) calc(var(--block) + var(--s75));
}
.section--legal{padding-block:var(--s100) var(--block)}
.legal{max-width:68ch}
/* A gaveta do aviso e mais sobria que a das perguntas: e consulta, nao venda. */
.qa--legal{border-top:var(--bw) solid var(--rule-soft);border-bottom:var(--bw) solid var(--rule-soft)}
.qa--legal .qa__q{font-size:var(--t-lead)}
.qa--legal .qa__a{display:flex;flex-direction:column;gap:var(--s20)}
.legal h2{margin-bottom:var(--s10)}
.legal p{font-size:var(--t-small);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--fg-3)}
/* O link de contato fica com 24px de alvo. Em elemento em linha o padding
   vertical entra na area de clique sem mexer na altura da linha, entao o
   paragrafo nao muda de forma. A WCAG isenta link dentro de frase; aqui e
   folga de graca, nao correcao de falha. */
.legal a.inline{padding-block:3px}
.legal__sign{margin-top:var(--s20);color:var(--fg-2) !important}
.legal__date{font-size:var(--t-micro) !important;letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--fg-3) !important}
.foot__legal-co{display:flex;flex-direction:column;gap:var(--s4)}
/* Os dois links do rodape, lado a lado. O .foot__legal ja e flex com
   space-between, entao o grupo fica a direita e, no telefone, quebra abaixo da
   linha da empresa. Mesma fonte, tamanho e cor do aviso de privacidade: o
   credito do estudio nao pesa mais que o link legal. */
.foot__legal-links{display:flex;flex-wrap:wrap;gap:var(--s20)}
.foot__legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s10);
  margin-top:var(--s50);padding-top:var(--s20);border-top:var(--bw) solid var(--rule-soft);
  font-size:var(--t-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--fg-3);
}

/* --- 20. BARRA FIXA DO TELEFONE ---------------------------------------- */
.stickybar{
  position:fixed;z-index:40;left:0;right:0;bottom:0;display:none;
  padding:var(--s10) var(--margin) calc(var(--s10) + env(safe-area-inset-bottom));
  background:rgba(19,41,74,.98);border-top:var(--bw) solid var(--rule-soft);
  transform:translateY(110%);transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.stickybar.is-on{transform:translateY(0)}

/* --- 21. DIALOGO E FORMULARIO ------------------------------------------ */
.dlg{
  border:0;padding:0;background:var(--bg);color:var(--fg-3);
  width:min(680px,100%);max-width:100%;max-height:92dvh;margin:auto;
  border-left:var(--bw) solid var(--rule);
}
.dlg::backdrop{background:rgba(13,27,48,.92)}
.dlg__inner{padding:var(--s50) var(--s30)}
.dlg__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s20);padding-bottom:var(--s30);border-bottom:var(--bw) solid var(--rule-soft);margin-bottom:var(--s30)}
.dlg__course{font-size:var(--t-small);color:var(--fg-3);margin-top:var(--s5)}
.dlg__close{width:44px;height:44px;flex:0 0 44px;background:none;border:var(--bw) solid var(--rule);color:var(--fg);font-size:20px;line-height:1;cursor:pointer}
.dlg__close:hover{background:var(--fg);color:var(--bg)}
.form{display:flex;flex-direction:column;gap:var(--s20)}
.choice{display:flex;flex-direction:column;gap:var(--s10)}
.choice__opt{display:flex;gap:var(--s10);align-items:flex-start;padding:var(--s10);border:var(--bw) solid var(--rule-soft);cursor:pointer}
.choice__opt:hover{border-color:var(--rule)}
.choice__opt input{margin-top:.35em;accent-color:var(--fg)}
.choice__opt b{display:block;font-weight:var(--fw-regular);color:var(--fg);font-size:var(--t-body)}
.choice__opt span{display:block;font-size:var(--t-micro);letter-spacing:.02em;color:var(--fg-3);margin-top:2px}
.field{display:flex;flex-direction:column;gap:var(--s5)}
.field__label{font-size:var(--t-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--fg-2);font-weight:var(--fw-medium)}
.field__help{font-size:var(--t-small);color:var(--fg-3)}
.field__input{
  width:100%;min-height:52px;padding:var(--s10) var(--s10);
  background:transparent;border:0;border-bottom:var(--bw) solid var(--rule);color:var(--fg);
  font-size:var(--t-body);font-weight:var(--fw-light);
}
.field__input:focus{outline:0;border-bottom-color:var(--fg)}
textarea.field__input{min-height:120px;padding-top:var(--s10);resize:vertical}
.field__error{font-size:var(--t-small);color:var(--error);padding:var(--s5) var(--s5);background:var(--error-bg)}
.field--error .field__input{border-bottom-color:var(--error)}
.consent{display:flex;gap:var(--s10);align-items:flex-start}
.consent input{margin-top:.3em;accent-color:var(--fg);width:18px;height:18px}
.consent label{font-size:var(--t-small);color:var(--fg-2)}
.form__foot{display:flex;flex-direction:column;gap:var(--s10);padding-top:var(--s10)}
.inline-msg{font-size:var(--t-small);color:var(--fg-3)}
.inline-msg--error{color:var(--error)}
.done{display:flex;flex-direction:column;gap:var(--s20)}
.done p{max-width:var(--measure)}
.done__where{color:var(--fg)}
.done__note{font-size:var(--t-small);color:var(--fg-3)}

/* --- 22. MOVIMENTO ------------------------------------------------------ */
.rise{opacity:1;transform:none}
.js .rise{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js .rise.is-in{opacity:1;transform:none}
.rise-2{transition-delay:.08s}.rise-3{transition-delay:.16s}.rise-4{transition-delay:.24s}

/* --- 23. RESPONSIVO ----------------------------------------------------- */
@media (max-width:79.9375rem){
  .people{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:63.9375rem){
  /* O cabecalho nao cabe com os dois botoes: o do webinar sai, porque o
     webinar tem entrada propria no menu desde 02/09. */
  .head__cta .btn--micro:first-child{display:none}
  .cols,.detail__row,.webinar,.foot__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .c-3,.c-4,.c-5{grid-column:span 3}
  .c-6,.c-7,.c-8,.c-10{grid-column:span 6}
  .steps{grid-template-columns:1fr;gap:var(--s30)}
  .people{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vm{grid-template-columns:1fr;gap:var(--s30)}
}
@media (max-width:47.9375rem){
  :root{--margin:16px;--gutter:12px;--sidebar:0px;--header-h:56px}
  .layout,.head{grid-template-columns:minmax(0,1fr);gap:0}
  .layout__side{padding-left:0;margin-bottom:var(--s20)}
  .head__mark{display:none}
  .nav{display:none}
  .head__cta .btn--micro:first-child{display:none}
  .head__cta .btn--micro{white-space:nowrap;padding:0 var(--s10);border-left:0}
  .head{background:rgba(19,41,74,.94);border-bottom:var(--bw) solid var(--rule-soft)}
  .head__bar{justify-content:space-between}
  .head__logo-mobile{display:flex;align-items:center}
  .head__logo-mobile svg{height:18px;width:auto;color:var(--fg)}
  .cols,.detail__row,.webinar,.foot__grid{grid-template-columns:minmax(0,1fr);gap:var(--s20)}
  .c-3,.c-4,.c-5,.c-6,.c-7,.c-8,.c-10{grid-column:span 1}
  .themes,.people,.aud{grid-template-columns:minmax(0,1fr)}
  .stickybar{display:block}
  body.has-bar{padding-bottom:76px}
  /* Sem sobreposicao no telefone: cada area vira uma secao normal. */
  .stack .card{position:relative;top:auto}
  .card{min-height:auto;padding:calc(var(--header-h) + var(--s30)) 0 var(--s50)}
  .card__veil{display:none}
  .card__faces{height:38%}
  /* acima de 6 linhas o navegador ignora balance: no telefone a declaracao usa pretty */
  .statement{text-wrap:pretty}
  .hero__intro{min-height:auto;padding-top:calc(var(--header-h) + var(--s30));padding-bottom:var(--s50)}
  .hero__media{min-height:62svh}
  .hero__scroll{top:var(--s20)}
  .dlg{width:100%;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-left:0}
  .dlg__inner{padding:var(--s30) var(--margin)}
}
@media (min-width:48rem){ .head__logo-mobile{display:none} }


}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .rise{opacity:1;transform:none}
  .statement{opacity:1}
  .hero__media img{animation:none;transform:none}
  .card__faces-track{animation:none;transform:none;width:100%}
  .card__bg img{animation:none;transform:none}
  .person:hover .person__photo{transform:none}
  .hero__scroll svg{animation:none}
  .hero__intro{position:relative;top:auto;min-height:auto}
  .hero__top,.hero__statement{transform:none!important;opacity:1!important}
  .card__body,.card__num{transform:none!important;opacity:1!important}
  .card__faces img{flex:0 0 12.5%}
  .stack .card{position:relative;top:auto}
  .card{min-height:auto;padding:var(--s75) 0}
  .card__veil{display:none}
}

/* --- 22. PAGINA DA EQUIPE ----------------------------------------------
   Vive aqui, e nao num arquivo so dela, porque a partir de 20/10 este CSS e
   compartilhado entre o index.html e o team.html. A home nao usa nenhuma
   destas classes, entao nada muda la. */
/* Foto a esquerda, uma coluna, e nao a grade 2 x 2 que a diretriz sugeria.
   Comparadas as duas renderizadas: na 2 x 2 o retrato ia a 575px, o dobro dos
   274px dos professores, e dominava a pagina; tres perfis cabem aqui na mesma
   altura em que a outra mostrava dois. Em 240px o retrato fica na escala do
   resto do site e a bio le num comprimento de linha confortavel ao lado. */
/* O respiro entre perfis e maior que o de dentro do card de proposito:
   com retrato de 240px e bio de dez linhas, 50px colava um perfil no
   outro e o "Contact" de um ficava mais perto da foto do seguinte do que
   do proprio texto. O margin-top vem do --block, a mesma regua que separa
   secoes na home, agora aplicada uma vez so: a lista deixou de ser secao
   propria e virou continuacao da abertura. */
.team{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s100);margin-top:var(--block)}
.profile{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--gutter) var(--s50);align-items:start}
.profile__text{display:flex;flex-direction:column;gap:var(--s10)}
.profile__bio{font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2);max-width:60ch}
.profile__contact{font-size:var(--t-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;color:var(--fg-3);margin-top:var(--s10)}
.profile__contact a{color:var(--fg-2)}
/* Moldura sem foto, para quem ainda nao mandou retrato. Guarda o lugar e o
   ritmo da grade sem inventar icone nem texto de espera. */
.person__frame--empty{aspect-ratio:1;background:var(--bg-deep)}
/* No telefone a foto sobe para cima do texto: 240px ao lado de uma bio nao
   cabe em 390. */
@media (max-width:1023px){.team{gap:var(--s75)}}
@media (max-width:767px){.profile{grid-template-columns:minmax(0,1fr)}}