/* Duas seções que mostram telas do produto: a de modos e a da retrospectiva.
   Mesmo esqueleto das outras seções de imagem mais texto, com a imagem trocando
   de lado e o fundo mudando, para o ritmo não repetir três vezes seguidas. */
.screen-section{padding:var(--space) calc(var(--gutter) - 20px);background:var(--cream);color:var(--ink);border-radius:20px}
.screen-grid{max-width:1376px;margin:auto;display:grid;grid-template-columns:.88fr 1.12fr;gap:9%;align-items:center}
.screen-section--image-left .screen-grid{grid-template-columns:1.12fr .88fr}
.screen-section--image-left .screen-copy{order:2}
.screen-section--image-left .screen-shot{order:1}

.screen-copy>.eyebrow{display:block;color:var(--green-dark);font:600 11px Asap,sans-serif;letter-spacing:.09em;text-transform:uppercase;margin-bottom:30px}
.screen-copy>h2{margin:0}
.screen-copy>p{font-size:17px;line-height:1.68;color:var(--secondary);max-width:410px;margin-top:24px;letter-spacing:-.018em}

.screen-shot{margin:0}
.screen-shot img{width:100%;height:auto;border-radius:12px;box-shadow:0 18px 55px #12191324}
.screen-shot figcaption{margin-top:16px;font-size:11px;line-height:1.6;color:var(--muted)}

/* A retrospectiva sai no verde escuro, porque ela fecha o argumento e porque a
   tela é clara e ganha contraste no fundo. */
.screen-section--dark{background:#252e28;border-radius:20px;color:var(--cream)}
.screen-section--dark .screen-copy>.eyebrow{color:#9fb097}
.screen-section--dark .screen-copy>p{color:#c6ccc3}
.screen-section--dark .screen-shot figcaption{color:#8f9a89}
.screen-section--dark .screen-shot img{box-shadow:0 26px 70px #0d130d5c}

@media(max-width:1050px){.screen-grid{gap:6%}.screen-copy>p{font-size:15.5px}}
@media(max-width:860px){
  .screen-grid,.screen-section--image-left .screen-grid{grid-template-columns:1fr;gap:36px}
  .screen-copy,.screen-section--image-left .screen-copy{order:1}
  .screen-shot,.screen-section--image-left .screen-shot{order:2}
  .screen-copy>p{max-width:none}
  .screen-copy>.eyebrow{margin-bottom:22px}
}
@media(max-width:600px){.screen-section{padding:56px 22px}.screen-section--dark{margin-inline:12px;border-radius:9px}}

/* Variante com a captura em cima, ocupando as duas colunas, e embaixo o título
   à esquerda com o texto à direita. Mesma grade da seção "A Amia não substitui". */
.screen-wrap{max-width:1560px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:start}
.screen-wrap .screen-shot{grid-column:1/-1;margin:0 0 clamp(38px,4.4vw,62px)}
.screen-wrap .screen-copy>h2{margin:0}
.screen-context p{font-size:16px;line-height:1.68;color:var(--secondary);margin:0;letter-spacing:-.018em}
.screen-context p+p{margin-top:16px}
@media(max-width:860px){
  .screen-wrap{grid-template-columns:1fr;gap:26px}
  .screen-wrap .screen-shot{margin-bottom:8px}
}

/* Texto mais perto da captura. */
.screen-wrap .screen-shot{margin-bottom:clamp(18px,2.1vw,30px)}
.screen-note{margin-top:22px;font-size:11px;line-height:1.6;color:var(--muted)}
.screen-section--dark .screen-note{color:#8f9a89}

/* A borda de cima deixa de ser um corte e vira passagem: a cor da seção
   anterior desce por 200px até virar a cor desta. */
.screen-section{background-repeat:no-repeat}
.screen-section:not(.screen-section--dark){background-image:linear-gradient(#eeebe6 0,#f6f4f1 210px)}
.screen-section--dark{background-image:linear-gradient(#e9e6df 0,#252e28 230px)}
@media(max-width:860px){
  .screen-section:not(.screen-section--dark){background-image:linear-gradient(#eeebe6 0,#f6f4f1 130px)}
  .screen-section--dark{background-image:linear-gradient(#e9e6df 0,#252e28 140px)}
}

/* As duas seções passaram a ocupar a largura inteira, sem cartão e sem canto
   arredondado. Com o cartão, sobrava uma tira do fundo da página ao lado dele e
   a passagem de cor era cortada no meio. */
.screen-section{border-radius:0}
@media(max-width:600px){.screen-section--dark{margin-inline:0;border-radius:0}}

/* CORREÇÃO: a retrospectiva sai do verde e volta para o creme, com tipografia
   escura. A mudança de cor passa a ser só de fundo e acontece durante a rolagem:
   o creme vai esquentando ao longo da seção e chega na areia bem quando começam
   as perguntas frequentes, que seguem na mesma cor até o convite do piloto. */
.screen-section--dark{background-color:#e5dfd3;color:var(--ink);border-radius:0;margin-inline:0}
.screen-section--dark{background-image:linear-gradient(#f6f4f1 0,#e5dfd3 100%)}
.screen-section--dark .screen-copy>h2{color:var(--ink)}
.screen-section--dark .screen-context p{color:var(--secondary)}
.screen-section--dark .screen-note{color:var(--muted)}
.screen-section--dark .screen-shot img{box-shadow:0 18px 55px #12191324}
@media(max-width:860px){.screen-section--dark{background-image:linear-gradient(#f6f4f1 0,#e5dfd3 100%)}}

/* A areia continua nas perguntas frequentes, para a passagem não parar no meio. */
.faq{background:#e5dfd3}

/* Mais respiro entre o fim do texto e o bloco da conversa com o gestor. */
.screen-section:not(.screen-section--dark){padding-bottom:calc(var(--space) * 1.5)}

/* A tela de início entra sozinha, sem título e sem texto: a frase que importa
   está dentro da própria captura. */
.screen-section--solo{background-image:none;background-color:var(--cream);padding-bottom:var(--space)}
.screen-section--solo .screen-wrap{grid-template-columns:1fr}
/* a tela de início passou a ter texto embaixo, então volta a ter margem */

/* AJUSTES DE REVISÃO
   1. A tela de início fica no mesmo verde do fundo em volta dela. Em creme, ela
      abria duas emendas duras, uma acima e outra abaixo, no meio de um trecho
      escuro. No verde as duas somem e a captura clara ganha contraste.
   2. A passagem da retrospectiva passa a começar na cor exata da seção de cima
      (#e9e6df), e não no creme da página, que deixava um fio claro na emenda. */
.screen-section--solo{background-color:#252e28;background-image:none}
.screen-section--dark{background-image:linear-gradient(#e9e6df 0,#e5dfd3 100%)}
@media(max-width:860px){.screen-section--dark{background-image:linear-gradient(#e9e6df 0,#e5dfd3 100%)}}

/* No verde, a captura recua e ganha moldura de fundo, senão vira uma faixa clara
   quase da largura inteira, com dois filetes verdes nas beiradas. */
.screen-section--solo .screen-shot{max-width:78%;margin-inline:auto}
.screen-section--solo .screen-shot img{box-shadow:0 30px 80px #0d130d66}
@media(max-width:860px){.screen-section--solo .screen-shot{max-width:100%}}

/* A regra do degradê usa :not(), que pesa mais que uma classe só. Por isso a
   tela de início precisa de duas classes no seletor para o verde valer. */
.screen-section.screen-section--solo{background-color:#252e28;background-image:none}

/* A tela de início volta para o creme liso, sem verde e sem degradê. */
.screen-section.screen-section--solo{background-color:var(--cream);background-image:none}
.screen-section--solo .screen-shot{max-width:100%}
.screen-section--solo .screen-shot img{box-shadow:0 18px 55px #12191324}

/* Metade a mais de respiro entre o fim do texto e o bloco da conversa com o gestor. */
.screen-section:not(.screen-section--dark):not(.screen-section--solo){padding-bottom:calc(var(--space) * 2.25)}

/* A retrospectiva empilha centralizado: captura, título e, embaixo, o texto.
   E sai com folga grande antes das perguntas frequentes. */
.screen-section--dark .screen-wrap{grid-template-columns:1fr;gap:0;justify-items:center;text-align:center}
.screen-section--dark .screen-shot{order:1;width:100%}
.screen-section--dark .screen-copy{order:2}
.screen-section--dark .screen-context{order:3;max-width:660px;margin-top:26px}
.screen-section--dark .screen-context p{max-width:none}
.screen-section--dark{padding-bottom:calc(var(--space) * 2.25)}
@media(max-width:860px){.screen-section--dark .screen-context{margin-top:20px}}

/* Mais folga ainda antes das perguntas frequentes. */
.screen-section--dark{padding-bottom:calc(var(--space) * 3)}

/* AJUSTE: a retrospectiva usa o mesmo creme claro da seção "Cada situação tem
   uma porta" e do fundo em volta do bloco do gestor. Sem degradê e sem areia.
   As perguntas frequentes seguem no mesmo creme. */
.screen-section.screen-section--dark{background-color:var(--cream);background-image:none}
.faq{background:var(--cream)}

/* A captura descola do título, e a folga até o FAQ volta a um tamanho razoável. */
.screen-section--dark .screen-shot{margin-bottom:clamp(52px,5.6vw,84px)}
.screen-section--dark{padding-bottom:calc(var(--space) * 1.6)}

/* TAMANHO DAS CAPTURAS
   Antes as três eram exibidas com 1183px, o mesmo tamanho da janela em que foram
   feitas: escala 1:1, e o aplicativo competia com a página. Agora cada uma foi
   recapturada numa janela mais estreita e é exibida menor, sempre acima de 0,8
   da escala real, que é o limite onde o texto de 13px do produto ainda se lê. */
.screen-shot{margin-inline:auto}
.screen-section--solo .screen-shot{max-width:830px}
.screen-section:not(.screen-section--dark):not(.screen-section--solo) .screen-shot{max-width:890px}
.screen-section--dark .screen-shot{max-width:760px}
@media(max-width:980px){
  .screen-section--solo .screen-shot,
  .screen-section:not(.screen-section--dark):not(.screen-section--solo) .screen-shot,
  .screen-section--dark .screen-shot{max-width:100%}
}

/* O atalho `margin:0 0 X` lá de cima zera as margens laterais e vencia o
   `margin-inline:auto`, então a captura encostava na esquerda em vez de centrar. */
.screen-wrap .screen-shot{margin-inline:auto}

/* TAMANHO DAS CAPTURAS, versão final
   Um teto único para as três, como a página do Codex faz: a captura cresce até
   1020px e para. Abaixo disso ela acompanha a largura da coluna de texto.
   As três foram capturadas em 4:3, então todas fecham na mesma altura. */
.screen-section--solo .screen-shot,
.screen-section:not(.screen-section--dark):not(.screen-section--solo) .screen-shot,
.screen-section--dark .screen-shot{max-width:1020px}

/* COMPOSIÇÃO FINAL das três seções de captura.
   Título centralizado em cima, captura no meio, texto centralizado embaixo.
   Antes só a retrospectiva era centralizada, e a de modos tinha título à
   esquerda com texto à direita, o que dava duas composições diferentes para o
   mesmo tipo de bloco. */
.screen-section .screen-wrap{grid-template-columns:1fr;gap:0;justify-items:center;text-align:center}
.screen-section .screen-copy{order:1;max-width:none}
.screen-section .screen-copy>h2{margin:0}
.screen-section .screen-shot{order:2;width:100%;margin-top:clamp(32px,3.6vw,52px);margin-bottom:clamp(46px,5vw,74px)}
.screen-section--solo .screen-shot{margin-bottom:0}
.screen-section .screen-context{order:3;max-width:660px}
.screen-section .screen-context p{max-width:none}

/* Corpo das três seções de captura: 19px com entrelinha de 27px, centralizado.
   Antes era 16px, e a entrelinha de 1,68 já dava os mesmos 27px, então o que
   muda é só o tamanho da letra. */
.screen-context p{font-size:19px;line-height:27px}
@media(max-width:600px){.screen-context p{font-size:17px;line-height:25px}}

/* A MESMA distância da captura até o texto nas três seções.
   Havia uma regra antiga zerando essa margem só na tela de início, e outra com
   valor próprio na retrospectiva. Este bloco é o último e vale para as três. */
.screen-section .screen-shot,
.screen-section--solo .screen-shot,
.screen-section--dark .screen-shot{margin-bottom:clamp(46px,5vw,74px)}

/* O vão de cima, do título até a captura, passa a ser o mesmo de baixo, da
   captura até o texto. A captura fica centrada no próprio bloco. */
.screen-section .screen-shot,
.screen-section--solo .screen-shot,
.screen-section--dark .screen-shot{margin-top:clamp(46px,5vw,74px)}

/* Os quatro argumentos de valor para o RH, no fim da seção escura. Vêm do lado
   "Sou RH" da página institucional, com duas correções: a promessa de queda de
   rotatividade saiu, porque contradiz o FAQ, e a declaração de conformidade com
   a LGPD virou descrição do que a política de fato descreve. */
.rh-valor{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:clamp(64px,7vw,104px)}
.rh-valor article{border-top:1px solid var(--line);padding-top:20px}
.rh-valor h4{font-size:17px;line-height:1.35;letter-spacing:-.02em;margin:0 0 12px;font-weight:500}
.rh-valor p{font-size:14px;line-height:1.65;color:#c6ccc3;margin:0;letter-spacing:-.018em}
@media(max-width:1050px){.rh-valor{gap:28px}}
@media(max-width:860px){.rh-valor{grid-template-columns:1fr 1fr;gap:32px 24px}}
@media(max-width:560px){.rh-valor{grid-template-columns:1fr;gap:26px}}

/* Os dois parágrafos que separam a Amia de uma IA genérica e das ferramentas
   de RH, no fim da seção do método. */
.method-note{max-width:820px;margin:clamp(48px,5vw,76px) auto 0;text-align:center}
.method-note p{font-size:16px;line-height:1.68;color:var(--secondary);margin:0;letter-spacing:-.018em}
.method-note p+p{margin-top:16px}
@media(max-width:600px){.method-note p{font-size:15px}}