@font-face{font-family:Poppins;src:url("Poppins-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("Poppins-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url("Poppins-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif";src:url("NotoSerif-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif";src:url("NotoSerif-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif";src:url("NotoSerif-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  --fonte:Poppins,Arial,Helvetica,sans-serif;
  --fonte-titulo:"Noto Serif",Georgia,serif;
  --cor-fundo:#fff;
  --cor-texto:#101010;
  --cor-texto-suave:#4d4d4d;
  --cor-azul:#0c273b;
  --cor-amarelo:#ffde59;
  --cor-foco:#b38b2d;
  --cor-borda:#dedede;
  --cor-card:#fff;
  --sombra-card:0 14px 32px rgba(0,0,0,.08);
  --raio:20px;
  --raio-imagem:18px;
  --largura-site:1320px;
  --site-gutter:clamp(2rem,4vw,4rem);
  --espaco-grid:clamp(3.6rem,5vw,5rem);
  --gap-grid:clamp(2.2rem,3vw,3rem);
  --padding-card:clamp(2.4rem,3vw,2.8rem) clamp(2rem,2.5vw,2.4rem);
}

*,*:before,*:after{box-sizing:border-box}
html{font-size:62.5%;overflow-y:scroll;background:var(--cor-fundo)}
body{margin:0;overflow-x:hidden;background:var(--cor-fundo);color:var(--cor-texto);font-family:var(--fonte);font-size:1.6rem;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:600;line-height:1.22}
h1{font-size:clamp(3.52rem,2.64rem + 1.92vw,5.12rem)}
h2{font-size:clamp(1.82rem,1.45rem + .52vw,2.18rem)}
p{color:var(--cor-texto);font-size:clamp(1.62rem,1.5rem + .28vw,1.9rem)}
p+p{margin-top:2.4rem}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input,textarea,select{font:inherit}
main{display:block;width:100%}
h1,h2,h3,p,a,button{max-width:100%;overflow-wrap:break-word}

.site-page h1,
.site-page h2{
  color:#050505;
  font-family:var(--fonte-titulo);
  text-transform:none;
}

.site-page h1{font-weight:800}
.site-page h2{font-weight:600}

.site-header{
  display:flex;
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:0 auto;
  padding:4.8rem 0 3.6rem;
  align-items:center;
  justify-content:space-between;
  gap:4rem;
}

.site-logo{display:flex;width:12rem;align-items:center}
.site-logo img{width:100%;height:auto;filter:invert(1)}

.site-menu-toggle{
  display:none;
  width:4.4rem;
  height:4.4rem;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.site-menu-toggle:focus-visible{
  outline:3px solid var(--cor-foco);
  outline-offset:3px;
  border-radius:6px;
}

.site-menu-toggle span,
.site-menu-toggle span:before,
.site-menu-toggle span:after{
  display:block;
  width:2.6rem;
  height:2px;
  background:#050505;
  content:"";
  transition:transform .2s ease,opacity .2s ease;
}

.site-menu-toggle span{position:relative;margin:0 auto}
.site-menu-toggle span:before,
.site-menu-toggle span:after{position:absolute;left:0}
.site-menu-toggle span:before{top:-8px}
.site-menu-toggle span:after{top:8px}
.site-menu-toggle.ativo span{background:transparent}
.site-menu-toggle.ativo span:before{top:0;transform:rotate(45deg)}
.site-menu-toggle.ativo span:after{top:0;transform:rotate(-45deg)}

/* O mesmo <nav> serve os dois tamanhos: aqui e a barra horizontal do
   desktop; abaixo de 992px vira o painel que sobe de baixo. As pecas que
   so existem no painel (alca, topo, icones e redes) ficam ocultas aqui. */
.site-nav{display:flex;align-items:center;gap:3.6rem}
/* Espaco menor que os 3.6rem de antes porque cada item agora tem
   preenchimento proprio, para poder virar pilula na pagina atual. */
.site-nav__lista{
  display:flex;
  margin:0;
  padding:0;
  align-items:center;
  gap:1.2rem;
  list-style:none;
}

.site-nav__alca,
.site-nav__topo,
.site-nav__redes,
.site-nav__icone{display:none}

.site-nav__icone-aluno{display:grid;place-items:center}

.site-nav__item{
  display:inline-flex;
  padding:.6rem 1.4rem;
  border-radius:999px;
  font-size:1.86rem;
  line-height:1.2;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background-color .2s ease,color .2s ease;
}

.site-nav__item:hover{background:#f0f1f3}
.site-nav__item:focus-visible{
  outline:3px solid var(--cor-foco);
  outline-offset:3px;
  border-radius:999px;
}

/* Pagina atual: apenas o rotulo em negrito, sem fundo. */
.site-nav__item[aria-current="page"]{font-weight:600}

/* Botao no tamanho do resto do menu: antes tinha 18,6rem de texto e 39px
   de altura, quase o dobro da altura do texto ao lado. Mesmo ganhando o
   icone, ficou com a mesma largura de antes (172px) e 7px mais baixo. */
.site-nav__student{
  display:inline-flex;
  min-height:3.2rem;
  padding:.6rem 1.3rem;
  border-radius:999px;
  background:var(--cor-amarelo);
  color:var(--cor-azul);
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-size:1.5rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:filter .2s ease;
  box-shadow:0 4px 12px rgba(255,222,89,.3);
}

.site-nav__student svg{flex:none}

.site-nav .site-nav__student:hover{opacity:1;filter:brightness(.96)}
.site-nav .site-nav__student:focus-visible{
  outline:3px solid var(--cor-foco);
  outline-offset:3px;
}

.site-main{width:100%;min-height:60vh;background:var(--cor-fundo);color:var(--cor-texto);overflow:hidden}

.home-hero{
  display:grid;
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:3rem auto 0;
  grid-template-columns:minmax(0,1.08fr) minmax(30rem,.86fr);
  gap:6.5rem;
  align-items:center;
}

.home-hero__texto{max-width:78rem}
.home-hero h1{margin:0 0 2rem}
.home-hero p{max-width:60rem;font-size:clamp(1.72rem,1.5rem + .4vw,2rem);line-height:1.56}
.home-hero p+p{margin-top:2.6rem}
.home-hero__imagem{width:min(41rem,100%);justify-self:center}
.home-hero__imagem img{width:100%;border-radius:22px;aspect-ratio:1;object-fit:cover}

.page-hero{
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:3rem auto 0;
  text-align:left;
}

.page-hero h1{margin:0 0 2rem}
.page-hero p{max-width:78rem;font-size:clamp(1.9rem,1.6rem + .5vw,2.2rem);line-height:1.6}

.page-grid{
  display:grid;
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:var(--espaco-grid) auto 0;
  padding-bottom:8rem;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap-grid);
}

.card-paginas{
  display:flex;
  min-height:49rem;
  padding:var(--padding-card);
  border:1px solid var(--cor-borda);
  border-radius:var(--raio);
  background:var(--cor-card);
  align-items:center;
  flex-direction:column;
  text-align:center;
  transition:transform .2s ease,box-shadow .2s ease;
}

.card-paginas:hover{transform:translateY(-2px);box-shadow:var(--sombra-card)}
.card-paginas:focus-visible{outline:3px solid var(--cor-foco);outline-offset:4px}
.card-paginas img{
  width:100%;
  margin-bottom:2.2rem;
  border-radius:var(--raio-imagem);
  aspect-ratio:1;
  object-fit:cover;
}

.card-paginas--video img{aspect-ratio:16/9}
.card-paginas--video span{margin-top:0}

.card-paginas h2{
  display:block;
  margin:0 0 1.45rem;
  color:#050505;
  font-family:var(--fonte-titulo);
  font-size:clamp(1.82rem,1.45rem + .52vw,2.18rem);
  font-weight:600;
  line-height:1.25;
  text-align:center;
}

.card-paginas p{
  display:block;
  max-width:100%;
  margin:0 auto 2.2rem;
  color:#151515;
  font-size:1.46rem;
  line-height:1.55;
}

.card-paginas span{
  display:block;
  margin-top:auto;
  color:#050505;
  font-size:1.58rem;
  line-height:1.2;
}

.card-paginas--ebook{padding-right:1.8rem;padding-left:1.8rem}
.card-paginas--ebook img{
  width:min(100%,31rem);
  height:auto;
  border-radius:10px;
  aspect-ratio:auto;
  object-fit:contain;
}

.site-empty-state{
  grid-column:1/-1;
  width:100%;
  padding:3rem;
  border:1px solid var(--cor-borda);
  border-radius:var(--raio);
  background:var(--cor-card);
  text-align:center;
}

.site-empty-state h2{margin:0 0 1.2rem;color:#050505}
.site-empty-state p{max-width:62rem;margin:0 auto;color:var(--cor-texto-suave);font-size:1.58rem;line-height:1.6}

.card-paginas.calendario-card{
  --calendario-padding-y:clamp(2.4rem,3vw,2.8rem);
  --calendario-padding-x:clamp(2rem,2.5vw,2.4rem);
  overflow:hidden;
  padding:var(--calendario-padding-y) var(--calendario-padding-x);
  align-items:stretch;
  cursor:default;
}
.calendario-card:hover{transform:none;box-shadow:none}
.calendario-card__media{
  position:relative;
  width:100%;
  margin-bottom:2.6rem;
  overflow:hidden;
  border-radius:var(--raio-imagem);
  aspect-ratio:1;
}
.calendario-card__media img{
  width:100%;
  height:100%;
  margin:0;
  border-radius:0;
  object-fit:cover;
}
.card-paginas .calendario-card__tipo{
  position:absolute;
  top:1.2rem;
  left:1.2rem;
  z-index:1;
  display:inline-flex;
  width:auto;
  min-height:2.8rem;
  padding:.45rem 1.1rem;
  border-radius:999px;
  margin:0;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  background:var(--cor-amarelo);
  color:#050505;
  font-size:1.18rem;
  font-weight:600;
  letter-spacing:.03em;
  line-height:1.2;
  text-align:center;
  text-transform:uppercase;
}
.calendario-card__tipo--publica,
.calendario-card__tipo--alunos,
.calendario-card__tipo--assinantes,
.calendario-card__tipo--evento{background:var(--cor-amarelo)}
.card-paginas .calendario-card__tipo--sem-imagem{
  position:static;
  justify-self:start;
  margin-bottom:1.8rem;
}
.calendario-card h2{margin-bottom:1.8rem}
.calendario-card h2,
.calendario-card p{width:100%;text-align:left}
.calendario-card__data{
  display:block;
  width:100%;
  margin:0;
  color:var(--cor-texto);
  font-size:1.52rem;
  font-weight:600;
  line-height:1.45;
  text-align:left;
}
.calendario-card__rodape{
  display:flex;
  width:100%;
  margin:0;
  padding:0;
  color:#101010;
  align-items:stretch;
  flex-direction:column;
  gap:0;
}
.calendario-card__aviso{
  display:flex;
  width:100%;
  min-height:3.8rem;
  margin:1.8rem 0;
  color:#101010;
  align-items:center;
  justify-content:flex-start;
  font-size:1.34rem;
  font-weight:500;
  line-height:1.42;
  text-align:left;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  text-wrap:pretty;
}
.calendario-card__acoes{
  display:grid;
  width:100%;
  grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
  gap:1rem;
}
.calendario-card__acao{
  display:inline-flex;
  width:100%;
  min-height:4.4rem;
  padding:.9rem 1.4rem;
  border:0;
  border-radius:10px;
  background:var(--cor-amarelo);
  color:#050505;
  align-items:center;
  justify-content:center;
  font-size:1.46rem;
  font-weight:600;
  line-height:1.2;
  text-align:center;
  transition:filter .2s ease,transform .2s ease;
}
.calendario-card__acao:hover{
  color:#050505;
  filter:brightness(.96);
  transform:translateY(-1px);
}
.calendario-card__acao:focus-visible{
  outline:3px solid var(--cor-foco);
  outline-offset:3px;
}

/* Entrada em cascata dos cartoes do menu do celular. */
@keyframes menu-cartao-entra{to{opacity:1;transform:none}}

/* Respeita preferência do usuário por menos movimento */
@media (prefers-reduced-motion:reduce){
  .site-nav__item,
  .site-nav .site-nav__student,
  .site-nav__fechar,
  .site-nav__fundo,
  .site-nav__redes a,
  .site-menu-toggle span,
  .site-menu-toggle span:before,
  .site-menu-toggle span:after,
  .site-nav,
  .card-paginas,
  .calendario-card__acao{transition:none}
  .calendario-card__acao:hover{transform:none}
}

@media (min-width:992px){
  .cursos-page .page-hero h1{max-width:80%}
  .cursos-page .page-hero p{max-width:89.7rem}
}

/* Faixa estreita do desktop (notebooks de 992 a 1279px). Sem isto o menu
   fica mais largo que o header: o logo era espremido e o botao Area do
   Aluno saia da tela, cortado pelo overflow-x do body. Ja acontecia antes
   dos chips — com eles o menu cresceu mais 44px e passou a estourar ate
   perto de 1176px. O corte fica em 1280px, e nao em 1200px, para o menu
   em tamanho cheio ter folga de verdade (104px em vez de 9px). */
@media (min-width:992px) and (max-width:1279px){
  .site-nav{gap:1.8rem}
  .site-nav__lista{gap:.4rem}
  .site-nav__item{padding:.55rem .8rem;font-size:1.6rem}
  .site-nav__student{padding:.55rem 1.1rem;font-size:1.4rem}
}

@media (max-width:991px){
  .site-header{position:relative;padding:3rem 0;gap:2.4rem}
  .site-menu-toggle{display:block;margin-left:auto}
  /* ----------------------------------------------------------------
     Menu do celular: painel que sobe de baixo (bottom sheet), na area
     que o polegar alcanca. Os itens viram cartoes com icone em duas
     colunas, o botao Area do Aluno ocupa a largura toda e as redes
     ficam no rodape do painel.
     ---------------------------------------------------------------- */
  .site-nav__fundo{
    position:fixed;
    z-index:19;
    inset:0;
    background:rgba(8,22,33,.5);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    opacity:0;
    visibility:hidden;
    transition:opacity .26s ease,visibility .26s ease;
  }

  .site-nav__fundo.ativo{opacity:1;visibility:visible}

  .site-nav{
    position:fixed;
    z-index:20;
    right:0;
    bottom:0;
    left:0;
    display:block;
    max-height:88vh;
    max-height:88dvh;
    padding:1rem 2rem calc(2.4rem + env(safe-area-inset-bottom));
    border-radius:28px 28px 0 0;
    background:#fff;
    box-shadow:0 -18px 46px rgba(8,22,33,.24);
    transform:translateY(101%);
    /* Fechado sai do fluxo de foco: sem isto o Tab entraria no painel
       invisivel, que era o que acontecia com a gaveta antiga. */
    visibility:hidden;
    transition:transform .32s cubic-bezier(.22,.61,.36,1),visibility .32s;
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  .site-nav.ativo{transform:none;visibility:visible}

  .site-nav__alca{
    display:block;
    width:4.4rem;
    height:4px;
    margin:0 auto 1.6rem;
    border-radius:999px;
    background:#dcdcdc;
  }

  .site-nav__topo{
    display:flex;
    margin-bottom:2rem;
    align-items:center;
    justify-content:space-between;
    gap:1.6rem;
  }

  .site-nav__titulo{
    color:#050505;
    font-family:var(--fonte-titulo);
    font-size:2rem;
    font-weight:600;
  }

  .site-nav__fechar{
    display:grid;
    width:3.8rem;
    height:3.8rem;
    place-items:center;
    border:0;
    border-radius:50%;
    background:#f2f2f2;
    color:#050505;
    cursor:pointer;
    transition:background-color .18s ease;
  }

  .site-nav__fechar:hover,
  .site-nav__fechar:focus-visible{background:var(--cor-amarelo)}
  .site-nav__fechar:focus-visible{outline:3px solid var(--cor-foco);outline-offset:2px}

  .site-nav__lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}

  .site-nav__item{
    display:flex;
    min-height:10.4rem;
    padding:1.6rem;
    flex-direction:column;
    justify-content:space-between;
    gap:1.2rem;
    border:1px solid var(--cor-borda);
    border-radius:18px;
    color:#101010;
    font-size:1.6rem;
    font-weight:500;
    line-height:1.25;
    text-transform:none;
    transition:border-color .18s ease,background-color .18s ease,transform .18s ease;
  }

  .site-nav__item:hover,
  .site-nav__item:focus-visible{opacity:1;border-color:var(--cor-azul);background:#fbfbfb;transform:translateY(-2px)}
  .site-nav__item:focus-visible{outline:3px solid var(--cor-foco);outline-offset:2px}

  .site-nav__icone{
    display:grid;
    width:4rem;
    height:4rem;
    place-items:center;
    border-radius:12px;
    background:rgba(12,39,59,.06);
    color:var(--cor-azul);
  }

  /* Pagina atual: cartao no azul da marca, icone amarelo. */
  .site-nav__item[aria-current="page"]{border-color:var(--cor-azul);background:var(--cor-azul);color:#fff}
  .site-nav__item[aria-current="page"] .site-nav__icone{background:rgba(255,255,255,.12);color:var(--cor-amarelo)}

  .site-nav .site-nav__student{
    display:flex;
    min-height:5.4rem;
    margin-top:1.6rem;
    padding:.8rem 1.6rem;
    gap:.8rem;
    font-size:1.6rem;
    text-transform:none;
    box-shadow:0 8px 18px rgba(255,222,89,.28);
  }

  .site-nav__icone-aluno{display:grid;place-items:center}

  .site-nav__redes{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.8rem;
    margin-top:2.2rem;
    padding-top:2rem;
    border-top:1px solid var(--cor-borda);
  }

  .site-nav__redes a{
    display:grid;
    width:3.6rem;
    height:3.6rem;
    place-items:center;
    border:1px solid var(--cor-borda);
    border-radius:50%;
    color:#6a6a6a;
    transition:background-color .18s ease,border-color .18s ease,color .18s ease;
  }

  .site-nav__redes a:hover,
  .site-nav__redes a:focus-visible{background:var(--cor-azul);border-color:var(--cor-azul);color:#fff}

  /* Cartoes entram em cascata depois que o painel sobe. */
  .site-nav__lista li{opacity:0;transform:translateY(10px)}
  .site-nav.ativo .site-nav__lista li{animation:menu-cartao-entra .3s ease forwards}
  .site-nav.ativo .site-nav__lista li:nth-child(1){animation-delay:.12s}
  .site-nav.ativo .site-nav__lista li:nth-child(2){animation-delay:.16s}
  .site-nav.ativo .site-nav__lista li:nth-child(3){animation-delay:.20s}
  .site-nav.ativo .site-nav__lista li:nth-child(4){animation-delay:.24s}
  .site-nav.ativo .site-nav__lista li:nth-child(5){animation-delay:.28s}
  .site-nav.ativo .site-nav__lista li:nth-child(6){animation-delay:.32s}

  /* Trava a rolagem do fundo enquanto o painel esta aberto. */
  body.menu-aberto{overflow:hidden}

  .home-hero{grid-template-columns:1fr;gap:4rem;text-align:left}
  .home-hero__texto{max-width:72rem;margin:0 auto;text-align:left}
  .home-hero__imagem{width:min(50rem,100%);margin:0 auto}
  .page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Movimento reduzido no menu do celular. Precisa vir DEPOIS do bloco de
   991px: media query nao aumenta especificidade, entao um reset declarado
   antes seria vencido pelas transicoes do painel — e os cartoes, que
   comecam com opacity:0, ficariam invisiveis para sempre. */
@media (max-width:991px) and (prefers-reduced-motion:reduce){
  .site-nav,
  .site-nav__fundo,
  .site-nav__item,
  .site-nav__fechar,
  .site-nav__redes a{transition:none}
  .site-nav__item:hover,
  .site-nav__item:focus-visible{transform:none}
  .site-nav__lista li,
  .site-nav.ativo .site-nav__lista li{animation:none;opacity:1;transform:none}
}

@media (max-width:478px){
  .site-header{width:calc(100% - (var(--site-gutter) * 2));padding:2.5rem 0 3.5rem}
  .site-logo{width:7.9rem}
  .home-hero,
  .page-hero,
  .page-grid{
    width:calc(100% - (var(--site-gutter) * 2));
  }

  .home-hero,.page-hero{margin-top:2rem}
  .home-hero h1,.page-hero h1{font-size:3.06rem}
  .home-hero p,.page-hero p{font-size:1.62rem;line-height:1.52}
  .page-grid{grid-template-columns:1fr;justify-items:center}
  .card-paginas{width:100%;min-height:auto;padding:2.6rem 2rem}
  .card-paginas h2{font-size:2.05rem}
  .card-paginas p{font-size:1.46rem}
  .site-main{padding-bottom:5rem}
}


/* ------------------------------------------------------------------
   Pagina de contato. Hero padrao (.page-hero) e um cartao com o
   e-mail. Sem foto e sem link no e-mail, por decisao do autor.
   A largura segue a mesma formula do .page-hero para o cartao comecar
   na mesma borda esquerda; o limite de leitura fica no proprio cartao.
   Todo o texto em preto; apenas as duas fontes do site.
   ------------------------------------------------------------------ */
.contato{
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:clamp(3.2rem,4vw,4.4rem) auto 0;
}

.contato__cartao{
  max-width:100rem;
  padding:clamp(2.6rem,3.5vw,3.2rem);
  border:1px solid var(--cor-borda);
  border-radius:var(--raio);
  background:var(--cor-card);
}

.contato__rotulo{
  color:var(--cor-texto);
  font-size:1.3rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.contato__email{
  margin-top:.8rem;
  color:var(--cor-texto);
  font-family:var(--fonte-titulo);
  font-size:clamp(2rem,1.6rem + .9vw,2.6rem);
  font-weight:600;
  line-height:1.3;
  overflow-wrap:anywhere;
}

.contato__aviso{margin-top:1.6rem;color:var(--cor-texto);font-size:1.55rem}

@media (max-width:700px){
  .contato__cartao{padding:2.2rem 2rem}
}


/* Rodape das paginas gerais e do blog. Nao se aplica a cursos e e-books,
   que carregam cursos.css / ebook.css e tem rodape proprio, discreto. */
.rodape{margin-top:clamp(6rem,8vw,9rem);background:var(--cor-azul);color:#fff;padding:clamp(4rem,5vw,5.6rem) 0 0}

.rodape__grid{
  display:grid;
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:0 auto;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:4rem;
}

.rodape__marca img{width:12rem}

/* acompanha a reducao do logo do cabecalho no mesmo ponto de quebra */
@media (max-width:478px){
  .rodape__marca img{width:7.9rem}
}
.rodape__marca p{margin:2rem 0 0;max-width:38ch;color:rgba(255,255,255,.6);font-size:1.5rem;line-height:1.7}

.rodape__redes{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.4rem}
.rodape__redes a{
  display:grid;
  place-items:center;
  width:4rem;
  height:4rem;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:rgba(255,255,255,.75);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.rodape__redes a:hover,
.rodape__redes a:focus-visible{background:var(--cor-amarelo);border-color:var(--cor-amarelo);color:var(--cor-azul)}

.site-page .rodape__coluna h2{
  margin:0 0 1.8rem;
  color:#fff;
  font-family:var(--fonte);
  font-size:1.3rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.rodape__coluna ul{margin:0;padding:0;list-style:none}
.rodape__coluna li{margin-bottom:1.1rem}
.rodape__coluna a{color:rgba(255,255,255,.68);font-size:1.5rem}
.rodape__coluna a:hover,.rodape__coluna a:focus-visible{color:var(--cor-amarelo)}

.rodape__base{margin-top:clamp(3.6rem,5vw,5rem);border-top:1px solid rgba(255,255,255,.1)}
.rodape__base p{
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:0 auto;
  padding:2.4rem 0;
  color:rgba(255,255,255,.38);
  font-size:1.3rem;
  text-align:center;
}
.rodape__base .sep{padding:0 .8rem;color:rgba(255,255,255,.2)}

@media (max-width:820px){
  .rodape__grid{grid-template-columns:1fr;gap:3.6rem}
}

@media (prefers-reduced-motion:reduce){
  .rodape__redes a{transition:none}
}

/* Declaracao de abertura da pagina Quem sou, logo abaixo do titulo. */
.page-hero__manifesto{
  max-width:64rem;
  font-family:var(--fonte-titulo);
  font-style:italic;
  line-height:1.5;
}

/* ------------------------------------------------------------------
   Pagina Quem sou — linha do tempo.
   Anos a esquerda em Noto Serif, trilho vertical com ponto que acende
   conforme o periodo entra na tela, e o periodo dentro de um cartao.
   No celular o cartao perde a moldura para nao espremer o texto.
   Duas fontes apenas: Poppins no corpo, Noto Serif nos titulos e anos.
   ------------------------------------------------------------------ */
.linha-tempo{
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:clamp(4rem,6vw,6.4rem) auto 0;
}

.periodo{display:grid;grid-template-columns:13rem minmax(0,1fr)}

.periodo__data{
  padding:2.4rem 2.4rem 0 0;
  text-align:right;
}

.periodo__data span{
  display:block;
  color:var(--cor-azul);
  font-family:var(--fonte-titulo);
  font-size:clamp(1.9rem,1.6rem + .6vw,2.4rem);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  line-height:1.12;
  transition:color .25s ease;
}

/* segundo ano em tom mais claro: marca o fim do periodo sem competir */
.periodo__data span + span{color:#aab5bd}

.periodo__trilho{
  position:relative;
  padding:0 0 2.4rem 3.4rem;
  border-left:2px solid var(--cor-borda);
}

.periodo:last-of-type .periodo__trilho{border-left-color:transparent}

.periodo__trilho:before{
  content:"";
  position:absolute;
  left:-.75rem;
  top:3.2rem;
  width:1.3rem;
  height:1.3rem;
  border-radius:50%;
  background:var(--cor-azul);
  transition:background-color .25s ease,transform .25s ease,box-shadow .25s ease;
}

/* estado ativo, aplicado pelo site.js conforme o periodo entra na tela */
.periodo.ativo .periodo__trilho:before{
  background:var(--cor-amarelo);
  transform:scale(1.45);
  box-shadow:0 0 0 4px rgba(255,222,89,.28);
}

.periodo.ativo .periodo__data span,
.periodo.ativo .periodo__data span + span{color:var(--cor-foco)}

.periodo__cartao{
  padding:clamp(2.4rem,3vw,3rem) clamp(2.4rem,3vw,3.2rem);
  border:1px solid var(--cor-borda);
  border-radius:var(--raio);
  background:var(--cor-card);
}

.site-page .periodo__cartao h2{
  margin:0 0 1.6rem;
  font-size:clamp(2rem,1.7rem + .7vw,2.5rem);
}

.periodo__cartao p + p{margin-top:1.8rem}

.periodo__destaque{
  margin:2.6rem 0 0;
  padding:0 0 0 2.4rem;
  border-left:3px solid var(--cor-amarelo);
}

.periodo__destaque p{
  margin:0;
  font-family:var(--fonte-titulo);
  font-size:clamp(1.85rem,1.6rem + .55vw,2.25rem);
  font-style:italic;
  line-height:1.45;
}

.periodo__destaque cite{
  display:block;
  margin-top:1.1rem;
  color:var(--cor-texto-suave);
  font-size:1.4rem;
  font-style:normal;
}

/* espaco reservado para as fotos de cada epoca */
.periodo__figura{margin:2.6rem 0 0}
.periodo__figura img{width:100%;height:auto;border-radius:var(--raio-imagem)}
.periodo__figura figcaption{margin-top:1rem;color:var(--cor-texto-suave);font-size:1.4rem}

/* fecho sem data — cartao claro com filete amarelo.
   O recuo de 16.4rem + 2px alinha a borda do cartao com os cartoes da
   linha do tempo: 13rem da coluna de anos, 3.4rem do trilho e a borda. */
.quem-sou-fecho{
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:clamp(4rem,6vw,6rem) auto 0;
  padding-left:calc(16.4rem + 2px);
}

.quem-sou-fecho__cartao{
  padding:clamp(3rem,4vw,4rem);
  border-left:5px solid var(--cor-amarelo);
  border-radius:0 var(--raio) var(--raio) 0;
  background:#fffdf2;
}

.site-page .quem-sou-fecho h2{margin:0 0 1.8rem;font-size:clamp(2.1rem,1.75rem + .75vw,2.7rem)}
.quem-sou-fecho p + p{margin-top:1.8rem}

.quem-sou-fecho__obrigado{
  font-family:var(--fonte-titulo);
  font-style:italic;
  color:var(--cor-foco);
}

.quem-sou-fecho__assinatura{
  margin-top:.4rem;
  color:var(--cor-texto-suave);
  font-size:1.5rem;
  font-weight:600;
}

/* curriculo em etiquetas */
.quem-sou-curriculo{
  width:min(var(--largura-site),calc(100% - (var(--site-gutter) * 2)));
  margin:clamp(4rem,6vw,6rem) auto 0;
  padding-left:calc(16.4rem + 2px);
}

.site-page .quem-sou-curriculo h2{margin:0;font-size:clamp(2.1rem,1.75rem + .75vw,2.7rem)}
.quem-sou-curriculo__subtitulo{margin-top:.4rem;color:var(--cor-texto);font-size:1.55rem;font-weight:600}

.curriculo-etiquetas{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin:2.6rem 0 0;
  padding:0;
  list-style:none;
}

.curriculo-etiquetas li{
  padding:1rem 1.8rem;
  border:1px solid var(--cor-borda);
  border-radius:999px;
  background:var(--cor-card);
  color:var(--cor-texto);
  font-size:1.45rem;
}

@media (max-width:700px){
  /* coluna justa ao texto do ano (39px) com folga minima, para o texto
     dos periodos nao ficar tao empurrado em relacao ao hero */
  .periodo{grid-template-columns:5rem minmax(0,1fr)}
  .periodo__data{padding:2rem .9rem 0 0}
  .periodo__data span{font-size:1.7rem}
  .periodo__trilho{padding:0 0 2rem 1.2rem}
  .periodo__trilho:before{top:2.4rem}

  /* sem moldura no celular: a largura util e curta demais para perder
     mais espaco com borda e preenchimento lateral */
  .periodo__cartao{padding:1.6rem 0 0;border:0;border-radius:0;background:transparent}

  .quem-sou-fecho{padding-left:0}
  .quem-sou-fecho__cartao{padding:2.4rem 2rem 2.4rem 2.2rem}
  .quem-sou-curriculo{padding-left:0}
  .curriculo-etiquetas li{padding:.9rem 1.5rem;font-size:1.35rem}
}

@media (prefers-reduced-motion:reduce){
  .periodo__data span,
  .periodo__trilho:before{transition:none}
  .periodo.ativo .periodo__trilho:before{transform:none}
}