/* ==========================================================================
   ASSIS MANGUEIRAS — Responsividade
   Estratégia: o style.css define o layout amplo (desktop).
   Aqui adaptamos por max-width, do maior para o menor breakpoint.
   Pontos verificados: 1920, 1440, 1280, 1024, 768, 414, 390, 375, 320.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TELAS MUITO GRANDES (>= 1920px)
   Evita que o conteúdo fique perdido em monitores largos.
   -------------------------------------------------------------------------- */
@media (min-width: 1920px) {
  :root { --container: 1360px; }
  /* O hero mantém a tela cheia definida em style.css */
}

/* --------------------------------------------------------------------------
   NOTEBOOK (<= 1280px)
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   TABLET LANDSCAPE / NOTEBOOK PEQUENO (<= 1024px)
   O menu desktop dá lugar ao hamburger.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --header-h: 74px;
    --header-h-scrolled: 64px;
  }

  /* Troca de navegação */
  .nav { display: none; }
  .nav-toggle { display: flex; }

  /* Abaixo de 1024px o header fica só com logo + hamburger.
     Os CTAs (orçamento e WhatsApp) ficam dentro do menu mobile. */
  .header__actions .btn { padding-inline: 1.05rem; font-size: 0.875rem; }
  .header__actions .btn--desktop-only { display: none; }

  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  /* Foto da peça empilha */
  .photo-cta__inner { grid-template-columns: 1fr; }
  .photo-cta__visual { max-width: 520px; }

  /* O mapa já ocupa a largura total em qualquer tamanho de tela. */

  /* Fluxo peça → aplicação em 2 colunas */
  .flow__track { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-xl); }
  .flow__track::before { display: none; }

  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   TABLET PORTRAIT (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --section-y: clamp(3rem, 2rem + 4vw, 4rem);
  }

  h1 { font-size: clamp(1.85rem, 1.35rem + 2.4vw, 2.5rem); }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

  /* Duas colunas ainda funcionam bem para cards compactos */
  .grid--keep-2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }

  .hero {
    /* Continua ocupando a tela inteira: a faixa de marcas só aparece
       depois que o usuário começa a rolar.
       Com o hero enxuto (só título e CTAs), o conteúdo é centralizado
       verticalmente em vez de ficar colado no topo. */
    padding-block: clamp(2rem, 1.5rem + 2vw, 3rem) 5rem;
    align-items: center;
  }
  .hero__content { max-width: none; }

  /* Título: quebra entre palavras normalmente. Sem hifenização — só
     parte a palavra se ela sozinha não couber na linha. */
  .hero__title { overflow-wrap: break-word; hyphens: manual; }

  /* A foto vertical mostra a fachada inteira (nunca cortada), então a
     placa da loja acaba atrás da área de texto, que fica sempre
     centralizada verticalmente. Em vez de um véu uniforme, escurece
     mais a faixa central (onde o texto fica) e menos nas bordas —
     mantém a foto visível mas garante contraste no título. */
  .hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(15, 17, 18, 0.5) 0%,
      rgba(15, 17, 18, 0.88) 28%,
      rgba(15, 17, 18, 0.88) 72%,
      rgba(15, 17, 18, 0.5) 100%
    );
  }

  .hero__media { inset: 0; }
  .hero__media img { object-position: center top; }

  /* Hero centralizado no mobile: o conjunto mantém a mesma ordem e
     proporção do desktop, só com o espaçamento comprimido. */
  .hero__content--center { gap: clamp(1rem, 2.5vw, 1.5rem); }
  .hero__content--center .hero__title { max-width: 14ch; }
  .hero__subtitle { max-width: 38ch; }
  .hero__note { font-size: 0.7rem; letter-spacing: 0.12em; }
  .hero__note::before, .hero__note::after { width: 16px; }

  /* CTAs ocupam a largura para facilitar o toque */
  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    width: 100%;
  }
  .hero__actions .btn { width: 100%; }

  .cta-final__actions { flex-direction: column; align-items: stretch; }
  .cta-final__actions .btn { width: 100%; }

  /* Coluna lateral deixa de ser fixa e vai para baixo do conteúdo */
  .split { grid-template-columns: 1fr; }
  .split__aside { position: static; }

  /* Contato: card do Instagram empilha abaixo dos contatos */
  .location__inner--split { grid-template-columns: 1fr; }

  /* Serviços: o número vai para cima do texto */
  .service-block { grid-template-columns: 1fr; gap: var(--space-sm); }
  .service-block__index { font-size: 1.3rem; }

  .form__row { grid-template-columns: 1fr; }

  .section-head { margin-bottom: var(--space-xl); }

  .footer { padding-top: var(--space-2xl); }
  .footer__top { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer__brand { grid-column: auto; }
  .footer__bottom { flex-direction: column; align-items: flex-start; text-align: left; }
  /* Empilhado no mobile: o crédito fica logo abaixo do copyright */
  .footer__credit { margin-top: var(--space-xs); }

  .location__map { height: clamp(280px, 55vw, 380px); }

  /* Marquee mais rápido em telas pequenas para manter a sensação de movimento */
  .marquee__track { --marquee-duration: 28s; }
}

/* --------------------------------------------------------------------------
   SMARTPHONE (<= 560px)
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  :root { --header-h: 64px; --header-h-scrolled: 58px; }

  .header__logo img { height: 34px; max-width: 215px; }
  .header.is-scrolled .header__logo img { height: 30px; }

  .grid--keep-2 { grid-template-columns: 1fr; }

  .flow__track { grid-template-columns: 1fr; gap: var(--space-lg); }
  .flow__marker { width: 58px; height: 58px; }

  .counter { padding: var(--space-sm) 0; }

  /* WhatsApp flutuante um pouco menor */
  .wa-float__btn { width: 54px; height: 54px; }
  .wa-float__btn svg { width: 28px; height: 28px; }
  /* Tooltip atrapalha em telas pequenas */
  .wa-float__tip { display: none; }

  .specs__row { grid-template-columns: 1fr; gap: 0.15rem; }
  .specs__value { text-align: left; }

  .testimonial { padding: var(--space-md); }

  .btn--lg { padding: 0.9rem 1.4rem; font-size: var(--fs-sm); }
}

/* --------------------------------------------------------------------------
   TELAS PEQUENAS (<= 380px) — cobre 375px e 320px
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  :root { --gutter: 1rem; }

  /* Rótulo das marcas cabe em uma linha só em telas de 320px */
  .brands__label { letter-spacing: 0.1em; gap: var(--space-sm); }
  .brands__label::before,
  .brands__label::after { width: 18px; }

  .hero__title { font-size: clamp(1.7rem, 1.2rem + 4vw, 2.1rem); }
  .hero__tags { gap: 0.35rem 0.75rem; }
  .hero__tag { font-size: 0.68rem; }

  .btn { padding-inline: 1.1rem; font-size: 0.875rem; }

  .cat-card__body,
  .icon-card { padding: var(--space-md); }

  .footer__brand img { height: 54px; }
  .header__logo img { max-width: 190px; }

  .brand-logo { min-width: 112px; height: 42px; font-size: var(--fs-xs); }
}

/* --------------------------------------------------------------------------
   ALTURA REDUZIDA (paisagem no celular)
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  /* Tela muito baixa: o conteúdo define a altura, senão o texto não cabe. */
  .hero { min-height: auto; padding-block: var(--space-2xl); }
  .mobile-menu__nav a { padding: 0.7rem 0; font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   PONTEIRO GROSSO (toque) — desativa efeitos que dependem de hover
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .cat-card:hover,
  .product-card:hover,
  .icon-card:hover,
  .testimonial:hover {
    transform: none;
    box-shadow: none;
  }
  .cat-card:hover .cat-card__media img,
  .product-card:hover .product-card__media img { transform: none; }

  /* No toque, a faixa de cor da categoria fica sempre visível */
  .cat-card__media::after { transform: scaleX(1); }

  /* Marquee não pausa no toque */
  .marquee:hover .marquee__track { animation-play-state: running; }

  /* Estado ativo dá o retorno tátil no lugar do hover */
  .cat-card:active,
  .product-card:active { transform: scale(0.995); }
}

/* --------------------------------------------------------------------------
   IMPRESSÃO
   -------------------------------------------------------------------------- */
@media print {
  .header,
  .mobile-menu,
  .wa-float,
  .brands,
  .cta-final,
  .blueprint { display: none !important; }

  .page { padding-top: 0; }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .section { padding-block: 1rem; page-break-inside: avoid; }
  .hero { min-height: auto; background: #fff; color: #000; }
  .hero__overlay, .hero__media, .hero__grid { display: none; }
  .hero__title, .hero__text { color: #000; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .reveal { opacity: 1; transform: none; }
}