/* =========================================================================
   ANDRÉ ASSIS — ALÉM DA SUPERFÍCIE
   Folha de estilo principal
   Índice:
     1. Tokens (cores, tipografia, espaços)
     2. Reset e base
     3. Utilitários (container, parallax, animação de revelação)
     4. Hero
     5. O projeto
     6. Série / episódios
     7. Créditos
     8. Matérias (carrossel)
     9. Linha do tempo
    10. Carreira em números
    11. Rodapé
    12. Popups (matéria e vídeo)
    13. Responsivo
    14. Acessibilidade / movimento reduzido
   ========================================================================= */

/* ─────────────────────────────────────────────── 1. TOKENS */
:root{
  --aa-azul:        #182B53;
  --aa-azul-medio:  #23365E;
  --aa-azul-claro:  #2B3F62;
  --aa-amarelo:     #FFAD30;
  --aa-amarelo-esc: #F0A93F;
  --aa-amarelo-cl:  #FFB84E;
  --aa-branco:      #FFFFFF;
  --aa-branco-70:   rgba(255,255,255,.72);

  --aa-fonte: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --aa-max: 1120px;
  --aa-gutter: clamp(20px, 5vw, 56px);

  --aa-r-p:  12px;   /* raio pequeno  */
  --aa-r-m:  20px;   /* raio médio    */
  --aa-r-g:  28px;   /* raio grande   */

  --aa-sombra:    0 18px 40px rgba(6,14,32,.28);
  --aa-sombra-fw: 0 26px 60px rgba(6,14,32,.42);

  --aa-mola: cubic-bezier(.2,.7,.3,1);
}

/* ─────────────────────────────────────────────── 2. RESET E BASE */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--aa-fonte);
  font-weight:400;
  line-height:1.55;
  color:var(--aa-branco);
  background:var(--aa-azul);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
h1,h2,h3,p,figure,blockquote,dl,dd{ margin:0; }
ol,ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }

::selection{ background:var(--aa-amarelo); color:var(--aa-azul); }

:focus-visible{
  outline:3px solid var(--aa-amarelo);
  outline-offset:3px;
  border-radius:4px;
}

.aa-pular{
  position:absolute; left:-9999px; top:0; z-index:200;
  padding:12px 20px; background:var(--aa-amarelo); color:var(--aa-azul);
  font-weight:700; text-decoration:none; border-radius:0 0 var(--aa-r-p) 0;
}
.aa-pular:focus{ left:0; }

/* ─────────────────────────────────────────────── 3. UTILITÁRIOS */
.aa-container{
  width:100%;
  max-width:var(--aa-max);
  margin-inline:auto;
  padding-inline:var(--aa-gutter);
}

/* Camada de fundo com parallax (o JS aplica translate3d em .aa-parallax > img) */
.aa-parallax{
  position:absolute; inset:-12% 0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}
.aa-parallax img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  will-change:transform;
}

/* Revelação no scroll */
.aa-revelar{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--aa-mola), transform .8s var(--aa-mola);
  transition-delay:var(--aa-atraso,0ms);
}
.aa-revelar.aa-visivel{ opacity:1; transform:none; }

/* Título de seção padrão */
.aa-titulo-secao{
  font-size:clamp(1.7rem, 3.6vw, 2.4rem);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin-bottom:1.1em;
}

/* ─────────────────────────────────────────────── 4. HERO */
.aa-hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  isolation:isolate;
}
.aa-hero__fundo{ inset:-15% 0; }
.aa-hero__veu{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 80% at 50% 45%, rgba(24,43,83,.12) 0%, rgba(24,43,83,.62) 62%, rgba(24,43,83,.88) 100%),
    linear-gradient(180deg, rgba(24,43,83,.55) 0%, rgba(24,43,83,0) 35%, rgba(24,43,83,.75) 100%);
}

.aa-hero__conteudo{
  position:relative; z-index:2;
  width:100%; max-width:var(--aa-max);
  padding-inline:var(--aa-gutter);
  text-align:center;
}

.aa-hero__titulo{ display:block; margin-bottom:clamp(28px,5vh,56px); }

.aa-hero__nome{
  display:block;
  font-size:clamp(2.6rem, 8.4vw, 5.6rem);
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;
  text-shadow:0 6px 26px rgba(6,14,32,.55);
  animation:aa-entra-cima 1.1s var(--aa-mola) both .15s;
}
.aa-hero__sub{
  display:block;
  margin-top:.16em;
  font-size:clamp(1.05rem, 3.3vw, 2.15rem);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--aa-amarelo);
  text-shadow:0 4px 18px rgba(6,14,32,.5);
  animation:aa-entra-cima 1.1s var(--aa-mola) both .35s;
}

.aa-hero__chamada{
  max-width:min(62ch, 100%);
  margin-inline:auto;
  font-size:clamp(.95rem, 1.9vw, 1.18rem);
  font-weight:600;
  line-height:1.55;
  text-shadow:0 3px 14px rgba(6,14,32,.6);
  animation:aa-entra-cima 1.1s var(--aa-mola) both .55s;
}

.aa-hero__seta{
  display:block;
  width:clamp(34px,5vw,48px);
  margin:clamp(26px,5vh,52px) auto 0;
  color:var(--aa-amarelo);
  animation:aa-entra-cima .9s var(--aa-mola) both .8s, aa-flutua 2.4s ease-in-out 1.8s infinite;
  transition:transform .3s var(--aa-mola);
}
.aa-hero__seta:hover{ transform:translateY(5px); }
.aa-hero__seta svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 4px 12px rgba(6,14,32,.5)); }

@keyframes aa-entra-cima{
  from{ opacity:0; transform:translateY(34px); }
  to  { opacity:1; transform:none; }
}
@keyframes aa-flutua{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(9px); }
}

/* ─────────────────────────────────────────────── 5. O PROJETO */
.aa-projeto{
  position:relative;
  background:var(--aa-azul-medio);
  background-image:
    radial-gradient(90% 120% at 15% 0%, rgba(255,255,255,.045) 0%, transparent 60%),
    linear-gradient(180deg, var(--aa-azul-medio) 0%, var(--aa-azul) 100%);
  padding-block:clamp(64px,9vw,116px);
  overflow:hidden;
}

/* Bloco amarelo que sobe pela direita, como no layout */
.aa-projeto__bloco-amarelo{
  position:absolute;
  right:0; top:12%; bottom:0;
  width:min(34%, 420px);
  background:var(--aa-amarelo);
  border-radius:var(--aa-r-g) 0 0 0;
  z-index:0;
}

.aa-projeto__grade{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,64px);
  align-items:center;
}

.aa-projeto__texto p{
  margin-bottom:1.15em;
  font-size:clamp(.94rem,1.55vw,1.05rem);
  color:var(--aa-branco-70);
}
.aa-projeto__texto strong{ color:var(--aa-branco); font-weight:600; }

.aa-projeto__destaque{
  position:relative;
  margin-top:1.9em !important;
  padding-left:18px;
}
.aa-projeto__destaque::before{
  content:"";
  position:absolute; left:0; top:.2em; bottom:.2em;
  width:5px; border-radius:3px;
  background:var(--aa-amarelo);
}

.aa-projeto__logo{
  width:clamp(150px,16vw,210px);
  height:auto;
  margin-top:2.4em;
  opacity:.92;
}

/* Card de depoimento */
.aa-depoimento{
  position:relative;
  background:var(--aa-azul-claro);
  border-radius:var(--aa-r-g);
  padding:clamp(18px,2.4vw,26px);
  box-shadow:var(--aa-sombra-fw);
  transition:transform .5s var(--aa-mola), box-shadow .5s var(--aa-mola);
}
.aa-depoimento:hover{ transform:translateY(-6px); box-shadow:0 32px 70px rgba(6,14,32,.5); }

.aa-depoimento__foto{
  width:100%; aspect-ratio:10/7;
  object-fit:cover; object-position:top center;
  border-radius:var(--aa-r-m);
  margin-bottom:1.35em;
}
.aa-depoimento__citacao{
  font-size:clamp(.92rem,1.5vw,1.02rem);
  font-weight:600; line-height:1.5;
  color:var(--aa-amarelo);
  margin-bottom:.7em;
}
.aa-depoimento__autor{
  font-size:.88rem;
  color:var(--aa-branco-70);
}

/* ─────────────────────────────────────────────── 6. SÉRIE / EPISÓDIOS */
.aa-serie{
  position:relative;
  padding-block:clamp(70px,10vw,130px);
  background:var(--aa-azul);
  overflow:hidden;
  isolation:isolate;
}
.aa-serie__fundo::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(24,43,83,.94) 0%, rgba(24,43,83,.82) 45%, rgba(24,43,83,.96) 100%);
}
.aa-serie__conteudo{ position:relative; z-index:1; }

.aa-serie__marca{ text-align:center; margin-bottom:clamp(40px,6vw,72px); }
.aa-serie__marca-nome{
  display:block;
  font-size:clamp(2rem,6vw,3.6rem);
  font-weight:700; line-height:1;
  text-transform:uppercase; letter-spacing:.01em;
  color:var(--aa-amarelo);
  text-shadow:0 5px 20px rgba(6,14,32,.5);
}
.aa-serie__marca-sub{
  display:block; margin-top:.12em;
  font-size:clamp(1.1rem,3.6vw,2.3rem);
  font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--aa-branco);
  text-shadow:0 4px 16px rgba(6,14,32,.5);
}

.aa-episodios{
  display:flex; flex-direction:column;
  gap:clamp(18px,2.4vw,28px);
  max-width:660px; margin-inline:auto;
}

.aa-episodio__botao{
  display:grid;
  grid-template-columns:minmax(130px, 34%) 1fr;
  gap:clamp(14px,2vw,22px);
  width:100%;
  text-align:left;
  padding:clamp(12px,1.6vw,16px);
  background:var(--aa-amarelo);
  border-radius:var(--aa-r-m);
  box-shadow:var(--aa-sombra);
  transition:transform .45s var(--aa-mola), box-shadow .45s var(--aa-mola), background-color .3s ease;
}
.aa-episodio__botao:hover,
.aa-episodio__botao:focus-visible{
  transform:translateY(-5px) scale(1.012);
  background:var(--aa-amarelo-cl);
  box-shadow:0 26px 48px rgba(6,14,32,.42);
}

.aa-episodio__midia{
  position:relative; display:block;
  border-radius:var(--aa-r-p);
  overflow:hidden;
  background:var(--aa-azul-medio);
}
.aa-episodio__midia img{
  width:100%; height:100%; aspect-ratio:8/5;
  object-fit:cover; object-position:center 28%;
  transition:transform .7s var(--aa-mola);
}
.aa-episodio__botao:hover .aa-episodio__midia img{ transform:scale(1.07); }

/* Episódios 5 e 6 usam logotipos: fundo branco e imagem inteira */
.aa-episodio__midia--logo{ background:var(--aa-branco); }
.aa-episodio__midia--logo img{
  object-fit:contain;
  padding:16px 22px;
}

.aa-play{
  position:absolute; inset:0; margin:auto;
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(24,43,83,.6);
  backdrop-filter:blur(2px);
  color:var(--aa-branco);
  transition:transform .4s var(--aa-mola), background-color .3s ease;
}
.aa-play svg{ width:24px; height:24px; fill:currentColor; margin-left:2px; }
.aa-episodio__botao:hover .aa-play{ transform:scale(1.14); background:var(--aa-azul); }

.aa-episodio__texto{ display:block; color:var(--aa-azul); align-self:center; }
.aa-episodio__numero{
  display:block;
  font-size:clamp(1.02rem,1.9vw,1.22rem);
  font-weight:700; line-height:1.2;
}
.aa-episodio__tema{
  display:block; margin-bottom:.5em;
  font-size:clamp(.92rem,1.5vw,1rem);
  font-weight:600;
}
.aa-episodio__resumo{
  display:block;
  font-size:clamp(.83rem,1.35vw,.93rem);
  line-height:1.45;
}

/* ─────────────────────────────────────────────── 7. CRÉDITOS */
.aa-creditos{
  background:var(--aa-azul);
  padding-block:clamp(48px,7vw,84px);
  text-align:center;
}
.aa-creditos__lista{ display:grid; gap:1.6em; }
.aa-creditos__lista dt{ font-weight:700; font-size:1rem; }
.aa-creditos__lista dd{ margin:0; color:var(--aa-branco-70); font-size:.98rem; }

/* ─────────────────────────────────────────────── 8. MATÉRIAS */
.aa-materias{
  position:relative;
  padding-block:clamp(60px,8vw,110px);
  background:var(--aa-amarelo-esc);
  background-image:
    radial-gradient(70% 90% at 20% 10%, rgba(255,255,255,.16) 0%, transparent 55%),
    linear-gradient(180deg, var(--aa-amarelo) 0%, var(--aa-amarelo-esc) 100%);
  color:var(--aa-azul);
  overflow:hidden;
}

.aa-materias__cabecalho{ text-align:center; margin-bottom:clamp(36px,5vw,58px); }
.aa-materias__titulo{
  font-size:clamp(2.1rem,7vw,3.6rem);
  font-weight:700; line-height:1;
  text-transform:uppercase; letter-spacing:.01em;
  color:var(--aa-azul);
}
.aa-materias__sub{
  margin-top:.5em;
  font-size:clamp(.95rem,2vw,1.15rem);
  color:rgba(24,43,83,.86);
}

.aa-carrossel{
  position:relative;
  max-width:var(--aa-max);
  margin-inline:auto;
  padding-inline:var(--aa-gutter);
}

.aa-carrossel__trilho{
  display:flex;
  gap:clamp(16px,2.2vw,26px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-block:8px 22px;
  scrollbar-width:none;
}
.aa-carrossel__trilho::-webkit-scrollbar{ display:none; }

.aa-materia{
  flex:0 0 calc((100% - 2 * clamp(16px,2.2vw,26px)) / 3);
  scroll-snap-align:start;
  min-width:0;
}

.aa-materia__card{
  display:flex; flex-direction:column;
  height:100%;
  padding:clamp(20px,2.4vw,28px);
  background:var(--aa-azul);
  border-radius:var(--aa-r-g);
  box-shadow:var(--aa-sombra);
  text-align:left;
  transition:transform .45s var(--aa-mola), box-shadow .45s var(--aa-mola);
}
.aa-materia__card:hover{ transform:translateY(-7px); box-shadow:0 30px 56px rgba(6,14,32,.38); }

.aa-materia__titulo{
  font-size:clamp(1.05rem,1.9vw,1.28rem);
  font-weight:700; line-height:1.22;
  color:var(--aa-amarelo);
  margin-bottom:.85em;
}
.aa-materia__chamada{
  flex:1;
  font-size:clamp(.84rem,1.35vw,.93rem);
  line-height:1.55;
  color:var(--aa-branco-70);
  margin-bottom:1.6em;
}

.aa-materia__acao{
  align-self:flex-start;
  padding:.62em 1.25em;
  background:var(--aa-amarelo);
  color:var(--aa-azul);
  font-size:.86rem; font-weight:700;
  border-radius:999px;
  transition:transform .3s var(--aa-mola), background-color .3s ease;
}
.aa-materia__card:hover .aa-materia__acao{ background:var(--aa-amarelo-cl); transform:translateX(3px); }

/* Setas */
.aa-carrossel__seta{
  position:absolute; top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--aa-azul);
  color:var(--aa-branco);
  box-shadow:var(--aa-sombra);
  transition:transform .3s var(--aa-mola), opacity .3s ease, background-color .3s ease;
}
.aa-carrossel__seta svg{ width:22px; height:22px; }
.aa-carrossel__seta:hover{ transform:translateY(-50%) scale(1.1); background:var(--aa-azul-medio); }
.aa-carrossel__seta--esq{ left:0; }
.aa-carrossel__seta--dir{ right:0; }
.aa-carrossel__seta[disabled]{ opacity:0; pointer-events:none; }

/* Pontos */
.aa-carrossel__pontos{
  display:flex; justify-content:center; gap:9px;
  margin-top:clamp(14px,2vw,22px);
}
.aa-ponto{
  width:9px; height:9px; border-radius:50%;
  background:rgba(24,43,83,.3);
  transition:width .35s var(--aa-mola), background-color .3s ease;
}
.aa-ponto[aria-selected="true"]{ width:26px; border-radius:99px; background:var(--aa-azul); }

/* ─────────────────────────────────────────────── 9. LINHA DO TEMPO */
.aa-linha{
  position:relative;
  background:var(--aa-azul);
  background-image:
    radial-gradient(80% 60% at 80% 20%, rgba(255,255,255,.05) 0%, transparent 60%),
    linear-gradient(180deg, var(--aa-azul-medio) 0%, var(--aa-azul) 100%);
  overflow:hidden;
}

/* O texto usa a mesma largura/centralização das demais seções — assim
   ele alinha na mesma coluna que "O Projeto", "Matérias" etc. Isso vale
   em qualquer largura de tela; só a posição da tira de fotos muda
   (ver comentário em .aa-filme, mais abaixo). */
.aa-linha__conteudo{
  position:relative;
  max-width:var(--aa-max);
  margin-inline:auto;
  padding:clamp(56px,8vw,110px) var(--aa-gutter) clamp(28px,3.4vw,44px);
}

/* Tira de filme — comportamento padrão: faixa horizontal acima do texto,
   com as 4 fotos lado a lado. É o que funciona em telas de notebook e
   monitores comuns. Em monitores muito largos (a partir de 1400px, ver
   o breakpoint no fim do arquivo) ela migra para o lado esquerdo,
   encostada no bloco de texto — nesse caso o CSS de lá substitui tudo
   que está aqui. */
.aa-filme{
  position:relative;
  margin-bottom:clamp(28px,4vw,40px);
  background:#0F1D3A;
  padding:22px;
  border-block:22px solid transparent;
  background-clip:padding-box;
}
.aa-filme::before,
.aa-filme::after{
  content:"";
  position:absolute; left:0; right:0;
  height:22px;
  background-image:repeating-linear-gradient(
    90deg,
    transparent 0 14px,
    rgba(255,255,255,.16) 14px 24px,
    transparent 24px 38px
  );
  background-size:38px 11px;
  background-position:center;
  background-repeat:repeat-x;
}
.aa-filme::before{ top:-22px; }
.aa-filme::after { bottom:-22px; }

.aa-filme__tira{
  display:grid; gap:12px;
  grid-template-columns:repeat(4, 1fr);
}
.aa-filme__tira img{
  width:100%; aspect-ratio:3/4;
  object-fit:cover; object-position:top center;
  filter:grayscale(1) contrast(1.06);
}

.aa-linha__titulo{
  font-size:clamp(2rem,5.6vw,3.3rem);
  font-weight:700; line-height:1;
  text-transform:uppercase;
  text-shadow:0 5px 20px rgba(6,14,32,.45);
}
.aa-linha__sub{
  margin-top:.55em; margin-bottom:clamp(38px,5vw,62px);
  font-size:clamp(.9rem,1.8vw,1.05rem);
  font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--aa-amarelo);
}

.aa-marcos{ position:relative; padding-block:8px; }
.aa-marcos::before{
  content:"";
  position:absolute; left:50%; top:0; bottom:0;
  translate:-50% 0;
  width:2px;
  background:linear-gradient(180deg, transparent, var(--aa-amarelo) 6%, var(--aa-amarelo) 94%, transparent);
  opacity:.55;
}

.aa-marco{
  position:relative;
  width:50%;
  padding-block:clamp(14px,1.8vw,20px);
}
.aa-marco--esq{ padding-right:clamp(24px,3vw,40px); text-align:right; }
.aa-marco--dir{ margin-left:50%; padding-left:clamp(24px,3vw,40px); text-align:left; }

.aa-marco::after{
  content:"";
  position:absolute; top:calc(clamp(14px,1.8vw,20px) + .55em);
  width:13px; height:13px; border-radius:50%;
  background:var(--aa-amarelo);
  border:3px solid var(--aa-azul);
  box-shadow:0 0 0 2px var(--aa-amarelo);
}
.aa-marco--esq::after{ right:-7px; }
.aa-marco--dir::after{ left:-7px; }

.aa-marco__ano{
  display:block;
  font-size:clamp(1.15rem,2.4vw,1.5rem);
  font-weight:700; line-height:1.1;
  margin-bottom:.28em;
}
.aa-marco__texto{
  font-size:clamp(.85rem,1.4vw,.96rem);
  line-height:1.5;
  color:var(--aa-branco-70);
}
.aa-marco__texto em{ font-style:italic; }

/* ─────────────────────────────────────────────── 10. CARREIRA EM NÚMEROS */
.aa-numeros{
  position:relative;
  padding-block:clamp(64px,9vw,120px);
  overflow:hidden;
  isolation:isolate;
  background:var(--aa-azul);
}
.aa-numeros__fundo img{ object-position:center 30%; }
.aa-numeros__veu{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(24,43,83,.92) 0%, rgba(24,43,83,.8) 50%, rgba(24,43,83,.95) 100%);
}
.aa-numeros__conteudo{ position:relative; z-index:2; }

.aa-numeros__titulo{
  text-align:center;
  font-size:clamp(1.6rem,4.6vw,2.7rem);
  font-weight:700; text-transform:uppercase; letter-spacing:.01em;
  margin-bottom:clamp(34px,5vw,56px);
  text-shadow:0 5px 20px rgba(6,14,32,.45);
}

.aa-numeros__lista{
  display:grid; gap:clamp(16px,2.4vw,26px);
  max-width:420px; margin-inline:auto;
}

.aa-numero{
  display:flex; align-items:center; gap:clamp(12px,2vw,18px);
  padding:clamp(14px,2vw,20px) clamp(18px,2.6vw,26px);
  background:var(--aa-amarelo);
  border-radius:var(--aa-r-m);
  box-shadow:var(--aa-sombra);
  transition:transform .45s var(--aa-mola);
}
.aa-numero:hover{ transform:translateY(-5px) scale(1.02); }

.aa-numero__valor{
  font-size:clamp(2.1rem,6.5vw,3.1rem);
  font-weight:700; line-height:1;
  color:var(--aa-branco);
  text-shadow:0 4px 14px rgba(6,14,32,.25);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.aa-numero__rotulo{
  font-size:clamp(.78rem,1.4vw,.9rem);
  font-weight:700; line-height:1.25;
  color:var(--aa-azul);
}

.aa-numeros__nota{
  max-width:420px; margin:1.1em auto 0;
  font-size:.78rem;
  color:var(--aa-branco-70);
}

/* ─────────────────────────────────────────────── 11. RODAPÉ */
.aa-rodape{
  position:relative;
  padding-block:clamp(48px,7vw,86px);
  background:var(--aa-azul);
  overflow:hidden;
}
.aa-rodape__forma{
  position:absolute;
  left:0; top:0; bottom:0;
  width:clamp(90px,16vw,200px);
  background:var(--aa-amarelo);
  border-radius:0 999px 999px 0;
}
.aa-rodape__conteudo{ position:relative; z-index:1; display:grid; place-items:center; }
.aa-rodape__logo{ width:clamp(160px,22vw,260px); height:auto; opacity:.95; }

/* ─────────────────────────────────────────────── 12. POPUPS */
.aa-modal{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  padding:clamp(14px,3vw,40px);
}
.aa-modal[hidden]{ display:none; }

.aa-modal__fundo{
  position:absolute; inset:0;
  background:rgba(8,17,36,.78);
  backdrop-filter:blur(5px);
  animation:aa-fade .3s ease both;
}

.aa-modal__caixa{
  position:relative;
  width:100%; max-width:760px;
  max-height:min(86svh, 900px);
  background:var(--aa-azul);
  border-radius:var(--aa-r-g);
  box-shadow:var(--aa-sombra-fw);
  animation:aa-sobe .45s var(--aa-mola) both;
  overflow:hidden;
}

.aa-modal__fechar{
  position:absolute; top:14px; right:14px; z-index:3;
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--aa-amarelo);
  color:var(--aa-azul);
  box-shadow:0 6px 18px rgba(6,14,32,.4);
  transition:transform .3s var(--aa-mola), background-color .3s ease;
}
.aa-modal__fechar:hover{ transform:rotate(90deg); background:var(--aa-amarelo-cl); }
.aa-modal__fechar svg{ width:20px; height:20px; }

.aa-modal__rolagem{
  max-height:min(86svh, 900px);
  overflow-y:auto;
  padding:clamp(32px,5vw,56px) clamp(22px,4vw,54px);
  scrollbar-width:thin;
  scrollbar-color:var(--aa-amarelo) transparent;
}
.aa-modal__rolagem::-webkit-scrollbar{ width:8px; }
.aa-modal__rolagem::-webkit-scrollbar-thumb{ background:var(--aa-amarelo); border-radius:99px; }

.aa-modal__titulo{
  font-size:clamp(1.5rem,4vw,2.2rem);
  font-weight:700; line-height:1.15;
  color:var(--aa-amarelo);
  padding-right:40px;
  margin-bottom:.9em;
}
.aa-modal__titulo::after{
  content:"";
  display:block; width:64px; height:4px;
  margin-top:.5em;
  background:var(--aa-amarelo);
  border-radius:99px;
}

.aa-modal__corpo p{
  margin-bottom:1.25em;
  font-size:clamp(.92rem,1.5vw,1.02rem);
  line-height:1.72;
  color:var(--aa-branco-70);
}
.aa-modal__corpo h3{
  margin:1.9em 0 .7em;
  font-size:clamp(1.05rem,2vw,1.25rem);
  font-weight:700;
  color:var(--aa-branco);
}
.aa-modal__corpo blockquote{
  margin:1.7em 0;
  padding:.2em 0 .2em 1.15em;
  border-left:4px solid var(--aa-amarelo);
  font-size:clamp(1rem,1.8vw,1.14rem);
  font-weight:600; font-style:italic; line-height:1.55;
  color:var(--aa-amarelo);
}
.aa-modal__corpo blockquote::before{ content:"“"; }
.aa-modal__corpo blockquote::after { content:"”"; }
.aa-modal__corpo em{ font-style:italic; }

/* Popup de vídeo */
.aa-modal__caixa--video{
  max-width:1000px;
  background:#000;
  border-radius:var(--aa-r-m);
}
.aa-video{ aspect-ratio:16/9; width:100%; }
.aa-video iframe{ width:100%; height:100%; border:0; display:block; }
.aa-video__aviso{
  display:grid; place-items:center; height:100%;
  padding:24px; text-align:center;
  font-size:.95rem; color:var(--aa-branco-70);
  background:var(--aa-azul-medio);
}

@keyframes aa-fade{ from{opacity:0} to{opacity:1} }
@keyframes aa-sobe{
  from{ opacity:0; transform:translateY(28px) scale(.97); }
  to  { opacity:1; transform:none; }
}

body.aa-travado{ overflow:hidden; }

/* ─────────────────────────────────────────────── 13. RESPONSIVO */
@media (max-width: 1024px){
  .aa-materia{ flex-basis:calc((100% - clamp(16px,2.2vw,26px)) / 2); }
}

@media (max-width: 860px){
  .aa-projeto__grade{ grid-template-columns:1fr; }
  .aa-projeto__bloco-amarelo{
    top:auto; bottom:0; right:0; left:0;
    width:auto; height:34%;
    border-radius:var(--aa-r-g) var(--aa-r-g) 0 0;
    opacity:.14;
  }
  .aa-depoimento{ max-width:520px; margin-inline:auto; }

  .aa-episodio__botao{ grid-template-columns:minmax(110px, 38%) 1fr; }

  /* Marcos: todos alinhados à esquerda com a linha na borda */
  .aa-marcos::before{ left:7px; translate:0 0; }
  .aa-marco{ width:100%; margin-left:0; padding-left:34px; padding-right:0; text-align:left; }
  .aa-marco--esq{ text-align:left; padding-right:0; }
  .aa-marco--esq::after,
  .aa-marco--dir::after{ left:1px; right:auto; }
}

@media (max-width: 640px){
  .aa-materia{ flex-basis:88%; }
  .aa-carrossel__seta{ width:42px; height:42px; }
  .aa-carrossel__seta--esq{ left:6px; }
  .aa-carrossel__seta--dir{ right:6px; }

  .aa-episodio__botao{ grid-template-columns:1fr; }
  .aa-episodio__midia img{ aspect-ratio:16/9; }

  .aa-hero{ min-height:92svh; }
  .aa-hero__chamada br{ display:none; }

  .aa-numero{ flex-direction:column; align-items:flex-start; gap:6px; }
  .aa-rodape__forma{ width:70px; }
}

/* Linha do tempo a partir de notebook/desktop (1350px): a tira de fotos
   volta para a lateral esquerda. A técnica é simples de propósito: em vez
   de calcular a margem da tela (que só sobra o suficiente a partir de
   1600px), o bloco de texto passa a reservar um espaço FIXO à esquerda
   (foto + vão) através de margin-left. Isso garante que a foto nunca
   fique cortada, em nenhuma largura a partir daqui — só não fica
   perfeitamente centralizada com o resto da página ainda (isso só
   acontece a partir de 1600px, no bloco seguinte).
   Abaixo de 1350px continua valendo a regra padrão (foto no topo, texto
   embaixo), pra não confundir quem usa notebook comum. */
@media (min-width: 1350px){
  .aa-linha__conteudo{
    max-width:1120px;
    margin-inline:0;
    margin-left:220px; /* 180px de foto + 40px de vão */
  }

  .aa-filme{
    position:absolute;
    top:0; bottom:0; right:100%;
    margin-right:40px; margin-bottom:0;
    width:180px;
    padding:22px 0;
    border-block:0;
    border-inline:26px solid transparent;
  }
  .aa-filme::before,
  .aa-filme::after{
    top:0; bottom:0; left:auto; right:auto;
    width:26px; height:auto;
    background-image:repeating-linear-gradient(
      180deg,
      transparent 0 14px,
      rgba(255,255,255,.16) 14px 24px,
      transparent 24px 38px
    );
    background-size:11px 38px;
    background-position:center;
    background-repeat:repeat-y;
  }
  .aa-filme::before{ left:-26px; }
  .aa-filme::after { right:-26px; left:auto; }

  .aa-filme__tira{
    grid-template-columns:1fr;
    grid-template-rows:repeat(4, 1fr);
    height:100%;
  }
  .aa-filme__tira img{ height:100%; aspect-ratio:auto; }
}

/* A partir de 1600px já existe margem de sobra suficiente (viewport menos
   os 1120px do conteúdo, dividido por 2) para caber a foto + o vão sem
   depender de um valor fixo — aí sim o texto passa a se centralizar de
   verdade, alinhado com o resto da página, como nas demais seções. */
@media (min-width: 1600px){
  .aa-linha__conteudo{
    margin-left:auto;
    margin-inline:auto;
    max-width:var(--aa-max);
  }
}

/* ─────────────────────────────────────────────── 14. MOVIMENTO REDUZIDO */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .aa-revelar{ opacity:1 !important; transform:none !important; }
  .aa-parallax img{ transform:none !important; }
}

@media print{
  .aa-modal,.aa-carrossel__seta,.aa-hero__seta{ display:none !important; }
}