/* ============================================================
   AvaliaUp — Responsive layer  v3
   Tiers alinhados ao guia padrão de web:
     Desktop     ≥ 1024px  (referência 1440px)
     Tablet      768–1023px (referência 768×1024)
     Mobile      ≤ 767px   (referência 360×800)
     Small phone ≤ 380px
   ============================================================ */

/* prevent any horizontal scroll on touch devices */
html, body { max-width: 100%; overflow-x: clip; }
/* contain decorative glows + pre-reveal transforms so they never create scroll */
.section, .hero, .product, .footer, .hero-stage, main { overflow-x: clip; }

/* ============================================================
   DESKTOP ≥ 1024px — melhor aproveitamento do espaço a 1440px
   ============================================================ */
@media (min-width: 1024px) {
  :root { --maxw: 1260px; }
}
@media (min-width: 1440px) {
  :root { --maxw: 1320px; --pad: clamp(48px, 5vw, 80px); }
  .hero h1 { font-size: clamp(62px, 5.2vw, 78px); }
  .sec-head h2 { font-size: clamp(44px, 3.6vw, 58px); }
  .hero-stage { height: 680px; }
}

/* ---------------- MOBILE NAV MENU ---------------- */
.nav-burger {
  display: none;
  width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.03);
  color: var(--tx);
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.nav-burger:hover { background: rgba(255,255,255,0.07); }
.nav-burger span {
  position: relative; display: block; width: 19px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .28s ease, opacity .2s ease;
}
.nav-burger span::before, .nav-burger span::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .28s ease, opacity .2s ease;
}
.nav-burger span::before { top: -6px; }
.nav-burger span::after  { top: 6px; }
.nav-burger.open span { background: transparent; }
.nav-burger.open span::before { transform: translateY(6px) rotate(45deg); }
.nav-burger.open span::after  { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; left: 0; right: 0; top: 0; z-index: 55;
  padding: 88px var(--pad) 26px;
  background: rgba(6,8,7,0.96);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-105%);
  transition: transform .42s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column; gap: 4px;
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a.mm-link {
  font-family: var(--fh); font-weight: 700; font-size: 22px; letter-spacing: -0.02em;
  color: var(--tx); padding: 14px 0; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.mobile-menu a.mm-link:last-of-type { border-bottom: 0; }
.mobile-menu a.mm-link .chev { color: var(--tx-dim); }
.mobile-menu .mm-cta { margin-top: 18px; }
.menu-scrim {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.menu-scrim.show { opacity: 1; pointer-events: auto; }

/* Burger visível em tablet + mobile (≤1023px) */
@media (max-width: 1023px) {
  .nav-burger { display: inline-flex; margin-left: auto; }
  .nav-links   { display: none; }
}
/* Ocultar CTA da nav assim que o menu vira hambúrguer (≤1023px) */
@media (max-width: 1023px) {
  .nav-cta-desktop { display: none; }
}

/* ============================================================
   HERO STAGE — tablet e mobile:
   Mantém layout flutuante mas escala cartão + notificações.
   ============================================================ */
@media (max-width: 1023px) {
  .notif-a, .notif-b, .notif-c { display: block !important; }
  .hero-stage { height: clamp(300px, 60vw, 480px); margin-top: 40px; }
  .hero-stage .floor-glow { width: 90%; }

  .notif-a .review-notif { transform: scale(0.75); transform-origin: top right; }
  .notif-b .review-notif { transform: scale(0.7);  transform-origin: top left; }
  .notif-c .review-notif { transform: scale(0.75); transform-origin: bottom right; }
}

@media (max-width: 767px) {
  .notif-a .review-notif { transform: scale(0.62); transform-origin: top right; }
  .notif-b .review-notif { transform: scale(0.58); transform-origin: top left; }
  .notif-c .review-notif { transform: scale(0.62); transform-origin: bottom right; }

  .notif-a { right: 0 !important; top: 6% !important; }
  .notif-b { left: 1% !important; top: 50% !important; }
  .notif-c { right: 2% !important; bottom: 6% !important; }

  .hero-card-pos .nfc-card { width: clamp(196px, 52vw, 260px); height: auto; aspect-ratio: 340 / 214; }
}

@media (max-width: 400px) {
  .notif-a .review-notif { transform: scale(0.54); }
  .notif-b .review-notif { transform: scale(0.50); }
  .notif-c .review-notif { transform: scale(0.54); }
  .hero-card-pos .nfc-card { width: clamp(168px, 50vw, 210px); }
}

/* ============================================================
   TABLET  ·  768 – 1023px  (referência 768×1024)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --pad: clamp(28px, 4.5vw, 48px); }

  .hero h1 { font-size: clamp(42px, 6.2vw, 58px); }
  .hero-sub { font-size: clamp(16px, 2.2vw, 19px); }

  .ben-grid { grid-template-columns: repeat(2, 1fr); }
  .kits     { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .kit      { padding: 22px 18px; }
  .kit .price { font-size: 36px; }
  .stats    { grid-template-columns: repeat(3, 1fr); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }

  .product-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .premium2-cols { grid-template-columns: 1fr 1fr; }

  .solu-grid { grid-template-columns: 1fr 1fr; }
  .demo-stage { height: 560px; }
}

/* Tablet landscape — aproveita largura extra */
@media (min-width: 900px) and (max-width: 1023px) {
  .hero-stage { height: 460px; }
}

/* ============================================================
   MOBILE  ·  ≤ 767px  (referência 360×800)
   ============================================================ */
@media (max-width: 767px) {
  :root { --pad: clamp(18px, 5.4vw, 28px); }

  /* fluid base type */
  body { font-size: clamp(15px, 4vw, 17px); }

  /* rhythm */
  .section        { padding-block: clamp(46px, 11vw, 66px); }
  .section--tight { padding-block: clamp(32px, 7vw, 46px); }

  /* nav */
  .nav-inner { height: clamp(60px, 15vw, 68px); gap: 14px; }
  .brand { font-size: clamp(17px, 4.8vw, 20px); }

  /* hero */
  .hero { padding-top: clamp(88px, 22vw, 104px); }
  .hero h1 { font-size: clamp(28px, 8vw, 42px); letter-spacing: -0.03em; line-height: 1.05; }
  .hero-sub { font-size: clamp(14px, 3.7vw, 16px); line-height: 1.52; margin-top: clamp(14px, 4vw, 20px); max-width: 34ch; margin-left: auto; margin-right: auto; }
  .hero-cta { margin-top: clamp(20px, 5.5vw, 28px); gap: 10px; }
  .hero-cta .btn { width: 100%; }
  .hero-trust { font-size: clamp(11px, 3.2vw, 13px); flex-wrap: wrap; justify-content: center; text-align: center; }
  .hero-stage { height: clamp(290px, 74vw, 380px); margin-top: 36px; }

  /* grids → coluna única */
  .ben-grid, .kits, .stats, .testi-grid,
  .product-grid, .premium2-cols,
  .solu-grid, .folder-grid { grid-template-columns: 1fr; }
  .stats { gap: clamp(24px, 6.5vw, 34px); }

  /* headings */
  .sec-head h2 { font-size: clamp(24px, 6.6vw, 36px); line-height: 1.08; }
  .final h2    { font-size: clamp(26px, 7.2vw, 38px); line-height: 1.07; }
  .lead  { font-size: clamp(14.5px, 3.8vw, 17px); line-height: 1.6; }
  .eyebrow { font-size: clamp(10px, 2.9vw, 12px); letter-spacing: 0.15em; }

  /* abertura */
  .abertura { font-size: clamp(21px, 6vw, 31px); line-height: 1.15; max-width: none; }

  /* demo */
  .demo-stage { height: 620px; aspect-ratio: auto; padding-top: 36px; }
  .demo-phone { width: 178px; height: 362px; }
  .demo-hand { transform: translate(-50%, 406px); }
  .demo-hand.up { transform: translate(-50%, 344px); }
  .demo-hand.away { transform: translate(-50%, 700px); }
  .dh-scale { transform: scale(0.62); }
  .demo-tapwave { bottom: 246px; }
  .demo-stage .demo-btn { bottom: 20px; z-index: 7; max-width: 86%; }

  /* cards */
  .ben { padding: clamp(18px, 5.2vw, 26px); }
  .ben h4 { font-size: clamp(16px, 4.5vw, 19px); }

  /* kits */
  .kit { padding: clamp(20px, 5.5vw, 28px); }
  .kit .price { font-size: clamp(30px, 9vw, 40px); }
  .kit-count { width: 52px; height: 52px; }
  .kit-ribbon { font-size: 10px; }

  /* premium cols border */
  .p2-col:first-child { border-right: 0; border-bottom: 1px solid var(--line); }

  /* urgency */
  .countdown { gap: clamp(6px, 2vw, 10px); }
  .cd-cell { min-width: 0; flex: 1; padding: clamp(10px, 3vw, 14px) 6px; }
  .cd-cell .n { font-size: clamp(22px, 7vw, 30px); }

  /* faq */
  .acc-q { padding: clamp(16px, 4.8vw, 22px) 0; gap: 12px; }
  .acc-q .q { font-size: clamp(14.5px, 4vw, 17px); }

  /* guarantee */
  .guarantee-badge { width: clamp(68px, 19vw, 80px); height: clamp(68px, 19vw, 80px); border-radius: 22px; }

  /* footer */
  .footer .legal { flex-direction: column; gap: 8px; }
  .footer .foot-legal-links { gap: 8px 18px; }

  /* buttons */
  .btn    { padding: clamp(13px, 3.8vw, 16px) clamp(20px, 5.5vw, 26px); font-size: clamp(14px, 3.9vw, 16px); }
  .btn-lg { padding: clamp(14px, 4.2vw, 17px) clamp(22px, 5.8vw, 28px); font-size: clamp(14.5px, 4vw, 16px); }
  .final .hero-cta .btn { width: 100%; }

  /* product */
  .flip-card { width: min(360px, 86vw); }
  .folder-grid { grid-template-columns: 1fr; }
  .ff-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SMALL MOBILE  ·  ≤ 380px  (cobertura da referência 360px)
   ============================================================ */
@media (max-width: 380px) {
  :root { --pad: 16px; }

  .hero h1 { font-size: clamp(26px, 8vw, 32px); }
  .hero-stage { height: clamp(270px, 78vw, 310px); }
  .logos { gap: 14px 20px; }
  .logos .lg { font-size: clamp(13px, 4vw, 15px); }
  .stat .num, .stat .num > span { font-size: clamp(40px, 13vw, 54px); }
  .kit .price { font-size: clamp(28px, 9vw, 36px); }
  .cd-cell .n { font-size: clamp(20px, 7vw, 26px); }
  .mobile-menu a.mm-link { font-size: 19px; }

  /* demo — mais compacto no 360px */
  .demo-stage { height: 580px; }
  .demo-phone { width: 162px; height: 330px; }
  .demo-hand { transform: translate(-50%, 374px); }
  .demo-hand.up { transform: translate(-50%, 312px); }
  .demo-tapwave { bottom: 218px; }
}

/* ============================================================
   Touch / coarse-pointer niceties
   ============================================================ */
@media (hover: none) {
  .ben:hover, .kit:hover, .pain-item:hover { transform: none; }
  .nav-links a { padding: 6px 0; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nfc-float, .notif-a, .notif-b, .notif-c { animation: none !important; }
  .reveal { transition: none !important; }
  html { scroll-behavior: auto; }
}