:root{
  --azul: #1F3B83;
  --vermelho: #E3242B;
  --amarelo: #FFD22E;
  --branco: #FFFFFF;
  --ink: #0F172A;
  --muted: #475569;
  --border: #E5E7EB;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji",sans-serif;
  color: var(--ink);
  background: var(--branco);
}
h1,h2,h3{line-height:1.2; margin:0 0 .5rem}
p{margin:0 0 1rem}
img{max-width:100%; display:block}

.container{width:min(1120px, 100%); margin-inline:auto; padding:0 16px}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#000;color:#fff;padding:8px 12px;border-radius:8px;z-index:999}

.section{padding:64px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.section-head .hint{font-size:.875rem;color:#64748B}

.tag{
  display:inline-block;
  font-size:.75rem;
  color:#fff;
  background: #ffffff22;
  border:1px solid #ffffff44;
  padding:4px 8px;
  border-radius:999px;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(10px);
  background: #0b183750;
  border-bottom: 1px solid #ffffff22;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand.small{color:#ffffffcc}
.brand-mark{width:36px;height:36px;border-radius:8px;background: linear-gradient(135deg, var(--vermelho), var(--amarelo));}
.brand-name{font-weight:600; letter-spacing:.3px}

.main-nav ul{display:none;gap:24px;list-style:none;margin:0;padding:0}
.main-nav a{color:#ffffffcc;text-decoration:none;font-size:.95rem}
.main-nav a:hover{color:#fff}

.desktop-only{display:none}
.nav-toggle{display:inline-flex;flex-direction:column;gap:4px;background:none;border:0}
.nav-toggle span{display:block;width:24px;height:2px;background:#fff}


.mobile-nav a{color:#fff;text-decoration:none;padding:10px 8px;border-radius:8px}
.mobile-nav .btn{align-self:flex-start}

@media (min-width: 768px){
  .main-nav ul{display:flex}
  .desktop-only{display:inline-flex}
  .nav-toggle{display:none}
  
}

/* Hero */
.hero{
  position:relative;
  background: var(--azul);
  color:#fff;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
.hero-copy h1{font-family: 'Libre Baskerville', Georgia, serif; font-size: clamp(28px, 4vw, 48px)}
.hero-copy p{color:#e6ecff}
.hero-media { position: relative; overflow: hidden; border-radius: 16px; min-height: 260px; }
.blob{position:absolute; width:320px;height:320px;opacity:.22;transform:rotate(12deg)}
.blob-yellow{right:-96px;top:-96px;background: var(--amarelo)}
.blob-red{left:-96px;bottom:-96px;background: var(--vermelho)}

.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:600}
.btn-primary{background: var(--vermelho); color:#fff; border:2px solid transparent}
.btn-primary:hover{filter:brightness(.95)}
.btn-outline{border:1px solid #ffffff55;color:#fff}
.btn-outline:hover{background:#ffffff10}

@media (min-width: 900px){
  .hero-grid{grid-template-columns:1.1fr .9fr; align-items:center}
}

/* Produtos */
.products{background:#fff}
.products h2{color: var(--azul)}
.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{border:1px solid var(--border);border-radius:14px;padding:12px}
.card .thumb{display:grid;place-items:center;aspect-ratio:1/1;background:#f6f7fb;border-radius:10px;color:#64748B;font-size:.8rem;margin-bottom:10px}
.card h3{margin:0 0 4px;font-size:1rem}
.card p{margin:0;color:#64748B;font-size:.9rem}
@media (min-width: 900px){
  .cards-grid{grid-template-columns:repeat(4,1fr)}
}

/* Diferenciais */
.features{background: var(--azul); color:#fff}
.features .section-head .tag{background:#ffffff18;border-color:#ffffff30}
.features-grid{display:grid;grid-template-columns:1fr;gap:16px}
.feature{background:#ffffff0f;border:1px solid #ffffff26;border-radius:16px;padding:20px}
.feature h3{margin:8px 0 4px;font-size:1.125rem;color:#fff}
.feature p{margin:0;color:#e8eeff}
.feature-icon{width:40px;height:40px;border-radius:10px;margin-bottom:8px;background:#fff}
.icon-yellow{background: var(--amarelo)}
.icon-red{background: var(--vermelho)}
.icon-white{background: #fff}
@media (min-width: 900px){
  .features-grid{grid-template-columns:repeat(3,1fr)}
}

/* Sobre */
.about{background:#fff}
.about-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.about-media{border:1px dashed #CBD5E1;border-radius:16px;min-height:260px;display:grid;place-items:center;color:#94A3B8}
.about-copy h2{color: var(--azul)}
.about-copy ul{margin:12px 0 0; padding-left:18px}
.about-copy li{margin:6px 0}
@media (min-width: 900px){
  .about-grid{grid-template-columns:1fr 1fr}
}

/* Depoimentos */
.testimonials{background: var(--azul); color:#fff}
.testimonials-grid{display:grid;grid-template-columns:1fr;gap:16px}
.testimonial{background:#ffffff0f;border:1px solid #ffffff26;border-radius:16px;padding:20px}
.testimonial blockquote{margin:0;color:#e8eeff;font-style:italic}
.testimonial figcaption{margin-top:8px;color:#cbd5ff;font-size:.9rem}
.avatar{width:64px;height:64px;border-radius:50%;border:1px solid #ffffff40;display:grid;place-items:center;margin-bottom:8px}
@media (min-width: 900px){
  .testimonials-grid{grid-template-columns:repeat(3,1fr)}
}

/* Contato */
.contact{background:#fff}
.contact-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
.contact-info h2{color: var(--azul); margin-bottom:8px}
.contact-info p{color:#334155}
.contact-info a{color: var(--azul); text-decoration: none}
.contact-info a:hover{text-decoration: underline}
.contact-map{border:1px solid var(--border);border-radius:14px;min-height:280px;display:grid;place-items:center;color:#64748B;background:#F8FAFC}
@media (min-width: 900px){
  .contact-grid{grid-template-columns:1fr 1fr}
}

/* Footer */
.site-footer{background: var(--azul); color:#fff}
.footer-inner{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;padding:24px 0}
.footer-inner .policy-link{justify-self:start;color:#ffffffcc;text-decoration:none}
.footer-inner .policy-link:hover{color:#fff}
@media (min-width: 900px){
  .footer-inner{grid-template-columns:auto 1fr auto}
  .copyright{text-align:center}
}

/* WhatsApp FAB */
.whatsapp-fab{
  position:fixed;right:16px;bottom:16px;
  width:56px;height:56px;border-radius:999px;
  display:grid;place-items:center;
  background: var(--amarelo); color: var(--azul);
  font-weight:700; text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}

/* Utilities */
.site-header{background: linear-gradient(0deg, rgba(31,59,131,.85), rgba(31,59,131,.85))}
.hero .container{position:relative; z-index:2}
.hero .tag{border-color:#ffffff44}
.hero .btn-outline{border-color:#ffffff55}





.hero-media {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 320px;
}

.hero-media img {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: cover;
  display: block;
}

/* Hero text refinements */
.hero-copy h1 { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.25); }
.hero-copy p  { color: #f0f4ff; font-size: 1.125rem; }

/* Cards uniform height */
.cards-grid .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
}

/* Smooth button hover */
.btn { transition: all .25s ease-in-out; }


/* === Ajustes Mobile Específicos === */
@media (max-width: 768px) {
  .hero-media {
    min-height: 220px;
    max-height: 320px;
  }

  .hero-copy h1 {
    font-size: 1.6rem;
    line-height: 1.2;
  }
  .hero-copy p {
    font-size: 1rem;
  }

  .cards-grid {
    gap: 1rem;
  }
  .cards-grid .card {
    min-height: auto;
    padding: 1rem;
  }

  .testimonials-grid {
    gap: 1rem;
  }

  
  

  .whatsapp-float {
    width: 52px;
    height: 52px;
    bottom: 14px;
    right: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,.25);
  }
}


.section-cta {
  margin-top: 2rem;
  text-align: center;
}
.section-cta .btn {
  font-size: 1.05rem;
  padding: 0.75rem 1.5rem;
}


/* Ajuste para diferenciais em 4 colunas */
#diferenciais .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}


.testimonial img.avatar {
  width:64px;
  height:64px;
  border-radius:50%;
  border:2px solid #ffffff40;
  object-fit:cover;
  margin-bottom:8px;
}


/* ==== Mobile Navigation Overhaul ==== */
.site-header { position: sticky; top:0; z-index: 1200; }
.nav-toggle { position: relative; z-index: 1301; }

/* Hamburger to X animation */
.nav-toggle span { transition: transform .2s ease, opacity .2s ease; transform-origin: center; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* Dropdown "aba" panel */
.mobile-nav[hidden] { display: none !important; }
.mobile-nav {
  position: absolute;
  top: 100%;
  right: 16px;
  width: min(86vw, 320px);
  background: #fff;
  color: var(--ink);
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(0,0,0,.14);
  padding: 8px 12px;
  margin-top: 8px;
  z-index: 1300;
  transform: translateY(8px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.mobile-nav.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.mobile-nav a {
  display:block;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 8px;
  border-radius: 8px;
  font-size: 1rem;
}
.mobile-nav a:hover { background: #F8FAFC; }
.mobile-nav .btn {
  width: 100%;
  margin-top: 6px;
  display: inline-flex;
  justify-content: center;
  background: var(--vermelho);
  color: #fff;
  border: 0;
}

/* Backdrop behind menu */



/* Prevent scroll when menu open */
body.noscroll { overflow: hidden; }

/* General mobile spacing & readability */
@media (max-width: 768px){
  .section { padding: 44px 0; }
  .header-inner { padding: 10px 0; }
  .hero-grid { gap: 20px; }
  .hero-copy h1 { font-size: 1.5rem; }
  .hero-copy p { font-size: 1rem; }
  .blob { display: none; } /* remove decor in mobile to reduce clutter */
  .cards-grid { grid-template-columns: 1fr; gap: 14px; }
  #diferenciais .cards-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 18px; }
  .about-media { min-height: 200px; }
  .testimonials-grid { grid-template-columns: 1fr; gap: 14px; }
  .contact-grid { grid-template-columns: 1fr; gap: 18px; }
  .contact-map { min-height: 240px; }
  .whatsapp-fab { width: 50px; height: 50px; bottom: 14px; right: 14px; }
}


/* mobile-nav refinements */
.mobile-nav {
  border: 1px solid #E2E8F0;
  border-radius: 14px;
}


/* === Mobile Menu Polished === */
@media (max-width: 768px){
  #menu-mobile {
    position: fixed;
    top: 70px;
    right: 12px;
    left: auto;
    width: min(92vw, 360px);
    background: #F8FAFC;
    color: var(--ink);
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow: 0 18px 36px rgba(2, 6, 23, .14);
    padding: 10px 12px;
    margin-top: 8px;
    transform-origin: top right;
    z-index: 1301;
  }
  #menu-mobile a {
    display:block;
    padding: 12px 10px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #0F172A;
    text-decoration: none;
    border-radius: 10px;
  }
  #menu-mobile a + a {
    border-top: 1px solid #E2E8F0;
  }
  #menu-mobile a:hover {
    background: #EEF2F7;
  }
  #menu-mobile .btn {
    margin-top: 12px;
    font-size: 1rem;
    padding: 12px 14px;
    border-radius: 12px;
    width: 100%;
  }

  /* Área de toque maior para o hambúrguer */
  .nav-toggle {
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    gap: 5px;
  }
  .nav-toggle span { width: 22px; }
}

/* ==== Ajustes visuais adicionais ==== */

/* Produtos com fundo claro para contraste */
#produtos {
  background: #F8FAFC;
}

/* Sobre com leve degradê */
.about {
  background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
}

.about-media img {
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

/* Lista de pontos fortes */
.about-list {
  margin: 1rem 0 1.5rem;
  padding-left: 1rem;
  list-style: none;
}
.about-list li {
  margin: .4rem 0;
  font-size: 1rem;
  color: #1F2937;
  font-weight: 500;
  display: flex;
  align-items: center;
}

/* ==== Depoimentos enriquecidos ==== */
.testimonial {
  background: #fff;
  color: #0F172A;
  border: 1px solid #E5E7EB;
}
.testimonial blockquote {
  color: #334155;
  font-style: italic;
  margin-top: 8px;
}
.testimonial figcaption {
  margin-top: 6px;
  font-size: 0.95rem;
  color: #1F2937;
}
.stars {
  color: #FFD22E;
  font-size: 1.1rem;
  line-height: 1;
  margin: 2px 0;
}
.google-badge {
  display: inline-block;
  font-size: 0.75rem;
  color: #1F3B83;
  background: #EEF2F7;
  padding: 2px 6px;
  border-radius: 6px;
  margin-top: 2px;
}

/* ==== Selo Google Avaliações ==== */
.google-reviews-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 16px;
  font-size: 0.95rem;
  color: #1F2937;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.google-reviews-badge .google-logo {
  width: 24px;
  height: auto;
  display: block;
}

/* ==== Modal Orçamento ==== */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,.6);
  display: none; /* começa invisível */
  place-items: center;
  z-index: 2000;
}
.modal[hidden] {
  display: none !important;
}
.modal:not([hidden]) {
  display: grid;
}
.modal-content {
  background: #fff;
  padding: 24px;
  border-radius: 14px;
  max-width: 420px;
  width: 90%;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  background: #eee;
  border: none;
  border-radius: 8px;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 2px 8px;
}
.modal h2 {
  margin-top: 0;
  color: var(--azul);
}
.modal form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal input, .modal textarea {
  padding: 10px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}
.modal button[type="submit"] {
  margin-top: 8px;
}
.form-success {
  text-align: center;
  color: green;
  font-weight: 500;
  margin-top: 1rem;
}