/* ============================================================
   Serena IA — LP específica
   Usa os tokens/base de css/base.css (mesmo padrão visual do site).
   Efeitos inspirados em monday.com/lang/pt: headlines enormes e
   ousadas, seções escuras full-bleed, mascote fixo cercado de cards
   flutuantes com parallax, diagrama de fluxo que se desenha ao rolar.
   ============================================================ */

/* ============================================================ 01. HERO */
.serena-hero {
  padding-top: 140px;
  padding-bottom: 120px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--bg-cream) url("../assets/bg-banner-serena-ia.webp") right center / cover no-repeat;
  overflow: hidden;
}

.serena-hero > .container {
  width: 100%;
}

@media (max-width: 900px) {
  /* A foto é bem mais larga que alta (banner). Com "cover" num
     container estreito e alto (mobile), a Serena (que mora no lado
     direito da foto) sai ampliada demais e cola no texto. Aqui a
     largura manda (background-size: 100% auto, sem cortar a foto) —
     ela entra "zoom out" inteira, ancorada embaixo, com a cor de
     fundo preenchendo o respiro que sobra em cima, atrás do texto. */
  .serena-hero {
    padding-top: 96px;
    padding-bottom: 240px;
    /* Ocupa a tela inteira, senão a seção preta seguinte ("Conheça a
       Serena") aparecia como uma faixa embaixo. svh = altura com a
       barra do navegador visível (100vh no celular passa da tela);
       100vh fica de fallback pra navegador sem svh. */
    min-height: 100vh;
    min-height: 100svh;
    /* Texto preso no topo (não centralizado): a altura extra vira
       céu azul entre o texto e a foto, ancorada embaixo. */
    align-items: flex-start;
    /* Versão bem menor (1400px de largura vs. 2917px da original) —
       no mobile ninguém precisa baixar um arquivo pensado pra tela
       cheia de desktop; troca sozinho aqui, sem afetar quem carrega o
       breakpoint de cima. */
    background-image: url("../assets/bg-banner-serena-ia-mobile.webp");
    background-size: 196% auto;
    background-position: right bottom;
    /* Sem isso, o respiro que sobra em cima do "zoom out" (ver acima)
       fica com a cor cream de fallback — destoa do céu azul da foto
       e não dá contraste pro texto branco. Tom escolhido pra casar
       com o azul do céu da própria foto, sem parecer emenda. */
    background-color: #006cb5;
  }
}

.serena-hero__copy {
  max-width: 620px;
}

.serena-hero__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(43px, 5.76vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 24px;
}

/* Destaque no padrão da marca: fundo amarelo + texto preto (igual ao
   institucional), não cor de texto colorida. */
.serena-hero__title-accent {
  display: inline-block;
  background: #ffd100;
  color: #1c1b1f;
  padding: 0 14px;
  border-radius: 12px;
}

.serena-hero__lede {
  color: #fff;
  margin-bottom: 35px;
  max-width: 460px;
}

/* Faixa "intermediária" (logo acima do mobile, tipo tablet-paisagem /
   notebook menor): a foto de fundo (cover, right center) amplia mais
   nessas proporções e a Serena entra mais pra dentro do frame — sem
   encolher a caixa de texto aqui, a lede estica até bater nela. */
@media (min-width: 901px) and (max-width: 1240px) {
  .serena-hero__copy {
    max-width: 380px;
  }

  .serena-hero__lede {
    max-width: 320px;
  }
}

.serena-hero__cta {
  height: 58px;
  padding: 0 30px;
  font-size: 16px;
  background: #ffd100;
  color: #1c1b1f;
}

.serena-hero__cta:hover {
  background: #ffffff;
}

/* Só no mobile: no desktop o CTA vive no menu do topo (.site-nav). No mobile o CTA
   flutuante (.zen-float-cta) fica escondido enquanto o hero está na
   tela — ele caía bem em cima do card de chat da foto — e este botão,
   no respiro azul abaixo do texto, ocupa o lugar dele (ver serena.js). */
.serena-hero__cta {
  display: none;
}

@media (max-width: 900px) {
  .serena-hero__cta {
    display: inline-flex;
  }
}

.zen-float-cta.zen-float-cta--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(16px);
}

.zen-float-cta {
  transition: transform 220ms ease, opacity 220ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.serena-chat {
  width: 100%;
  max-width: 380px;
  background: #ffffff;
  border-radius: var(--radius-card);
  box-shadow: 0 24px 64px -20px rgba(44, 34, 45, 0.28);
  border: 1px solid var(--border-card);
  overflow: hidden;
  position: relative;
  z-index: 3;
  will-change: transform;
}

/* --- Cabeçalho: réplica do header real do WhatsApp (voltar, avatar
   redondo, nome/status, chamada de vídeo/voz) em vez do header de marca
   escuro usado antes — mais crível como print de conversa de verdade. */
.serena-chat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f0f0f0;
  color: #1c1b1f;
}

.serena-chat__back {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: #4a4a4a;
  cursor: default;
}

.serena-chat__avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #cfcfcf;
  object-fit: cover;
  flex: none;
}

.serena-chat__head-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.serena-chat__name {
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.3;
  color: #1c1b1f;
}

.serena-chat__status {
  font-size: 12px;
  color: #6b7280;
}

.serena-chat__head-icons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #4a4a4a;
  flex: none;
}

/* --- Corpo: papel de parede bege clássico do WhatsApp (era um cinza
   plano de card) — o fundo sozinho já muda a leitura de "mockup" pra
   "print real". */
.serena-chat__body {
  padding: 16px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 260px;
  background: #e7ded3;
}

.serena-chat__bubble {
  max-width: 82%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.4;
  font-family: var(--font-sans);
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1), transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.serena-chat__bubble.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.serena-chat__bubble--out {
  align-self: flex-end;
  background: #d9fdd3;
  color: #111b21;
  border-bottom-right-radius: 2px;
}

.serena-chat__bubble--in {
  align-self: flex-start;
  background: #ffffff;
  color: #111b21;
  border-bottom-left-radius: 2px;
}

.serena-chat__bubble--status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 600;
}

.serena-chat__check {
  color: #2ecc71;
  font-weight: 800;
}

/* --- Metadado (hora + confirmação de leitura), injetado no fim de cada
   bolha via serena.js — bolhas --file/--status são flex-row, por isso o
   meta força quebra de linha com flex-basis 100%; as demais são bloco
   normal, então "display:block" já cai numa linha nova sozinho. */
.serena-chat__meta {
  display: block;
  margin-top: 2px;
  text-align: right;
  font-size: 10.5px;
  line-height: 1;
  color: rgba(17, 27, 33, 0.45);
  white-space: nowrap;
}

.serena-chat__bubble--file .serena-chat__meta,
.serena-chat__bubble--status .serena-chat__meta {
  flex: 1 0 100%;
}

.serena-chat__check-icon {
  vertical-align: -1.5px;
  margin-left: 2px;
  color: #53bdeb;
}

.serena-chat__divider {
  align-self: center;
  font-size: 11.5px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 4px 0;
  opacity: 0;
  transition: opacity 420ms ease;
}

.serena-chat__divider.is-visible { opacity: 1; }

/* --- Rodapé: barra de mensagem (decorativa, sem interação) que fecha o
   card como um app de verdade em vez de terminar seco na última bolha. */
.serena-chat__inputbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f0f0f0;
  color: #4a4a4a;
}

.serena-chat__inputbar-field {
  flex: 1;
  background: #ffffff;
  border-radius: 999px;
  padding: 8px 14px;
  color: #8a8a8a;
  font-size: 13px;
  min-width: 0;
}

/* ============================================================ 02. CONHEÇA A SERENA (dark)
   O pin (travar a tela enquanto anima) é feito pelo GSAP ScrollTrigger em
   serena.js — a seção ocupa a tela inteira (100vh, sem padding) e o
   vídeo preenche ela de ponta a ponta, sem título nem tarja preta
   sobrando em cima/embaixo. */
.serena-meet {
  background: #0b0a0d;
  color: var(--text-on-dark);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* Sobrescreve o padding-block:40px genérico de .section — senão
     sobra tarja preta em cima/embaixo mesmo com o vídeo a 100% da
     altura do miolo (o miolo é que fica menor que a seção). */
  padding-block: 0;
}

.serena-meet__lede {
  color: rgba(251, 250, 249, 0.72);
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

/* Box com o formato nativo do vídeo (16:9) preservado — cover dentro de
   um contêiner na mesma proporção não corta nem distorce nada, só
   arredonda os cantos como um card. */
.serena-meet__visual {
  position: relative;
  z-index: 40;
  display: flex;
  justify-content: center;
  flex: 1;
  min-height: 0;
}

.serena-meet__video-box {
  /* Full-bleed: o vídeo ocupa a seção inteira, ponta a ponta e sem
     sobrar tarja preta em cima/embaixo (a seção já é 100vh; o
     object-fit: cover no <video> cuida de não distorcer). */
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.serena-meet__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Evita o "pisca" preto do <video> no instante entre um loop e o
     próximo frame decodificado (mesmo motivo do .serena-change__image). */
  background: #0b0a0d;
}

/* Mobile/tablet: seção removida. O vídeo é 16:9 e, numa tela em pé,
   ficava pequeno ou cortava os blocos de texto dele (ver serena.js, que
   também não cria o pin aqui, e o index.html, que não tem <source> pra
   essa largura — então o vídeo nem é baixado). */
@media (max-width: 900px) {
  .serena-meet {
    display: none;
  }
}

/* ============================================================ 03. A EXPERIÊNCIA (ARQUIVADO)
   Substituída pela seção .serena-usecases (3 sub-temas, mais abaixo).
   HTML original em archive/03-experiencia-antiga.html — regras abaixo
   ficam sem uso no momento, mas preservadas pra reaproveitar depois. */
.serena-flow {
  padding-block: 120px;
}

@media (max-width: 900px) {
  .serena-flow { padding-block: 72px; }
}

/* Texto à esquerda, diagrama à direita — lado a lado, pra seção não ficar
   alta demais empilhando tudo em coluna única. */
.serena-flow__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 900px) {
  .serena-flow__grid { grid-template-columns: 1fr; gap: 40px; }
}

.serena-flow__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 16px;
}

.serena-flow__lede {
  max-width: 420px;
}

.serena-flow__chat {
  max-width: 400px;
  margin-inline: auto;
}

.serena-flow__chat-body {
  min-height: 0;
}

.serena-chat__bubble--file {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 0;
  font-weight: 600;
}

.serena-chat__file-icon {
  font-size: 22px;
  flex: none;
}

.serena-chat__bubble--file small {
  font-weight: 500;
  color: var(--text-muted);
}

.serena-chat__bubble--list ul {
  margin: 6px 0 0;
  padding-left: 18px;
  line-height: 1.15;
}

.serena-chat__bubble--list li {
  margin-top: 1px;
}

/* ============================================================ 03. FORMAS DE EMITIR
   Inspirado na diagramação do jota.ai: menu de sub-temas no topo
   (em vez de coluna lateral, pra sobrar largura pro conteúdo), texto e
   mockup de WhatsApp abaixo trocam conforme o item ativo. Fundo amarelo
   sólido pra dar o mesmo impacto do site de referência, mantendo o
   padrão visual PJzen (chat branco/preto já usado no resto da página). */
.serena-usecases {
  position: relative;
  /* Acima do card preso de "Conheça a Serena" (z-index: 40) — evita que
     ele fique por cima desta seção caso o pin dele solte com atraso. */
  z-index: 41;
  background: #ffd100;
  padding-block: 100px;
  overflow: hidden;
}

/* Só no desktop (onde a seção realmente é presa via GSAP, ver
   serena.js): a seção precisa ocupar a tela inteira, senão o pin trava
   um bloco menor que 100vh e sobra uma faixa em branco embaixo dele
   enquanto o scroll ainda está "preso" nesta seção. */
@media (min-width: 1241px) {
  .serena-usecases {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }

  .serena-usecases__inner {
    width: 100%;
  }
}

@media (max-width: 1240px) {
  .serena-usecases { padding-block: 64px; }
}

.serena-usecases__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Metade direita da seção, colada na borda da viewport (fora do
   .container). Some no mobile — layout empilhado ali, sem foto atrás. */
.serena-usecases__photo {
  position: absolute;
  inset: 0 0 0 50%;
  z-index: 0;
  background: #1c1b1f url("../assets/serena-notas.webp") center / cover no-repeat;
}

@media (max-width: 1240px) {
  .serena-usecases__photo { display: none; }
}

/* --- Palco: título + chat trocam juntos por painel ---
   Altura mínima fixa: enquanto a seção fica pinada (ver serena.js), o
   número de bolhas visíveis muda a cada instante — sem uma altura
   travada aqui, o card do WhatsApp "pularia" de tamanho a cada bolha
   nova e a cada troca de item. */
.serena-usecases__stage {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
}

/* Em janelas mais baixas (notebooks comuns), 620px de palco estoura a
   altura da tela e o card acaba renderizando por baixo do dock fixo
   (68px + 32px de respiro, só existe a partir de 1241px). Encolhe o
   palco proporcionalmente à altura disponível pra sempre sobrar espaço
   acima do dock. */
@media (min-width: 1241px) {
  .serena-usecases__stage {
    min-height: min(620px, calc(100vh - 320px));
  }
}

@media (max-width: 1240px) {
  /* No mobile as 3 etapas não trocam mais por painel único (sem pin) —
     ficam empilhadas em fluxo normal (ver serena.js), então o palco não
     pode continuar em display:flex de linha única (jogaria os 3 panes
     lado a lado). */
  .serena-usecases__stage {
    display: block;
    min-height: 0;
  }
}

.serena-usecases__pane[hidden] {
  display: none;
}

.serena-usecases__pane {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  width: 100%;
  animation: usecase-fade-in 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* >1240px: sai do grid duas-colunas — o texto fica preso na metade
   amarela (largura própria, ver .serena-usecases__copy) e o chat flutua
   posicionado livremente por cima da costura entre o amarelo e a foto
   (ver .serena-usecases__chat), independente da largura do texto. */
@media (min-width: 1241px) {
  .serena-usecases__pane {
    display: block;
    position: relative;
  }
}

/* No mobile as 3 etapas ficam todas visíveis e empilhadas (sem pin) —
   precisam de respiro entre uma e outra pra não colarem uma na outra. */
@media (max-width: 1240px) {
  .serena-usecases__pane {
    margin-bottom: 72px;
  }

  .serena-usecases__pane:last-child {
    margin-bottom: 0;
  }
}

@keyframes usecase-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Entrada extra do card do WhatsApp na etapa 1 ("Uma mensagem que
   libera tempo") — só desktop (>1240px): um leve zoom + subida com uma
   pontinha de overshoot pra dar mais dinamismo. Etapas 2 e 3 não são
   tocadas. Fica parado (opacity 0) até a SEÇÃO alcançar ~80% visível na
   tela (".is-usecases-inview", via IntersectionObserver único, ver
   serena.js), já que lá as 3 etapas trocam juntas por painel (pin).
   No mobile (≤1240px) não tem esse efeito no card inteiro — lá cada
   BOLHA revela sozinha conforme o scroll chega nela (ver
   .serena-chat__bubble.is-visible e o IntersectionObserver por bolha
   em serena.js). */
@media (min-width: 1241px) {
  #usecase-pane-0 .serena-usecases__chat {
    opacity: 0;
    transform: translate(-38%, -50%) translateY(28px) scale(0.94);
  }

  .is-usecases-inview #usecase-pane-0 .serena-usecases__chat {
    animation: usecase-chat-enter-desktop 640ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms both;
  }

  @keyframes usecase-chat-enter-desktop {
    from { opacity: 0; transform: translate(-38%, -50%) translateY(28px) scale(0.94); }
    to { opacity: 1; transform: translate(-38%, -50%) translateY(0) scale(1); }
  }
}

.serena-usecases__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: #1c1b1f;
  margin: 0 0 16px;
}

.serena-usecases__lede {
  max-width: 420px;
  color: rgba(28, 27, 31, 0.78);
}

@media (min-width: 1241px) {
  /* Sem o grid pra limitar a largura (ver .serena-usecases__pane), o
     texto precisa do próprio teto pra não se espalhar por baixo da foto. */
  .serena-usecases__copy { max-width: 460px; }

  /* Todas as etapas ficavam coladas no card do WhatsApp — ~30% mais
     estreitas (460px -> 322px) pra dar respiro em relação ao chat. */
  #usecase-pane-0 .serena-usecases__copy,
  #usecase-pane-1 .serena-usecases__copy,
  #usecase-pane-2 .serena-usecases__copy { max-width: 322px; }
}

/* No mobile título e descrição de cada etapa ficam centralizados — só
   o texto, o chat do WhatsApp abaixo continua com seu próprio
   alinhamento (bolhas à esquerda/direita), sem mexer em nada nele. */
@media (max-width: 1240px) {
  .serena-usecases__copy {
    text-align: center;
  }

  .serena-usecases__lede {
    margin-left: auto;
    margin-right: auto;
  }
}

.serena-usecases__chat {
  max-width: 323px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  /* Trava a altura do "celular" pra ele nunca crescer demais e passar por
     baixo do dock fixo do menu (68px + 32px de respiro no fundo da tela).
     Com mais bolhas do que cabe, a conversa rola dentro do próprio card
     em vez de esticar o mockup inteiro. Acompanha a mesma folga do palco
     (.serena-usecases__stage), só que um pouco mais apertada pra sobrar
     margem entre o card e o dock mesmo com o card centralizado nele. */
  max-height: min(640px, calc(100vh - 280px));
}

@media (min-width: 1241px) {
  /* Flutua sobre a costura entre o amarelo e a foto — posicionado em
     relação ao palco (.serena-usecases__stage, position:relative), não à
     largura do texto, pra manter a sobreposição igual em qualquer
     resolução. O ancestral posicionado (stage/pane) está dentro do
     .container — não bate com o meio real da seção (onde a foto começa),
     que é full-bleed. "left" corrige essa diferença fazendo as contas do
     recuo do container: com a viewport ainda menor que 1280px o container
     não tem margem própria (50vw - 50px de padding); a partir de 1280px a
     margem vira constante, então o "meio da seção" também vira um valor
     fixo em px (590px) — daí o min() entre as duas fórmulas. */
  .serena-usecases__chat {
    position: absolute;
    top: 50%;
    left: min(calc(50vw - 50px), 590px);
    margin-inline: 0;
    transform: translate(-38%, -50%);
    z-index: 2;
  }
}

.serena-usecases__chat-body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  /* Rola normalmente, só que sem a barra visível — foge do clima de
     "print de app" ter uma scrollbar de página no meio da simulação. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* No mobile, tira a "moldura de celular" (header, papel de parede,
   barra de mensagem) e deixa só as caixas de texto soltas na tela —
   referência: jota.ai. Sem o card fixo, a conversa flui no fluxo normal
   da página em vez de rolar dentro de uma altura travada. */
@media (max-width: 1240px) {
  .serena-usecases__chat {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    max-height: none;
  }

  .serena-usecases__chat .serena-chat__head,
  .serena-usecases__chat .serena-chat__inputbar {
    display: none;
  }

  .serena-usecases__chat .serena-chat__body {
    background: transparent;
    padding: 0;
    min-height: 0;
    gap: 18px;
  }

  /* Sem a moldura do celular, a "pontinha" da bolha (efeito de rabinho
     do WhatsApp) fica sobrando, sem contexto — aqui todo canto vira
     igualmente arredondado. */
  .serena-usecases__chat .serena-chat__bubble--out,
  .serena-usecases__chat .serena-chat__bubble--in {
    border-radius: 10px;
  }

  .serena-usecases__chat-body {
    overflow: visible;
    max-height: none;
  }
}

.serena-usecases__chat-body::-webkit-scrollbar {
  display: none;
}

/* No desktop (onde o card do WhatsApp flutua sobre a foto) as bolhas
   de mensagem encostavam quase na borda do card — respiro fixo de
   40px dos dois lados, padrão pra todas as mensagens desta seção. */
@media (min-width: 1241px) {
  .serena-usecases__chat .serena-chat__body {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ============================================================ 03B. DISPONIBILIDADE
   As duas fotos (dia/noite) preenchem a seção inteira e se cruzam
   (opacity) conforme o scroll passa por ela — JS seta o crossfade a
   cada frame (ver serena.js), então nada de transition longa aqui pra
   não "atrasar" atrás do scroll. */
.serena-availability {
  padding-block: 0;
}

/* Elemento preso pelo GSAP — precisa ser a própria "tela" (100vh) pra
   já nascer 100% visível antes do scroll começar a virar noite. */
/* Texto sempre do lado direito da foto, alinhado à esquerda dentro da
   própria coluna e centralizado na vertical — mesma diagramação em
   qualquer tamanho de tela (mobile, tablet e desktop), estilo
   jota.ai. */
.serena-availability__pin {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  background-color: #0b0a0d;
}

.serena-availability__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.serena-availability__bg--night {
  opacity: 0;
}

/* Título único e centralizado no topo da seção, acima da imagem do
   celular/WhatsApp — mesma posição e alinhamento em qualquer largura
   de tela. */
.serena-availability__pin {
  align-items: flex-start;
  justify-content: center;
}

/* Posicionado por cima do topo da foto (não em fluxo): assim o título
   fica centralizado de verdade na faixa vazia entre o topo da tela e o
   celular, em vez de só "empurrado" por padding-top + min-height. */
.serena-availability__inner {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 512px;
  padding-inline: 20px;
  height: 20vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Começa depois do menu fixo do topo (.site-nav, 76px), senão o título
   nasce colado/escondido atrás dele. */
.serena-availability__inner {
  top: 76px;
  height: calc(20vh - 76px);
  min-height: 56px;
}

@media (max-width: 900px) {
  .serena-availability__inner {
    /* Menu é altura fixa em px (76px), mas o topo do celular na foto
       fica numa fração ~constante da tela (~20.5vh, medido no preview) —
       a faixa livre é o que sobra entre os dois. */
    height: calc(20.5vh - 76px);
  }

  /* ~20% maior que a versão desktop atual (era clamp(15px, 2.66vw, 29px)). */
  .serena-availability__title {
    font-size: clamp(18px, 3.2vw, 35px);
  }
}

.serena-availability__title {
  font-family: var(--font-sans);
  font-weight: 800;
  /* ~30% menor que a versão anterior (era clamp(22px, 3.8vw, 41px)), para
     caber em uma única linha. */
  font-size: clamp(15px, 2.66vw, 29px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #1c1b1f;
  margin: 0;
  white-space: nowrap;
  transition: color 80ms linear;
}

.serena-availability__pin.is-night .serena-availability__title {
  color: #fff;
}

/* ============================================================ 04. O QUE MUDA
   Layout dividido em duas colunas full-bleed: foto à esquerda, texto à
   direita sobre fundo branco — sem card flutuante e sem fundo azul. */
.serena-change {
  padding-block: 0;
  background: #fff;
}

.serena-change__split {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.serena-change__media {
  flex: 1 1 50%;
  position: relative;
  overflow: hidden;
}

.serena-change__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.serena-change__copy {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  padding: clamp(32px, 5vw, 80px) clamp(24px, 6vw, 96px);
}

.serena-change__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: #1c1b1f;
  margin: 0 0 16px;
}

.serena-change__lede {
  font-family: var(--font-sans);
  font-size: clamp(16px, 0.56vw + 13.9px, 22px);
  line-height: 1.45;
  color: rgba(28, 27, 31, 0.78);
  margin: 0;
  max-width: 480px;
}

.serena-change__whats-accent {
  display: inline-block;
  background: #ffd100;
  color: #1c1b1f;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}

/* No mobile a foto ocupa o topo em largura total e o texto desce pro
   rodapé, empilhados verticalmente. */
@media (max-width: 700px) {
  .serena-change__split {
    flex-direction: column;
    min-height: 0;
  }

  .serena-change__media {
    /* Sem travar o flex aqui, o "flex: 1 1 50%" herdado (pensado pro
       eixo horizontal do desktop) vira 50% de altura num container
       column sem altura própria — a foto colapsa a 0px. */
    flex: 0 0 auto;
    height: 280px;
  }

  .serena-change__copy {
    /* Mesmo motivo do .serena-change__media acima: sem isso, o "flex: 1
       1 50%" herdado também disputa altura com o texto de forma
       imprevisível num container column sem altura própria. */
    flex: 1 1 auto;
    padding: 32px 24px;
  }

  .serena-change__lede {
    font-size: 18px;
    max-width: none;
  }
}

/* ============================================================ 05. SEGURANÇA
   Fundo amarelo sólido (#ffd100), igual ao usado em "Formas de emitir" /
   "Criar nota do zero" — título e lede alinhados à esquerda, sem
   centralizar, igual às outras seções. Cores de texto/divisórias seguem
   o mesmo padrão já usado em fundo amarelo no site (preto com opacidade,
   em vez dos tons de cinza pensados pra fundo claro). */
.serena-security {
  background: #ffd100;
  padding-top: 104px;
}

@media (max-width: 900px) {
  .serena-security {
    padding-top: 146px;
  }
}

.serena-security__head {
  /* Sem max-width aqui: o elemento já é ".container" (centralizado até
     1280px, igual às outras seções) — dar um max-width menor a ele
     mesmo, com o margin:auto herdado do .container, encolhia e
     centralizava a caixa toda no meio da página. A largura do texto é
     controlada no título/lede abaixo, sem tocar no alinhamento. */
  margin-bottom: 56px;
}

@media (max-width: 900px) {
  .serena-security__head { margin-bottom: 40px; }
}

.serena-security__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: #1c1b1f;
  margin: 0 0 16px;
}

.serena-security__lede {
  color: rgba(28, 27, 31, 0.78);
  max-width: 560px;
  margin: 0;
}

/* --- Lista "item por item" (referência: storeyarchitecture.co.uk) — cada
   item ocupa uma faixa com linha divisória em cima, o texto no canto
   superior direito (sem foto) e, embaixo à esquerda, o título gigante e
   apagado — no lugar do número que o site de referência usa. Sem pin/
   scroll-jacking: é scroll normal, cada item revela via reveal-title
   conforme entra na tela. --- */
.serena-security__list {
  border-top: 1px solid rgba(28, 27, 31, 0.12);
  padding-bottom: 0;
}

.serena-security__row {
  border-bottom: 1px solid rgba(28, 27, 31, 0.12);
}

.serena-security__row:last-child {
  border-bottom: none;
}

.serena-security__row-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 46vh;
  padding-block: 40px;
}

@media (max-width: 900px) {
  .serena-security__row-inner { min-height: 0; gap: 32px; padding-block: 32px; }
}

.serena-security__row-text {
  align-self: flex-end;
  max-width: 460px;
  text-align: right;
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.55;
  color: rgba(28, 27, 31, 0.78);
  margin: 0;
}

@media (max-width: 900px) {
  .serena-security__row-text { align-self: flex-start; text-align: left; }
}

.serena-security__row-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: rgba(28, 27, 31, 0.22);
  margin: 0;
}

/* ============================================================ 05B. FAQ
   Mesmo padrão visual do FAQ da lp_institucional (título+lede à esquerda,
   accordion à direita), reimplementado em HTML/CSS/JS puro — esta página
   não usa React. */
.serena-faq {
  padding-block: 72px;
  background: #ffffff;
}

@media (max-width: 900px) {
  .serena-faq { padding-block: 43px; }
}

.serena-faq__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  align-items: flex-start;
}

@media (max-width: 900px) {
  .serena-faq__grid { grid-template-columns: 1fr; gap: 32px; }
}

.serena-faq__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1.1;
  color: var(--text-2);
  margin: 0 0 16px;
}

.serena-faq__lede {
  font-weight: 600;
  max-width: 300px;
  color: var(--text-muted);
}

.serena-faq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.serena-faq__item {
  border-radius: 12px;
  overflow: hidden;
  background: rgba(28, 27, 31, 0.03);
  transition: background 180ms ease;
}

.serena-faq__item.is-open {
  background: rgba(28, 27, 31, 0.08);
}

.serena-faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
}

.serena-faq__icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #1c1b1f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.serena-faq__item.is-open .serena-faq__icon {
  background: #ffffff;
  color: #1c1b1f;
  transform: rotate(180deg);
}

.serena-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms ease;
}

/* O padding fica no wrapper interno (não direto no filho do grid): só
   assim ele é espremido a 0 junto com a faixa quando fechado — deixando
   o padding direto no <p>, a caixa dele mantém a altura do padding mesmo
   com a faixa do grid em 0fr, e o texto "vaza" por baixo fechado. */
.serena-faq__answer-inner {
  overflow: hidden;
}

.serena-faq__answer-inner > p {
  margin: 0;
  padding: 0 22px 20px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--text-muted);
}

.serena-faq__item.is-open .serena-faq__answer {
  grid-template-rows: 1fr;
}

/* ============================================================ 06. FECHAMENTO
   Degradê no topo suavizando a costura com o fundo amarelo da seção de
   Segurança logo acima — começa no amarelo (#ffd100) e dissolve pro
   branco do resto da seção. */
.serena-closing {
  padding-block: 112px 84px;
  background: linear-gradient(180deg, #ffd100 0%, #ffffff 240px);
}

@media (max-width: 900px) {
  .serena-closing {
    padding-block: 64px 60px;
    background: linear-gradient(180deg, #ffd100 0%, #ffffff 140px);
  }
}

.serena-closing__inner {
  text-align: center;
  max-width: 760px;
}

.serena-closing__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  padding: 6px 16px 6px 6px;
  box-shadow: var(--shadow-card);
  margin-bottom: 28px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
}

.serena-closing__badge img {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  object-position: center 25%;
}

.serena-closing__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0 auto 32px;
}

.serena-closing__cta {
  height: 58px;
  padding: 0 32px;
  font-size: 17px;
  background: #ffd100;
  color: #1c1b1f;
}

.serena-closing__cta:hover {
  background: #1c1b1f;
  color: #ffd100;
}

.serena-closing__tagline {
  margin-top: 28px;
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--text-muted);
}

/* ============================================================ Modal trigger states */
#cta-modal-overlay[hidden] { display: none; }