/* =============================================================================
   Tenet Tecnologia · tenet.ia.br/otto · css/otto.css
   A página do Otto (otto.html, en/otto.html) e a página Sobre do Otto
   (otto/sobre.html, en/otto/sobre.html). Carrega por último:
     /css/base.css + /css/pecas.css + /css/golden.css + /css/otto.css
   Tudo em @layer otto. As peças moram em pecas.css; o golden, em golden.css.
   Aqui ficam só a casca da /otto (topo, cenas, herói, fim, rodapé) e o
   pouco que a encaixa nas peças.

   Ordem das cenas na PT (plano do site v3): herói com o relógio dentro da
   fila → como vende (um celular, cinco ramos) → a marca sempre igual →
   técnica e funil, a única seção em Ametista profunda → como começa → no
   app (bento) → cuidado com o dado → perguntas → CTA em dois estados. A EN
   segue na ordem anterior (herói → três negócios → persona → técnica →
   venda pronta → bento → dado → Talk to us) até o dono aprovar a PT. O
   golden fica só no rodapé, escondido atrás do O, e na página Sobre.

   Regra de ouro: cada cena é uma peça e uma frase curta. Sem script, sem
   style="" (CSP), sem azul (o azul é do golden, em golden.css).
   ========================================================================== */

@layer otto {

  /* ------------------------------------------------------------- página */
  body {
    background: var(--ambiente), var(--fundo);
    background-repeat: no-repeat;
    background-size: 100% 1400px, auto;
  }

  /* ------------------------------------------------------------- topo */
  .marca-otto {
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--tinta); text-decoration: none;
  }
  .marca-otto-simbolo { inline-size: 26px; block-size: 26px; fill: var(--otto); flex: none; }
  .marca-otto-nome {
    font-family: var(--sans); font-weight: 650; font-size: 1.1875rem; letter-spacing: -.012em; line-height: 1;
  }
  .marca-otto-por {
    font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
    letter-spacing: .045em; text-transform: uppercase; color: var(--tinta-3);
    padding-left: 10px; margin-left: 1px; border-left: 1px solid var(--linha-forte); line-height: 1.4;
  }
  .topo-entrar {
    display: inline-flex; align-items: center; min-height: 40px; padding-inline: 12px;
    border-radius: var(--raio-p);
    color: var(--tinta-2); text-decoration: none; font-size: .875rem; font-weight: 520;
    transition: color .18s var(--ease-ui), background-color .18s var(--ease-ui);
  }
  .topo-entrar:hover { color: var(--tinta); background: var(--veu); }
  /* a /otto não tem menu: no celular ficam o idioma e o Entrar; o botão
     "Fale com a gente" sai do topo (base.css) e fica no herói, logo abaixo */
  @media (max-width: 900px) {
    .topo-otto .topo-acoes > .nav-idioma { display: inline-flex; }
    .topo-otto .topo-acoes { gap: 0; }
  }
  @media (max-width: 400px) {
    .marca-otto-por { display: none; }
  }

  /* ------------------------------------------------------------- cenas */
  .cena {
    position: relative;
    padding-block: var(--secao);
    border-top: 1px solid var(--linha);
    scroll-margin-top: var(--topo);
  }
  .cena-cabeca {
    display: grid; justify-items: center; gap: 16px;
    text-align: center;
    margin-bottom: clamp(32px, 4.5vw, 64px);
  }
  .cena-cabeca .frase { margin-inline: auto; }
  /* no catálogo, o título mora dentro da grade dos ramos: em cima, no
     celular; à esquerda, na coluna da escolha, do tablet largo para cima */
  .ramos > .cena-cabeca { margin-bottom: 0; }
  @media (min-width: 960px) {
    .ramos > .cena-cabeca { grid-area: titulo; justify-items: start; text-align: left; margin-bottom: 8px; }
    .ramos > .cena-cabeca .frase { margin-inline: 0; }
  }
  /* o losango do eixo, como nas seções da Tenet, só que no tom quente */
  .cena:not(.cena-heroi, .cena-sobre)::before {
    content: ""; position: absolute; left: 50%; top: -5px;
    inline-size: 9px; block-size: 9px; translate: -50% 0; rotate: 45deg;
    background: var(--fundo); border: 1px solid var(--tinta-4);
  }
  /* no celular o respiro encolhe: a /otto cabe em nove telas de 390 × 844 */
  @media (max-width: 640px) {
    .cena { padding-block: 56px; }
    .cena-cabeca { margin-bottom: 28px; gap: 12px; }
    .cena:not(.cena-heroi, .cena-sobre)::before { inline-size: 7px; block-size: 7px; top: -4px; }
  }

  /* ------------------------------------------------------------- herói */
  .cena-heroi {
    border-top: 0;
    padding-block: clamp(32px, 5vw, 88px) clamp(56px, 7vw, 112px);
  }
  .heroi-grade {
    display: grid; gap: clamp(36px, 5vw, 64px);
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
  }
  /* com o texto a 200%, pílula e botão quebram a linha em vez de alargar a página */
  .heroi-texto { min-inline-size: 0; grid-template-columns: minmax(0, 1fr); }
  .heroi-texto :is(.frase-heroi, .rotulo-sobre), .cena-final :is(.frase, .final-email) { overflow-wrap: anywhere; }
  .heroi-pilulas li { white-space: normal; }
  :is(.heroi-acoes, .sobre-voltar) .botao { white-space: normal; text-align: center; }
  .heroi-texto { display: grid; gap: 22px; justify-items: start; }
  .heroi-texto .frase-heroi { max-width: 12ch; }
  .heroi-acoes { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 12px; }
  .botao-grande { min-height: 52px; padding: 0 24px; font-size: 1rem; border-radius: 10px; }
  .heroi-peca .celular { --celular: 320px; }
  @media (min-width: 960px) {
    .heroi-grade {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
      min-block-size: min(760px, calc(100svh - var(--topo) - 120px));
    }
    .heroi-peca .celular { --celular: 340px; }
  }
  @media (max-width: 959px) {
    .heroi-texto { justify-items: center; text-align: center; }
    .heroi-texto .frase-heroi { margin-inline: auto; }
    .heroi-acoes { justify-content: center; }
  }
  @media (max-width: 480px) {
    .heroi-acoes, .heroi-acoes .botao { inline-size: 100%; }
    .heroi-peca .celular { --celular: 300px; }
  }

  /* ------------------------------------------------------------- cenas com peça estreita */
  .cena .peca-persona, .cena .peca-tecnica, .cena .peca-quadro { margin-inline: auto; }

  /* ------------------------------------------------------------- fim: Fale com a gente */
  .cena-final { padding-bottom: clamp(88px, 10vw, 160px); }
  .final-grade {
    display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; justify-items: center;
  }
  .final-texto { display: grid; gap: 20px; justify-items: center; text-align: center; }
  .final-texto .frase { margin-inline: auto; max-width: 14ch; }
  .final-email a {
    display: inline-flex; align-items: center; min-height: 40px;
    font-family: var(--mono); font-size: .8125rem; font-stretch: var(--mono-l); letter-spacing: .02em;
    color: var(--tinta-3); text-decoration: none;
  }
  .final-email a:hover { color: var(--tinta); text-decoration: underline; }
  @media (min-width: 860px) {
    .final-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .final-texto { justify-items: start; text-align: left; }
    .final-texto .frase { margin-inline: 0; }
    .final-grade .heroi-acoes { justify-content: flex-start; }
  }
  @media (max-width: 480px) {
    .final-texto { inline-size: 100%; }
  }

  /* a conversa com o próprio Otto: um cartão de vidro, reto */
  .peca-fim {
    --raio-vidro: 28px;
    inline-size: min(100%, 380px);
    display: grid; gap: 14px; padding: 14px 14px 16px;
    font-family: var(--a-fonte); font-size: 15px; line-height: 1.3; color: var(--a-tinta);
    text-align: left;
  }
  .fim-cabeca {
    display: flex; align-items: center; gap: 10px;
    padding: 2px 4px 12px; border-bottom: 1px solid var(--a-borda);
  }
  .fim-avatar {
    flex: none; display: grid; place-items: center;
    inline-size: 38px; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  }
  .fim-avatar .otto-app { inline-size: 100%; block-size: 100%; border-radius: inherit; }
  .fim-corpo { display: flex; flex-direction: column; gap: 10px; padding-inline: 2px; }
  .fim-corpo .conversa-dia {
    align-self: center; padding: .2em .7em; border-radius: 99px;
    background: var(--a-papel); box-shadow: 0 0 0 .5px var(--a-borda);
    color: var(--a-tinta-3); font-size: .75em; font-weight: 600;
  }
  .peca-fim .composer { position: static; margin-top: 4px; }

  /* ------------------------------------------------------------- rodapé da /otto */
  .rodape-otto .celula { border-inline: 0; }
  .rodape-otto-grade {
    display: grid; gap: 40px 32px; align-items: start;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  }
  .rodape-otto-grade > .marca-otto { min-height: 44px; }
  .rodape-otto .marca-otto-simbolo { fill: var(--tinta); }
  @media (max-width: 900px) {
    .rodape-otto-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rodape-otto-grade > .marca-otto { grid-column: 1 / -1; }
  }
  @media (max-width: 560px) {
    .rodape-otto-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  }
  /* O O de OTTO é um botão maior que a faixa visível das letras. Com
     overflow: hidden (base.css), o foco rolaria a faixa para mostrar o botão
     inteiro, e a orelha sumiria; clip corta igual, mas não rola. */
  .rodape-otto .rodape-gigante { overflow: clip; }
  @supports not (overflow: clip) {
    .rodape-otto .rodape-gigante { overflow: visible; clip-path: inset(-12px 0 0 0); }
  }

  /* o OTTO gigante da página Sobre: sem o botão da orelha */
  .rodape-otto-gigante { block-size: auto; }
  .rodape-otto-gigante .rodape-letras { margin-bottom: calc(-62 / 528 * 100%); }

  /* ------------------------------------------------------------- página Sobre */
  /* a luz atrás do retrato passa da coluna no celular: corta na seção */
  .cena-sobre { border-top: 0; padding-block: clamp(40px, 6vw, 104px) clamp(72px, 9vw, 136px); overflow-x: clip; }
  .sobre-voltar { margin-top: clamp(40px, 5vw, 72px); display: flex; justify-content: center; }
  .seta-volta { display: inline-block; transition: transform .18s var(--ease-ui); }
  .sobre-voltar .botao:hover .seta-volta { transform: translateX(-3px); }

  /* ============================================================= v3 (PT) */
  /* A casca da /otto PT do plano v3. A EN segue nas regras de cima até o
     dono aprovar a PT: tudo aqui mora em classes novas. */

  /* ------------------------------------------------ barra em pílula de vidro */
  /* Fixa no alto (sticky, como a .topo de base.css), com a marca, quatro
     âncoras, o EN discreto, o Entrar em texto e um único botão com peso. O
     vidro (fundo, blur, fio e reflexo) vem da .topo de base.css; aqui só a
     forma de pílula e a medida.  */
  .topo-pilula {
    top: 10px;
    inline-size: min(100% - 2 * var(--margem), 1180px);
    block-size: 58px; margin: 10px auto 0;
    border-bottom: 0; border-radius: 99px;
    box-shadow: inset 0 1px 0 var(--gv-topo), inset 0 -1px 0 var(--gv-barra-fio), 0 0 0 1px var(--linha-forte), 0 14px 34px -22px var(--sombra-cor);
  }
  /* no claro, a pílula leva um pouco mais de fundo (72% em vez de 62%)
     para o texto passar de 4,5:1 também sobre a seção Ametista */
  .topo-pilula { --gv-barra: 72%; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .topo-pilula { --gv-barra: 58%; }
  }
  :root[data-theme="dark"] .topo-pilula { --gv-barra: 58%; }
  .topo-pilula .topo-dentro { padding-inline: 18px 8px; gap: 10px; }
  .topo-pilula .marca { margin-right: 0; }
  .topo-ancoras { margin-inline: auto; }
  .topo-ancoras ul { display: flex; gap: 2px; }
  .topo-ancoras a {
    display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: 13px;
    border-radius: 99px;
    color: var(--tinta-2); text-decoration: none; font-size: .875rem; font-weight: 520;
    transition: color .18s var(--ease-ui), background-color .18s var(--ease-ui);
  }
  .topo-ancoras a:hover { color: var(--tinta); background: var(--veu); }
  .topo-pilula .topo-acoes { gap: 2px; }
  /* tinta-2 (e não tinta-3) em tudo que é texto na pílula: quando ela
     passa sobre a seção Ametista, o fundo do vidro vira lilás e a tinta-3
     cairia para uns 3:1 */
  .topo-pilula .topo-entrar { font-size: .8125rem; color: var(--tinta-2); border-radius: 99px; }
  .topo-pilula .nav-idioma { border-radius: 99px; color: var(--tinta-2); }
  .topo-pilula .marca-otto-por { color: var(--tinta-2); }
  .topo-pilula :is(.topo-entrar, .nav-idioma):hover { color: var(--tinta); }
  /* o botão nunca é cortado (sem reticências): o rótulo do topo é curto
     ("Quero o Otto", do contato.json), e abaixo de 300 px o nome "Otto" da
     marca sai da barra (fica o símbolo, com o aria-label) para dar lugar */
  .topo-pilula .topo-dentro, .topo-pilula .topo-acoes { min-inline-size: 0; }
  .topo-pilula .marca { flex: none; }
  .topo-cta { border-radius: 99px; margin-left: 4px; flex: none; white-space: nowrap; }

  /* no celular: as âncoras, o EN e o Entrar vão para um painel que abre por
     :target (#menu-otto), como o menu da Tenet, e fecha sozinho ao seguir
     qualquer âncora: quem escolhe "Como vende" chega à seção sem o painel
     por cima. O botão fica na barra durante a rolagem toda. */
  .topo-menu { display: none; }
  .topo-menu {
    align-items: center; gap: 7px; min-block-size: 44px; padding-inline: 12px; flex: none;
    border-radius: 99px; text-decoration: none;
    font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
    letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2);
  }
  .topo-menu svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .topo-menu:hover, :root:has(#menu-otto:target) .topo-menu { background: var(--veu); color: var(--tinta); }
  .topo-menu-painel { display: none; }
  .topo-menu-painel:focus { outline: none; }
  .topo-menu-painel:target {
    position: fixed; z-index: 51;
    top: calc(10px + 58px + 8px); left: var(--margem); right: var(--margem);
    max-inline-size: 1180px; margin-inline: auto;
    display: grid; gap: 6px; padding: 8px;
    border-radius: 24px;
    background: var(--vidro-brilho), color-mix(in srgb, var(--sup-1) 72%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--vidro-sombra), inset 0 1px 0 var(--vidro-luz), 0 0 0 1px var(--linha-forte);
  }
  .topo-menu-painel ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .topo-menu-painel ul a {
    display: flex; align-items: center; min-block-size: 48px; padding-inline: 16px;
    border-radius: 16px; background: var(--veu);
    color: var(--tinta); text-decoration: none; font-weight: 560; font-size: .9375rem;
  }
  .topo-menu-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 2px 4px 0; }
  .topo-menu-pe a { display: inline-flex; align-items: center; min-block-size: 44px; }
  .topo-menu-fechar {
    gap: 6px; margin-left: auto; padding-inline: 12px; border-radius: 99px;
    color: var(--tinta-2); text-decoration: none; font-weight: 560; font-size: .875rem;
  }
  .topo-menu-fechar:hover { background: var(--veu); color: var(--tinta); }
  .topo-menu-fechar svg { inline-size: 12px; block-size: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  @media (max-width: 900px) {
    .topo-pilula .topo-dentro { padding-inline: 16px 7px; gap: 4px; }
    .topo-pilula .topo-ancoras,
    .topo-pilula .topo-acoes > .nav-idioma,
    .topo-pilula .topo-acoes > .topo-entrar { display: none; }
    .topo-pilula .topo-acoes { margin-left: auto; }
    .topo-pilula .topo-acoes > .botao { display: inline-flex; }
    .topo-menu { display: inline-flex; }
    .topo-pilula .topo-acoes > .topo-cta { display: block; line-height: 36px; }
  }
  @media (max-width: 900px) and (pointer: coarse) {
    .topo-pilula .topo-acoes > .topo-cta { line-height: 44px; }
  }
  /* do tablet para cima o painel não abre, nem por #menu-otto no endereço */
  @media (min-width: 901px) {
    .topo-menu-painel:target { display: none; }
  }
  @media (max-width: 420px) {
    .topo-menu { padding-inline: 11px; }
    .topo-menu-texto { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .topo-cta { padding-inline: 13px; }
  }
  @media (max-width: 299px) {
    .topo-pilula .marca-otto-nome { display: none; }
  }
  @media (prefers-reduced-transparency: reduce) {
    .topo-menu-painel:target { background: var(--sup-1); -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  /* a âncora cai logo abaixo da pílula */
  .cena[id] { scroll-margin-top: 12px; }

  /* ------------------------------------------------ herói */
  .heroi-v3 { padding-block-start: clamp(28px, 4vw, 72px); }
  .heroi-v3 .heroi-texto { gap: 20px; }
  .heroi-pilulas { display: flex; flex-wrap: wrap; gap: 8px; }
  .heroi-pilulas li {
    min-block-size: 34px; padding: 4px 13px 4px 5px;
    font-size: .875rem; font-weight: 560; color: var(--tinta-2);
  }
  .heroi-pilulas .quadradinho { --quadradinho: 24px; margin-inline-start: 0; }
  @media (max-width: 959px) {
    .heroi-pilulas { justify-content: center; }
  }

  /* ------------------------------------------------ técnica em Ametista profunda */
  /* A única seção escura da página, nos dois temas: color-scheme dark faz os
     tokens light-dark() das peças caírem no escuro, e o fundo e a tinta
     viram Ametista profunda e Linho. */
  .cena-ametista {
    color-scheme: dark;
    --fundo: #231640;
    --tinta: #f4ece0; --tinta-2: #e8dfd1; --tinta-3: #cdc1b1; --tinta-4: #ab9f8f;
    --linha: rgb(244 236 224 / .12); --linha-forte: rgb(244 236 224 / .22);
    --veu: rgb(244 236 224 / .07);
    --otto: #c9b6ff; --otto-veu: rgb(201 182 255 / .18); --otto-fio: rgb(201 182 255 / .6);
    --sombra-cor: rgb(0 0 0 / .45);
    background:
      radial-gradient(60rem 36rem at 88% 0%, rgb(145 103 234 / .30), transparent 65%),
      radial-gradient(40rem 30rem at 0% 100%, rgb(211 185 151 / .10), transparent 65%),
      var(--fundo);
    color: var(--tinta-2);
    border-top: 0;
  }
  .cena-ametista .cena-cabeca .apoio {
    max-width: 30ch; color: var(--tinta-2);
    font-family: var(--serif); font-optical-sizing: auto; font-style: italic; font-weight: 380;
    font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.3;
  }
  .cena-ametista .peca {
    --a-papel-2: #2c1d50;
    --a-borda: #46366f; --a-borda-forte: #6a5a92;
    --a-bolha-deles: #362760; --a-bolha-borda: #4a3a78;
    --a-bolha-nossa: #45307c; --a-bolha-nossa-borda: #5c469a;
    --a-otto: #cdbcff; --a-otto-veu: rgb(205 188 255 / .16);
    --a-tinta: #f4ece0; --a-tinta-2: #e8dfd1; --a-tinta-3: #cdc1b1;
  }
  .cena-ametista .peca-tecnica { box-shadow: inset 0 0 0 1px var(--linha-forte), 0 30px 60px -40px rgb(0 0 0 / .6); }
  .tecnica-grade { display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; }
  @media (min-width: 960px) {
    .tecnica-grade {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
      max-inline-size: 1080px; margin-inline: auto;
    }
    .funil-rotulo { text-align: left; }
  }
  @media (max-width: 640px) {
    .cena-ametista .peca-tecnica { padding: 1.1em .9em 1.2em; }
  }

  /* ------------------------------------------------ como começa */
  .passos {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
    max-inline-size: 1040px; margin-inline: auto;
  }
  .passo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; padding: 18px 20px; }
  .passo .quadradinho { --quadradinho: 50px; }
  .passo-texto { display: grid; gap: 3px; justify-items: start; align-content: start; min-block-size: 50px; }
  .passo-n { font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l); letter-spacing: .06em; color: var(--tinta-3); }
  .passo b { font-size: 1.0625rem; font-weight: 620; line-height: 1.25; color: var(--tinta); }
  .passo small { font-size: .875rem; line-height: 1.35; color: var(--tinta-3); }
  .passo-glifos { display: flex; gap: 10px; margin-top: 4px; color: var(--tinta-3); }
  .passo-glifos svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  @media (max-width: 760px) {
    .passos { grid-template-columns: minmax(0, 1fr); gap: 10px; max-inline-size: 26rem; }
    .passo { padding: 12px 16px; gap: 14px; }
    .passo .quadradinho { --quadradinho: 42px; }
    .passo-texto { min-block-size: 42px; }
  }

  /* ------------------------------------------------ cuidado: a linha sem scripts */
  .cuidado-linha {
    text-align: center; text-wrap: balance; margin: clamp(28px, 4vw, 44px) auto 0; max-inline-size: 44ch;
    font-size: var(--t-pequeno); line-height: 1.5; color: var(--tinta-3);
  }

  /* ------------------------------------------------ rodapé de três colunas */
  /* Produto · Otto · Documentos e contato. No celular, os documentos e o
     contato correm numa linha que quebra, em vez de uma coluna comprida. */
  @media (max-width: 560px) {
    .rodape-v3 .celula { padding-top: 48px; }
    .rodape-v3 .rodape-otto-grade { row-gap: 24px; }
    .rodape-v3 .rodape-col[aria-labelledby="r-docs"] { grid-column: 1 / -1; }
    .rodape-v3 .rodape-col[aria-labelledby="r-docs"] ul { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 0; }
    .rodape-v3 .rodape-legal { margin-top: 32px; }
  }

  /* ------------------------------------------------ perguntas */
  .perguntas { display: grid; gap: 10px; max-inline-size: 44rem; margin-inline: auto; }
  /* uma linha por pergunta: o cartão não tem respiro próprio (o summary é
     que dá a altura, uns 64 px) e o brilho de cima é mais fraco, para os
     cinco cartões empilhados não virarem faixas no escuro */
  .pergunta { --cartao-respiro: 0; border-radius: 18px; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pergunta { --gv-brilho: rgb(255 255 255 / .07); }
  }
  :root[data-theme="dark"] .pergunta { --gv-brilho: rgb(255 255 255 / .07); }
  .pergunta summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-block-size: 64px; padding: 12px 22px; cursor: pointer; list-style: none;
    font-size: 1.0625rem; font-weight: 580; line-height: 1.3; color: var(--tinta);
  }
  .pergunta summary::-webkit-details-marker { display: none; }
  .pergunta summary::after {
    content: ""; flex: none; inline-size: 8px; block-size: 8px; translate: 0 -2px; rotate: 45deg;
    border-right: 1.5px solid var(--tinta-3); border-bottom: 1.5px solid var(--tinta-3);
    transition: rotate .2s var(--ease-ui), translate .2s var(--ease-ui);
  }
  .pergunta[open] summary::after { rotate: 225deg; translate: 0 2px; }
  .pergunta summary:focus-visible { outline-offset: -2px; border-radius: 18px; }
  .pergunta p { padding: 0 22px 18px; color: var(--tinta-3); }
  .pergunta a { color: var(--tinta); display: inline-block; margin-left: .25em; }
  @media (max-width: 640px) {
    .pergunta summary { min-block-size: 50px; padding-inline: 16px; font-size: 1rem; }
    .pergunta p { padding-inline: 16px; }
  }

  /* ------------------------------------------------ CTA em dois estados */
  .chama-estado { display: grid; gap: 20px; justify-items: center; text-align: center; }
  .chama-estado[hidden] { display: none; }
  .chama-estado .frase { margin-inline: auto; max-width: 16ch; }
  .chama-estado .apoio { margin-top: -8px; }
  .botao-com-otto .otto-app { inline-size: 24px; block-size: 24px; border-radius: 6px; }
  @media (max-width: 480px) {
    .chama-estado .heroi-acoes, .chama-estado .heroi-acoes .botao { inline-size: 100%; }
  }
}