/*
 * responsive-site.css — Landing Page Morpheus
 * Responsividade fluida: 320px → 4K
 * v2.0 — Mobile first, experiência quase-desktop no celular
 */

/* ── Variáveis fluidas ──────────────────────────────────────── */
:root {
  --fsize-hero:    clamp(30px, 5.5vw, 68px);
  --fsize-h2:      clamp(24px, 3.8vw, 48px);
  --fsize-h3:      clamp(17px, 2vw, 26px);
  --fsize-body:    clamp(14px, 1vw, 17px);
  --fsize-sm:      clamp(12px, 0.8vw, 14px);
  --fsize-badge:   clamp(11px, 0.7vw, 13px);
  --fsize-price:   clamp(36px, 4vw, 54px);
  --sec-pad:       clamp(52px, 8vw, 120px);
  --ctn-pad:       clamp(18px, 3vw, 40px);
  --gap-cards:     clamp(12px, 1.5vw, 24px);
  --radius-card:   clamp(14px, 1.2vw, 20px);
}

/* ── Container fluido ───────────────────────────────────────── */
.ctn {
  padding-left: var(--ctn-pad);
  padding-right: var(--ctn-pad);
}

/* ── Seções fluidas ─────────────────────────────────────────── */
.sec  { padding: var(--sec-pad) 0; }
.cta  { padding: var(--sec-pad) 0; }

/* ── Hero ───────────────────────────────────────────────────── */
.h-t      { font-size: var(--fsize-hero); }
.h-sub    { font-size: clamp(15px, 1.2vw, 19px); }
.sh-t     { font-size: var(--fsize-h2); }
.cta-t    { font-size: clamp(30px, 4.5vw, 56px); }
.cta-s    { font-size: clamp(15px, 1.1vw, 19px); }

/* ── Pricing ────────────────────────────────────────────────── */
.pa { font-size: var(--fsize-price); }

/* ── Features & pricing & testimonials: 3 cols desktop ─────── */
.fg  { gap: var(--gap-cards); }
.pg  { gap: var(--gap-cards); }
.tg2 { gap: var(--gap-cards); }

/* ── Telas grandes (1440px+) ────────────────────────────────── */
@media (min-width: 1440px) {
  .ctn { max-width: 1320px; }
  .fg  { grid-template-columns: repeat(3, 1fr); }
  .pg  { grid-template-columns: repeat(3, 1fr); }
  .tg2 { grid-template-columns: repeat(3, 1fr); }
  .fc  { padding: clamp(28px, 2.2vw, 40px); }
  .pc  { padding: clamp(30px, 2.5vw, 44px); }
}

/* ── Full HD (1920px+) ──────────────────────────────────────── */
@media (min-width: 1920px) {
  .ctn { max-width: 1600px; }
  .h-ct { gap: clamp(60px, 6vw, 120px); }
  .lm  { font-size: clamp(30px, 2.5vw, 44px); }
  .lnm { font-size: clamp(34px, 2.8vw, 50px); }
}

/* ── QHD / 4K ───────────────────────────────────────────────── */
@media (min-width: 2560px) {
  .ctn { max-width: 2000px; }
  .nav { padding: clamp(16px, 1.2vw, 28px) 0; }
}

/* ── Tablet largo (1024px → 1280px): 2 colunas ─────────────── */
@media (max-width: 1280px) and (min-width: 769px) {
  .fg   { grid-template-columns: repeat(2, 1fr); }
  .tg2  { grid-template-columns: repeat(2, 1fr); }
  .pg   { grid-template-columns: repeat(2, 1fr); }
  .pc.pop { transform: none; }
  .ft-g { grid-template-columns: 2fr 1fr 1fr; }
}

/* ── Tablet (≤1024px): hero coluna única, cards 2 colunas ──── */
@media (max-width: 1024px) {
  .h-ct   { grid-template-columns: 1fr; text-align: center; gap: 40px; }
  .h-l    { margin: 0 auto; max-width: 600px; }
  .h-sub  { margin: 0 auto 32px; }
  .h-act  { justify-content: center; }
  .h-stats { justify-content: center; gap: 32px; }
  .h-r    { margin-top: 0; max-width: 500px; margin-left: auto; margin-right: auto; }
  .fg     { grid-template-columns: repeat(2, 1fr); }
  .pg     { grid-template-columns: repeat(2, 1fr); }
  .tg2    { grid-template-columns: repeat(2, 1fr); }
  .pc.pop { transform: none; }
  .ft-g   { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE (≤768px) — Experiência premium no celular
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Nav ───────────────────────────────────────────────────── */
  .nav     { padding: 13px 0; }
  .nav.sc  { padding: 10px 0; }

  .nav-lk  { display: none; flex-direction: column; gap: 0; }
  .nav-lk.open {
    display: flex;
    position: fixed;
    top: 58px; left: 0; right: 0; bottom: 0;
    background: rgba(5,10,20,.98);
    backdrop-filter: blur(24px);
    padding: 8px 0 40px;
    z-index: 99;
    overflow-y: auto;
    animation: mSlide .22s cubic-bezier(.22,1,.36,1);
  }
  .nav-lk.open a {
    padding: 20px 28px;
    font-size: 19px;
    font-weight: 700;
    color: #E2E8F0;
    border-bottom: 1px solid rgba(59,130,246,.07);
    display: flex;
    align-items: center;
    transition: background .15s, padding-left .15s;
  }
  .nav-lk.open a:active { background: rgba(59,130,246,.08); padding-left: 36px; }
  .nav-lk.open a:last-child { border-bottom: none; }

  /* CTA dentro do menu mobile */
  .nav-lk.open::before {
    content: 'MENU';
    display: block;
    padding: 14px 28px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(96,165,250,.5);
  }

  @keyframes mSlide {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .hmb {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(59,130,246,.09);
    border: 1px solid rgba(59,130,246,.15);
    transition: all .2s;
  }
  .hmb.open { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.2); }
  .hmb.open i::before { content: '\f00d'; }

  .nav-ct .btn-gh { display: none; }
  .nav-ct .btn-p  { padding: 10px 16px; font-size: 13px; border-radius: 8px; }

  /* ── Hero: logo NO TOPO, texto abaixo — integrado ─────────── */
  .hero {
    padding-top: 70px;
    min-height: 100svh;
    align-items: flex-start;
    padding-bottom: 40px;
  }

  /* Reordenação: logo sobe para o topo do hero */
  .h-ct {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  .h-r { order: 1; width: 100%; margin-bottom: 28px; }
  .h-l { order: 2; text-align: left !important; }

  /* ── Logo widget: integrado, não isolado ───────────────────── */
  .h-r > div {
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
  }

  /* Card principal da logo — maior e com contexto */
  .lb {
    height: 120px;
    border-radius: 20px;
    border-color: rgba(59,130,246,.3);
    box-shadow: 0 0 40px rgba(59,130,246,.1), 0 0 0 1px rgba(59,130,246,.15);
  }
  .lrw { width: 72px; height: 72px; left: 20px; }
  .lm  { font-size: 28px; }
  .lnb { right: 22px; }
  .lnm { font-size: 30px; }
  .lns { font-size: 10px; }
  .lir { padding: 0 2px; }
  .lin { font-size: 12px; }

  /* Mini cards flutuantes ao redor do logo widget */
  .h-r > div::before {
    content: '⚡ PDV ativo';
    position: absolute;
    top: -12px; right: 20px;
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: .3px;
    box-shadow: 0 4px 14px rgba(16,185,129,.3);
    z-index: 2;
  }
  .h-r > div::after {
    content: '🤖 IA NEXUS on';
    position: absolute;
    bottom: 36px; left: -4px;
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: .3px;
    box-shadow: 0 4px 14px rgba(139,92,246,.35);
    z-index: 2;
  }

  /* Info bar abaixo do logo */
  .ldv { margin: 10px 0 8px; }
  .lir { margin-bottom: 0; }

  /* Texto "sistema em nuvem" */
  .h-r > div > p {
    font-size: 12px !important;
    margin-top: 14px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(59,130,246,.04);
    border: 1px solid rgba(59,130,246,.1);
    border-radius: 10px;
  }

  /* ── Texto do hero ─────────────────────────────────────────── */
  .h-badge { margin-bottom: 14px; }
  .h-t {
    font-size: clamp(30px, 8.5vw, 44px);
    letter-spacing: -1.8px;
    line-height: 1.1;
    margin-bottom: 14px;
  }
  .h-sub {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 24px;
    color: rgba(148,163,184,.9);
    max-width: 100% !important;
  }

  /* CTAs: primário full-width, secundário menor */
  .h-act {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }
  .h-act .btn-p { width: 100%; justify-content: center; font-size: 15px; padding: 16px 20px; }
  .h-act .btn-s {
    width: 100%; justify-content: center;
    font-size: 14px; padding: 13px 20px;
    background: rgba(255,255,255,.03);
  }
  .btn-lg { border-radius: 12px; }

  /* Stats: 3 colunas tipo card strip */
  .h-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid rgba(59,130,246,.12);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(59,130,246,.03);
    justify-content: unset !important;
    flex-wrap: unset !important;
  }
  .h-stats > div {
    padding: 14px 6px;
    text-align: center;
    border-right: 1px solid rgba(59,130,246,.1);
  }
  .h-stats > div:last-child { border-right: none; }
  .h-sn { font-size: 20px; }
  .h-sl { font-size: 9px; }

  /* ── Seções ─────────────────────────────────────────────────── */
  .sec  { padding: 52px 0; }
  .sh   { margin-bottom: 32px; }
  .sh-t { font-size: clamp(22px, 6.5vw, 32px); letter-spacing: -.8px; }
  .sh-s { font-size: 14px; }
  .gl   { margin: 36px auto; }

  /* ── Features: 2 colunas compactas ────────────────────────── */
  .fg { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .fc {
    padding: 20px 16px;
    border-radius: 14px;
  }
  /* Linha de cor sempre visível no mobile (sem hover) */
  .fc::before { opacity: 1 !important; }
  .fi { width: 40px; height: 40px; font-size: 17px; margin-bottom: 12px; border-radius: 10px; }
  .ft { font-size: 14px; font-weight: 700; margin-bottom: 5px; }
  .fd { font-size: 12.5px; line-height: 1.5; }

  /* ── Pricing: scroll horizontal snapped ───────────────────── */
  .pg {
    display: flex !important;
    grid-template-columns: unset !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 12px 2px 24px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: unset !important;
  }
  .pg::-webkit-scrollbar { display: none; }
  .pg::after { content: ''; flex: 0 0 2px; }

  .pc {
    flex: 0 0 80vw !important;
    max-width: 300px;
    min-width: 260px;
    scroll-snap-align: center;
    border-radius: 18px;
    transition: none;
  }
  .pc.pop {
    transform: none !important;
    box-shadow: 0 0 0 2px var(--blue), 0 16px 48px rgba(59,130,246,.2);
  }
  .pn  { font-size: 20px; }
  .pa  { font-size: 40px; }
  .pbi { font-size: 11px; }
  .pf li { font-size: 13px; }
  .pdiv { margin: 0 -22px 20px; }

  /* ── Depoimentos: scroll horizontal snapped ────────────────── */
  .tg2 {
    display: flex !important;
    grid-template-columns: unset !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 4px 2px 16px;
    scrollbar-width: none;
  }
  .tg2::-webkit-scrollbar { display: none; }
  .tc {
    flex: 0 0 82vw;
    max-width: 320px;
    min-width: 240px;
    scroll-snap-align: center;
  }
  .ts { font-size: 12px; }
  .tt { font-size: 13.5px; }

  /* ── FAQ ────────────────────────────────────────────────────── */
  .faq-i { padding: 18px 0; }
  .faq-q { font-size: 14.5px; gap: 12px; }
  .faq-a { font-size: 13.5px; padding-top: 10px; }

  /* ── CTA section ────────────────────────────────────────────── */
  .cta   { padding: 56px 0; }
  .cta-t { font-size: clamp(24px, 7vw, 36px); letter-spacing: -1.2px; margin-bottom: 14px; }
  .cta-s { font-size: 14.5px; margin-bottom: 28px; }
  .cta .btn-lg {
    display: flex;
    width: 100%;
    max-width: 360px;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 15px;
    padding: 17px 24px;
  }

  /* ── Footer ─────────────────────────────────────────────────── */
  .ft2  { padding: 44px 0 24px; }
  .ft-g { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .ft-bn { font-size: 18px; }
  .ft-bd { font-size: 12px; max-width: 100%; }
  .ft-b  { flex-direction: column; text-align: center; gap: 10px; }
  .ft-c a { font-size: 13px; margin-bottom: 8px; }

  /* ── Trial modal — bottom sheet nativo ──────────────────────── */
  #trialModal { align-items: flex-end !important; padding: 0 !important; }
  #trialModal > div {
    border-radius: 24px 24px 0 0 !important;
    padding: 32px 22px 40px !important;
    max-width: 100% !important;
    width: 100% !important;
    animation: modalUp .28s cubic-bezier(.22,1,.36,1);
  }
  /* Handle bar no modal */
  #trialModal > div::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: rgba(255,255,255,.15);
    border-radius: 2px;
    margin: 0 auto 24px;
  }
  @keyframes modalUp {
    from { transform: translateY(80px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE PEQUENO (≤480px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .ctn   { padding-left: 16px; padding-right: 16px; }
  .h-t   { font-size: clamp(27px, 8vw, 36px); }
  .h-sub { font-size: 14.5px; }
  .sec   { padding: 44px 0; }
  .fg    { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .fc    { padding: 16px 14px; }
  .ft    { font-size: 13px; }
  .fd    { font-size: 12px; }
  .pc    { flex: 0 0 88vw !important; }
  .nav-lo { width: 34px; height: 34px; font-size: 16px; }
  .nav-nm { font-size: 17px; }
  .ft-g  { grid-template-columns: 1fr; gap: 20px; }
  .lb    { height: 108px; }
  .lnm   { font-size: 26px; }
  .lrw   { width: 64px; height: 64px; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE MUITO PEQUENO (≤360px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .ctn  { padding-left: 14px; padding-right: 14px; }
  .h-t  { font-size: 25px; letter-spacing: -1.2px; }
  .h-sn { font-size: 18px; }
  .pc   { flex: 0 0 92vw !important; }
  .fg   { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   HINT DE SCROLL PARA PRICING — Injetado via JS no site
   ══════════════════════════════════════════════════════════════ */
.pg-scroll-hint {
  display: none;
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(148,163,184,.55);
  letter-spacing: .5px;
}
@media (max-width: 768px) {
  .pg-scroll-hint { display: block; }
}