/* ═══════════════════════════════════════════════════
   RESPONSIVE — Luciane Tomazi
   Mobile-first, sem overflow horizontal
═══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   xl — 1280px+
══════════════════════════════════════════ */
@media (min-width: 1280px) {
  /* Hero — coluna central maior em telas grandes */
  .hero__inner {
    grid-template-columns: 1fr minmax(0, 680px) 1fr;
  }

  .hero__content {
    padding-right: var(--space-14);
  }

  .hero__side {
    padding-left: var(--space-14);
  }

  .sobre__grid {
    gap: var(--space-24);
  }

  .diferenciais__layout {
    gap: var(--space-24);
  }

  .contato__layout {
    gap: var(--space-24);
  }
}

/* ══════════════════════════════════════════
   lg — até 1024px
══════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Hero — coluna central proporcional */
  .hero__inner {
    grid-template-columns: 1fr minmax(0, 420px) 1fr;
  }

  .hero__content {
    padding-right: var(--space-6);
  }

  .hero__side {
    padding-left: var(--space-6);
  }

  /* Sobre */
  .sobre__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }

  .sobre__pill--1,
  .sobre__pill--2 {
    display: none;
  }

  /* Diferenciais */
  .diferenciais__layout {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .diferenciais__content {
    position: static;
  }

  /* Contato */
  .contato__layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* Depoimentos — 2 por vez */
  .depoimentos__track {
    grid-template-columns: repeat(4, calc(50% - var(--space-3)));
  }

  /* Footer */
  .footer__inner {
    flex-wrap: wrap;
    gap: var(--space-8);
  }

  .footer__nav ul {
    flex-wrap: wrap;
    gap: var(--space-4);
  }
}

/* ══════════════════════════════════════════
   md — até 768px (Tablet)
══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Previne overflow horizontal global */
  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  /* Container — padding mais generoso no mobile */
  .container {
    padding-inline: 1.25rem;
  }

  /* Seções */
  .section {
    padding-block: var(--space-20);
  }

  /* Navbar mobile — pill maior para caber a logo */
  .navbar {
    width: calc(100% - 24px);
    top: var(--space-3);
    height: 68px;
  }

  .navbar__inner {
    padding-inline: var(--space-4);
    gap: var(--space-3);
  }

  /* Logo menor no mobile para caber no pill */
  .navbar__logo-img {
    height: 44px;
  }

  .navbar__nav,
  .navbar__actions {
    display: none;
  }

  .hamburger {
    display: flex;
    margin-left: auto;
    flex-shrink: 0;
  }

  /* Hero — stack vertical: texto | foto | botões */
  .hero__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    padding-top: var(--space-10);
    padding-bottom: 0;
    text-align: center;
    align-items: start;
  }

  .hero__content { order: 1; }
  .hero__visual  { order: 2; }
  .hero__side    { order: 3; }

  .hero__content {
    align-items: center;
    padding-right: 0;
    padding-bottom: var(--space-8);
  }

  .hero__subtitle { max-width: 100%; }

  .hero__location { justify-content: center; }

  .hero__visual {
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
  }

  .hero__side {
    padding-left: 0;
    padding-bottom: var(--space-12);
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .hero__actions { flex-direction: column; }

  .hero__cta-main,
  .hero__side .btn--ghost {
    width: 100%;
    justify-content: center;
  }

  .hero__trust {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4) var(--space-6);
  }

  .trust-item {
    align-items: center;
    flex-direction: column;
    gap: 0;
  }

  /* Sobre */
  .sobre__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .sobre__photo-shell {
    max-width: 340px;
    margin-inline: auto;
  }

  /* Serviços — 1 coluna */
  .servicos__grid {
    grid-template-columns: 1fr;
  }

  /* Diferenciais — coluna única */
  .diferenciais__layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .diferenciais__content {
    position: static;
  }

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

  /* Instagram mobile — carrossel com setas */
  .insta-carousel-wrap {
    position: relative;
    padding: 0 24px;
  }

  .instagram-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--space-3);
    padding-bottom: var(--space-1);
  }

  .instagram-grid::-webkit-scrollbar { display: none; }

  .insta-tile {
    flex: 0 0 46% !important;
    scroll-snap-align: start;
    min-width: 0;
  }

  .insta-arrow {
    display: flex !important;
  }

  /* ── CONTATO — fix completo mobile ── */
  .section--contato {
    overflow: hidden;
  }

  .contato__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    width: 100%;
    max-width: 100%;
  }

  .contato__content {
    width: 100%;
  }

  .contato__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
  }

  .contato-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: var(--space-4);
    transform: none !important; /* sem hover slide no mobile */
  }

  .contato-card--primary {
    width: 100%;
  }

  .contato-card__value {
    white-space: normal;
    word-break: break-word;
    font-size: var(--text-sm);
  }

  .contato-card--primary .contato-card__value {
    font-size: var(--text-base);
    white-space: normal;
  }

  /* Footer */
  .footer__inner {
    flex-direction: column;
    gap: var(--space-6);
  }

  .footer__nav ul {
    flex-direction: column;
    gap: var(--space-3);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }
}

/* ══════════════════════════════════════════
   sm — até 480px (Mobile S)
══════════════════════════════════════════ */
@media (max-width: 480px) {
  :root {
    --container-px: 1.25rem;
  }

  /* Seções */
  .section {
    padding-block: var(--space-16);
  }

  /* Hero */
  .hero__inner {
    padding-block: var(--space-12) var(--space-10);
  }

  .hero__title {
    font-size: clamp(2.25rem, 10vw, 3rem);
  }

  .hero__visual {
    max-width: 280px;
  }

  /* Typo */
  .section-title {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }

  /* Botões */
  .btn--lg {
    font-size: var(--text-sm);
    padding: 0.75rem var(--space-6);
  }

  /* Serviços */
  .servico-card {
    padding: var(--space-6);
  }

  .servico-card__num {
    font-size: var(--text-3xl);
    top: var(--space-4);
    right: var(--space-4);
  }

  /* Depoimentos */
  .depo-card {
    padding: var(--space-6);
  }

  /* Contato card value texto */
  .contato-card__value {
    font-size: var(--text-sm);
  }

  .contato-card--primary .contato-card__value {
    font-size: var(--text-base);
  }

  /* WhatsApp float */
  .whatsapp-float {
    bottom: var(--space-4);
    right: var(--space-4);
    width: 50px;
    height: 50px;
  }

  /* Back to top */
  .back-to-top {
    bottom: calc(var(--space-4) + 58px);
    right: var(--space-4);
  }
}

/* ══════════════════════════════════════════
   xs — até 360px (Mobile XS)
══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Menu mobile — sem animação de entrada nos links (evita bug) */
  .mobile-nav-link {
    opacity: 1 !important;
    transform: none !important;
    transition: color var(--duration-base) var(--ease-out) !important;
  }

  .mobile-menu__cta {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Menu visível imediatamente ao abrir */
  .mobile-menu {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════
   xs — até 360px (Mobile XS)
══════════════════════════════════════════ */
@media (max-width: 360px) {
  .hero__visual {
    max-width: 240px;
  }

  .mobile-nav-link {
    font-size: var(--text-2xl);
  }
}

/* ══════════════════════════════════════════
   CURSOR — desabilita em touch
══════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  #cursor {
    display: none;
  }

  body.custom-cursor,
  body.custom-cursor * {
    cursor: auto !important;
  }
}

/* ══════════════════════════════════════════
   PERFORMANCE MOBILE
   Remove efeitos pesados em dispositivos
   com pouca GPU / RAM
══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Desativa backdrop-filter (GPU intensivo) no mobile */
  .navbar,
  .navbar.scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Navbar mobile — fundo sólido em vez de glass */
  .navbar.scrolled {
    background: rgba(255, 255, 255, 0.97) !important;
  }

  /* Para float idle dos cards no mobile — economiza bateria */
  .servico-card,
  .dif-card,
  .hero__stats,
  .hero__mode-card,
  .hero__social-proof {
    animation: none !important;
  }

  /* Remove grain overlay no mobile (economiza compositing layer) */
  .grain-overlay {
    display: none;
  }

  /* Remove tilt 3D no mobile (já desabilitado no JS via isTouch,
     mas garantimos via CSS também) */
  .tilt-card {
    transform: none !important;
  }

  /* Simplifica sombras no mobile */
  .servico-card,
  .dif-card,
  .depo-card {
    box-shadow: 0 2px 12px rgba(28, 25, 23, 0.06);
  }

  /* Hero particles — ativo no mobile (pétalas leves) */
  #hero-particles {
    display: block;
  }

  /* Reduz padding das seções no mobile */
  .section {
    padding-block: var(--space-16);
  }

  /* Centralizar badges PRESENCIAL / ONLINE no mobile */
  .hero__mode-card-header {
    justify-content: center;
  }

  /* Ícone do servico-card — corrigir alinhamento torto */
  .servico-card__icon {
    transform: none !important;
    animation: none !important;
  }
}

/* ══════════════════════════════════════════
   CONTENT-VISIBILITY — lazy rendering
   Só seções abaixo da dobra
══════════════════════════════════════════ */
@media (min-width: 769px) {
  .section--sobre,
  .section--servicos,
  .section--diferenciais,
  .section--depoimentos,
  .section--instagram,
  .section--contato {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
  }
}

/* ══════════════════════════════════════════
   PRINT
══════════════════════════════════════════ */
@media print {
  .navbar,
  .grain-overlay,
  .marquee-section,
  #cursor,
  .whatsapp-float,
  .back-to-top,
  .hero__scroll-hint {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .hero {
    min-height: auto;
    padding-top: 0;
  }

  .section {
    padding-block: 2rem;
  }
}