/* ============================================================
   BECA PSI - folha de estilo principal
   Direcao: editorial clinico. Sereno, acolhedor, sem ruido.
   Paleta e tipografia conforme "Manual da Marca" (2025).
   ============================================================ */

/* ---------- 1. TOKENS ---------- */

:root {
  /* Cores institucionais, exatamente as do manual */
  --marinho: #132b47;        /* Azul-marinho Profundo, cor institucional */
  --marinho-fundo: #0d1f34;  /* derivado, para profundidade em bandas escuras */
  --sage: #97ceb7;           /* Verde Sage, estrutural */
  --sereno: #6e9fbd;         /* Azul Sereno, estrutural */
  --pessego: #facca8;        /* Pessego Acolhedor, acento caloroso */
  --pessego-claro: #fde3c8;  /* derivado, estado hover */
  --novoa: #c2dcf5;          /* Azul Novoa, tipografia clara */
  --areia: #f7f9f7;          /* O-White, base neutra de documentos */
  --branco: #ffffff;

  /* Papel semantico */
  --fundo: var(--areia);
  --fundo-alt: var(--branco);
  --superficie-escura: var(--marinho);
  --tinta: var(--marinho);
  --tinta-media: #4a6076;    /* texto secundario sobre claro, 6:1 */
  --tinta-clara: var(--novoa);
  --tinta-clara-media: #93aecb;
  --linha: #dee6e2;          /* hairline sobre claro */
  --linha-escura: #2a4460;   /* hairline sobre marinho */
  --acento: var(--pessego);

  /* Derivados de legibilidade.
     Azul Sereno e Pessego sao cores ESTRUTURAIS: funcionam como
     fundo, borda e ornamento, mas falham como texto sobre claro
     (2,9:1). Estas versoes existem so para texto sobre superficie clara.
     Sobre o marinho, o sereno original rende 4,9:1 e continua valendo. */
  --sereno-texto: #45759a;   /* 4,9:1 no branco, 4,7:1 no areia */
  --placeholder: #647585;    /* 4,7:1 no branco */
  --erro: #9c2b2b;
  --provisorio-tinta: #7a5a2e;
  --provisorio-tinta-forte: #6b4a1e;
  --provisorio-borda: #b98a4e;

  /* Tipografia */
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --texto: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala fluida */
  --t-hero: clamp(2.3rem, 1.35rem + 3.9vw, 3.5rem);
  --t-h2: clamp(1.95rem, 1.25rem + 2.7vw, 3.05rem);
  --t-h3: clamp(1.4rem, 1.1rem + 1.15vw, 1.85rem);
  --t-h4: clamp(1.15rem, 1.02rem + 0.5vw, 1.35rem);
  --t-corpo: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-rotulo: 0.72rem;

  /* Ritmo */
  --secao-y: clamp(4.5rem, 3rem + 7vw, 8.25rem);
  --bloco: clamp(2.75rem, 2rem + 3.5vw, 4.5rem);
  --gutter: clamp(1.25rem, 0.75rem + 2.2vw, 2.5rem);
  --largura: 1280px;
  --largura-texto: 68ch;
  --nav-h: 72px;

  /* Forma: regra unica do site.
     Interativos = pilula cheia. Imagens, cartoes e campos = 3px. */
  --raio-conteudo: 3px;
  --raio-pilula: 999px;

  --transicao: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  --suave: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 1b. ESCALA DE COMPUTADOR ----------
   No celular a pagina esta aprovada e nao se mexe nela. Numa tela
   larga, porem, ela respirava demais: o ritmo de secao chegava a
   132px por lado (264px de ar entre uma secao e outra) e os titulos
   de display a 56px, o que fazia o computador parecer o celular
   ampliado. Era esse o motivo de a pagina so ficar confortavel com
   o zoom do navegador em 80%.

   O que muda aqui e apenas o TETO das medidas fluidas: o piso e o
   termo do meio de cada clamp() seguem intactos, e o bloco inteiro
   vive dentro de min-width. Nenhuma largura menor que 1080px sente
   diferenca -- tablet, celular e o modo retrato continuam iguais. */
@media (min-width: 1080.02px) {
  :root {
    --t-hero: clamp(2.3rem, 1.35rem + 3.9vw, 3rem);
    --t-h2: clamp(1.95rem, 1.25rem + 2.7vw, 2.6rem);
    --t-h3: clamp(1.4rem, 1.1rem + 1.15vw, 1.7rem);
    --t-h4: clamp(1.15rem, 1.02rem + 0.5vw, 1.25rem);
    /* 16px e o piso que eu nao desco: o publico deste site e 35+ e
       o zoom de 80% daria 13,6px, que atrapalha justamente quem
       mais precisa ler. O resto da reducao vem do ritmo, nao daqui. */
    --t-corpo: 1rem;
    --secao-y: clamp(4.5rem, 3rem + 7vw, 6.5rem);
    --bloco: clamp(2.75rem, 2rem + 3.5vw, 3.5rem);
  }
  /* Os ajustes de elemento desta escala nao moram aqui: ver o bloco
     1c, no fim do arquivo. */
}

/* ---------- 2. BASE ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-corpo);
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* clip, nao hidden: hidden criaria um container de rolagem
     e quebraria position: sticky no cabecalho. */
  overflow-x: clip;
}

/* Trava a rolagem do fundo enquanto o painel do celular esta aberto.
   Seguro aqui: o escopo e a viewport, que ja e o container de rolagem
   do sticky. O `overflow-x: clip` acima continua valendo para a pagina. */
body.nav-aberta { overflow: hidden; }

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

figure,
blockquote,
dl,
dd { margin: 0; }

a { color: inherit; text-decoration: none; }

button,
input,
textarea,
select { font: inherit; color: inherit; }

::selection {
  background: var(--pessego);
  color: var(--marinho);
}

:focus-visible {
  outline: 2px solid var(--sereno-texto);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sobre o marinho o anel precisa da versao clara do azul. */
.secao--escura :focus-visible,
.hero :focus-visible,
.chamada :focus-visible,
.topo-pagina :focus-visible,
.erro :focus-visible { outline-color: var(--novoa); }

/* ---------- 3. TIPOGRAFIA ---------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-hero); line-height: 1.08; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); line-height: 1.25; }

p { margin: 0; }

.sobretitulo {
  display: block;
  font-family: var(--texto);
  font-size: var(--t-rotulo);
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--sereno-texto);
  margin-bottom: 1.15rem;
}

.sobretitulo--claro { color: var(--novoa); }

.texto-apoio {
  color: var(--tinta-media);
  max-width: var(--largura-texto);
}

.texto-apoio--claro { color: var(--tinta-clara-media); }

.citacao {
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.9rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
}

/* ---------- 4. LAYOUT ---------- */

.container {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--estreito { max-width: 900px; }

.secao { padding-block: var(--secao-y); }
.secao--topo-menor { padding-top: calc(var(--secao-y) * 0.62); }
.secao--base-menor { padding-bottom: calc(var(--secao-y) * 0.62); }

.secao--escura {
  background: var(--marinho);
  color: var(--novoa);
}

.secao--escura h2,
.secao--escura h3,
.secao--escura h4 { color: var(--branco); }

.secao--funda { background: var(--marinho-fundo); }

.secao--branca { background: var(--fundo-alt); }

.secao--sage { background: color-mix(in srgb, var(--sage) 26%, var(--areia)); }

.cabecalho-secao { max-width: 760px; }
.cabecalho-secao p { margin-top: 1.25rem; }

/* Cabecalho de secao sobre superficie escura: titulo branco,
   apoio no azul claro. Sem isso, o paragrafo herda a tinta escura
   e desaparece sobre o marinho. */
.cabecalho-secao--claro h2 { color: var(--branco); }

/* ---------- 5. BOTOES ---------- */

.btn {
  --btn-fundo: transparent;
  --btn-tinta: var(--marinho);
  --btn-borda: var(--marinho);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.92rem 1.85rem;
  background: var(--btn-fundo);
  color: var(--btn-tinta);
  border: 1px solid var(--btn-borda);
  border-radius: var(--raio-pilula);
  font-family: var(--texto);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.035em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--suave), color var(--suave),
              border-color var(--suave), transform 0.12s ease;
}

.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn:active { transform: translateY(1px); }

/* Acao primaria: sempre pessego sobre marinho. Acento unico do site. */
.btn--primario {
  --btn-fundo: var(--pessego);
  --btn-tinta: var(--marinho);
  --btn-borda: var(--pessego);
}
.btn--primario:hover { --btn-fundo: var(--pessego-claro); --btn-borda: var(--pessego-claro); }

/* Secundario sobre fundo claro */
.btn--secundario:hover { --btn-fundo: var(--marinho); --btn-tinta: var(--branco); }

/* Secundario sobre fundo escuro */
.btn--secundario-claro {
  --btn-tinta: var(--novoa);
  --btn-borda: color-mix(in srgb, var(--novoa) 45%, transparent);
}
.btn--secundario-claro:hover {
  --btn-fundo: var(--novoa);
  --btn-tinta: var(--marinho);
  --btn-borda: var(--novoa);
}

.btn--pequeno { padding: 0.7rem 1.4rem; font-size: 0.78rem; }

.grupo-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--marinho);
  padding-bottom: 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--marinho) 28%, transparent);
  transition: border-color var(--suave), gap var(--suave);
}
.link-seta:hover { gap: 0.8rem; border-color: var(--marinho); }
.link-seta--claro { color: var(--novoa); border-color: color-mix(in srgb, var(--novoa) 35%, transparent); }
.link-seta--claro:hover { border-color: var(--novoa); }

/* Sem tamanho proprio o SVG da seta cai no tamanho padrao do
   navegador e vira um bloco enorme, principalmente no celular.
   Mesma medida usada nos icones dos botoes. */
.link-seta svg { width: 1.05em; height: 1.05em; flex: none; }

/* ---------- 6. CABECALHO / NAVEGACAO ---------- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--areia) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--suave), background-color var(--suave);
}

.cabecalho[data-rolado="true"] { border-bottom-color: var(--linha); }

.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--nav-h);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
}

.marca__simbolo { width: 34px; height: auto; }

.marca__texto { display: flex; flex-direction: column; line-height: 1; }

.marca__nome {
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  color: var(--marinho);
  text-transform: uppercase;
}

.marca__lema {
  font-size: var(--t-rotulo);
  font-weight: 400;
  letter-spacing: 0.145em;
  text-transform: uppercase;
  color: var(--tinta-media);
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 2rem; }

.nav__lista {
  display: flex;
  align-items: center;
  gap: 1.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.045em;
  color: var(--marinho);
  padding-block: 0.35rem;
  transition: color var(--suave);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--sereno-texto);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__link[aria-current="page"] { color: var(--sereno-texto); }

.nav__acoes { display: flex; align-items: center; gap: 1rem; }

/* Seletor de idioma. Duas bandeirinhas discretas, entre a marca e o
   menu: no computador encostam na navegacao, no celular no hamburguer
   (o `margin-left: auto` resolve os dois casos, porque no celular o
   menu sai do fluxo). A lingua atual fica acesa; a outra fica apagada
   e acende no hover/foco. As cores sao versoes serenas das bandeiras:
   as oficiais brigariam com a paleta da marca. */
.idiomas {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: none;
  margin-left: auto;
  padding: 0.25rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pilula);
  background: color-mix(in srgb, var(--branco) 55%, transparent);
}

.idiomas__opcao {
  display: block;
  line-height: 0;
  border-radius: 2px;
  opacity: 0.42;
  transition: opacity var(--suave);
}

.idiomas__opcao:hover,
.idiomas__opcao:focus-visible { opacity: 0.82; }

.idiomas__opcao[aria-current="true"] {
  opacity: 1;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--marinho) 26%, transparent);
}

.idiomas__bandeira {
  display: block;
  width: 21px;
  height: 15px;
  border-radius: 2px;
}

/* Menu do celular */
.hamburguer {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pilula);
  cursor: pointer;
}

.hamburguer__barras { display: block; width: 17px; height: 1.5px; background: var(--marinho); position: relative; }
.hamburguer__barras::before,
.hamburguer__barras::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 1.5px;
  background: var(--marinho);
  transition: transform var(--suave), top var(--suave);
}
.hamburguer__barras::before { top: -5.5px; }
.hamburguer__barras::after { top: 5.5px; }

[aria-expanded="true"] .hamburguer__barras { background: transparent; }
[aria-expanded="true"] .hamburguer__barras::before { top: 0; transform: rotate(45deg); }
[aria-expanded="true"] .hamburguer__barras::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .hamburguer { display: inline-flex; }
  .nav__acoes .btn { display: none; }

  /* Sem o blur no celular, por dois motivos.
     1) Correcao: `backdrop-filter` faz do cabecalho o bloco contentor dos
        descendentes `position: fixed`. Com ele ligado, o painel abaixo media
        contra os 72px do cabecalho em vez da viewport e colapsava numa tira
        de ~84px: o menu "abria ate um pedaco". Com `none`, o painel volta a
        medir contra a viewport.
     2) Custo: blur de tela inteira e caro no GPU do celular, e o fundo a 88%
        de opacidade ja entrega quase o mesmo resultado. */
  .cabecalho {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* A marca e o X ficam acima do painel, para o botao de fechar continuar
     visivel e clicavel com o menu aberto. O z-index vai neles, e nao no
     `.cabecalho__interno`: o painel e filho do interno, entao um z-index no
     pai criaria um contexto de empilhamento que deixaria o painel por cima. */
  .marca,
  .hamburguer {
    position: relative;
    z-index: 2;
  }

  /* Painel de tela cheia. `inset: 0` + `100dvh` cobrem a viewport inteira,
     inclusive a faixa do cabecalho, que fica por cima. */
  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--nav-h) + 1.75rem) var(--gutter)
             calc(2.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--areia);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    /* Entrada e saida pelo mesmo caminho, com a curva forte de saida que o
       site ja usa em --transicao. Duracoes de redutor de movimento ficam a
       cargo do bloco `prefers-reduced-motion` no fim do arquivo. */
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
  }

  .nav[data-aberta="true"] { opacity: 1; visibility: visible; transform: none; }

  .nav__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--linha);
  }

  .nav__item { border-bottom: 1px solid var(--linha); }

  .nav__link {
    display: block;
    padding-block: 1.15rem;
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0;
  }

  .nav__link::after { display: none; }

  .nav__acoes {
    margin-top: 2.25rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

  .nav__acoes .btn { display: inline-flex; width: 100%; }
}

/* ---------- 7. HERO ---------- */

.hero {
  position: relative;
  background: var(--marinho);
  color: var(--novoa);
  overflow: hidden;
}

.hero__grade {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(3.25rem, 2rem + 5vw, 5rem);
}

.hero h1 { color: var(--branco); }

.hero__texto > p {
  margin-top: 1.5rem;
  max-width: 46ch;
  color: var(--tinta-clara-media);
  font-size: 1.02rem;
}

.hero .grupo-botoes { margin-top: 2.25rem; }

.hero__figura { position: relative; }

.hero__foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--raio-conteudo);
}

@media (min-width: 900px) {
  .hero__grade { grid-template-columns: 1.12fr 0.88fr; }
  .hero__figura { max-width: 460px; margin-left: auto; }
}

/* ---------- 8. TRIO DE PRINCIPIOS ---------- */

.principios {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: var(--bloco);
}

.principio { position: relative; padding-top: 1.75rem; }

.principio::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 2px;
  background: var(--sage);
}

.principio h3 { margin-bottom: 0.85rem; }
.principio p { color: var(--tinta-media); font-size: 0.97rem; }

@media (min-width: 860px) {
  .principios {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
  /* Trio assimetrico: o segundo principio desce, quebra a simetria.
     A cor do traco e uma so (sage, definida no ::before base): o
     acento do site e o pessego, e ele nao se dispersa em ornamentos. */
  .principio:nth-child(2) { margin-top: 3.25rem; }
  .principio:nth-child(3) { margin-top: 1.1rem; }
}

/* ---------- 9. ESPECIALIDADES (bento com ritmo) ---------- */

.bento {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  margin-top: var(--bloco);
}

.celula {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.85rem;
  min-height: 210px;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-conteudo);
}

.celula h3 { font-size: var(--t-h4); font-family: var(--texto); font-weight: 500; letter-spacing: 0.01em; }
.celula p { color: var(--tinta-media); font-size: 0.92rem; }

.celula--marca {
  background: var(--marinho);
  border-color: var(--marinho);
  color: var(--novoa);
  align-items: flex-start;
  justify-content: space-between;
}
.celula--marca h3 { color: var(--branco); }
.celula--marca p { color: var(--tinta-clara-media); }
.celula--marca img { width: 58px; opacity: 0.95; }

.celula--sage { background: color-mix(in srgb, var(--sage) 34%, var(--branco)); border-color: color-mix(in srgb, var(--sage) 55%, var(--branco)); }

.celula__icone { width: 23px; height: 23px; color: var(--sereno-texto); flex: none; }
.celula--marca .celula__icone { color: var(--pessego); }

@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .celula { min-height: 240px; }
  .celula--larga { grid-column: span 4; }
  .celula--media { grid-column: span 2; }
  .celula--terco { grid-column: span 2; }
  .celula--marca { grid-column: span 2; grid-row: span 2; min-height: 0; }
}

/* Celular: o mesmo bento vira trilha horizontal. Empilhado, o
   bloco passa de duas telas de rolagem antes de acabar; deitado,
   os cartoes cabem num gesto. O encaixe e do navegador
   (scroll-snap), nao do script: o script so cuida do avanco
   automatico e dos pontos. */
@media (max-width: 759.98px) {
  .bento {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Vaza ate a borda da tela e volta com o mesmo respiro do
       container: trilha de verdade encosta na lateral em vez de
       flutuar dentro da margem. */
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }

  .bento::-webkit-scrollbar { display: none; }

  .bento > .celula {
    flex: 0 0 min(78%, 22rem);
    scroll-snap-align: start;
  }

  .bento:focus-visible { outline-offset: 3px; }
}

/* Controles da trilha. Nascem do script, entao so existem quando
   ha JS: sem ele o bento continua uma trilha que desliza no dedo,
   apenas nao anda sozinho. */
.bento__controles {
  display: none;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.bento__pontos { display: flex; flex: 1; gap: 0.5rem; }

.bento__ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--marinho) 24%, transparent);
  transition: background-color var(--suave), transform var(--suave);
}

.bento__ponto[data-atual="true"] {
  background: var(--marinho);
  transform: scale(1.4);
}

/* Controle de verdade, com area de dedo, mas discreto: e uma
   saida para quem nao quer a trilha andando, nao um botao que
   disputa atencao com o conteudo. */
.bento__pausa {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-rotulo);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-media);
  cursor: pointer;
}

.bento__pausa[hidden] { display: none; }

@media (max-width: 759.98px) {
  .bento__controles { display: flex; }
}

/* ---------- 10. DIVISAO IMAGEM + TEXTO ---------- */

.divisao {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: center;
}

.divisao__figura img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: var(--raio-conteudo);
}

.divisao__texto h2 { margin-bottom: 1.35rem; }
.divisao__texto p + p { margin-top: 1.05rem; }
.divisao__texto .texto-apoio { font-size: 0.99rem; }
.divisao__texto .link-seta { margin-top: 2rem; }

.divisao__assinatura {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
}

.divisao__assinatura strong {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--marinho);
}

.divisao__assinatura span {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--tinta-media);
}

@media (min-width: 900px) {
  .divisao { grid-template-columns: 0.92fr 1.08fr; }
  .divisao--invertida .divisao__figura { order: 2; }
}

/* ---------- 11. CAMINHO (passos) ---------- */

/* Lista de passos. Assume superficie ESCURA: o numero, o fio de
   ligacao e o paragrafo usam as tintas claras. Para usa-la sobre
   claro, criar a variante e sobrescrever os tres. */
.passos {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  margin: var(--bloco) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.passo { position: relative; padding-left: 3.25rem; }

.passo::before {
  counter-increment: passo;
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sereno);
  letter-spacing: 0.02em;
}

.passo::after {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 2rem;
  bottom: -1.6rem;
  width: 1px;
  background: var(--linha-escura);
}

.passo:last-child::after { display: none; }

.passo h3 { font-size: var(--t-h4); margin-bottom: 0.6rem; }
.passo p { color: var(--tinta-clara-media); font-size: 0.94rem; max-width: 40ch; }

@media (min-width: 880px) {
  .passos { grid-template-columns: repeat(3, 1fr); }
  .passo { padding-left: 0; padding-top: 3.1rem; }
  .passo::before { top: 0; }
  .passo::after { left: 2.2rem; right: -1.5rem; top: 0.65rem; bottom: auto; width: auto; height: 1px; }
  .passo:last-child::after { display: none; }
}

/* ---------- 12. DEPOIMENTOS ---------- */

.depoimentos {
  display: grid;
  gap: 1px;
  margin-top: var(--bloco);
  background: var(--linha);
  border: 1px solid var(--linha);
  border-radius: var(--raio-conteudo);
  overflow: hidden;
}

.depoimento {
  background: var(--fundo-alt);
  padding: clamp(1.85rem, 3vw, 2.75rem);
}

.depoimento blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--marinho);
  text-wrap: pretty;
}

.depoimento figcaption {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.82rem;
  color: var(--tinta-media);
}

.depoimento figcaption::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--sereno-texto);
  flex: none;
}

.depoimento figcaption strong { font-weight: 500; color: var(--marinho); }

@media (min-width: 820px) {
  .depoimentos { grid-template-columns: repeat(2, 1fr); }
  .depoimentos--tres { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 13. CURSOS ---------- */

.cursos {
  display: grid;
  gap: clamp(1.25rem, 2vw, 1.75rem);
  margin-top: var(--bloco);
}

.curso {
  display: flex;
  flex-direction: column;
  background: var(--fundo-alt);
  border: 1px solid var(--linha);
  border-radius: var(--raio-conteudo);
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao);
}

/* So no ponteiro de verdade: no dedo o :hover dispara no toque e
   o cartao levanta sem que nada tenha sido pedido. */
@media (hover: hover) and (pointer: fine) {
  .curso:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 50px -32px rgba(19, 43, 71, 0.4);
  }
}

/* O marinho fica como fundo de carregamento: enquanto a foto nao
   chega, o lugar dela e um bloco da cor da marca, nao um buraco
   branco. */
.curso__capa {
  aspect-ratio: 4 / 5;
  background: var(--marinho);
  border-bottom: 1px solid var(--linha);
}

/* O recorte para 4:5 ja vem feito do pipeline, entao o cover aqui
   so cobre diferenca de arredondamento de pixel. */
.curso__capa img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.curso__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.7rem;
  padding: clamp(1.5rem, 2.2vw, 1.9rem);
}

.curso__tipo {
  font-size: var(--t-rotulo);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sereno-texto);
}

.curso h3 { font-size: var(--t-h4); font-family: var(--texto); font-weight: 500; }
.curso p { color: var(--tinta-media); font-size: 0.91rem; }

.curso__rodape {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.35rem;
  border-top: 1px solid var(--linha);
}

.curso__preco {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--marinho);
}

@media (min-width: 800px) {
  .cursos { grid-template-columns: repeat(3, 1fr); }
}

/* Celular: dois cartoes por linha. Em coluna unica os tres cursos
   viram uma parede de rolagem; em duas, o bloco inteiro aparece
   de uma vez. A largura menor pede o cartao mais apertado: menos
   respiro, titulo menor e rodape empilhado, senao preco e link se
   comprimem na mesma linha.
   A descricao fica so no desktop: na coluna estreita ela empurra
   preco e "Detalhes" para fora da dobra, e o texto ja esta inteiro
   na pagina de cursos. */
@media (max-width: 799.98px) {
  .cursos {
    gap: 0.85rem;
    grid-template-columns: repeat(2, 1fr);
  }

  .curso__corpo { gap: 0.55rem; padding: 1.05rem 0.95rem 1.15rem; }

  .curso__tipo { font-size: 0.62rem; letter-spacing: 0.1em; }

  .curso h3 { font-size: 1rem; }

  .curso p { display: none; }

  .curso__rodape {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding-top: 0.95rem;
  }

  .curso__preco { font-size: 1.1rem; }
}

/* ---------- 14. PERGUNTAS FREQUENTES ---------- */

.faq {
  margin-top: var(--bloco);
  border-top: 1px solid var(--linha);
}

.faq__item { border-bottom: 1px solid var(--linha); }

.faq__pergunta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.12rem, 1rem + 0.55vw, 1.42rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--marinho);
  transition: color var(--suave);
}

.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta:hover { color: var(--sereno-texto); }

.faq__pergunta::after {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--suave);
}

.faq__item[open] .faq__pergunta::after { transform: rotate(-135deg); }
.faq__item[open] .faq__pergunta { color: var(--sereno-texto); }

.faq__resposta {
  padding-bottom: 1.75rem;
  max-width: 70ch;
  color: var(--tinta-media);
  font-size: 0.96rem;
}
.faq__resposta p + p { margin-top: 0.9rem; }

/* O aviso provisorio dentro de uma resposta respira do paragrafo acima. */
.faq__resposta .provisorio { margin-top: 1.1rem; }

/* ---------- 15. CHAMADA FINAL ---------- */

.chamada {
  position: relative;
  background: var(--marinho);
  color: var(--novoa);
  overflow: hidden;
  text-align: center;
}

.chamada__marca {
  position: absolute;
  right: -3rem;
  bottom: -4rem;
  width: min(420px, 46vw);
  opacity: 0.12;
  pointer-events: none;
}

.chamada__interno { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
.chamada h2 { color: var(--branco); margin-bottom: 1.25rem; }
.chamada p { color: var(--tinta-clara-media); }
.chamada .grupo-botoes { justify-content: center; margin-top: 2.5rem; }

/* ---------- 16. RODAPE ---------- */

.rodape {
  background: var(--marinho-fundo);
  color: var(--tinta-clara-media);
  font-size: 0.88rem;
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
}

.rodape__grade {
  display: grid;
  gap: 2.75rem;
  padding-bottom: 3.25rem;
}

.rodape__marca { display: flex; flex-direction: column; gap: 1.15rem; max-width: 34ch; }
.rodape__marca img { width: 40px; }

.rodape__marca p { font-size: 0.85rem; line-height: 1.7; }

.rodape h3 {
  font-family: var(--texto);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--novoa);
  margin-bottom: 1.15rem;
}

.rodape__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

.rodape a { transition: color var(--suave); }
.rodape a:hover { color: var(--branco); }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--linha-escura);
  font-size: 0.78rem;
}

.rodape__redes { display: flex; gap: 0.75rem; }

.rodape__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--linha-escura);
  border-radius: var(--raio-pilula);
  transition: background-color var(--suave), border-color var(--suave), color var(--suave);
}

.rodape__redes a:hover { background: var(--novoa); border-color: var(--novoa); color: var(--marinho); }
.rodape__redes svg { width: 17px; height: 17px; }

@media (min-width: 780px) {
  .rodape__grade { grid-template-columns: 1.5fr 1fr 1fr; }
}

/* ---------- 18. PAGINAS INTERNAS ---------- */

.topo-pagina {
  background: var(--marinho);
  color: var(--novoa);
  padding-block: clamp(3rem, 2rem + 4vw, 4.75rem);
}

.topo-pagina h1 { color: var(--branco); max-width: 18ch; }
.topo-pagina p { margin-top: 1.35rem; max-width: 54ch; color: var(--tinta-clara-media); }

.migalhas {
  display: flex;
  gap: 0.55rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--tinta-clara-media);
  margin-bottom: 1.5rem;
}
.migalhas a:hover { color: var(--branco); }
.migalhas span[aria-hidden] { opacity: 0.5; }

/* ---------- 19. FORMULARIOS ---------- */

.formulario { display: grid; gap: 1.35rem; }

.campo { display: grid; gap: 0.5rem; }

.campo label {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--marinho);
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.9rem 1.05rem;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-conteudo);
  font-size: 0.94rem;
  font-weight: 300;
  color: var(--marinho);
  transition: border-color var(--suave), box-shadow var(--suave);
}

.campo textarea { min-height: 150px; resize: vertical; }

.campo input::placeholder,
.campo textarea::placeholder { color: var(--placeholder); }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--sereno-texto);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sereno) 22%, transparent);
}

.campo__ajuda { font-size: 0.76rem; color: var(--tinta-media); }

.campo__erro {
  font-size: 0.76rem;
  color: var(--erro);
  display: none;
}

.campo[data-invalido="true"] input,
.campo[data-invalido="true"] textarea { border-color: var(--erro); }
.campo[data-invalido="true"] .campo__erro { display: block; }

@media (min-width: 640px) {
  .formulario--duas { grid-template-columns: 1fr 1fr; }
  .formulario--duas .campo--largo { grid-column: 1 / -1; }
}

/* ---------- 20. UTILITARIOS ---------- */

.apenas-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pular-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--marinho);
  color: var(--branco);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--raio-conteudo) 0;
}
.pular-link:focus { left: 0; }

/* Aviso: borda completa e fina, sem a barra lateral colorida.
   A barra a esquerda e um recurso de alerta que este site nao usa:
   aqui nada e urgencia. O bloco se distingue pelo fundo tingido. */
.aviso {
  padding: 1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--sereno) 34%, var(--branco));
  background: color-mix(in srgb, var(--sereno) 12%, var(--branco));
  font-size: 0.88rem;
  color: var(--tinta-media);
  border-radius: var(--raio-conteudo);
}

.provisorio {
  border: 1px dashed var(--provisorio-borda);
  background: color-mix(in srgb, var(--pessego) 22%, var(--branco));
  border-radius: var(--raio-conteudo);
  padding: 1.15rem 1.35rem;
  font-size: 0.85rem;
  color: var(--provisorio-tinta);
}

.provisorio strong { color: var(--provisorio-tinta-forte); }

/* ---------- 21. ENTRADA SUAVE AO ROLAR ---------- */

[data-anima] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--atraso, 0s);
}

[data-anima].esta-visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  [data-anima] { opacity: 1; transform: none; }
}

/* ---------- 22. PAGINA 404 ---------- */

/* Ocupa a tela menos o cabecalho: quem chega aqui por um link
   quebrado precisa ver a saida sem rolar a pagina. */
.erro {
  position: relative;
  display: grid;
  align-content: center;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
  padding-block: var(--secao-y);
  background: var(--marinho);
  color: var(--novoa);
  text-align: center;
  overflow: hidden;
}

.erro__interno { position: relative; z-index: 1; max-width: 620px; margin-inline: auto; }

.erro h1 { color: var(--branco); }

.erro p {
  margin: 1.35rem auto 0;
  max-width: 48ch;
  color: var(--tinta-clara-media);
}

.erro .grupo-botoes { justify-content: center; margin-top: 2.5rem; }

.erro__atalhos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.75rem;
  margin: 3rem 0 0;
  padding: 2rem 0 0;
  list-style: none;
  border-top: 1px solid var(--linha-escura);
  font-size: 0.85rem;
}

.erro__atalhos a {
  border-bottom: 1px solid transparent;
  transition: color var(--suave), border-color var(--suave);
}

.erro__atalhos a:hover { color: var(--branco); border-bottom-color: var(--novoa); }

/* ---------- 23. REVEAL DO LOGO (uma vez por sessao) ---------- */

/* O atributo `data-revelar` e aplicado pelo JS na primeira pagina
   que a pessoa abre. Nas seguintes ele nao entra, para o logo nao
   reaparecer a cada clique de navegacao. */

@keyframes marca-simbolo {
  from { opacity: 0; transform: translateY(-7px) scale(0.86) rotate(-12deg); }
  to   { opacity: 1; transform: none; }
}

@keyframes marca-texto {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.marca[data-revelar="true"] .marca__simbolo {
  animation: marca-simbolo var(--transicao) both;
}

.marca[data-revelar="true"] .marca__nome {
  animation: marca-texto var(--transicao) 0.13s both;
}

.marca[data-revelar="true"] .marca__lema {
  animation: marca-texto var(--transicao) 0.2s both;
}

/* ---------- 24. BORBOLETA DA MARCA (so na index) ---------- */

/* Recorte do proprio simbolo da marca (4 componentes do arquivo
   original): nada foi redesenhado. O elemento externo faz o voo,
   a imagem interna bate as asas. As duas animacoes sao finitas e
   terminam invisiveis: a borboleta atravessa e vai embora. */

.hero__grade { position: relative; z-index: 1; }

.hero__borboleta {
  position: absolute;
  top: 42%;
  left: 2%;
  z-index: 2;
  width: clamp(28px, 3.3vw, 44px);
  pointer-events: none;
  animation: voar 5.6s cubic-bezier(0.4, 0.02, 0.3, 1) 0.55s both;
}

.hero__borboleta img {
  display: block;
  width: 100%;
  height: auto;
  animation: bater 0.24s ease-in-out 22 alternate both;
}

@keyframes voar {
  0%   { transform: translate(-16vw, 32vh) rotate(18deg) scale(0.9); opacity: 0; }
  12%  { opacity: 0.95; }
  38%  { transform: translate(-4vw, 8vh) rotate(-3deg) scale(1); opacity: 1; }
  70%  { transform: translate(5vw, -11vh) rotate(-14deg) scale(1.03); opacity: 0.92; }
  100% { transform: translate(13vw, -34vh) rotate(-25deg) scale(1); opacity: 0; }
}

@keyframes bater {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0.84); }
}

/* ---------- 25. STORIES ---------- */

/* Circulo flutuante no canto inferior direito, no mesmo lugar que
   antes era do botao flutuante do WhatsApp. Aparece em todas as
   paginas. Sem midia cadastrada em main.js ele fica so como selo
   da marca: visivel, mas desabilitado e sem o rotulo "Novo". */

.story {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 41;
  width: 62px;
  height: 62px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: story-entra 0.62s cubic-bezier(0.23, 1, 0.32, 1) 0.85s both;
}

.story:disabled { cursor: default; }

@keyframes story-entra {
  from { opacity: 0; transform: translateY(11px) scale(0.86); }
  to   { opacity: 1; transform: none; }
}

/* O anel usa as tres cores da marca no lugar do gradiente do
   Instagram: mesma leitura, identidade propria.
   As cores moram num pseudo-elemento proprio para poderem girar
   sozinhas, sem arrastar a foto junto, e para darem o convite de
   "tem coisa nova aqui" sem virar um enfeite piscando sem parar:
   um giro a cada ~10s, o resto do tempo parado. */
.story__aro {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 3px;
  border-radius: 50%;
  transition: transform var(--suave);
}

.story__aro::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 205deg,
              var(--sage), var(--sereno), var(--pessego), var(--sage));
  animation: girar-aro 10s cubic-bezier(0.45, 0, 0.25, 1) 3.2s infinite;
}

@keyframes girar-aro {
  0%   { transform: rotate(0turn); }
  26%  { transform: rotate(1turn); }
  100% { transform: rotate(1turn); }
}

/* O giro nao depende de haver midia: e a assinatura da marca, e
   para enquanto o circulo abre ele continua girando igual. Quem
   decide que "tem coisa nova" e a midia; o anel so mantem o
   circulo vivo no canto, sem prometer conteudo que nao existe
   (o selo de marca ocupa o miolo, nao um rotulo "novo"). */

.story__capa {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--marinho);
}

.story__capa > img,
.story__capa > video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Selo de marca usado enquanto nao ha midia: o simbolo branco
   centralizado sobre o azul, sem encostar no anel. */
.story__capa > .story__marca { object-fit: contain; padding: 15px; }

@media (max-width: 559px) {
  .story { width: 56px; height: 56px; }
}

@media (hover: hover) and (pointer: fine) {
  .story:not(:disabled):hover .story__aro { transform: scale(1.06); }
}

.story:not(:disabled):active .story__aro { transform: scale(0.95); }

/* ---------- 25b. VISUALIZADOR DO STORY ---------- */

/* Celular: o palco toma a tela inteira e a midia cobre tudo.
   Computador: coluna 9:16 centralizada, que e o formato em que
   as midias sao entregues. */

.historia {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
}

.historia[data-aberta="true"] { display: grid; place-items: center; }

.historia[data-saindo="true"] {
  opacity: 0;
  transition: opacity 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}

.historia__veu {
  position: absolute;
  inset: 0;
  background: var(--marinho-fundo);
  opacity: 1;
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.historia__palco {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05080d;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: 1;
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.historia__palco--soltando {
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

@starting-style {
  .historia[data-aberta="true"] .historia__veu,
  .historia[data-aberta="true"] .historia__palco { opacity: 0; }
}

@media (min-width: 720px) {
  .historia__palco {
    width: min(46vw, calc(92dvh * 9 / 16));
    height: min(92dvh, calc(46vw * 16 / 9));
    border-radius: 14px;
    box-shadow: 0 40px 90px -34px rgba(0, 0, 0, 0.85);
  }
}

.historia__midia { position: absolute; inset: 0; }

.historia__midia > img,
.historia__midia > video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Cabecalho: barra de progresso, avatar redondo e o nome, como no
   topo de um story. O degrade garante leitura sobre qualquer midia. */
.historia__topo {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 3;
  padding: 0.7rem 0.85rem 2.75rem;
  background: linear-gradient(to bottom,
              rgba(4, 9, 17, 0.66), rgba(4, 9, 17, 0));
}

.historia__progresso { display: flex; gap: 4px; }

.historia__seg {
  flex: 1;
  height: 2px;
  border-radius: var(--raio-pilula);
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.historia__seg i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--branco);
  transform: scaleX(0);
  transform-origin: left center;
}

.historia__usuario {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.historia__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--areia);
  overflow: hidden;
}

.historia__avatar img { width: 21px; height: auto; }

.historia__quem {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
  color: var(--branco);
}

.historia__quem strong {
  font-family: var(--display);
  font-size: 1.04rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.historia__quem span {
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.7);
}

/* Fechar: discreto de proposito, e o X e desenhado em CSS com as
   mesmas barras do botao do menu, nao um SVG escrito a mao. */
.historia__fechar {
  position: relative;
  flex: none;
  margin-left: auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--suave), background-color var(--suave), transform 0.14s ease;
}

.historia[data-aberta="true"] .historia__fechar { opacity: 1; transition-delay: 0.28s; }

.historia__fechar::before,
.historia__fechar::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.82);
}

.historia__fechar::before { transform: translate(-50%, -50%) rotate(45deg); }
.historia__fechar::after { transform: translate(-50%, -50%) rotate(-45deg); }

.historia__fechar:active { transform: scale(0.94); }

@media (hover: hover) and (pointer: fine) {
  .historia__fechar:hover { background: rgba(255, 255, 255, 0.24); }
}

body.historia-aberta { overflow: hidden; }

/* ---------- 25c. TIRINHA (historias do cotidiano) ----------
   Quadros 4:5, o formato do carrossel do Instagram. Celular e
   tablet: rolagem lateral com encaixe, o proximo quadro aparecendo
   na borda para avisar que tem mais. Computador: os 6 numa linha. */

.tirinha { margin-top: var(--bloco); }

.tirinha__serie {
  font-size: var(--t-h4);
  margin-bottom: 1.25rem;
}

.tirinha__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* sangra ate a borda da tela, alinhado com o texto */
  margin-inline: calc(var(--gutter) * -1);
  padding: 0.25rem var(--gutter) 1.5rem;
  scroll-padding-inline: var(--gutter);
}
.tirinha__lista::-webkit-scrollbar { display: none; }

.tirinha__item {
  flex: 0 0 min(78vw, 360px);
  scroll-snap-align: start;
}

.tirinha__quadro {
  display: block;
  border-radius: var(--raio-conteudo);
  overflow: hidden;
  background: var(--marinho);
  box-shadow: 0 14px 30px -18px rgba(19, 43, 71, 0.55);
  cursor: zoom-in;
  transition: transform var(--transicao), box-shadow var(--transicao);
  -webkit-tap-highlight-color: transparent;
}

.tirinha__quadro img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
}

@media (hover: hover) and (pointer: fine) {
  .tirinha__quadro:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 40px -20px rgba(19, 43, 71, 0.6);
  }
}
.tirinha__quadro:active { transform: scale(0.98); }

.tirinha__pontos {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: -0.5rem;
}
.tirinha__pontos span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--marinho) 22%, transparent);
  transition: background var(--suave), transform var(--suave);
}
.tirinha__pontos span[data-ativo="true"] { background: var(--marinho); transform: scale(1.2); }

.tirinha__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 1.5rem;
}

.tirinha__dica {
  margin: 0;
  font-size: 0.85rem;
  color: var(--tinta-media);
}

.tirinha .so-computador { display: none; }

@media (min-width: 1024px) {
  .tirinha__lista {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    overflow: visible;
    margin-inline: 0;
    padding: 0;
  }
  .tirinha__pontos { display: none; }
  .tirinha .so-celular { display: none; }
  .tirinha .so-computador { display: inline; }
}

/* ---------- 25d. LIGHTBOX ---------- */

.lightbox {
  /* o <dialog> ja vai para a camada do topo; aqui ele vira tela cheia */
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--novoa);
  overflow: hidden;
}
.lightbox:not([open]) { display: none; }
.lightbox[open] { display: grid; place-items: center; }

.lightbox::backdrop {
  background: color-mix(in srgb, var(--marinho-fundo) 94%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lightbox[open],
.lightbox[open]::backdrop {
  animation: lightbox-entra 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes lightbox-entra { from { opacity: 0; } }

.lightbox__figura {
  margin: 0;
  /* o maior que couber na tela, mantendo 4:5 */
  width: min(92vw, calc((100dvh - 9rem) * 4 / 5));
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.lightbox__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--raio-conteudo);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
  background: var(--marinho);
  -webkit-user-drag: none;
  pointer-events: none; /* o gesto fica na figura, a imagem nao "arrasta" */
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lightbox__img[data-trocando="true"] { opacity: 0; transform: scale(0.985); }

.lightbox__contador {
  position: absolute;
  top: max(1.3rem, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--tinta-clara-media);
  font-variant-numeric: tabular-nums;
}

.lightbox__botao {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--novoa) 30%, transparent);
  border-radius: var(--raio-pilula);
  background: color-mix(in srgb, var(--marinho) 70%, transparent);
  color: var(--branco);
  cursor: pointer;
  transition: background var(--suave), border-color var(--suave), transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.lightbox__botao svg { width: 22px; height: 22px; }
.lightbox__botao:hover { background: var(--marinho); border-color: var(--novoa); }
.lightbox__botao:active { transform: scale(0.94); }
.lightbox__botao:disabled { opacity: 0.3; cursor: default; }
.lightbox__botao:focus-visible { outline: 2px solid var(--pessego); outline-offset: 3px; }

.lightbox__fechar {
  top: max(0.75rem, env(safe-area-inset-top));
  right: max(0.75rem, env(safe-area-inset-right));
}

/* Celular: setas embaixo, ao alcance do polegar.
   Computador: nas laterais da imagem. */
.lightbox__nav { bottom: max(1rem, env(safe-area-inset-bottom)); }
.lightbox__nav--ant { left: calc(50% - 60px); }
.lightbox__nav--prox { right: calc(50% - 60px); }

@media (min-width: 720px) {
  .lightbox__figura { width: min(80vw, calc((100dvh - 5rem) * 4 / 5)); }
  .lightbox__nav { bottom: auto; top: 50%; translate: 0 -50%; }
  .lightbox__nav--ant { left: max(1.25rem, calc(50% - min(40vw, (100dvh - 5rem) * 2 / 5) - 76px)); }
  .lightbox__nav--prox { right: max(1.25rem, calc(50% - min(40vw, (100dvh - 5rem) * 2 / 5) - 76px)); }
}

html.lightbox-aberto { overflow: hidden; }

/* ---------- 1c. ESCALA DE COMPUTADOR: REGRAS DE ELEMENTO ----------
   Gemeas das variaveis do bloco 1b, so que no fim do arquivo.

   As variaveis la em cima funcionam porque o :root original vem
   antes delas. Ja estas tres regras de elemento tem a MESMA
   especificidade das originais (body na linha 86, .hero__figura e
   .hero__texto > p na secao 7) -- e, em empate de especificidade, a
   ultima do arquivo ganha. Escritas la em cima elas eram vencidas
   silenciosamente. Aqui, depois de tudo, nao tem quem as vença. */
@media (min-width: 1080.02px) {
  /* 1.75 e otimo para leitura longa, mas em bloco de site -- duas,
     tres linhas -- virava ar. Um pouco mais junto sem apertar. */
  body { line-height: 1.7; }

  /* A foto em 4:5 levava o hero inteiro a ~735px e deixava o texto
     boiando no meio do marinho. Menor, o vazio fecha e a foto
     continua vertical, que era o pedido. */
  .hero__figura { max-width: 410px; }

  /* 46ch ocupava dois tercos da coluna e, com a foto agora menor,
     deixava ainda mais rabo de branco ao lado do paragrafo. 52ch
     continua dentro da medida confortavel de leitura. */
  .hero__texto > p { max-width: 52ch; }
}

/* ---------- 26. IMPRESSAO ---------- */

@media print {
  .cabecalho, .story, .historia, .rodape__redes { display: none; }
  body { background: #fff; color: #000; }
  .hero, .secao--escura, .chamada, .rodape, .erro { background: #fff !important; color: #000 !important; }
  .hero h1, .secao--escura h2, .chamada h2, .erro h1 { color: #000 !important; }
  .erro { min-height: 0; }
}