/* styles.css (MOBILE-FIRST)
   AtendeFácil — esquema de cores limpo (azul primário)
   Breakpoint: min-width:600px
*/

/* Tokens principais */
:root{
  --brand: #2563eb; /* azul primário */
  --bg: #f8fafc;
  --card: #ffffff;
  --muted: #6b7280;
  --radius: 12px;
  --shadow: 0 6px 18px rgba(16,24,40,0.08);
  --container-max: 1200px;
  --gap-sm: 0.75rem;
  --gap-md: 1.25rem;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: light;
  scroll-behavior: smooth;
}

/* Reset leve */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg,var(--bg),#ffffff);
  color:#0f172a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}

/* Utilitário para acessibilidade */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Container central */
.container{
  width:100%;
  max-width:var(--container-max);
  padding:0 1rem;
  margin:0 auto;
}

/* Header */
.site-header{
  background:transparent;
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter: blur(6px);
  padding:.5rem 0;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-md)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.logo{width:90px;height:90px;border-radius:8px;object-fit:cover}
.logo-small{width:45px;height:45px;border-radius:8px}
.brand-text{font-weight:700;font-size:1rem}

/* Nav desktop escondido no mobile-first */
.nav{display:none}

/* Botão hamburger (mobile) */
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:transparent;border:1px solid rgba(15,23,42,0.04);padding:.5rem;border-radius:10px;font-size:1.05rem;
}

/* Overlay do menu */
.nav-overlay{
  position:fixed;inset:0;background:rgba(2,6,23,0.45);opacity:0;visibility:hidden;transition:opacity .22s ease;z-index:55;
}

/* Painel mobile do menu */
.mobile-nav{
  position:fixed;top:0;right:-100%;width:100%;max-width:380px;height:100%;
  background:linear-gradient(180deg,rgba(255,255,255,0.98),var(--card));
  box-shadow:-12px 0 30px rgba(2,6,23,0.12);transition:right .28s cubic-bezier(.2,.9,.2,1);z-index:60;display:flex;flex-direction:column;
}
.mobile-nav-inner{padding:1rem;display:flex;flex-direction:column;height:100%}
.mobile-nav-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem}
.nav-close{background:none;border:0;font-size:1.1rem;padding:.5rem;border-radius:8px}
.mobile-nav-links{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}
.mobile-link{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1rem;border-radius:10px;text-decoration:none;color:inherit;font-weight:600;background:transparent;border:1px solid transparent}
.mobile-link.btn-primary{background:var(--brand);color:#fff}
.mobile-link:hover{background:rgba(37,99,235,0.06)}

/* Hero (sem chat) */
.hero{padding:1.25rem 0}
.hero-grid{display:flex;flex-direction:column;gap:1rem}
.hero-left h1{font-size:1.45rem;margin:0 0 .5rem}
.lead{color:var(--muted);margin-bottom:0.75rem;font-size:0.98rem}
.hero-ctas{display:flex;gap:.5rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem .85rem;border-radius:10px;border:1px solid transparent;text-decoration:none;cursor:pointer;font-weight:700;font-size:0.95rem}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow)}
.btn-primary:focus{outline:3px solid rgba(37,99,235,0.16);outline-offset:2px}
.btn-ghost{background:transparent;border:1px solid rgba(37,99,235,0.11);color:var(--brand)}
.btn-outline{background:transparent;border:1px solid #e6eefb;color:var(--brand)}

/* Stats */
.hero-stats{display:flex;gap:.6rem;list-style:none;padding:0;margin:1rem 0 0;flex-wrap:wrap}
.hero-stats li{background:var(--card);padding:.5rem .7rem;border-radius:10px;box-shadow:var(--shadow);min-width:120px;text-align:center}
.hero-stats strong{display:block;font-size:1rem}

/* Visual da hero (imagem ilustrativa) */
.hero-visual{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(255,255,255,0.6),transparent);padding:0.6rem;border-radius:12px}
.hero-visual img{max-width:100%;height:auto;border-radius:10px;display:block}

/* Features */
.features{padding:1.25rem 0}
.features h2{margin:0 0 .25rem;font-size:1.1rem}
.section-sub{color:var(--muted);margin-bottom:0.8rem}
.features-grid{display:grid;grid-template-columns:1fr;gap:.65rem}
.feature{background:var(--card);padding:.9rem;border-radius:12px;box-shadow:var(--shadow);text-align:left}
.feature i{color:var(--brand);margin-bottom:.4rem}

/* Pricing */
.pricing{padding:1.25rem 0}
.pricing-grid{display:grid;grid-template-columns:1fr;gap:.75rem}
.plan{background:var(--card);padding:.9rem;border-radius:12px;box-shadow:var(--shadow);text-align:center}
.plan-popular{border:2px solid rgba(37,99,235,0.12);transform:none}

/* Testimonials */
.testimonials{padding:1.25rem 0}
.testimonials-grid{display:grid;grid-template-columns:1fr;gap:.75rem}
.testimonial{background:linear-gradient(180deg,#fff,#fbfdff);padding:.9rem;border-radius:12px;box-shadow:var(--shadow)}

/* Contact CTA (final) */
.contact-cta{padding:1.25rem 0;background:transparent}
.cta-grid{display:flex;justify-content:center}
.cta-card{max-width:900px;background:linear-gradient(180deg,#fff,#fbfdff);padding:1.2rem;border-radius:14px;box-shadow:var(--shadow);text-align:center}
.cta-card h2{margin:0 0 .5rem}
.cta-text{color:var(--muted);margin-bottom:1rem}
.cta-btn{font-size:1rem;padding:.75rem 1.1rem;border-radius:10px}

/* Footer */
.site-footer{border-top:1px solid rgba(15,23,42,0.04);padding:1rem 0;margin-top:1.5rem;background:transparent}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-direction:column}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.logo-footer{width:120px}
.footer-nav{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
.footer-nav a{text-decoration:none;color:var(--muted);font-size:.95rem}

/* Media queries (>=600px) — layout lado a lado onde aplicável */
@media (min-width: 600px) {
  .nav{display:flex;gap:0.85rem;align-items:center}
  .nav a{color:var(--muted);text-decoration:none;padding:0.5rem .6rem;border-radius:8px}
  .nav a:hover{color:var(--brand)}
  .nav-toggle{display:none}

  .hero-grid{
    display:grid;
    grid-template-columns: 1fr 420px;
    gap:1.25rem;
    align-items:start;
  }

  .hero-left h1{font-size:2rem}
  .features-grid{grid-template-columns:repeat(4,1fr)}
  .pricing-grid{grid-template-columns:repeat(3,1fr)}
  .testimonials-grid{grid-template-columns:repeat(3,1fr)}
  .contact-cta .cta-card{padding:1.6rem}
  .footer-inner{flex-direction:row;justify-content:space-between}
}

/* Estado aberto do overlay (adicionado via JS) */
body.nav-open .nav-overlay{opacity:1;visibility:visible}
body.nav-open #mobileNav{right:0}
body.nav-open #mobileNav[aria-hidden="false"]{right:0}

/* Foco acessível */
a:focus, button:focus, input:focus, textarea:focus{
  outline: 3px solid rgba(37,99,235,0.12);
  outline-offset: 2px;
  border-radius:8px;
}

/* Utilitários */
.muted{color:var(--muted)}
.small-cta{margin-top:1rem}