/* ==========================================================================
   KALLO — Camada de responsividade
   Carregada por último. Objetivos:
   1. impedir qualquer rolagem horizontal, em qualquer largura;
   2. escalar tipografia, espaçamento e alvos de toque no celular;
   3. manter tudo encaixado de 320px até desktop.
   ========================================================================== */

/* ==========================================================================
   1. Trava contra rolagem lateral
   ========================================================================== */

/* `clip` é melhor que `hidden`: não transforma a raiz em contêiner de
   rolagem e não quebra position:sticky. Fallback para navegadores antigos. */
html { overflow-x: clip; }
body { overflow-x: clip; }

@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
  html { max-width: 100%; }
}

/* nenhuma mídia pode ser mais larga que o contêiner */
img, svg, video, iframe, canvas {
  max-width: 100%;
}

/* palavra comprida quebra em vez de empurrar o layout */
body { overflow-wrap: break-word; }
h1, h2, h3, h4, h5,
.obj-q, .mock-cap b, .loop-close p, .turn p, .saldo-cell .v, .signoff p {
  overflow-wrap: break-word;
}

/* títulos longos quebram em pontos naturais */
h1, h2, .lead, .section-head p { text-wrap: pretty; }

/* Itens de grid/flex têm min-width:auto por padrão e se recusam a encolher
   abaixo do próprio conteúdo — é a causa clássica de layout estourado em
   telas estreitas. Aqui eles podem encolher de verdade. */
.grid > *,
.split > *,
.showcase > *,
.phone-rail > *,
.saldo-grid > *,
.offer > *,
.offer-list > *,
.ba > *,
.loop > *,
.food-grid > *,
.footer-top > * {
  min-width: 0;
}

/* ==========================================================================
   1a. Renderização preguiçosa das seções fora da tela
   ==========================================================================
   A página tem ~18.000px e 10 mockups. `content-visibility: auto` faz o
   navegador pular estilo/layout/pintura do que ainda não apareceu, e
   `contain-intrinsic-size: auto` guarda o tamanho real depois da primeira
   exibição, para a barra de rolagem não pular. O hero fica de fora: ele
   precisa pintar imediatamente. */

.section,
.section-sm,
.footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* ==========================================================================
   1b. Hero: onde o mockup entra na ordem
   ==========================================================================
   O texto do hero está dividido em dois blocos justamente para que o
   aparelho possa se encaixar entre eles no celular. */

/* Desktop: o texto volta a ser uma coluna só (duas linhas coladas, sem
   respiro entre elas) e o aparelho ocupa a coluna da direita inteira. */
@media (min-width: 861px) {
  .hero-split {
    grid-template-rows: auto auto;
    row-gap: 0;
  }
  .hero-copy-top    { grid-column: 1; grid-row: 1; align-self: end; }
  .hero-copy-bottom { grid-column: 1; grid-row: 2; align-self: start; }
  .hero-device      { grid-column: 2; grid-row: 1 / 3; align-self: center; }
}

/* Celular e tablet retrato: headline → mockup → subheadline e CTA. */
@media (max-width: 860px) {
  .hero-copy-top    { order: 1; }
  .hero-device      { order: 2; }
  .hero-copy-bottom { order: 3; }

  .hero-split { gap: 30px; }
  .hero-sub { margin-top: 0; }

  /* badge e headline centralizados (só no celular) */
  .hero-copy-top { text-align: center; }
  .hero-copy-top h1 { text-wrap: balance; }
}

/* ==========================================================================
   2. Tablet — 1024px e abaixo
   ========================================================================== */

@media (max-width: 1024px) {
  .wrap { --gutter: 22px; }
  .section    { padding-block: clamp(64px, 9vw, 104px); }
  .section-sm { padding-block: clamp(48px, 7vw, 72px); }
}

/* ==========================================================================
   3. Celular grande / tablet pequeno — 768px e abaixo
   ========================================================================== */

@media (max-width: 768px) {
  .section    { padding-block: 68px; }
  .section-sm { padding-block: 52px; }

  .section-head p { margin-top: 16px; }

  /* o hero deixa de tentar ocupar a tela inteira: no celular o conteúdo
     empilhado já é bem mais alto que a viewport */
  .hero {
    min-height: 0;
    padding-top: 108px;
    padding-bottom: 56px;
  }
  .hero-split { gap: 40px; }
  .hero-sub { margin-top: 20px; }
  .hero-badge { margin-bottom: 20px; }

  .loop-close { margin-top: 16px; }
  .cta { padding-inline: 22px; }
}

/* ==========================================================================
   4. Celular — 600px e abaixo
   ========================================================================== */

@media (max-width: 600px) {
  :root { --gutter: 18px; --radius-lg: 20px; }

  .section    { padding-block: 60px; }
  .section-sm { padding-block: 44px; }

  /* --- botões: podem quebrar linha em vez de estourar a largura --- */
  .btn {
    white-space: normal;
    height: auto;
    min-height: 52px;
    padding: 13px 22px;
    line-height: 1.25;
    text-align: center;
    max-width: 100%;
  }
  .btn-sm { min-height: 44px; padding: 10px 18px; }
  .hero-actions { gap: 12px; }
  .hero-actions .btn { width: 100%; }

  /* --- navegação --- */
  .nav-shell { padding-top: 12px; }
  .nav { height: 60px; padding-inline: 12px; }
  .nav-logo img { height: 26px; }
  .nav-mobile {
    max-height: calc(100svh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* --- tipografia --- */
  .lead { font-size: 1rem; }
  .eyebrow { font-size: 0.92rem; margin-bottom: 14px; }

  /* --- cartões e caixas: menos respiro interno --- */
  .card, .plan, .obj, .quote { padding: 22px 20px; }
  .feat { padding: 20px; }
  .step { padding: 24px 20px; }
  .loop-step { padding: 24px 18px 20px; }
  .ba-col { padding: 24px 20px; }
  .spotlight, .turn, .loop-close { padding: 26px 20px; }
  .faq-q { padding: 18px 18px; gap: 14px; }
  .faq-a-inner { padding: 0 18px 18px; }
  .coach { padding: 18px 18px; gap: 12px; }

  /* --- oferta --- */
  .offer-body, .offer-side { padding: 26px 20px; }
  .offer-side .saldo-cell.main { padding: 22px 18px; }
  .offer-list { gap: 10px; margin-top: 20px; }

  /* --- rodapé --- */
  .footer { padding-block: 44px 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ==========================================================================
   5. Celular pequeno — 400px e abaixo (iPhone SE, Galaxy S antigo…)
   ========================================================================== */

@media (max-width: 400px) {
  :root { --gutter: 16px; --radius: 14px; --radius-lg: 18px; }

  h1 { font-size: clamp(2.5rem, 13.5vw, 3.1rem); }
  h2 { font-size: clamp(1.95rem, 9.6vw, 2.4rem); }
  h3 { font-size: 1.28rem; }

  .section    { padding-block: 52px; }
  .section-sm { padding-block: 40px; }

  .hero { padding-top: 100px; padding-bottom: 44px; }
  .hero-badge { font-size: 0.72rem; height: 32px; padding-inline: 13px; }
  .hero-micro { font-size: 0.8rem; }

  .btn { font-size: 0.92rem; padding: 13px 18px; }

  .card, .plan, .obj, .quote, .feat, .step, .loop-step, .ba-col { padding: 20px 17px; }
  .offer-body, .offer-side { padding: 22px 17px; }
  .faq-q { padding: 16px 15px; font-size: 0.97rem; }
  .faq-a-inner { padding: 0 15px 16px; }

  .obj-q { font-size: 1.22rem; }
  .food-chip { padding: 12px 13px; }
  .food-chip b { font-size: 0.88rem; }
  .food-chip span { font-size: 0.73rem; }

  .signoff img { height: 34px; }

  /* o ícone do Coach roubava largura demais do parágrafo: empilha */
  .coach { flex-direction: column; gap: 12px; }
  .coach .ico { width: 36px; height: 36px; }

  /* Saldo Kallo: 3 colunas não cabem aqui. Cada macro vira uma linha
     "rótulo ..... valor", que continua legível e nunca estoura. */
  .showcase .saldo-grid { grid-template-columns: 1fr; gap: 8px; }
  .showcase .saldo-cell:not(.main) {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 15px;
  }
  .showcase .saldo-cell:not(.main) .k { margin: 0 auto 0 0; }
  .showcase .saldo-cell:not(.main) .v { font-size: 1.45rem; }
  .showcase .saldo-cell:not(.main) .u { margin: 0; }
}

/* ==========================================================================
   6. Barra fixa no celular: logo centralizada, hambúrguer na ponta direita
   ==========================================================================
   Com os links e o CTA escondidos, a barra vira uma grade de 3 colunas.
   A primeira coluna é um vão da mesma largura do botão, para que a logo
   fique no centro óptico real da barra — e não deslocada para a esquerda. */

@media (max-width: 860px) {
  .nav {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 8px;
    padding-inline: 12px;
  }
  .nav-logo   { grid-column: 2; justify-self: center; }
  .nav-burger { grid-column: 3; justify-self: end; }
}

/* ==========================================================================
   7. Alvos de toque (qualquer aparelho sem mouse)
   ========================================================================== */

@media (hover: none) {
  .nav-mobile a { min-height: 48px; display: flex; align-items: center; }
  .faq-q { min-height: 56px; }
  .footer-col a { padding-block: 6px; }

  /* sem hover num aparelho de toque: o "levantar" do card só atrapalha */
  .card:hover, .feat:hover, .step:hover, .obj:hover,
  .quote:hover, .loop-step:hover, .food-chip:hover, .btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   8. Paisagem em celular (altura curta)
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 0; padding-top: 96px; padding-bottom: 40px; }
  .hero-device { --iphone-w: min(220px, 52vh); }
  .nav-mobile { max-height: calc(100svh - 90px); }
}