/* =========================================================
   Ethel Adventure — Landing Page
   Referência: lp-etheladventure.png (1920 × 2835)
   Todas as medidas derivam da referência: 1rem = 16px @ 1920px
   ========================================================= */

@font-face{
  font-family:"Serena";
  src:url("../fonts/Serena.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
/* Lora (SIL OFL), subconjunto latino: 22 KB. Substituiu a Butler, que nao
   trazia nenhuma tabela de hinting e desmanchava em tamanhos pequenos. */
@font-face{
  font-family:"Lora";
  src:url("../fonts/Lora-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  /* A página já é escura. Sem esta declaração, o modo escuro forçado do
     Chrome/Samsung Internet reescreve as cores por conta própria: o dourado do
     H2 vira marrom e o branco do shimmer some. Declarando `dark`, o navegador
     entende que o site cuida do próprio tema e não interfere. */
  color-scheme:dark;

  --creme:#fdedcd;              /* título do hero */
  --ouro-topo:#ecc45e;          /* gradiente do H2 — topo */
  --ouro-base:#f6ecd7;          /* gradiente do H2 — base */
  --navy:#052249;               /* azul plano do fundo da seção 2 */
  --branco:#fff;

  --hero-h:75.875rem;           /* 1214px */
  --sec2-h:103.875rem;          /* 1662px — altura do PNG de fundo da seção 2 */
  --sec2-pull:-2.5625rem;       /*  -41px — sobe a seção para o emblema da divisa
                                   ultrapassar o fio dourado sobre o hero */
}

/* Escala fiel: 1rem = 16px exatos em 1920px de largura.
   Acima disso trava para não estourar; abaixo encolhe junto. */
html{ font-size:0.833333vw; }
@media (min-width:1920px){ html{ font-size:16px; } }

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--navy);
  color:var(--branco);
  font-family:"Lora",Georgia,"Times New Roman",serif;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
ul{ margin:0; padding:0; list-style:none; }

/* =========================================================
   HERO
   -----------------------------------------------------------
   A referência tem 1920×1214 (1,58:1), mas um navegador maximizado em Full HD
   dá ~2,05:1 — nessa proporção o CTA era cortado e o botão do Instagram ficava
   fora da tela. O hero agora ocupa a altura da viewport e o bloco de conteúdo
   é escalado para caber, preservando as proporções internas da referência.

   --u = 1 pixel do projeto original. Vale o menor entre o que a largura permite
   e o que a altura permite, travado em 1px para nunca passar do tamanho de
   projeto. 1120 = união (personagem + conteúdo = 949px) + respiro.
   O padding inferior reserva a faixa onde a seção 2 sobe (--sec2-pull), para o
   emblema da divisa não cobrir o botão do Instagram.
   ========================================================= */
.hero{
  --u:min(0.0520833vw, 0.0892857svh, 1px);
  position:relative;
  height:max(100svh, calc(var(--u) * 1120));
  padding-bottom:calc(var(--u) * 90);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
@supports not (height:1svh){
  .hero{ --u:min(0.0520833vw, 0.0892857vh, 1px); height:max(100vh, calc(var(--u) * 1120)); }
}

/* `cover` garante cobertura em qualquer proporção; o transform acrescenta o
   zoom da referência (que enquadrava a arte 12% maior e deslocada para a
   direita) sem risco de sobrar borda. */
.hero__bg{
  position:absolute; inset:0;
  background:url("../img/hero-bg.webp") no-repeat 50% 50%/cover;
  transform:scale(1.1234);
  transform-origin:98.73% 2.55%;
}

/* Os dois degradês do hero são camadas separadas porque a personagem fica
   ENTRE eles. Cor e opacidade vieram de regressão linear entre a referência e o
   fundo já alinhado: overlay azul rgb(0,45,140), não preto.

   Camada 1 — scrim que escurece o topo. Fica ATRÁS da personagem (z-index 1). */
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(0,45,140,.82)   0%,
    rgba(0,45,140,.69) 6.6%,
    rgba(0,45,140,.51)11.5%,
    rgba(0,45,140,.30)16.5%,
    rgba(0,45,140,.11)21.4%,
    rgba(0,45,140,0) 26.8%);
}

/* Camada 2 — núcleo radial que destaca título e botões. Acompanha o bloco de
   conteúdo (raios e deslocamento em --u), por isso continua no lugar certo em
   qualquer altura de tela. Fica À FRENTE da personagem (z-index 3): na
   referência a saia e a bota dela aparecem ~28% mais escuras que o topo. */
.hero__glow{
  position:absolute; inset:0; z-index:3;
  background:
    radial-gradient(ellipse calc(var(--u)*740) calc(var(--u)*400)
      at 50% calc(50% + var(--u)*185.5),
      rgba(0,45,140,.95)   0%,
      rgba(0,45,140,.84)  50%,
      rgba(0,45,140,.67)  61%,
      rgba(0,45,140,.49)  73%,
      rgba(0,45,140,.24)  85%,
      rgba(0,45,140,.03)  97%,
      rgba(0,45,140,0)   100%);
}

/* padding-top = 68u: distância entre o topo da personagem (y=120 na referência)
   e o topo do logo (y=188). Assim o que é centralizado na tela é a união dos
   dois, e a personagem nunca é cortada em cima. */
.hero__inner{
  position:relative; z-index:4;
  width:calc(var(--u) * 1920);
  padding-top:calc(var(--u) * 68);
  display:flex; flex-direction:column; align-items:center;
}

/* Ancorada ao centro do hero nas mesmas unidades do conteúdo: 199u à direita
   do eixo (1159-960) e 474.5u acima do centro (metade da união de 949u). */
.hero__npc{
  position:absolute;
  left:calc(50% + var(--u) * 199);
  top:calc(50% - var(--u) * 519.5);
  width:calc(var(--u) * 563);
  height:auto;
  z-index:2;
  pointer-events:none;
  /* o deslocamento é em %, relativo à própria altura da imagem, então a
     amplitude acompanha a escala do hero sem depender de --u */
  animation:flutua 10s linear infinite;
  will-change:transform;
}

/* Curva senoidal amostrada a cada 5%, percorrida em `linear`.
   Com `ease-in-out` a suavizacao vale para CADA trecho entre keyframes, e
   a velocidade zerava em 25%, 50% e 75% — o anjo parecia parar no meio da
   subida e da descida. Aqui a suavidade esta nos proprios valores, entao o
   movimento e continuo do inicio ao fim. */
@keyframes flutua{
    0%{ transform:translateY(0.000%) rotate(0.000deg); }
    5%{ transform:translateY(-0.093%) rotate(0.155deg); }
   10%{ transform:translateY(-0.363%) rotate(0.294deg); }
   15%{ transform:translateY(-0.783%) rotate(0.405deg); }
   20%{ transform:translateY(-1.313%) rotate(0.476deg); }
   25%{ transform:translateY(-1.900%) rotate(0.500deg); }
   30%{ transform:translateY(-2.487%) rotate(0.476deg); }
   35%{ transform:translateY(-3.017%) rotate(0.405deg); }
   40%{ transform:translateY(-3.437%) rotate(0.294deg); }
   45%{ transform:translateY(-3.707%) rotate(0.155deg); }
   50%{ transform:translateY(-3.800%) rotate(0.000deg); }
   55%{ transform:translateY(-3.707%) rotate(-0.155deg); }
   60%{ transform:translateY(-3.437%) rotate(-0.294deg); }
   65%{ transform:translateY(-3.017%) rotate(-0.405deg); }
   70%{ transform:translateY(-2.487%) rotate(-0.476deg); }
   75%{ transform:translateY(-1.900%) rotate(-0.500deg); }
   80%{ transform:translateY(-1.313%) rotate(-0.476deg); }
   85%{ transform:translateY(-0.783%) rotate(-0.405deg); }
   90%{ transform:translateY(-0.363%) rotate(-0.294deg); }
   95%{ transform:translateY(-0.093%) rotate(-0.155deg); }
  100%{ transform:translateY(0.000%) rotate(0.000deg); }
}

/* o logo da referência não está centralizado: fica ~10px à direita do eixo */
.hero__logo{     width:calc(var(--u) * 765); margin-left:calc(var(--u) * 10); }
.hero__divider{  width:calc(var(--u) * 494); margin-top:calc(var(--u) * 15); }

.hero__title{
  margin:0;
  font-family:"Serena",serif;
  font-weight:400;
  text-transform:uppercase;
  color:var(--creme);
  text-align:center;
  text-shadow:0 calc(var(--u)*2) calc(var(--u)*6) rgba(2,14,52,.45);
}
.hero__title-a,.hero__title-b{ display:block; line-height:1; }
.hero__title-a{
  margin-top:calc(var(--u) * 21);
  font-size:calc(var(--u) * 61);
  letter-spacing:-.0172em;
}
.hero__title-b{
  margin-top:calc(var(--u) * -2);
  font-size:calc(var(--u) * 66);
  letter-spacing:.0205em;
}

/* A Butler nao traz nenhuma tabela de hinting (e uma CFF sem fpgm/prep/cvt) e
   tem contraste de didone: abaixo de ~21px as serifas finas nao tem pixel
   suficiente e o texto parece serrilhado. O piso impede que ela encolha ate la.

   A Lora resolveu isso (tem hinting e tracos mais robustos), entao o piso caiu
   para 16px — o suficiente para legibilidade, sem distorcer a proporcao.

   O corpo e 23.9 e nao 26 porque a Lora desenha 9% mais larga que a Butler no
   mesmo tamanho; assim a medida de linha continua igual a da referencia. Como
   o x-height dela e 19% maior, o texto ainda parece maior que antes.
   O line-height e adimensional para acompanhar o piso sem sobrepor linhas. */
.hero__sub{
  margin:calc(var(--u) * 25.5) 0 0;
  font-size:max(16px, calc(var(--u) * 23.9));
  line-height:1.339;           /* mantem as duas linhas a 32u de distancia */
  letter-spacing:.008em;
  text-align:center;
  color:var(--branco);
  text-shadow:0 calc(var(--u)*1) calc(var(--u)*4) rgba(2,14,52,.5);
}

.btn{ display:block; transition:transform .18s ease, filter .18s ease; }
.btn:hover{ transform:translateY(-.125rem); filter:brightness(1.08); }
.btn:focus-visible{ outline:.1875rem solid #ffd97a; outline-offset:.25rem; border-radius:.5rem; }

.btn--cta{ position:relative; width:calc(var(--u) * 671); margin-top:calc(var(--u) * 40); }

/* O brilho é recortado pela silhueta do próprio PNG do botão (máscara), senão
   vazaria nos cantos transparentes do hexágono.
   A faixa clara mora num gradiente 3x mais largo que o botão; animar
   background-position de 100% a 0% faz a faixa atravessar da esquerda para a
   direita. O trecho final da timeline é a pausa entre uma passada e outra. */
/* Só cria o brilho se a máscara funcionar. Sem ela o gradiente claro
   apareceria como um retângulo por cima do botão, pior que não ter efeito. */
@supports ((mask-image:url("")) or (-webkit-mask-image:url(""))){
.btn--cta::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  /* O mesmo degradê, porém como imagem: gerado na proporção exata de
     300% x 100% do botão, então o ângulo sai idêntico ao do CSS. Em
     gradiente puro, o modo escuro do Samsung escurecia a faixa branca. */
  background-image:url("../img/brilho.webp");
  background-size:300% 100%;
  background-repeat:no-repeat;
  -webkit-mask:url("../img/btn-cadastro.webp") 0 0/100% 100% no-repeat;
          mask:url("../img/btn-cadastro.webp") 0 0/100% 100% no-repeat;
  animation:brilho-cta 6.8s ease-in-out infinite;
}
}

@keyframes brilho-cta{
  0%       { background-position:100% 0; }
  46%,100% { background-position:0% 0; }
}
.btn--insta{ width:calc(var(--u) * 348); margin-top:calc(var(--u) * 44); }

/* =========================================================
   SEÇÃO 2 — CONTEÚDOS
   ========================================================= */
/* O fundo vem em duas metades que já desvanecem para transparente na borda
   interna: a de cima traz o fio dourado da divisa, o emblema em relevo e a
   folhagem superior; a de baixo traz o chão florido. Entre elas fica o azul
   plano (--navy), amostrado da própria arte.
   Como as metades se dissolvem no azul, a seção pode ter qualquer altura sem
   emenda, repetição ou deformação — a mesma regra serve do desktop ao celular.
   A metade de cima é transparente acima do fio dourado, por isso a seção sobe
   sobre o hero (--sec2-pull) em vez de recortar o emblema. */
.conteudos{
  position:relative;
  margin-top:var(--sec2-pull);
  min-height:var(--sec2-h);
  background:
    url("../img/sec2-bottom.webp") bottom center/100% auto no-repeat,
    url("../img/sec2-topo.webp")   top    center/100% auto no-repeat,
    /* O azul plano NÃO pode ser um background-color: ele pintaria a caixa
       inteira, inclusive a faixa que sobe sobre o hero (--sec2-pull), tapando
       o fim da arte do hero acima do fio dourado. Entra como camada deslocada
       2.45vw — logo abaixo do fio dourado, que fica a 47px quando a seção tem 1920
       de largura e acompanha a escala porque as metades usam `100% auto`. */
    linear-gradient(var(--navy),var(--navy)) 0 2.45vw/100% 100% no-repeat;
  /* 119px: a linha final em Lora ficou 4px mais alta que a versao em Serena.
     Sem compensar, a secao passaria de 1662px e o fundo ancorado na base
     desceria junto, desalinhando o chao florido. */
  /* 103px. A metade de baixo fica rente a base (`bottom`), nao deslocada: um
     deslocamento deixava uma fresta do azul liso na ultima faixa da pagina.
     O alinhamento do chao florido vem daqui — encurtar o padding sobe a base da
     secao e, com ela, a imagem, sem descolar da borda. */
  padding-bottom:6.4375rem;    /* 103px */
}

/* Degradê escuro nº2 — destaca "mais que um servidor".
   Núcleo medido em rgb(0,47,96). */
.conteudos__glow{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 31.25% 9.9% at 50% 90.3%,
      rgba(0,45,85,.74)   0%,
      rgba(0,45,85,.73)  19%,
      rgba(0,45,85,.70)  37%,
      rgba(0,45,85,.54)  56%,
      rgba(0,45,85,.25)  75%,
      rgba(0,45,85,.02)  94%,
      rgba(0,45,85,0)   100%);
  pointer-events:none;
}

.conteudos__inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  padding-top:7.5rem;          /* 120px */
}

/* A caixa mantém os mesmos 60px que o texto ocupava, para o fluxo abaixo
   (subtítulo, cards, rodapé) continuar exatamente onde estava. O recuo de 3px
   coloca a tinta na altura em que ficava o topo das maiúsculas. */
.conteudos__title{
  margin:0;
  height:3.75rem;              /* 60px */
  line-height:0;
}
.conteudos__title img{
  width:64.2346rem;            /* a tinta mede 1010px, a mesma da referência */
  height:auto;
  /* A imagem reserva 23px acima das maiúsculas — o acento do "Ú" da Serena é
     alto e antes estava sendo cortado. O recuo negativo devolve o topo das
     maiúsculas aos mesmos 3px em que ficava o texto. */
  margin:-1.25rem auto 0;      /* -20px = 3 - 23 */
}


.conteudos__sub{
  margin:.1875rem 0 0;         /* 3px */
  font-size:max(19px, 1.71875rem);  /* 27.5px @1920 — ver nota em .hero__sub */
  line-height:1.309;
  letter-spacing:.0073em;
  text-align:center;
  color:var(--branco);
}

/* ---------- grid de cards ---------- */
.cards{
  margin-top:1.0625rem;        /* 17px */
  width:99.75rem;              /* 1596px */
  display:grid;
  grid-template-columns:repeat(3,32.875rem);  /* 526px */
  column-gap:.5625rem;         /* 9px */
  row-gap:.0625rem;            /* 1px */
}
.cards__item img{
  width:100%;
  transition:transform .22s ease, filter .22s ease;
}
.cards__item img:hover{ transform:translateY(-.375rem) scale(1.012); filter:brightness(1.06); }

/* ---------- bloco final ---------- */
.outro__title{
  margin:2.0rem 0 0;
  font-family:"Serena",serif;
  font-weight:400;
  text-transform:uppercase;
  color:var(--branco);
  text-align:center;
  text-shadow:0 .125rem .4375rem rgba(0,12,38,.6);
}
.outro__title-a,.outro__title-b{ display:block; }
.outro__title-a{ font-size:2.3125rem; line-height:1; letter-spacing:-.0184em; }                     /* 37px */
.outro__title-b{ font-size:2.5rem;    line-height:1; letter-spacing:-.0175em; } /* 40px */

/* Em Lora e caixa mista (a referencia usava Serena em caixa alta). O corpo e
   24px porque a linha fica com 554px — logo abaixo dos 572px do titulo acima,
   o que mantem a hierarquia sem competir com ele. Sem letter-spacing: aquele
   valor tinha sido calibrado para a Serena. */
.outro__sub{
  margin:.75rem 0 0;           /* 12px */
  font-size:1.5rem;            /* 24px */
  line-height:1.35;
  text-align:center;
  color:var(--branco);
  text-shadow:0 .0625rem .3125rem rgba(0,12,38,.6);
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

/* Tablet — abaixo de 1100px a escala proporcional deixaria o texto pequeno
   demais (o projeto tem 1920 de base), então o hero passa a ser fluido. */
@media (max-width:1100px){
  html{ font-size:12px; }

  .hero{ height:auto; min-height:100svh; padding:5svh 0; }
  /* o zoom do desktop pressupõe formato panorâmico; aqui o `cover` sozinho
     já enquadra bem e o transform só cortaria o menino */
  .hero__bg{ transform:none; background-position:42% center; }
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(0,45,140,.72) 0%, rgba(0,45,140,.28) 14%, rgba(0,45,140,0) 26%);
  }
  .hero__glow{
    background:radial-gradient(ellipse 74% 42% at 50% 52%,
      rgba(0,45,140,.94) 0%, rgba(0,45,140,.84) 46%,
      rgba(0,45,140,.52) 72%, rgba(0,45,140,0) 100%);
  }

  .hero__inner{ width:100%; padding:0 3rem; }
  .hero__npc{ left:auto; right:-3vw; top:8%; width:30vw; opacity:.92; }

  .hero__logo{    width:min(46rem,56vw); margin-left:0; }
  .hero__divider{ width:min(30rem,37vw); margin-top:1rem; }
  .hero__title-a{ margin-top:1.8rem; font-size:min(3.6rem,4.6vw); }
  .hero__title-b{ margin-top:0;      font-size:min(3.9rem,5vw); }
  .hero__sub{     margin-top:1.7rem; font-size:max(19px,min(1.6rem,2vw)); line-height:1.5; }
  .btn--cta{      width:min(40rem,50vw); margin-top:2.4rem; }
  .btn--insta{    width:min(21rem,26vw); margin-top:2.2rem; }

  /* o fundo em duas metades já se adapta a qualquer altura — só desliga a
     altura mínima de projeto */
  .conteudos{ min-height:0; margin-top:-2rem; }

  .cards{
    width:auto; max-width:72rem; padding:0 2rem;
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:1rem; row-gap:1rem;
  }
}

/* Abaixo de 900px não sobra largura para a personagem sem que ela colida com
   o texto ou flutue solta no canto — melhor deixá-la de fora. */
@media (max-width:900px){
  .hero__npc{ display:none; }
}

/* Mobile */
@media (max-width:720px){
  html{ font-size:16px; }
  .hero{ height:auto; min-height:100svh; padding:2.5rem 0 3.5rem; }
  .hero__bg{ background-position:34% center; }
  .hero__glow{
    background:radial-gradient(ellipse 92% 46% at 50% 58%,
      rgba(3,24,112,.93) 0%, rgba(4,30,118,.82) 45%, rgba(6,34,104,.30) 78%, rgba(8,38,96,0) 100%);
  }
  .hero__npc{ display:none; }

  .hero__inner{ width:100%; padding:0 1.25rem; }
  .hero__logo{ width:min(20rem,80vw); margin-left:0; }
  .hero__divider{ width:min(15rem,60vw); margin-top:.75rem; }

  .hero__title-a{ margin-top:1.25rem; font-size:2rem;    letter-spacing:-.03em; }
  .hero__title-b{ margin-top:0; font-size:2.25rem; letter-spacing:.01em; }
  .hero__sub{ margin-top:1rem; font-size:1rem; line-height:1.5rem; }

  .btn--cta{   width:min(21rem,88vw); margin-top:1.75rem; }
  .btn--insta{ width:min(13rem,56vw); margin-top:1.25rem; }

  .conteudos{ margin-top:-1.25rem; padding-bottom:4.5rem; }
  .conteudos__inner{ padding:3rem 1.25rem 0; }
  .conteudos__title img{ width:min(19.4375rem,88vw); }
  .conteudos__sub{ margin-top:.5rem; font-size:1rem; line-height:1.4rem; }

  .cards{
    margin-top:1.75rem; width:100%; max-width:24rem; padding:0;
    grid-template-columns:1fr; row-gap:1rem;
  }
  .cards__item img:hover{ transform:none; filter:none; }

  .conteudos__glow{
    background:radial-gradient(ellipse 88% 14% at 50% 90%,
      rgba(0,20,58,.9) 0%, rgba(0,24,62,.6) 50%, rgba(0,28,66,0) 100%);
  }
  .outro__title{ margin-top:2rem; }
  .outro__title-a{ font-size:1.375rem; letter-spacing:-.02em; }
  .outro__title-b{ font-size:1.5rem;   letter-spacing:-.01em; }
  .outro__sub{ margin-top:.5rem; font-size:.9375rem; }
}

/* Segundo sinal para o Samsung Internet, cujo modo escuro é mais agressivo
   que o do Chrome. Além do `color-scheme: dark`, responder explicitamente a
   `prefers-color-scheme: dark` indica que a página trata o tema escuro por
   conta própria. As cores são as mesmas — o bloco existe pelo sinal, não
   pelo efeito. */
@media (prefers-color-scheme:dark){
  :root{
    --creme:#fdedcd;
    --ouro-topo:#ecc45e;
    --ouro-base:#f6ecd7;
    --navy:#052249;
    --branco:#fff;
  }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}