/* ==========================================================================
   Atlas — o que o design não cobre

   A folha do design (atlas-design.css) vem verbatim do Site Atlas.dc.html e
   manda no visual. Aqui só existe o que o runtime do Claude Design fazia e
   virou responsabilidade nossa: estados condicionais, menu ativo, e as duas
   seções acrescentadas (planos e dúvidas).
   ========================================================================== */

/* Wrapper de <sc-if>: `contents` faz o nó sumir do layout, então o filho se
   comporta como filho direto do pai — sem isso um wrapper dentro de flex/grid
   quebraria o alinhamento do design inteiro. */
.se { display: contents; }
.se.oculto { display: none; }

/* Item de menu ativo no print da plataforma. O design entrega <div> com estilo
   inline, então precisa de !important para vencer. */
[data-acao^="ir"] { cursor: pointer; }
[data-acao^="ir"]:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 8px; }
[data-acao^="ir"].menu-on { background: rgba(255,255,255,0.2) !important; color: #fff !important; }
[data-acao^="ir"]:hover:not(.menu-on) { background: rgba(255,255,255,0.08) !important; }
[data-acao^="ver"] { cursor: pointer; }

/* ==========================  Planos  ================================== */
.planos { padding: 24px 24px 72px; background: #F0F4F8; }
.planos-inner, .faq-inner { max-width: 1200px; margin: 0 auto; }
.olho-planos {
  display: inline-block; font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #94A3B8;
}
.h2-planos {
  margin: 14px 0 0; font-family: 'Inter Tight', Inter, sans-serif;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -.02em;
  font-weight: 800; color: #1E293B; text-wrap: pretty;
}
.sub-planos { margin: 18px 0 0; max-width: 640px; font-size: 17px; line-height: 1.7; color: #64748B; }

/* stretch: com `start` cada card fica com a altura do próprio conteúdo e os
   três terminam em linhas diferentes. */
.planos-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.plano {
  position: relative; height: 100%;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 20px; padding: 26px 24px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.plano:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -14px rgba(15,42,94,.34); }
.plano.destaque { border-color: #2563EB; box-shadow: 0 20px 44px -20px rgba(37,99,235,.4); }
.plano-fita {
  position: absolute; top: -11px; left: 24px; padding: 3px 12px; border-radius: 999px;
  background: #2563EB; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.plano-fita.espera { background: #94A3B8; }
.plano-topo { display: flex; align-items: center; gap: 12px; }
.plano-foto { width: 46px; height: 46px; border-radius: 999px; overflow: hidden; flex-shrink: 0; border: 2px solid #E2E8F0; }
.plano-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.plano-nome { margin: 0; font-family: 'Inter Tight', Inter, sans-serif; font-size: 19px; font-weight: 700; color: #1E293B; }
.plano-papel { margin: 1px 0 0; font-size: 12.5px; color: #64748B; }
.plano-preco { display: flex; align-items: baseline; gap: 6px; }
.plano-preco .v { font-family: 'Inter Tight', Inter, sans-serif; font-size: 34px; font-weight: 800; letter-spacing: -.025em; color: #1E293B; }
.plano-preco .p { font-size: 13px; color: #64748B; }
.plano-itens { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; flex: 1 0 auto; }
.plano-itens li { display: flex; gap: 9px; font-size: 14px; line-height: 1.5; color: #334155; }
.plano-itens li::before { content: '\2713'; color: #2563EB; font-weight: 700; flex-shrink: 0; }

.btn-plano {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; padding: 0 22px;
  border-radius: 8px; border: 1px solid #E2E8F0; background: #fff; color: #1E293B;
  font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-plano:hover { border-color: #93b4f7; background: #F7F9FC; color: #1E293B; }
.btn-plano.primario { background: #2563EB; border-color: #2563EB; color: #fff; }
.btn-plano.primario:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(37,99,235,.5); }

/* ==========================  Dúvidas  ================================= */
.faq { padding: 24px 24px 80px; background: #F0F4F8; }
.faq-inner { max-width: 820px; }
.faq-lista { margin: 32px 0 0; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; overflow: hidden; }
.faq-botao {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; cursor: pointer; list-style: none;
  font-family: 'Inter Tight', Inter, sans-serif; font-size: 17px; font-weight: 700; color: #1E293B;
}
.faq-botao::-webkit-details-marker { display: none; }
.faq-botao:hover { color: #2563EB; }
.faq-seta { flex-shrink: 0; color: #94A3B8; transition: transform .28s ease; }
.faq-item[open] .faq-seta { transform: rotate(180deg); }
.faq-corpo { padding: 0 22px 22px; margin: 0; font-size: 15.5px; line-height: 1.7; color: #64748B; }

/* ==========================  Modal  =================================== */
.modal {
  position: fixed; inset: 0; z-index: 90;
  display: none; align-items: center; justify-content: center;
  padding: 24px; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px);
}
.modal.on { display: flex; animation: modalFundo .2s ease-out; }
@keyframes modalFundo { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  position: relative; width: 100%; max-width: 420px;
  background: #fff; border-radius: 20px; padding: 30px 28px 26px;
  box-shadow: 0 40px 80px -20px rgba(15, 23, 42, .45);
  animation: modalEntra .28s cubic-bezier(.16, 1, .3, 1);
}
@keyframes modalEntra { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal.on, .modal-card { animation: none; } }
.modal-x {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  border: 0; background: none; border-radius: 8px; cursor: pointer;
  font-size: 22px; line-height: 1; color: #94A3B8;
}
.modal-x:hover { background: #F0F4F8; color: #1E293B; }
.modal-titulo { margin: 0; font-family: 'Inter Tight', Inter, sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.015em; color: #1E293B; }
.modal-sub { margin: 10px 0 20px; font-size: 14.5px; line-height: 1.6; color: #64748B; }
.modal input {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid #E2E8F0; border-radius: 8px;
  font-family: inherit; font-size: 16px; color: #1E293B;  /* 16px: abaixo disso o iOS dá zoom */
}
.modal input:focus { outline: 2px solid #2563EB; outline-offset: 1px; border-color: #2563EB; }
.modal-erro { margin: 8px 0 0; min-height: 18px; font-size: 13px; color: #dc2626; }
.modal form .btn-plano { margin-top: 6px; }
.modal-nota { margin: 14px 0 0; font-size: 12px; color: #94A3B8; text-align: center; }
.modal-ok { margin: 16px 0 0; font-size: 15px; font-weight: 600; color: #15803d; }

/* =====================  Rodapé de agentes  ============================ */
.rodape-agentes { padding: 40px 24px; background: #fff; border-top: 1px solid #E2E8F0; }
.rodape-agentes .shell { max-width: 1200px; margin: 0 auto; }
.rodape-agentes h3 { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94A3B8; }
.rodape-agentes ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 24px; }
.rodape-agentes a { font-size: 14.5px; color: #64748B; text-decoration: none; }
.rodape-agentes a:hover { color: #1E293B; }

@media (max-width: 980px) { .planos-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .planos, .faq { padding-left: 16px; padding-right: 16px; }
  .rodape-agentes ul { flex-direction: column; gap: 10px; }
}

/* ==================  CTA contextual nos fragmentos  =================== */
/* O card inteiro já é clicável (troca a tela do print). Este CTA é a saída
   para o cadastro, então precisa vencer visualmente sem competir: fica
   discreto e sobe quando o mouse entra no card. `pararProp` no HTML impede
   que o clique suba e troque a tela em vez de navegar. */
.frag-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #2563EB; text-decoration: none;
  padding: 7px 12px; border-radius: 999px;
  background: transparent; border: 1px solid transparent;
  transform: translateY(0);
  transition: transform .22s cubic-bezier(.16,1,.3,1), background .22s ease,
              border-color .22s ease, box-shadow .22s ease;
}
.frag-cta span { transition: transform .22s cubic-bezier(.16,1,.3,1); }

[data-acao^="ver"]:hover .frag-cta,
.frag-cta:focus-visible {
  transform: translateY(-3px);
  background: #eff6ff;
  border-color: #bfdbfe;
  box-shadow: 0 10px 20px -10px rgba(37, 99, 235, .55);
}
[data-acao^="ver"]:hover .frag-cta span { transform: translateX(3px); }
.frag-cta:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .frag-cta, .frag-cta span { transition: none; }
  [data-acao^="ver"]:hover .frag-cta { transform: none; }
}

/* ==================  Barra fixa no mobile  ============================ */
/* No iOS o `bottom:0` do design se posiciona contra a viewport de layout, que
   não é a mesma que a visual quando a barra do Safari recolhe. O resultado é
   uma faixa de conteúdo aparecendo por baixo da barra — ela não encosta no
   fim da tela.

   `env(safe-area-inset-bottom)` no padding faz o próprio fundo da barra
   cobrir essa faixa, então ela lê como bottom bar de app em qualquer estado
   da barra do navegador. Em aparelho sem notch o env vale 0 e nada muda. */
[data-se="barraVisivel"] > div {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  bottom: 0 !important;
}

@media (max-width: 620px) {
  /* No celular a barra vira ação, não leitura: o texto de apoio some e o
     botão ganha a largura que precisa para o alvo de toque. */
  [data-se="barraVisivel"] > div > div { padding: 10px 16px !important; gap: 12px !important; }
  [data-se="barraVisivel"] [data-r="barra-texto"] p:last-child { display: none !important; }
}

/* A animação do design (`barraSobe` com fill-mode both) deixa a barra parada
   em translateY(110%) — 76px ABAIXO da viewport. É a brecha do mobile: ela
   nunca chega a encostar no fim da tela. Troco por transição própria, que é
   determinística e não depende do estado da timeline da animação. */
[data-se="barraVisivel"] > div {
  animation: none !important;
  transform: translateY(110%);
  transition: transform .38s cubic-bezier(.16, 1, .3, 1);
}
[data-se="barraVisivel"]:not(.oculto) > div { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-se="barraVisivel"] > div { transition: none; }
}

/* ==================  Rosto x cartões no mobile  ======================= */
/* No celular os três cartões empilham na coluna esquerda e o mais largo
   (hero-c2, 248px) chega a 71% da largura da foto — exatamente onde fica o
   queixo dela. Duas correções que se somam:

   1. hero-c2 estreita, então a borda direita recua para ~62% e libera o rosto.
   2. o recorte da foto sobe (object-position com Y menor), levando o rosto
      para a faixa de cima, onde só o hero-c1 existe — e ele ocupa apenas os
      58% da esquerda.

   A foto também cresce um pouco: com mais altura o rosto tem para onde subir
   sem sair do enquadramento. */
@media (max-width: 620px) {
  [data-r="hero-foto"] { height: 460px !important; }
  [data-r="hero-foto"] img { object-position: 58% 16% !important; }
  [data-r="hero-c2"] { width: 214px !important; }
  /* Os cartões perdem um pouco de opacidade do fundo para o rosto respirar
     por trás sem que o texto deles perca contraste. */
  [data-r="hero-c1"], [data-r="hero-c3"] { background: rgba(255,255,255,0.94) !important; backdrop-filter: blur(6px); }
}

/* A caixa "Conversas hoje · 38" (hero-c4) vinha oculta no mobile por regra do
   próprio design. O Vinicius quer ela no ar, então volta — ancorada pelo PÉ da
   foto (`bottom`, não `top`).

   Ancorar por baixo em vez de por cima é o que garante que ela não vaze do
   enquadramento nem colida com a hero-c3: seja qual for a altura que o texto
   assumir, ela cresce para cima a partir de uma borda fixa, em vez de empurrar
   para fora de uma foto de altura conhecida. */
@media (max-width: 620px) {
  [data-r="hero-c4"] {
    display: block !important;
    left: 0 !important;
    top: auto !important;
    bottom: 14px !important;
    width: 196px !important;
    padding: 11px 13px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(6px);
  }
}

/* `display: contents` no <picture>: sem isso ele vira uma caixa inline entre a
   foto e o container, e o `height:100%` do <img> perde a referência de altura
   — a foto colapsa. Com contents o <img> volta a ser filho direto. */
picture { display: contents; }