/* ==========================================================================
   Responsividade — tablet e celular
   O desktop (>=1024px) escala proporcionalmente. Abaixo disso o layout se
   reorganiza, preservando identidade, ordem de conteúdo, hierarquia e leitura.
   ========================================================================== */

/* ===========================================================================
   TABLET E ABAIXO (< 1024px) — reflow principal
   =========================================================================== */
@media (max-width: 1023px) {
  html { font-size: 16px; }                 /* encerra a escala por viewport */

  .slide { min-height: 0; overflow: visible; }
  .slide__body {
    max-width: 46rem;
    margin: 0 auto;
    padding: 3rem 2rem;
    display: block;
  }

  /* Tipografia fluida */
  .hero__title { font-size: clamp(1.75rem, 6.8vw, 3rem); }
  .h-display,
  #intro .h-display,
  .historia .h-display,
  .comparativo .h-display,
  .contato .h-display,
  .conceito__title { font-size: clamp(1.7rem, 5.5vw, 2.6rem); }
  .body-lg { font-size: 1.2rem; }
  .body-md { font-size: 1.1rem; }
  .body-sm { font-size: 1.05rem; }
  /* Hierarquia fluida: elementos que ficavam congelados no rem do desktop */
  .hero__lead { font-size: clamp(1.05rem, 4.4vw, 1.2rem); }
  .hero__kicker-title { font-size: clamp(1.35rem, 5vw, 1.7rem); }
  .historia__year { font-size: clamp(1.4rem, 5vw, 2rem); }
  .comparativo__list li { font-size: clamp(1.2rem, 4.4vw, 1.55rem); }
  .stat-card p { font-size: clamp(1.15rem, 4.2vw, 1.45rem); }
  .feature-card__title { font-size: clamp(1.2rem, 4vw, 1.4rem); }
  .produto__callout-title { font-size: clamp(1.25rem, 4.4vw, 1.6rem); }

  /* Diagramação de texto no mobile: evita palavra órfã na última linha
     (balance p/ títulos curtos, pretty p/ corpo). Fallback = comportamento atual. */
  .hero__title,
  #intro .h-display { text-wrap: balance; }
  .hero__lead,
  .hero__kicker-sub,
  #intro .body-lg { text-wrap: pretty; }

  /* --- Cabeçalho / masthead --- */
  .masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    min-height: 0;
    gap: 0;
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);   /* aparelhos com recorte/notch */
  }
  /* Bandeira vira faixa fina no topo; o menu vira dropdown sobreposto */
  .masthead__navwrap { order: 0; flex: 1 0 100%; display: block; margin-top: 0; }
  .masthead__flag { flex-direction: row; width: 100%; height: 7px; }
  .masthead__flag span { flex: 1; height: auto; }
  .masthead__brand { order: 1; padding: .55rem 1.15rem; }
  .masthead__brand img { height: 3.4rem; }
  .masthead__toggle { order: 2; display: flex; margin-left: auto; margin-right: 1.25rem; color: var(--brown); }
  .masthead__nav { margin-top: 0; height: 0; }
  /* Menu vira dropdown SOBREPOSTO (não empurra o conteúdo, sem salto de layout) */
  .masthead__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;   /* itens ocupam a largura toda → área de toque cheia */
    gap: 0;
    padding: .25rem 1.5rem .75rem;
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    background: var(--cream);
    border-top: 1px solid rgba(64,44,35,.12);
    box-shadow: 0 12px 20px rgba(64,44,35,.16);
    z-index: 49;
  }
  .masthead__menu.is-open { display: flex; }
  .masthead__menu li { display: block; gap: 0; }
  .masthead__menu li:not(:last-child)::after { display: none; }   /* sem cunhas no dropdown */
  .masthead__menu a {
    display: flex;
    align-items: center;
    min-height: 44px;      /* toque confortável */
    padding: .55rem 0;
    font-size: 1rem;
  }

  /* --- Herói --- */
  .hero__body { display: block; }
  .hero__content { max-width: none; padding-top: 2.5rem; padding-bottom: 0; }
  .hero__kicker { margin-top: 2rem; }
  .hero__lead { margin-top: 1.5rem; }
  .hero__img {
    position: static;
    display: block;
    margin: 2rem auto 0;
    width: 100%;
    max-width: 32rem;
  }
  .hero__img img { height: auto; width: 100%; object-fit: contain; }

  /* --- Ornamentos: simplifica no tablet/celular (evita overflow e sobreposição) --- */
  .deco { display: none; }
  .produto .h-display { white-space: normal; }

  /* --- Split (intro, história) --- */
  .split { display: block; }
  .split__text { max-width: none; }
  /* Intro: imagem volta ao topo, texto alinhado à esquerda */
  #intro .intro__text { max-width: none; text-align: left; margin-left: 0; }
  .split--right-media .split__media,
  .split--left-media .split__media,
  .historia__figure {
    position: static;
    width: 100%;
    margin-top: 0;
    margin-bottom: 2rem;
  }
  .split--right-media .split__media { margin-top: 2rem; margin-bottom: 0; aspect-ratio: 16 / 10; }
  .split--right-media .split__media img,
  .split--left-media .split__media img { width: 100%; height: 100%; object-fit: cover; }
  .split--left-media .split__media { aspect-ratio: 16 / 10; }
  /* História: coluna única, texto à esquerda; imagem + legenda no topo */
  .historia__text { max-width: none; text-align: left; margin-left: 0; margin-top: 0; }
  .historia__figure img { aspect-ratio: 16 / 11; }
  .historia__figure figcaption { max-width: none; }

  /* --- Produto --- */
  .produto__text { max-width: none; }
  .produto__cols { max-width: none; gap: 2rem; margin-top: 2.2rem; }
  .produto__callout { margin-top: 2rem; }   /* remove o vão da seta do desktop */
  .produto__notes p { margin-left: 0; }   /* sem sangria — o padding do mobile é menor que o gutter do desktop */
  .produto__arrow { display: none; }
  .produto__img {
    position: static;
    width: 100%;
    margin-top: 2rem;
    aspect-ratio: 16 / 10;
  }
  .produto__img img { object-position: center; }

  /* --- Mercado --- */
  .mercado__grid, .mercado__sources { max-width: none; align-self: auto; }

  /* --- Comparativo --- */
  .comparativo__text { max-width: none; margin-left: 0; }   /* cancela o recuo desktop */
  .comparativo__cols { max-width: none; }
  .comparativo__foot {
    display: block;      /* sem sangria nem "fit-content" — vira faixa de largura total */
    margin-top: 2.5rem;   /* reduz o vão fixo do desktop */
    margin-left: 0;
    max-width: none;
  }
  .comparativo__list li { white-space: normal; }
  .comparativo__img {
    position: static;
    width: 100%;
    margin-top: 2.2rem;
    aspect-ratio: 16 / 10;
  }

  /* --- Investir --- */
  .investir__grid { grid-template-columns: repeat(2, 1fr); }

  /* --- Rodapé --- */
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 2.2rem;
    padding: 2.8rem 2rem 2rem;
  }
  .site-footer__bottom { padding: 1.2rem 2rem 1.8rem; }
  /* Links do rodapé: área de toque confortável (≥44px) */
  .site-footer__col ul { gap: .15rem; }
  .site-footer__col a { display: inline-flex; align-items: center; min-height: 44px; padding: .3rem 0; }
  /* Tablet: recupera as 3 colunas do rodapé (não desperdiça a largura) */
  @media (min-width: 600px) {
    .site-footer__inner { grid-template-columns: 1fr auto auto; gap: 2.5rem 3rem; align-items: start; }
  }

  /* --- Botão flutuante: reposiciona para a base, largura total --- */
  .floating-cta {
    right: 1rem;
    left: 1rem;
    top: auto;
    bottom: 1rem;
    transform: none;
    justify-content: center;
    padding: .8rem 1.2rem;
    padding-bottom: calc(.8rem + env(safe-area-inset-bottom, 0px));
  }
  .floating-cta:hover { transform: translateY(-2px); }
  @media (prefers-reduced-motion: reduce) {
    .floating-cta:hover { transform: none; }
  }

  /* --- Conceito --- */
  .slide--conceito .slide__body { padding: 0; min-height: 60vh; }   /* dá altura real p/ os filhos absolutos preencherem */
  .conceito__panel { bottom: 2rem; max-width: calc(100% - 3rem); }
  .conceito__title { padding: .9rem 1.4rem; font-size: clamp(1.4rem, 5.5vw, 2rem); }
  .conceito__legend { padding: 0 1.4rem; }

  /* --- Contato --- */
  .contato { display: block; padding-right: 2rem; }
  .contato__text { max-width: none; margin-bottom: 2.5rem; }
  .lead-form { max-width: 32rem; margin-inline: auto; }   /* centraliza o form no tablet */
  /* Campos e botão com altura de toque confortável (também em tablets) */
  .field input, .field__prefix { min-height: 3rem; }
  .lead-form__actions .btn { min-height: 3rem; }
  /* Bullets: ícone alinhado à 1ª linha quando o texto quebra + hierarquia */
  .contato__bullets li { align-items: flex-start; font-size: clamp(1.15rem, 3.8vw, 1.4rem); }
  .contato__bullets img { margin-top: .3rem; }
}

/* ===========================================================================
   Timeline vertical (< 1024px) — alinhada ao reflow; evita corte dos selos 6/7
   entre 900 e 1023px
   =========================================================================== */
@media (max-width: 1023px) {
  /* Lista centralizada como bloco: badges alinhados numa coluna e o conjunto
     com margens iguais dos dois lados (width:fit-content + margin auto). */
  .steps { flex-direction: column; align-items: stretch; gap: 1.4rem; margin: 2.5rem auto 0; width: fit-content; max-width: 100%; }
  .step { flex-direction: row; align-items: center; gap: 1.2rem; text-align: left; }
  .step:not(:last-child)::after { display: none; }
  .step__badge { width: 5rem; height: 3.54rem; flex: 0 0 auto; }
  .step__badge b { font-size: 1.8rem; }
  .step__label { margin-top: 0; max-width: none; }
  /* Ícone do rosto: oculto no mobile, mesmo critério dos demais .deco */
  .passos__icon { display: none; }
}

/* ===========================================================================
   CELULAR (< 640px)
   =========================================================================== */
@media (max-width: 640px) {
  .slide__body { padding: 2.5rem 1.4rem; }

  .investir__grid,
  .produto__cols,
  .comparativo__cols,
  .mercado__grid { grid-template-columns: 1fr; }

  .comparativo__cols { gap: 1.75rem; }

  /* Diferença: sem margem de seta em coluna única (o gap dos cols já espaça) */
  .produto__callout { margin-top: 0; }

  /* Formulário compacto no celular */
  .lead-form { padding: 1.4rem 1.3rem; }
  /* Régua de etapas: mostra só os círculos numerados; rótulo só na etapa ativa */
  .lead-form__steps { flex-wrap: wrap; overflow: visible; gap: .5rem .7rem; }
  .fstep .fstep__txt { display: none; }
  .fstep.is-active .fstep__txt { display: inline; }
  /* Botão ocupa a largura no celular (a altura de toque já vem do bloco <1024) */
  .lead-form__actions .btn { width: 100%; }

  /* Remove quebras de linha fixas para fluir naturalmente em telas estreitas.
     Nos stat-cards, mantém o <br> só nos cards 2 e 4 (número curto "9 milhões"/
     "+7%" fica sozinho na 1ª linha, como no deck); remove nos cards 1 e 3. */
  .hero__title br, .hero__lead br, .split .body-lg br, .historia .body-md br,
  .produto__lead br, .produto__notes br, .produto__callout .body-md br,
  .mercado .h-display br, .stat-card:nth-child(1) br, .stat-card:nth-child(3) br,
  .contato__desc br, .passos .h-display br, .historia__figure figcaption br { display: none; }

  /* Evita palavra órfã na última linha das notas/callout (Diferença) */
  .produto__notes p, .produto__callout .body-md { text-wrap: pretty; }
}

/* ===========================================================================
   Dispositivos de toque (qualquer largura, ex.: iPad em paisagem = 1024px):
   garante área de toque confortável sem inflar o layout do desktop com mouse.
   =========================================================================== */
@media (pointer: coarse) {
  .field input, .field__prefix, .lead-form__actions .btn { min-height: 3rem; }
  .site-footer__col a { display: inline-flex; align-items: center; min-height: 44px; padding: .3rem 0; }
  .site-footer__col ul { gap: .15rem; }
}

/* ===========================================================================
   Telas muito largas (> 1440px): conteúdo centralizado, fundo preenche laterais
   =========================================================================== */
@media (min-width: 1441px) {
  .masthead,
  .slide__body { /* já limitados por --maxw e centralizados */ }
}