/* ═══════════════════════════════════════════════════════
   MOBILE.CSS — Responsividade Completa
   Machado Plataformas
   ─────────────────────────────────────────────────────
   Breakpoints:
     xs  ≤ 479px  — iPhones pequenos, Android compactos
     sm  ≤ 767px  — phones em geral
     md  ≤ 1023px — tablets, landscape phones
   ─────────────────────────────────────────────────────
   Carregado após todos os componentes — sem !important
   salvo para substituir inline-styles de GSAP/JS
═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   GLOBAL
───────────────────────────────────────────────────── */

html,
body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  /* Garante que nenhuma seção extravase lateralmente */
  .section,
  main > * {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* ─────────────────────────────────────────────────────
   NAVBAR
───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Cards empilhados no mobile criam 1400px+ de altura — ocultar abaixo de tablet */
  .navbar-panel__cards {
    display: none;
  }
}

@media (max-width: 479px) {
  .navbar-inner {
    min-height: 3.75rem;
    padding: 0.7rem var(--space-4);
  }

  .navbar-logo img {
    height: 1.7rem;
  }

  .navbar-panel__inner {
    padding: 1.25rem 1.25rem 1.75rem;
    gap: 1.5rem;
  }

  .navbar-panel__nav a {
    font-size: 2.3rem;
    line-height: 1.14;
  }

  .nav-indicator {
    left: -1.2rem;
    width: 0.72rem;
    height: 0.72rem;
  }
}

/* ─────────────────────────────────────────────────────
   HERO — Prioridade máxima
───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .hero {
    min-height: auto;
  }

  .hero-inner {
    min-height: auto;
    padding-block: var(--space-6) 0;
    gap: var(--space-8);
  }

  .hero-content {
    align-content: start;
    align-self: start;
    padding-bottom: 0;
  }

  .hero-title {
    font-size: clamp(2.35rem, 11.5vw, 3.75rem);
    gap: 0.5rem;
    line-height: 0.84;
  }

  .hero-subtitle,
  .hero-kicker {
    display: none;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-5);
  }

  .hero-cta-primary {
    min-width: unset;
    width: 100%;
    max-width: 22rem;
  }

  .hero-cta-primary .btn__label {
    flex: 1;
    text-align: center;
  }

  .hero-link {
    font-size: 1rem;
  }

  .hero-media {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    pointer-events: none;
    transform: none;
    z-index: 5;
  }

  .hero-stage {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 720 / 649;
    overflow: hidden;
  }

  .hero-stage::before {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.3) 0%,
      transparent 15%
    );
    opacity: 1;
    mix-blend-mode: normal;
    transition: none;
    z-index: 4;
  }

  .hero-stage:hover::before {
    opacity: 1;
  }

  .hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    transform: none;
    opacity: 1;
  }

  .hero-scroll {
    display: none;
  }
}

@media (max-width: 479px) {
  .hero-title {
    font-size: clamp(2rem, 10.5vw, 3rem);
    gap: 0.42rem;
  }

  .hero-subtitle {
    font-size: 0.9rem;
  }

  .hero-cta-primary,
  .hero-ctas .btn--split {
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 359px) {
  .hero-inner {
    padding-block: var(--space-4) 0;
  }

  .hero-content {
    padding-bottom: var(--space-6);
  }

  .hero-ctas {
    margin-top: var(--space-3);
  }
}

/* ─────────────────────────────────────────────────────
   SOBRE — Spec Panel (home, dark industrial)
   Scoped dentro de .sobre-spec para não colidir com
   a página sobre.html que usa .sobre-unified
───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .sobre-spec {
    padding: var(--space-8) var(--space-5);
    gap: var(--space-5);
  }

  /* Título "Feito Aqui." — reduzido para caber em 375px */
  .sobre-spec .sobre-title {
    font-size: clamp(2.5rem, 8.5vw, 3.5rem);
    line-height: 0.9;
  }

  .sobre-spec .sobre-subtitle {
    font-size: var(--text-sm);
    max-width: none;
  }

  .sobre-kpi {
    padding: var(--space-4);
  }

  .sobre-kpi--hero {
    padding-block: var(--space-5);
  }

  .sobre-kpi__val {
    font-size: clamp(var(--text-2xl), 5.5vw, var(--text-3xl));
  }

  .sobre-kpi--hero .sobre-kpi__val {
    font-size: clamp(var(--text-3xl), 7vw, var(--text-4xl));
  }

  .sobre-kpi__key {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
  }

  .sobre-spec__footer {
    padding-top: var(--space-5);
    gap: var(--space-4);
  }

  .sobre-spec__statement {
    font-size: 0.68rem;
  }

  /* Vídeo/mídia: altura menor no mobile */
  .sobre-media {
    min-height: 52svh;
  }

  .sobre-yt__play::before,
  .sobre-yt__play::after {
    width: 72px;
    height: 72px;
  }
}

@media (max-width: 479px) {
  .sobre-spec .sobre-title {
    font-size: clamp(2.1rem, 9vw, 2.8rem);
  }
}

/* ─────────────────────────────────────────────────────
   SOBRE — Página sobre.html (história + localização)
   Classes inline do <style> block na página
───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .sobre-unified {
    padding-block: clamp(2.5rem, 7vw, 5rem);
  }

  /* Coordenadas decorativas: supérfluas em telas estreitas */
  .sobre-coords {
    display: none;
  }

  .sobre-unified .sobre-title {
    font-size: clamp(1.65rem, 7vw, 2.5rem);
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  }

  .sobre-rule {
    margin-block: clamp(1.5rem, 5vw, 3rem);
  }

  .sobre-loc {
    gap: var(--space-6);
  }

  .sobre-loc__title {
    font-size: clamp(1.25rem, 5vw, 1.9rem);
    margin-bottom: var(--space-5);
  }

  /* Mapa: reduzir altura mínima em mobile para economizar espaço vertical */
  .sobre-map-wrap,
  #sobre-map {
    height: clamp(240px, 55vw, 340px);
  }

  .sobre-texto__intro {
    font-size: 1rem;
  }
}

@media (max-width: 479px) {
  .sobre-head {
    flex-direction: column;
    gap: var(--space-2);
  }

  .sobre-stat {
    padding: var(--space-3) var(--space-4);
  }

  .sobre-stat__num {
    font-size: clamp(1.45rem, 6vw, 2rem);
  }
}

/* ─────────────────────────────────────────────────────
   SOCIAL PROOF
───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .social-proof-media {
    aspect-ratio: 3 / 2;
  }

  .social-proof-stats {
    padding: var(--space-6) var(--space-5);
  }

  .social-proof-stat {
    padding-block: var(--space-4);
  }

  .social-proof-stat__number {
    font-size: clamp(var(--text-3xl), 11vw, var(--text-4xl));
  }
}

/* ─────────────────────────────────────────────────────
   DIFERENCIAIS — fixes críticos de overflow
───────────────────────────────────────────────────── */

/* Tablet + mobile: corrige dois problemas:
   1. white-space: nowrap no título quebra layout
   2. translateX(40px) no step ativo causa overflow horizontal */
@media (max-width: 1023px) {
  .diferenciais-title {
    white-space: normal;
    font-size: clamp(var(--text-3xl), 6.5vw, var(--text-4xl));
    line-height: 1;
  }

  /* Indicador depende de padding-left: 32px (desktop only) */
  .diferenciais-indicator {
    display: none;
  }

  /* Sem deslocamento horizontal — vai causar overflow em telas estreitas */
  .diferencial-step {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-normal) ease;
  }

  .diferencial-step.is-active {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 767px) {
  .diferenciais-layout {
    gap: var(--space-8);
  }

  .diferenciais-header {
    margin-bottom: var(--space-5);
  }

  .diferenciais-timeline {
    gap: var(--space-6);
    padding-left: 0;
  }

  .diferencial-step {
    grid-template-columns: 1.8rem minmax(0, 1fr);
    column-gap: var(--space-3);
    max-width: none;
  }

  .diferencial-step__title {
    font-size: clamp(var(--text-lg), 4vw, var(--text-2xl));
    line-height: 1.1;
  }

  .diferencial-step__chips {
    font-size: 0.6rem;
  }

  .diferenciais-visual__sticky {
    min-height: clamp(13rem, 46vw, 22rem);
  }
}

/* ─────────────────────────────────────────────────────
   PRODUTOS
   NOTA: overrides de .produto-figure e .produto-figure
   picture/img foram movidos para produtos.css (ao final
   do arquivo), pois precisam vir APÓS as regras base
   para que o cascade funcione corretamente no bundle.
───────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .produtos-left {
    padding: var(--space-5) var(--space-4) var(--space-6);
  }

  .produtos-rail {
    gap: var(--space-1) var(--space-4);
  }

  .produtos-rail__title {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }

  .produtos-copy {
    padding-top: var(--space-4);
    gap: var(--space-3);
    align-content: start;
  }

  .produtos-line-name {
    font-size: clamp(var(--text-3xl), 8vw, var(--text-4xl));
    line-height: 0.92;
  }

  .produto-panel__copy {
    padding: var(--space-4) var(--space-4) var(--space-8);
    gap: var(--space-3);
  }

  .produto-panel__desc {
    font-size: var(--text-sm);
    line-height: 1.65;
  }

  .produto-panel__kicker {
    font-size: 0.7rem;
  }
}

@media (max-width: 479px) {
  .produtos-line-name {
    font-size: clamp(var(--text-2xl), 8vw, var(--text-3xl));
  }

  .produto-panel__copy {
    padding: var(--space-4) var(--space-4) var(--space-6);
  }
}

/* ─────────────────────────────────────────────────────
   CTA INTERMEDIÁRIO
───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .cta-mid {
    padding-block: var(--space-10);
  }

  .cta-mid-content {
    padding: var(--space-5);
    gap: var(--space-5);
  }

  .cta-mid__headline {
    font-size: clamp(var(--text-2xl), 7.5vw, var(--text-3xl));
    line-height: 1.08;
  }

  .cta-mid__sub {
    font-size: var(--text-sm);
  }

  .cta-mid__btns {
    max-width: none;
  }
}

/* ─────────────────────────────────────────────────────
   FINANCIAMENTO
───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .financiamento-panel__title {
    font-size: var(--text-2xl);
  }

  .financiamento-panel__body {
    padding: var(--space-5);
  }

  .financiamento-grid {
    margin-top: var(--space-5);
  }
}

/* ─────────────────────────────────────────────────────
   DEPOIMENTOS
───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .depoimento-card {
    min-height: unset;
    padding: var(--space-5);
    gap: var(--space-5);
  }

  .depoimento-card__text {
    font-size: var(--text-base);
    line-height: 1.6;
  }

  .depoimento-card::after {
    font-size: 5rem;
    bottom: var(--space-3);
    right: var(--space-4);
  }

  .depoimento-card__stars svg {
    width: 12px;
    height: 12px;
  }

  /* Texto descritivo do header: economizar espaço */
  .depoimentos-header__text {
    display: none;
  }

  .depoimentos-trust__item strong {
    font-size: var(--text-xl);
  }
}

/* ─────────────────────────────────────────────────────
   SECTION HEADERS — layout.css
───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Horizon Bold a 3rem em 390px → caracteres cortados pelo overflow:hidden
     pai (.section). Reduzir + overflow:visible garante texto visível */
  .section-title {
    font-size: clamp(1.65rem, 6.5vw, 2.35rem);
    overflow: visible;
    word-break: break-word;
  }

  .section-heading__title {
    font-size: clamp(var(--text-2xl), 6.5vw, var(--text-4xl));
    line-height: 1.06;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .section-heading__subtitle {
    font-size: var(--text-sm);
  }

  .section-header--split {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .section-header {
    margin-bottom: var(--space-8);
  }
}

/* ─────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .footer {
    padding-top: var(--space-12);
    min-height: unset;
  }

  .footer-grid {
    gap: var(--space-8);
    padding-bottom: var(--space-8);
    min-height: unset;
  }

  .footer-tagline {
    font-size: var(--text-base);
    line-height: 1.5;
  }

  .footer-cta {
    width: 100%;
    padding-inline: var(--space-4);
  }

  .footer-col--brand {
    max-width: none;
  }

  .footer-col--contact {
    max-width: none;
  }

  .footer-bottom {
    padding-top: var(--space-5);
  }

  /* Watermark: ajustado para não causar scroll horizontal */
  .footer-headline {
    font-size: clamp(3.5rem, 24vw, 7rem);
  }
}

/* ─────────────────────────────────────────────────────
   SUBPAGES — page-hero, page-section, sec-*, kpi
───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .page-hero {
    padding-top: calc(var(--navbar-height) + var(--space-5));
    padding-bottom: var(--space-10);
  }

  /* section-md = clamp(5rem, 9vw, 10rem) → mínimo 80px: muito em mobile */
  .page-section {
    padding-block: clamp(3.5rem, 8vw, 6rem);
  }

  .page-section--dark,
  .page-section--mid,
  .page-section--surface {
    padding-block: clamp(3.5rem, 8vw, 6rem);
  }

  .sec-header {
    margin-bottom: var(--space-8);
    gap: var(--space-3);
  }

  .sec-title {
    font-size: clamp(var(--text-2xl), 6vw, var(--text-4xl));
    line-height: 1;
  }

  .sec-sub {
    font-size: var(--text-sm);
    max-width: none;
  }

  .kpi-cell {
    padding: var(--space-5) var(--space-4);
  }

  .kpi-cell__val {
    font-size: clamp(var(--text-2xl), 5.5vw, var(--text-4xl));
  }

  .page-cta {
    padding-block: clamp(3.5rem, 8vw, 6rem);
  }

  .page-cta__title {
    font-size: clamp(var(--text-3xl), 7vw, var(--text-5xl));
    line-height: 0.92;
    margin-bottom: var(--space-8);
  }
}

@media (max-width: 479px) {
  .page-hero__title {
    font-size: clamp(1.6rem, 8.5vw, 2.5rem);
    line-height: 0.92;
  }

  .sec-title {
    font-size: clamp(var(--text-xl), 6.5vw, var(--text-3xl));
  }
}

/* ─────────────────────────────────────────────────────
   LOCALIZAÇÃO (MapLibre section — sobre.html / index)
───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .localizacao {
    padding-block: clamp(3.5rem, 8vw, 6rem);
  }

  .localizacao__grid {
    gap: var(--space-6);
  }

  .localizacao__title {
    font-size: clamp(1.85rem, 6.5vw, 3rem);
    line-height: 0.95;
  }

  .localizacao__text {
    max-width: none;
  }

  .localizacao__address-row {
    grid-template-columns: 4.5rem 1fr;
  }

  .localizacao__actions {
    flex-direction: column;
  }

  .localizacao__actions .btn--split {
    width: 100%;
  }

  .localizacao__actions .btn--split .btn__label {
    flex: 1;
    text-align: center;
  }
}

/* ─────────────────────────────────────────────────────
   CLIENTES — página clientes.html (galeria + depoimentos)
───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* var(--section-md) = clamp(5rem,9vw,10rem) → mínimo 80px por lado: muito em mobile */
  .em-acao {
    padding-top: clamp(3.5rem, 8vw, 5.5rem);
    padding-bottom: clamp(3.5rem, 8vw, 5.5rem);
  }

  /* Subtítulo fica à direita no desktop: colidem em coluna única */
  .entregas__subtitle {
    text-align: left;
    max-width: none;
  }

  .entregas__header {
    gap: var(--space-4);
  }
}

/* ─────────────────────────────────────────────────────
   WHATSAPP FLOAT
───────────────────────────────────────────────────── */

@media (max-width: 479px) {
  .whatsapp-float {
    bottom: var(--space-3);
    right: var(--space-3);
  }
}

/* ─────────────────────────────────────────────────────
   GLOBAL TOUCH — interações e acessibilidade
───────────────────────────────────────────────────── */

@media (max-width: 767px) {
  /* Área mínima de toque de 44px para botões split */
  .btn--split .btn__label,
  .btn--split .btn__plus {
    min-height: 3rem;
  }

  /* Links no footer: área de toque maior */
  .footer-links a,
  .footer-address a {
    padding-block: var(--space-1);
  }

  /* Previne zoom automático em inputs no iOS (necessita ≥ 16px) */
  input,
  textarea,
  select {
    font-size: max(1rem, 16px);
  }

  /* Elimina delay de 300ms em tap no iOS < 13 */
  a,
  button,
  [role="button"] {
    touch-action: manipulation;
  }
}