/* ============================================================
   Altum Assets — Production fixes (Fase 1)
   Camada aditiva de responsividade / técnica.
   NÃO altera cores, tipografia ou identidade visual.
   Consumida por todas as páginas .dc.html via <link> no <helmet>.
   ============================================================ */

/* ---- 1. Reset de caixa e trava de overflow horizontal ---- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Qualquer elemento que force largura maior que a viewport é contido
   (rede de segurança final contra "vazamento" de layout). */
body { width: 100%; margin: 0; }

/* ---- 2. Alvo mínimo de toque em elementos interativos ---- */
a, button, [role="button"] {
  -webkit-tap-highlight-color: rgba(6, 27, 52, 0.15);
}

/* ---- 3. Header institucional (logo + navegação) ---- */
.altum-header {
  flex-wrap: wrap;
  row-gap: 8px;
}

.altum-header-logo {
  height: clamp(56px, 9vw, 130px);
  width: auto;
  max-width: 46vw;
}

.altum-header-back {
  white-space: nowrap;
  font-size: clamp(14px, 1.6vw, var(--fs-small));
}

/* ---- 4. Navegação desktop / menu hambúrguer (home) ---- */
.altum-nav-desktop {
  display: flex;
  flex-wrap: wrap;
}

.altum-hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}

.altum-hamburger-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  position: relative;
  transition: background-color .2s ease;
}

.altum-hamburger-btn span::before,
.altum-hamburger-btn span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}

.altum-hamburger-btn span::before { top: -8px; }
.altum-hamburger-btn span::after { top: 8px; }

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

.altum-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 27, 52, 0.55);
  backdrop-filter: blur(2px);
  z-index: 39;
  opacity: 0;
  transition: opacity .25s ease;
}

.altum-mobile-overlay.is-open {
  display: block;
  opacity: 1;
}

.altum-mobile-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 360px);
  background: var(--primary-900);
  z-index: 40;
  padding: 24px 28px 32px;
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: -20px 0 50px rgba(0,0,0,.35);
}

.altum-mobile-panel.is-open {
  transform: translateX(0);
}

.altum-mobile-panel-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.altum-mobile-close-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: none;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.altum-mobile-link {
  color: rgba(255,255,255,.9);
  font-size: 18px;
  font-weight: var(--weight-medium);
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.altum-mobile-submenu {
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}

.altum-mobile-submenu.is-open {
  max-height: 400px;
}

.altum-mobile-submenu a {
  color: rgba(255,255,255,.72);
  font-size: 15px;
  padding: 10px 4px;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.altum-mobile-cta {
  margin-top: 20px;
  color: var(--blue-400);
  font-weight: var(--weight-medium);
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Body travado quando o menu mobile está aberto */
body.altum-no-scroll {
  overflow: hidden;
}

@media (max-width: 1024px) {
  .altum-nav-desktop { display: none; }
  .altum-hamburger-btn { display: inline-flex; }
}

@media (min-width: 1025px) {
  .altum-mobile-overlay,
  .altum-mobile-panel { display: none; }
}

/* ---- 5. Formulários: estados de envio ---- */
.altum-form-status {
  display: none;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  padding: 12px 14px;
  border-radius: 10px;
  line-height: 1.4;
}

.altum-form-status.is-visible { display: flex; }

.altum-form-status[data-state="loading"] {
  background: rgba(8,24,38,.06);
  color: var(--text-body);
}

.altum-form-status[data-state="success"] {
  background: rgba(34,166,110,.12);
  color: #1b6b46;
}

.altum-form-status[data-state="error"] {
  background: rgba(200,60,60,.1);
  color: #9c2b2b;
}

.altum-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.15);
  border-top-color: currentColor;
  animation: altum-spin .7s linear infinite;
  flex-shrink: 0;
}

@keyframes altum-spin {
  to { transform: rotate(360deg); }
}

/* ---- 7. Skip link (acessibilidade por teclado) ---- */
.altum-skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 100;
  background: var(--primary-900, #061B34);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-family: var(--font-body, sans-serif);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s ease;
}

.altum-skip-link:focus {
  top: 12px;
}

/* ---- 8. Indicador de foco visível (reforço além do focus-visible nativo) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue-400, #5A9AF2);
  outline-offset: 2px;
}

/* ---- 9. Respeita prefers-reduced-motion globalmente ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 6. Larguras/paddings fluidos em telas pequenas ---- */
@media (max-width: 480px) {
  /* substituído pelo recorte da moldura transparente — ver bloco 19 */
}

@media (max-width: 560px) {
  .altum-testimonial-row { gap: 10px; }
  .altum-testimonial-card { padding: 24px 16px; }
}

/* Atendimento: o formulário passou a viver no fluxo normal (linha flex), então
   o hero cresce com o conteúdo em vez de recortá-lo. Em telas estreitas a linha
   quebra e o cartão ocupa a largura disponível. */
@media (max-width: 900px) {
  .altum-atendimento-hero { min-height: 0 !important; }
  .altum-atendimento-row {
    min-height: 0 !important;
    justify-content: flex-start;
  }
  .altum-atendimento-form {
    width: 100% !important;
    max-width: 460px;
  }
}

/* ---- 10. Reset de link compartilhado (antes duplicado inline em 4 páginas:
   AltumInsurance/Wealth/Distressed/Finance). Mesma regra, uma única fonte. ---- */
a { color: var(--blue-500); text-decoration: none; }
a:hover { color: var(--blue-400); }

/* ============================================================
   11. Escala tipográfica em telas pequenas (fase 2)
   Motivo: os tokens do design system só reduzem hero/h1/h2/h3/body
   em <=768px. h4, body-lg, small e caption ficavam no tamanho de
   desktop, e não havia nenhum degrau abaixo de 768px — o que deixa
   textos e botões desproporcionais em telas de ~390px (iPhone).
   Esta camada carrega DEPOIS dos tokens, então redefine os mesmos
   custom properties sem tocar no design system.
   ============================================================ */

/* Impede o Safari no iOS de inflar as fontes por conta própria. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 768px) {
  :root {
    --fs-h4: 21px;
    --fs-body-lg: 17px;
    --fs-small: 15px;
  }
}

@media (max-width: 480px) {
  :root {
    --fs-hero: 34px;
    --fs-h1: 29px;
    --fs-h2: 26px;
    --fs-h3: 21px;
    --fs-h4: 19px;
    --fs-body-lg: 17px;
    --fs-body: 16px;
    --fs-small: 15px;
    --fs-caption: 13px;
  }
}

/* Campos de formulário nunca abaixo de 16px: o Safari no iOS dá zoom
   automático na tela quando o usuário toca num campo com fonte menor. */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px; }
}

/* ============================================================
   12. Âncoras não ficam escondidas atrás do header fixo (fase 7)
   O header é position:fixed e sua altura acompanha o logo
   (clamp 56–130px + 8px de padding). Sem scroll-margin-top, todo
   destino de âncora encosta no topo da janela e fica coberto.
   Fallback em CSS: o JS ainda corrige com a altura medida.
   ============================================================ */
#conteudo-topo {
  scroll-margin-top: calc(clamp(56px, 9vw, 130px) + 8px);
}

#numeros, #ecossistema, #solucoes, #como-funciona, #sobre, #valores,
#atendimento, #carreiras, #contato-form, #depoimentos, #faq, #main-content {
  scroll-margin-top: calc(clamp(56px, 9vw, 130px) + 16px);
}

@media (max-width: 480px) {
  #conteudo-topo { scroll-margin-top: 56px; }
}

/* ============================================================
   13. Header e hero em telas pequenas (fase 8)
   ============================================================ */

/* O logo agora obedece a esta regra (a altura fixa inline foi removida das
   5 páginas). Degrau extra abaixo de 400px: em iPhones estreitos o header
   chegava a ocupar mais de 20% da altura visível. */
@media (max-width: 400px) {
  /* substituído pelo recorte da moldura transparente — ver bloco 19 */
}

/* Botões do hero no celular: compactos, como no desktop. A versão de
   largura total deixava o "Comece agora" pesado demais em relação ao texto. */
@media (max-width: 640px) {
  #hero a[href="#contato-form"] {
    padding: 12px 20px !important;
    font-size: 14px !important;
  }
  #hero a[href="#numeros"] { font-size: 13.5px !important; }
}

/* Safari no iOS: 100vh inclui a área da barra de endereço, então o hero
   ficava mais alto que a tela visível. Onde houver suporte, usa a altura
   pequena da viewport (svh). O fallback 100vh permanece na regra inline. */
@supports (height: 100svh) {
  #hero { min-height: 100svh; }
}

/* ============================================================
   14. Menu mobile: ícones do ecossistema e largura do painel (fase 12)
   ============================================================ */

/* Os links do submenu passaram a ter o mesmo ícone 3D do menu desktop. */
.altum-mobile-submenu a img {
  height: 26px;
  width: auto;
  border-radius: 5px;
  flex-shrink: 0;
}
.altum-mobile-submenu a { gap: 10px; }

/* Em telas estreitas o painel ocupava 86% da largura e deixava uma faixa
   da página aparecendo na lateral. Abaixo de 520px passa a ocupar tudo. */
@media (max-width: 520px) {
  .altum-mobile-panel { width: 100%; box-shadow: none; }
}

/* ============================================================
   15. Atendimento no celular: foto de fundo (fase 12)
   A foto é position:absolute;inset:0 e cobre o bloco inteiro. Quando
   texto e formulário empilham, o bloco fica muito alto e o object-fit:cover
   amplia a imagem de forma desproporcional. No celular a foto passa a
   ocupar só a faixa superior e se dissolve no navy.
   ============================================================ */
@media (max-width: 900px) {
  .altum-atendimento-hero { background: var(--primary-900); }

  .altum-atendimento-hero picture img {
    height: 340px !important;
    bottom: auto !important;
    object-position: 50% 45% !important;
  }

  .altum-atendimento-hero > div[style*="linear-gradient(90deg"] {
    background: linear-gradient(180deg,
      rgba(6, 27, 52, .72) 0%,
      rgba(6, 27, 52, .88) 42%,
      var(--primary-900) 72%) !important;
  }
}

/* ============================================================
   16. Carreiras e Sobre nós no celular (fase 14)
   Os dois têm a mesma causa: dimensão fixa em pixel, definida para
   desktop, que no celular passa a dominar a tela.
   O !important é necessário porque as medidas estão em estilo inline.
   ============================================================ */

/* CARREIRAS — o ícone tinha 160px fixos. Ao lado de uma coluna de texto de
   ~170px no iPhone, ele virava o elemento principal e espremia a chamada.
   Encolhe para manter a mesma leitura do desktop: âncora visual, não
   protagonista. */
@media (max-width: 640px) {
  .car-icone { height: 64px !important; }
  .car-bloco { gap: 14px !important; align-items: flex-start; }
  .car-faixa { gap: 28px !important; }
  .car-faixa > x-import,
  .car-faixa > x-import > * { width: 100% !important; }
}

@media (max-width: 400px) {
  .car-icone { height: 54px !important; }
}

/* SOBRE NÓS — a foto tem altura fixa de 420px com object-fit:cover. Numa
   coluna de ~344px isso vira uma moldura em pé (0,8:1) recebendo uma imagem
   deitada (16:9): o navegador amplia e corta as laterais, e o escritório
   some. No celular a moldura passa a respeitar a proporção da foto. */
@media (max-width: 900px) {
  .sobre-foto {
    height: auto !important;
    aspect-ratio: 16 / 9;
  }
}

/* ============================================================
   17. Valores no celular: faixa deslizante (fase 15)
   O grid de 5 cards virava 2 colunas empilhadas: os títulos quebravam
   em duas linhas, as alturas se igualavam pelo card mais alto e a
   seção passava de 1200px de altura. Vira uma faixa horizontal com
   encaixe por card — o mesmo gesto de rolar que o usuário já usa.
   ============================================================ */
@media (max-width: 640px) {
  .val-trilho {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    align-items: stretch;

    /* Sangra até as bordas da tela para o próximo card "espiar". */
    margin-inline: calc(-1 * clamp(20px, 6vw, 64px));
    padding-inline: clamp(20px, 6vw, 64px);
    padding-block: 6px 18px;
    scroll-padding-inline-start: clamp(20px, 6vw, 64px);
  }

  /* Barra de rolagem escondida: o card cortado na direita já sinaliza
     que há mais conteúdo. */
  .val-trilho { scrollbar-width: none; }
  .val-trilho::-webkit-scrollbar { display: none; }

  .val-card {
    flex: 0 0 74%;
    max-width: 260px;
    scroll-snap-align: start;
    padding: 22px 18px !important;
  }
}

@media (max-width: 380px) {
  .val-card { flex-basis: 80%; }
}

/* ============================================================
   18. Sinalização do carrossel de Valores (fase 16)
   O deslize já funcionava, mas nada indicava isso — o card cortado
   sozinho é ambíguo e pode ser lido como defeito de layout.
   ============================================================ */
.val-indicadores { display: none; }

@media (max-width: 640px) {
  .val-indicadores {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
  }

  .val-ponto {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--border-subtle);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
    /* Alvo de toque de 24px sem inflar a bolinha visível. */
    box-shadow: 0 0 0 8px transparent;
  }

  .val-ponto.is-atual {
    width: 20px;
    border-radius: 4px;
    background: var(--blue-500);
  }
}

@media (prefers-reduced-motion: reduce) {
  .val-ponto { transition: none; }
}

/* ============================================================
   19. Logo do header no celular: recorte da moldura transparente
   ------------------------------------------------------------
   O arquivo logo-altum.png tem 600x400, mas o logotipo em si ocupa
   apenas 465x115 no centro (y 125..240) — 27,5% da altura do arquivo.
   O resto é margem transparente. Por isso `height:44px` produzia um
   logotipo de apenas 12px de altura visível, minúsculo ao lado do
   botão de 44px do menu.

   Aumentar o `height` resolveria o tamanho, mas empurraria a altura do
   header junto (o header mede pelo filho mais alto). A saída é recortar
   a moldura: caixa com a proporção do CONTEÚDO e object-fit:cover, com
   o eixo vertical alinhado ao centro real do logotipo (182,5/400 = 45,6%).

   Resultado: logotipo visível de ~24px, header continua em 52px.
   Vale só onde existe o botão de menu (<=1024px) — desktop intocado.
   ============================================================ */
@media (max-width: 1024px) {
  .altum-header-logo {
    height: 30px;
    width: 125px;
    max-width: 46vw;
    object-fit: cover;
    object-position: 50% 45.6%;
  }
}

@media (max-width: 400px) {
  .altum-header-logo {
    height: 27px;
    width: 110px;
  }
}