/* ==========================================================================
   Bamboo & co. — Landing page
   Geometria e cores extraídas do SVG do layout (espaço de 1440px).
   ========================================================================== */

/* --- Fontes ------------------------------------------------------------- */
@font-face{font-family:Stolzl;src:url(../assets/fonts/Stolzl-Thin.woff2) format('woff2');font-weight:250;font-style:normal;font-display:swap}
@font-face{font-family:Stolzl;src:url(../assets/fonts/Stolzl-Light.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Stolzl;src:url(../assets/fonts/Stolzl-Book.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Stolzl;src:url(../assets/fonts/Stolzl-Regular.woff2) format('woff2');font-weight:450;font-style:normal;font-display:swap}
@font-face{font-family:Stolzl;src:url(../assets/fonts/Stolzl-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Stolzl;src:url(../assets/fonts/Stolzl-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* --- Tokens ------------------------------------------------------------- */
:root{
  --verde-escuro:#023223;   /* topo do gradiente, fundo do bloco 02, footer */
  --verde:#01673F;          /* base do gradiente, listras */
  --oliva:#70961C;          /* destaque do título, barra, 1º "como?" */
  --limao:#BBC479;          /* botões, símbolo "b", 2º "como?" */
  --sage:#C6CFB4;           /* logos de clientes, textos de apoio, 3º "como?" */
  --escuro:#42401D;         /* contraste dentro do botão */
  --branco:#fff;

  --pagina:1440px;
  --margem:90px;

  /* Sangria — o quanto a janela é mais larga que a prancheta.
     --largura-janela é escrita pelo escala.js em px reais; dividida pela
     escala vira px de prancheta. --sangria-esq é a borda esquerda da janela
     nas coordenadas da prancheta (negativa quando sobra espaço nas laterais). */
  --largura-janela:1440px;
  --sangria:calc(var(--largura-janela) / var(--escala-pagina,1));
  --sangria-esq:calc(720px - var(--sangria) / 2);

  /* Texto de apoio — mesmo estilo no hero e no bloco 02 */
  --corpo:17.125px;
  --corpo-altura:28px;

  /* Entrada da colagem */
  --duracao-tile:1.6s;      /* quanto cada peça leva para assentar */
  --percurso-tile:86px;     /* distância percorrida na diagonal */

  /* Altura do hero. O layout traz 797px; subimos para devolver o respiro
     de baixo depois que a faixa de logos desceu. */
  --altura-hero:830px;

  --desloca-clientes:22px;  /* afasta a faixa de logos da colagem */

  /* Faixa de logos em movimento contínuo.
     --escala-logos multiplica tamanho, vãos e espaçamento entre as linhas.
     As durações valem para escala 1 e são ajustadas junto, de modo que
     mudar a escala não altera a velocidade aparente (~24px/s). */
  --escala-logos:1.92;
  --dur-logos-1:55s;        /* linha de cima — corre para a esquerda */
  --dur-logos-2:51.25s;     /* linha de baixo — corre para a direita */

  /* afasta a colagem do texto da esquerda, sem mudar o tamanho das peças */
  --desloca-colagem:170px;

  --colagem-cheia:478px;    /* até aqui a colagem aparece inteira */
  --colagem-fim:638px;      /* aqui já sumiu por completo */
}

/* --- Base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* reserva o espaço da barra de rolagem: sem isso ela entra depois que a
     página cresce, a largura útil muda e a escala fica defasada */
  scrollbar-gutter:stable;
  /* as faixas sangradas passam da prancheta; clip evita barra horizontal
     sem criar um contêiner rolável */
  overflow-x:hidden;
}
body{
  margin:0;
  font-family:Stolzl,system-ui,sans-serif;
  color:var(--branco);
  background:var(--verde-escuro);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* A prancheta tem 1440px e é reescalada para caber exatamente na janela.
   Com isso a página nunca fica mais estreita que a tela — some a faixa de
   fundo nas laterais — e todas as proporções do layout são preservadas.
   --escala-pagina é calculada em js/escala.js. */
.palco{
  width:var(--pagina);
  margin-inline:auto;
  position:relative;
  zoom:var(--escala-pagina,1);
}

/* Faixas decorativas que devem ir de ponta a ponta da janela, e não da
   prancheta: listras do hero, barras escalonadas e código de barras.
   A faixa é 60px mais alta dos dois lados porque algumas barras transbordam a
   seção de propósito; o recorte serve só para segurar as laterais.
   Dentro dela: .origem devolve o zero da prancheta (filhos em px do layout),
   .estica mantém a largura da janela (filhos em % — barras que se alongam). */
.faixa{
  position:absolute;
  top:-60px;
  height:calc(100% + 120px);
  left:var(--sangria-esq);
  width:var(--sangria);
  overflow:hidden;
  pointer-events:none;
}
.faixa > .origem,
.faixa > .estica{
  position:absolute;
  top:60px;
  height:calc(100% - 120px);
}
.faixa > .origem{left:calc(-1 * var(--sangria-esq));width:0}
.faixa > .estica{left:0;width:100%}

/* O fundo de cada seção é pintado por uma camada sangrada, atrás do conteúdo.
   A seção segue com 1440px, então todas as coordenadas do layout continuam
   valendo; só a cor é que atravessa a janela inteira. */
.hero::before,
.pergunta::after,
.vivo::before,
.cases::before,
.frentes::before,
.duvidas::before,
.rodape::before{
  content:"";
  position:absolute;
  top:0;
  left:var(--sangria-esq);
  width:var(--sangria);
  height:100%;
  background:inherit;
}
/* o ::after do bloco 02 vem depois do conteúdo, então precisa recuar */
.pergunta::after{z-index:-1}

/* ==========================================================================
   01 · HERO   (tela fixa de 1440×797)
   ========================================================================== */
.hero{
  position:relative;
  height:var(--altura-hero);
  /* o gradiente mantém a extensão original de 797px para não alterar a cor
     em nenhuma altura; o trecho extra segue no verde final */
  background:linear-gradient(180deg,var(--verde-escuro) 0,var(--verde) 797px);
}

/* Blocos escalonados na cor final do gradiente, em três faixas */
.hero__listras span{position:absolute;background:var(--verde)}

/* A colagem some por completo antes da faixa de logos. Uso máscara em vez de
   um véu opaco por cima: assim o gradiente de fundo do hero continua
   aparecendo, sem emenda de cor. */
.hero__colagem{
  position:absolute;
  top:0;
  height:100%;
  left:var(--sangria-esq);
  width:var(--sangria);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 var(--colagem-cheia),transparent var(--colagem-fim));
          mask-image:linear-gradient(180deg,#000 var(--colagem-cheia),transparent var(--colagem-fim));
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}

/* O deslocamento horizontal da colagem fica neste contêiner: as peças mantêm
   as coordenadas do layout e o recorte segue no .hero__colagem, então o que
   passa da prancheta continua sendo cortado. */
.hero__tiles{
  position:absolute;
  top:0;
  height:100%;
  left:calc(-1 * var(--sangria-esq));   /* volta ao zero da prancheta */
  width:0;
  transform:translateX(var(--desloca-colagem,0));
}

/* Colagem: cada tile é um retângulo de 376,34×210,34 girado -30° em torno
   do próprio canto superior esquerdo. O recorte da foto vem do
   background-size/position calculados a partir do layout. */
.hero__tile{
  position:absolute;
  width:376.34px;
  height:210.34px;
  border-radius:9.92px;
  transform:rotate(-30deg);
  transform-origin:0 0;
  background-repeat:no-repeat;

  /* entrada: cada tile chega deslizando na própria diagonal */
  animation:tile-entra var(--duracao-tile) cubic-bezier(.17,.67,.24,1) backwards;
  animation-delay:var(--atraso,0s);
}

/* Como o tile já está girado -30°, um translateY local equivale a deslocá-lo
   na diagonal: +Y aponta para baixo-direita, então a peça sobe para
   cima-esquerda até assentar em 0. */
@keyframes tile-entra{
  from{opacity:0; transform:rotate(-30deg) translateY(var(--percurso-tile))}
  to  {opacity:1; transform:rotate(-30deg) translateY(0)}
}

@media (prefers-reduced-motion:reduce){
  .hero__tile{animation:none}
}

/* Véu que dissolve a colagem no verde, na diagonal */
.hero__veu{
  position:absolute;
  top:0;
  left:var(--sangria-esq);
  width:var(--sangria);
  height:797px;          /* mantém a geometria original do gradiente */
  pointer-events:none;
}

/* --- Conteúdo ----------------------------------------------------------- */
.hero__logo,
.hero__titulo,
.hero__sub,
.hero__cta{position:absolute;left:var(--margem);z-index:2}

.hero__logo{
  top:90px;
  width:214px;
  height:31px;
}

.hero__titulo{
  top:177.7px;
  margin:0;
  font-weight:300;
  font-size:35px;
  line-height:48px;
  color:var(--branco);
  white-space:nowrap;
}
.hero__titulo em{
  font-style:normal;
  color:var(--oliva);
}

.hero__sub{
  top:398px;
  margin:0;
  padding-left:30.5px;
  font-weight:400;
  font-size:var(--corpo);
  line-height:var(--corpo-altura);
  color:var(--branco);
  white-space:nowrap;
}
.hero__sub::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:3px;
  height:99px;
  background:var(--oliva);
}

.hero__cta{
  top:551px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  width:290px;
  height:60px;
  padding:0 8px 0 26px;
  border-radius:30px;
  background:var(--limao);
  color:var(--escuro);
  font-family:inherit;
  font-weight:500;
  font-size:20px;
  line-height:1;
  border:0;
  cursor:pointer;
}
.hero__cta-seta{
  flex:0 0 auto;
  width:49px;
  height:49px;
  border-radius:50%;
  background:var(--escuro);
  display:grid;
  place-items:center;
}
.hero__cta-seta svg{width:20px;height:20px;stroke:var(--limao)}

/* --- Faixa de logos de clientes ----------------------------------------- */
/* --desloca-clientes afasta a faixa da colagem; move as duas linhas juntas,
   preservando as posições relativas do layout. */
.hero__clientes{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--sangria-esq);
  width:var(--sangria);
  z-index:3;
  pointer-events:none;
  transform:translateY(var(--desloca-clientes,0));
}

/* Cada linha é uma janela; dentro dela a trilha corre sem parar.
   O grupo de logos aparece duplicado, então deslocar a trilha em -50%
   devolve exatamente o mesmo quadro — o laço não tem emenda. */
/* Tudo na faixa — logos, vãos, altura das linhas e a distância entre elas —
   é multiplicado por --escala-logos, e a faixa cresce a partir do próprio
   centro (716,925px no layout). */
.clientes__linha{
  position:absolute;
  left:0;
  right:0;
  height:calc(30px * var(--escala-logos));
  overflow:hidden;
  /* dissolve as pontas para os logos não surgirem cortados na borda */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.clientes__linha--1{top:calc(716.925px - 40.575px * var(--escala-logos))}
.clientes__linha--2{top:calc(716.925px + 10.575px * var(--escala-logos))}

/* A duração acompanha a escala: a trilha fica mais larga, a volta demora
   mais, e a velocidade aparente não muda. */
.clientes__trilha{
  display:flex;
  align-items:center;
  height:100%;
  width:max-content;
  animation:corre-logos calc(var(--dur) * var(--escala-logos)) linear infinite;
}
.clientes__linha--1 .clientes__trilha{--dur:var(--dur-logos-1)}
.clientes__linha--2 .clientes__trilha{--dur:var(--dur-logos-2);animation-direction:reverse}

.clientes__grupo{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}
.clientes__linha--1 .clientes__grupo{
  gap:calc(45.4px * var(--escala-logos));
  padding-right:calc(45.4px * var(--escala-logos));
}
.clientes__linha--2 .clientes__grupo{
  gap:calc(45px * var(--escala-logos));
  padding-right:calc(45px * var(--escala-logos));
}

.clientes__grupo img{
  flex:0 0 auto;
  width:calc(var(--w) * var(--escala-logos));
  height:calc(var(--h) * var(--escala-logos));
  max-width:none;
}

@keyframes corre-logos{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}

@media (prefers-reduced-motion:reduce){
  .clientes__trilha{animation:none}
}

/* ==========================================================================
   02 · PERGUNTA  ("como? como? como?")
   Tela de 1440×577,1 — coordenadas medidas no SVG do layout.
   ========================================================================== */
.pergunta{
  position:relative;
  height:577.1px;
  background:var(--verde-escuro);
}

/* filete vertical que separa a pergunta da lista */
.pergunta::before{
  content:"";
  position:absolute;
  left:790px;
  top:165px;
  width:3px;
  height:265px;
  background:var(--sage);
}

.pergunta__eco{
  position:absolute;
  left:222.88px;
  top:65.89px;
  margin:0;
  font-weight:250;
  font-size:142.5px;
  line-height:148px;
}
.pergunta__eco span{display:block}
.pergunta__eco span:nth-child(1){color:var(--oliva)}
.pergunta__eco span:nth-child(2){color:var(--limao)}
.pergunta__eco span:nth-child(3){color:var(--sage)}

.pergunta__lista{
  position:absolute;
  left:836.27px;
  top:159.1px;
  width:385px;          /* nesta largura o texto quebra nos mesmos pontos do layout */
  margin:0;
  padding:0;
  list-style:none;
  font-weight:400;
  font-size:var(--corpo);
  line-height:var(--corpo-altura);
  color:var(--branco);
}
.pergunta__lista li + li{margin-top:var(--corpo-altura)}   /* uma linha em branco entre os itens */

/* ==========================================================================
   03 · BRANDING VIVO
   Tela de 1440×813,9. As barras escalonadas do rodapé transbordam a seção
   de propósito, como no layout — por isso não há overflow:hidden aqui e a
   seção ganha z-index para não ser coberta pelo bloco seguinte.
   ========================================================================== */
.vivo{
  position:relative;
  z-index:1;
  height:813.9px;
  background:var(--verde);
}

.vivo__chamada{
  position:absolute;
  left:255px;
  top:88px;
  margin:0;
  font-weight:250;
  font-size:34px;
  line-height:34px;
  color:var(--branco);
  white-space:nowrap;
}

.vivo__ilustra{
  position:absolute;
  left:839px;
  top:218.9px;
  width:601px;
  height:407px;
  background-image:url(../assets/img/ilustra-branding-vivo.jpg);
  background-size:686.18px 494.05px;
  background-position:-85.18px -43.53px;
  background-repeat:no-repeat;
}

.vivo__rotulo{
  position:absolute;
  left:90px;
  top:261.35px;
  margin:0;
  font-weight:300;
  font-size:23px;
  line-height:23px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--branco);
}

/* "branding vivo" é o logotipo do produto, não texto composto: usamos o
   vetor do próprio layout. Assim o desenho do pingo do "i" — limão, menor
   que o da fonte e de contorno próprio — vem exato. */
.vivo__marca{
  position:absolute;
  left:90px;
  top:306.9px;
  margin:0;
  width:662px;
  height:105.01px;
  font-size:0;
}
.vivo__marca img{width:100%;height:100%}

.vivo__texto{
  position:absolute;
  left:90px;
  top:439.91px;
  width:700px;
  margin:0;
  font-weight:400;
  font-size:var(--corpo);
  line-height:var(--corpo-altura);
  color:var(--branco);
}

/* barras escalonadas */

.vivo__barras span{position:absolute;background:var(--oliva)}

/* ==========================================================================
   04 · CASES
   Tela de 1440×1853, fundo branco. Grade escalonada de 16 cards em quatro
   colunas, alternando dois formatos. Cada card é um botão — vai abrir o
   modal do case.
   ========================================================================== */
.cases{
  position:relative;
  height:1853px;
  background:var(--branco);
}

.cases__titulo{
  position:absolute;
  left:188.36px;
  top:98.85px;
  margin:0;
  font-weight:300;
  font-size:34px;
  line-height:34px;
  color:var(--verde);
  white-space:nowrap;
}

.caso{
  position:absolute;
  display:block;
  margin:0;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.caso__foto{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
}
.caso__titulo,
.caso__desc{position:absolute;display:block}
.caso__titulo{font-weight:400;font-size:19px;line-height:19px}
.caso__desc{font-weight:300;font-size:11.75px;line-height:18px}

/* alto: a foto ocupa o card inteiro e o texto fica sobre um véu escuro */
.caso--alto{
  width:299px;
  height:370px;
  border-radius:10px;
  overflow:hidden;
  color:var(--branco);
}
.caso--alto .caso__foto::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent var(--veu),#2A2A2A 100%);
}

/* curto: moldura clara, foto só no topo, texto sobre o branco */
.caso--curto{
  width:298px;
  height:323.17px;
}
.caso--curto::before{          /* contorno do card */
  content:"";
  position:absolute;
  left:.83px;
  top:.83px;
  width:296.35px;
  height:322.35px;
  border:1px solid rgb(172 170 170 / .7);
  border-radius:15.7px;
}
.caso--curto .caso__foto{
  bottom:auto;
  height:200px;
  border-radius:10px 10px 0 0;
}
.caso--curto .caso__titulo{color:var(--verde)}
.caso--curto .caso__desc{color:var(--verde-escuro)}

/* ==========================================================================
   05 · TRÊS FRENTES
   Tela de 1440×1312. As barras do topo e o código de barras da base
   transbordam a seção, como no layout.
   ========================================================================== */
.frentes{
  position:relative;
  z-index:1;
  height:1312px;
  background:var(--verde);
}


.frentes__barras span{position:absolute;background:var(--oliva)}
.frentes__codigo span{position:absolute;background:var(--sage)}

.frentes__titulo{
  position:absolute;
  left:88.08px;
  top:208.05px;
  margin:0;
  font-weight:300;
  font-size:33.75px;
  line-height:33.75px;
  color:var(--sage);
  white-space:nowrap;
}

.frente{position:absolute;left:0;width:100%}
.frente__nome{
  position:absolute;
  margin:0;
  font-weight:250;
  font-size:44.5px;
  line-height:55px;
  color:var(--sage);
  white-space:nowrap;
}
.frente__texto{
  position:absolute;
  margin:0;
  font-weight:400;
  font-size:var(--corpo);
  line-height:var(--corpo-altura);
  color:var(--sage);
}
/* filete que separa as frentes */
.frente__risco{
  position:absolute;
  left:91px;
  width:1262px;
  height:1px;
  background:var(--sage);
}

.frentes__cta{
  position:absolute;
  left:575px;
  top:968.99px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  width:290px;
  height:60px;
  padding:0 8px 0 26px;
  border-radius:30px;
  background:var(--limao);
  color:var(--escuro);
  font-family:inherit;
  font-weight:500;
  font-size:19px;
  line-height:1;
  border:0;
  cursor:pointer;
}

/* ==========================================================================
   06 · DÚVIDAS
   Tela de 1440×749. As perguntas ocupam a metade esquerda; a resposta da
   pergunta ativa aparece à direita, na área que o layout deixa vazia.
   ========================================================================== */
.duvidas{
  position:relative;
  height:749px;
  background:var(--sage);
  color:var(--verde-escuro);
}

.duvidas__titulo{
  position:absolute;
  left:87.62px;
  top:86.51px;
  margin:0;
  font-weight:300;
  font-size:34.75px;
  line-height:34.75px;
  color:var(--verde);
  white-space:nowrap;
}

.duvidas__lista{position:absolute;left:0;top:0;width:100%}

.duvida{
  position:absolute;
  margin:0;
  padding:0;
  border:0;
  background:none;
  font-family:inherit;
  font-weight:400;
  font-size:var(--corpo);
  line-height:var(--corpo-altura);
  color:var(--verde-escuro);
  text-align:left;
  white-space:nowrap;
  cursor:pointer;
  transition:color .2s;
}
.duvida[aria-selected="true"]{color:var(--verde)}
.duvida:focus-visible{outline:2px solid var(--verde);outline-offset:3px}

/* filete abaixo de cada pergunta */
.duvidas__lista i{
  position:absolute;
  left:89px;
  width:581px;
  height:.83px;
  background:var(--verde-escuro);
}

/* painel de resposta — não existe no layout, ver nota na entrega */
.duvidas__resposta{
  position:absolute;
  left:730px;
  top:176.88px;
  width:560px;
  margin:0;
  font-weight:400;
  font-size:var(--corpo);
  line-height:var(--corpo-altura);
  color:var(--verde-escuro);
}
.duvidas__resposta[hidden]{display:none}

/* ==========================================================================
   07 · RODAPÉ
   Tela de 1440×666. À esquerda a chamada, o e-mail e o símbolo; à direita
   o formulário de contato com três campos sublinhados e o botão em pílula.
   ========================================================================== */
.rodape{
  position:relative;
  height:666px;
  background:var(--verde-escuro);
}

.rodape__chamada{
  position:absolute;
  left:86.58px;
  top:81.32px;
  margin:0;
  font-weight:300;
  font-size:34.75px;
  line-height:48px;
  color:var(--sage);
}

.rodape__email{
  position:absolute;
  left:89.83px;
  top:254.23px;
  font-weight:300;
  font-size:27px;
  line-height:27px;
  color:var(--limao);
  text-decoration-line:underline;
  text-decoration-thickness:1.39px;
  text-underline-offset:2.6px;
  transition:opacity .2s;
}
.rodape__email:hover{opacity:.75}

.rodape__simbolo{
  position:absolute;
  left:89.5px;
  top:329.49px;
  width:75.99px;
  height:75.99px;
}

/* --- Formulário --------------------------------------------------------- */
.rodape__campo{position:absolute;left:0;width:100%}

.rodape__campo label{
  position:absolute;
  left:622.92px;
  top:0;
  font-weight:300;
  font-size:19px;
  line-height:19px;
  color:var(--sage);
  text-transform:uppercase;
  pointer-events:none;
}

.rodape__campo input{
  position:absolute;
  left:625px;
  top:24.71px;
  width:725px;
  height:49.32px;
  margin:0;
  padding:0 0 4px;
  border:0;
  border-bottom:1.65px solid var(--sage);
  border-radius:0;
  background:none;
  font-family:inherit;
  font-weight:300;
  font-size:19px;
  color:var(--sage);
}
.rodape__campo input:focus{outline:none;border-bottom-color:var(--limao)}
.rodape__campo input::placeholder{color:transparent}

/* --- Botão -------------------------------------------------------------- */
.rodape__botao{
  position:absolute;
  left:625px;
  top:517.99px;
  width:290px;
  height:60px;
  padding:0;
  border:0;
  border-radius:30px;
  background:var(--limao);
  font-family:inherit;
  color:var(--escuro);
  cursor:pointer;
  transition:filter .2s;
}
.rodape__botao:hover{filter:brightness(1.06)}
.rodape__botao:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

.rodape__botao span{
  position:absolute;
  left:25.82px;
  top:18.34px;
  font-weight:500;
  font-size:19.5px;
  line-height:19.5px;
  white-space:nowrap;
}

/* disco escuro com a seta */
.rodape__botao i{
  position:absolute;
  left:233px;
  top:6px;
  width:49px;
  height:49px;
  border-radius:50%;
  background:var(--escuro);
}
.rodape__botao svg{
  position:absolute;
  left:248.15px;
  top:21.71px;
  width:19.83px;
  height:18.74px;
  overflow:visible;
}

/* ==========================================================================
   MODAL DOS CASES
   Não existe no layout — desenhado com a mesma linguagem do bloco 04
   (cartão branco, cantos arredondados, título em --verde). Medidas em
   px de prancheta: a caixa é reescalada junto com a página.
   ========================================================================== */
.modal{
  position:fixed;
  inset:0;
  width:100%;
  max-width:none;
  height:100%;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  background:none;
  overflow:hidden;
}
.modal::backdrop{
  background:rgb(2 50 35 / .82);
  backdrop-filter:blur(3px);
}
.modal[open]{display:flex;align-items:center;justify-content:center}

.modal__caixa{
  position:relative;
  display:flex;
  zoom:var(--escala-pagina,1);
  width:1040px;
  height:620px;
  max-height:calc(88vh / var(--escala-pagina,1));
  border-radius:16px;
  background:var(--branco);
  overflow:hidden;
  animation:modal-entra .28s ease-out both;
}
@keyframes modal-entra{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .modal__caixa{animation:none}
}

/* área da imagem — recebe a foto definitiva de cada case */
.modal__imagem{
  flex:0 0 480px;
  background:var(--sage) center/cover no-repeat;
}

.modal__texto{
  flex:1 1 auto;
  padding:56px 56px 56px 48px;
  overflow-y:auto;
  overscroll-behavior:contain;
}

.modal__rotulo{
  margin:0 0 14px;
  font-weight:400;
  font-size:11.75px;
  line-height:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--oliva);
}
.modal__titulo{
  margin:0 0 18px;
  font-weight:300;
  font-size:34px;
  line-height:40px;
  color:var(--verde);
}
.modal__resumo{
  margin:0 0 26px;
  font-weight:400;
  font-size:var(--corpo);
  line-height:var(--corpo-altura);
  color:var(--verde-escuro);
}
.modal__corpo p{
  margin:0 0 18px;
  font-weight:300;
  font-size:var(--corpo);
  line-height:var(--corpo-altura);
  color:var(--verde-escuro);
}
.modal__corpo p:last-child{margin-bottom:0}

/* aviso de conteúdo provisório — sai quando entrarem os textos reais */
.modal__provisorio{
  margin:26px 0 0;
  padding-top:18px;
  border-top:1px solid rgb(172 170 170 / .5);
  font-weight:300;
  font-size:11.75px;
  line-height:18px;
  color:var(--oliva);
}

.modal__provisorio code{font:inherit;color:var(--escuro)}

.modal__fechar{
  position:absolute;
  right:20px;
  top:20px;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--limao);
  cursor:pointer;
  transition:filter .2s;
}
.modal__fechar:hover{filter:brightness(1.06)}
.modal__fechar:focus-visible{outline:2px solid var(--verde);outline-offset:3px}
.modal__fechar svg{display:block;margin:auto}

/* ==========================================================================
   Ferramenta de conferência (removida na entrega)
   ========================================================================== */
.ref{
  position:absolute;
  top:0;left:0;
  width:1440px;height:auto;
  z-index:9;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:difference;
}
body.ref-on .ref{opacity:1}
body.ref-solid .ref{opacity:.5;mix-blend-mode:normal}