/* ===================================================================
   GMG Esquadrias — design tokens (extraídos do build Lovable original)
   =================================================================== */
:root{
  --background: 0 0% 0%;
  --foreground: 30 20% 98%;
  --card: 0 0% 4%;
  --card-foreground: 30 20% 98%;
  --popover: 0 0% 3%;
  --popover-foreground: 30 20% 98%;
  --primary: 20 100% 58%;
  --primary-foreground: 0 0% 4%;
  --primary-glow: 32 100% 65%;
  --secondary: 0 0% 8%;
  --secondary-foreground: 30 20% 98%;
  --muted: 0 0% 6%;
  --muted-foreground: 30 8% 65%;
  --accent: 16 100% 60%;
  --accent-foreground: 0 0% 4%;
  --border: 30 20% 18%;
  --input: 0 0% 8%;
  --ring: 22 100% 55%;
  --radius: 1.25rem;

  --glass-bg: 210 40% 98% / .04;
  --glass-bg-strong: 210 40% 98% / .07;
  --glass-border: 210 40% 98% / .12;
  --glass-highlight: 210 40% 98% / .22;
  --glass-shadow: 220 60% 2% / .6;

  --gradient-hero: radial-gradient(ellipse at top, hsl(20 100% 38% / .5), transparent 60%),
                   radial-gradient(ellipse at bottom right, hsl(32 100% 55% / .22), transparent 50%);
  --gradient-primary: linear-gradient(135deg, hsl(16 100% 55%), hsl(36 100% 62%));
  --gradient-glass: linear-gradient(135deg, hsl(210 40% 98% / .1) 0%, hsl(210 40% 98% / .04) 40%, hsl(210 40% 98% / .02) 100%);
  --gradient-glass-edge: linear-gradient(135deg, hsl(210 40% 98% / .4), hsl(210 40% 98% / .05) 30%, hsl(210 40% 98% / 0) 60%, hsl(210 40% 98% / .15));

  --shadow-glass: 0 8px 32px -4px hsl(0 0% 0% / .6), inset 0 1px 0 0 hsl(30 20% 98% / .08), inset 0 -1px 0 0 hsl(0 0% 0% / .4);
  --shadow-glow: 0 0 60px -8px hsl(20 100% 58% / .65);
  --shadow-elevated: 0 24px 60px -20px hsl(0 0% 0% / .9), 0 0 0 1px hsl(30 20% 98% / .06);

  --ease-out-expo: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  font-family:Inter,"SF Pro Display",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
h1,h2,h3,h4{
  font-family:"SF Pro Display",Inter,system-ui,sans-serif;
  margin:0;
  font-weight:700;
  letter-spacing:-.02em;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,video{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }

.container-wide{ margin-inline:auto; width:100%; max-width:80rem; padding-inline:1rem; }
@media (min-width:640px){ .container-wide{ padding-inline:1.5rem; } }

section{ position:relative; }

/* ---------- Glassmorphism ---------- */
.glass,.glass-card{
  background:var(--gradient-glass);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid hsl(var(--glass-border));
  box-shadow:var(--shadow-glass);
}
.glass-card{ position:relative; isolation:isolate; border-radius:1.5rem; }
.glass-tint{
  background:linear-gradient(135deg,hsl(20 100% 58% / .18),hsl(210 40% 98% / .06) 40%,hsl(210 40% 98% / .03));
  border:1px solid hsl(20 100% 58% / .35);
  box-shadow:var(--shadow-glass), 0 0 40px -10px hsl(20 100% 58% / .25);
}
.text-gradient{
  background:linear-gradient(135deg, hsl(var(--foreground)), hsl(var(--primary-glow)) 45%, hsl(var(--primary)));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:9999px; padding:.9rem 1.75rem; font-weight:600; font-size:.95rem;
  transition:all .35s var(--ease-out-expo); white-space:nowrap;
}
.btn-primary{
  background:var(--gradient-primary); color:hsl(var(--primary-foreground));
  box-shadow:var(--shadow-glow);
}
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.btn-outline{
  border:1px solid hsl(var(--glass-border)); color:hsl(var(--foreground));
  background:hsl(var(--glass-bg));
}
.btn-outline:hover{ background:hsl(var(--glass-bg-strong)); border-color:hsl(var(--primary) / .5); }
.btn-sm{ padding:.6rem 1.25rem; font-size:.85rem; }
.icon{ width:1.15em; height:1.15em; flex-shrink:0; }

/* eyebrow / section heading */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:hsl(var(--primary));
  padding:.4rem 1rem; border-radius:9999px; margin-bottom:1.25rem;
}
.section-head{ max-width:42rem; margin-bottom:3rem; }
.section-head h2{ font-size:clamp(2rem,4.5vw,3rem); line-height:1.1; margin-bottom:1rem; }
.section-head p{ color:hsl(var(--muted-foreground)); font-size:1.05rem; }
.section-pad{ padding-block:6rem; }
@media (max-width:640px){ .section-pad{ padding-block:4rem; } }

/* ---------- Animations ---------- */
@keyframes fade-up{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:translateY(0);} }
.reveal{ opacity:0; }
.reveal.in-view{ animation:fade-up .8s var(--ease-out-expo) both; }

@keyframes glow-pulse{ 0%,100%{ opacity:.4;} 50%{ opacity:.8;} }
.animate-glow-pulse{ animation:glow-pulse 4s ease-in-out infinite; }

/* ===================================================================
   Header
   =================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:hsl(0 0% 0% / .6);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid hsl(var(--glass-border));
}
.site-header .inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:.85rem;
}
.brand{ display:flex; align-items:center; gap:.65rem; }
.brand img{ height:2.5rem; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-size:1.05rem; font-weight:700; }
.brand-text span{ font-size:.72rem; color:hsl(var(--muted-foreground)); letter-spacing:.04em; }

.main-nav{ display:none; align-items:center; gap:2rem; }
.main-nav a{ font-size:.9rem; font-weight:500; color:hsl(var(--foreground) / .85); transition:color .25s; }
.main-nav a:hover{ color:hsl(var(--primary)); }

.header-actions{ display:flex; align-items:center; gap:.9rem; }
.icon-link{
  display:flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; border-radius:9999px;
  border:1px solid hsl(var(--glass-border)); color:hsl(var(--foreground));
  transition:all .25s;
}
.icon-link:hover{ background:hsl(var(--glass-bg-strong)); color:hsl(var(--primary)); }
.menu-toggle{ display:flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; }

@media (min-width:900px){
  .main-nav{ display:flex; }
  .menu-toggle{ display:none; }
}

.mobile-menu{
  position:fixed; inset:0; top:64px; z-index:99;
  background:hsl(0 0% 0% / .97);
  backdrop-filter:blur(20px);
  display:none; flex-direction:column; padding:2rem 1.25rem; gap:1.5rem;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{ font-size:1.15rem; font-weight:500; }
@media (min-width:900px){ .mobile-menu{ display:none !important; } }

/* ===================================================================
   Hero
   =================================================================== */
.hero{
  position:relative; padding-top:9rem; padding-bottom:6rem; overflow:hidden;
  min-height:92vh; display:flex; align-items:center;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:var(--gradient-hero);
  mix-blend-mode:screen;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
}
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.85; }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, hsl(0 0% 0% / .25), hsl(0 0% 0% / .5) 55%, hsl(0 0% 0% / .92));
}
.hero-content{ position:relative; z-index:2; max-width:42rem; }
.hero-pill{
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1.1rem;
  border-radius:9999px; font-size:.85rem; font-weight:600; margin-bottom:1.5rem;
}
.hero h1{ font-size:clamp(2.5rem,6vw,4.2rem); line-height:1.05; margin-bottom:1.25rem; }
.hero-lead{ font-size:1.1rem; color:hsl(var(--foreground) / .8); margin-bottom:2.25rem; max-width:36rem; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3rem; }

.hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; max-width:34rem; }
.hero-stat{ padding:1.1rem 1rem; border-radius:1rem; text-align:left; }
.hero-stat strong{ display:block; font-size:1.5rem; color:hsl(var(--primary)); }
.hero-stat span{ font-size:.78rem; color:hsl(var(--muted-foreground)); }

.hero-guarantee{
  margin-top:2rem; display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  font-size:.85rem; color:hsl(var(--muted-foreground));
}
.hero-guarantee span{ display:inline-flex; align-items:center; gap:.4rem; }

@media (max-width:640px){
  .hero-stats{ grid-template-columns:1fr 1fr 1fr; gap:.6rem; }
  .hero-stat strong{ font-size:1.15rem; }
}

/* ===================================================================
   Categorias
   =================================================================== */
.cat-grid{
  display:grid; grid-template-columns:1fr; gap:1.5rem;
}
@media (min-width:640px){ .cat-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }

.cat-card{ overflow:hidden; display:flex; flex-direction:column; }
.cat-media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.cat-media img,.cat-media video{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out-expo); }
.cat-card:hover .cat-media img,.cat-card:hover .cat-media video{ transform:scale(1.06); }
.cat-tag{
  position:absolute; top:.9rem; left:.9rem; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; padding:.3rem .75rem; border-radius:9999px;
  background:hsl(0 0% 0% / .55); color:hsl(var(--primary)); border:1px solid hsl(var(--glass-border));
}
.cat-body{ padding:1.5rem; flex:1; display:flex; flex-direction:column; gap:.5rem; }
.cat-body h3{ font-size:1.2rem; }
.cat-body p{ color:hsl(var(--muted-foreground)); font-size:.92rem; flex:1; }

/* ===================================================================
   Por que GMG
   =================================================================== */
.why-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:640px){ .why-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .why-grid{ grid-template-columns:repeat(3,1fr); } }
.why-card{ padding:2rem; }
.why-icon{
  width:3rem; height:3rem; border-radius:.9rem; display:flex; align-items:center; justify-content:center;
  background:var(--gradient-primary); color:hsl(var(--primary-foreground)); margin-bottom:1.25rem;
}
.why-card h3{ font-size:1.1rem; margin-bottom:.6rem; }
.why-card p{ color:hsl(var(--muted-foreground)); font-size:.92rem; }

/* ===================================================================
   Processo
   =================================================================== */
.process-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; position:relative; }
@media (min-width:768px){ .process-grid{ grid-template-columns:repeat(4,1fr); } }
.process-step{ padding:1.75rem; text-align:left; }
.process-step .num{ font-size:2.25rem; font-weight:700; color:hsl(var(--primary) / .35); margin-bottom:.75rem; }
.process-step h3{ font-size:1.05rem; margin-bottom:.5rem; }
.process-step p{ color:hsl(var(--muted-foreground)); font-size:.88rem; }

/* ===================================================================
   Quem faz (fábrica)
   =================================================================== */
.factory{ display:grid; grid-template-columns:1fr; gap:3rem; align-items:center; }
@media (min-width:1024px){ .factory{ grid-template-columns:1fr 1fr; } }
.factory-media{ position:relative; border-radius:1.5rem; overflow:hidden; }
.factory-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.factory-badge{
  position:absolute; bottom:1rem; left:1rem; padding:.5rem 1rem; border-radius:9999px;
  font-size:.78rem; font-weight:600;
}
.factory-list{ display:flex; flex-direction:column; gap:1.5rem; margin-top:2rem; }
.factory-item{ display:flex; gap:1rem; align-items:flex-start; }
.factory-item .why-icon{ width:2.5rem; height:2.5rem; flex-shrink:0; margin-bottom:0; }
.factory-item h4{ font-size:1rem; margin-bottom:.3rem; }
.factory-item p{ color:hsl(var(--muted-foreground)); font-size:.88rem; }

/* ===================================================================
   Depoimentos
   =================================================================== */
.reviews-widget{ padding:2rem; }
.reviews-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.5rem; padding-bottom:1.5rem; border-bottom:1px solid hsl(var(--glass-border)); }
.reviews-head h3{ font-size:1.1rem; }
.reviews-head p{ color:hsl(var(--muted-foreground)); font-size:.85rem; }
.reviews-sort{ display:flex; gap:.5rem; flex-wrap:wrap; }
.pill-btn{
  font-size:.78rem; padding:.4rem .9rem; border-radius:9999px; border:1px solid hsl(var(--glass-border));
  color:hsl(var(--muted-foreground));
}
.pill-btn.active{ background:hsl(var(--primary) / .15); color:hsl(var(--primary)); border-color:hsl(var(--primary) / .4); }
.review-list{ display:flex; flex-direction:column; gap:1.25rem; }
.review-card{ padding:1.25rem; border-radius:1rem; background:hsl(var(--glass-bg)); }
.review-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.5rem; }
.review-who{ display:flex; gap:.75rem; align-items:center; }
.review-avatar{
  width:2.5rem; height:2.5rem; border-radius:9999px; background:var(--gradient-primary);
  display:flex; align-items:center; justify-content:center; font-weight:700; color:hsl(var(--primary-foreground));
}
.review-name{ font-weight:600; font-size:.92rem; }
.review-meta{ font-size:.75rem; color:hsl(var(--muted-foreground)); }
.stars{ color:hsl(var(--primary)); font-size:.85rem; letter-spacing:.1em; margin:.35rem 0; }
.review-text{ font-size:.9rem; color:hsl(var(--foreground) / .85); }

/* ===================================================================
   Contato
   =================================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:1024px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
.camila-card{ padding:2rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem; }
.camila-photo{ width:7rem; height:7rem; border-radius:9999px; overflow:hidden; border:2px solid hsl(var(--primary) / .5); }
.camila-photo img{ width:100%; height:100%; object-fit:cover; }
.camila-status{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:hsl(var(--muted-foreground)); }
.status-dot{ width:.55rem; height:.55rem; border-radius:9999px; background:#22c55e; }
.camila-ctas{ display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin-top:.5rem; }

.contact-info{ display:flex; flex-direction:column; gap:1.25rem; padding:2rem; }
.contact-row{ display:flex; gap:1rem; align-items:flex-start; }
.contact-row .why-icon{ width:2.5rem; height:2.5rem; margin-bottom:0; flex-shrink:0; }
.contact-row h4{ font-size:.85rem; color:hsl(var(--muted-foreground)); font-weight:500; margin-bottom:.2rem; }
.contact-row p{ font-size:1.05rem; font-weight:600; }

/* ===================================================================
   Parceiros
   =================================================================== */
.partners{ text-align:center; }
.partners-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-top:2.5rem; }
@media (min-width:640px){ .partners-grid{ grid-template-columns:repeat(4,1fr); } }
.partner-card{ padding:1.5rem; display:flex; align-items:center; justify-content:center; height:8rem; transition:transform .3s; }
.partner-card:hover{ transform:translateY(-4px); }
.partner-card img{ max-height:5rem; max-width:100%; width:auto; object-fit:contain; filter:grayscale(1) brightness(1.6); opacity:.85; transition:all .3s; }
.partner-card:hover img{ filter:none; opacity:1; }

/* ===================================================================
   Orçamento (form)
   =================================================================== */
.quote-grid{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:start; }
@media (min-width:1024px){ .quote-grid{ grid-template-columns:.85fr 1.15fr; } }
.quote-benefits{ padding:2rem; }
.quote-benefits h3{ font-size:1.15rem; margin-bottom:.35rem; }
.quote-benefits > p{ color:hsl(var(--muted-foreground)); font-size:.88rem; margin-bottom:1.5rem; }
.benefit-item{ display:flex; gap:.75rem; align-items:flex-start; margin-bottom:1.1rem; font-size:.92rem; }
.benefit-item .icon{ color:hsl(var(--primary)); margin-top:.15rem; }
/* O widget da Kommo (amoforms.js) injeta seu próprio <iframe id="amoforms_iframe_..."> com
   card branco e a marca "Distribuído por Kommo". Não dá para restylizar o conteúdo do
   iframe (cross-origin), então recortamos as bordas brancas e a faixa de crédito por fora. */
.quote-frame-wrap{
  position:relative; border-radius:1.5rem; overflow:hidden;
  height:465px; background:hsl(var(--card));
}
.quote-frame-wrap iframe{
  position:absolute !important; top:-8px !important; left:-8px !important;
  width:calc(100% + 16px) !important; height:610px !important;
  border:0 !important; overflow:hidden !important;
}
.quote-footnote{ text-align:center; font-size:.78rem; color:hsl(var(--muted-foreground)); margin-top:1rem; }

@media (max-width:640px){
  .quote-frame-wrap{ height:590px; }
  .quote-frame-wrap iframe{ height:760px !important; }
}

/* ===================================================================
   Footer
   =================================================================== */
.site-footer{ border-top:1px solid hsl(var(--glass-border)); padding-block:4rem 2rem; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; margin-bottom:3rem; }
@media (min-width:768px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr 1fr; } }
.footer-brand p{ color:hsl(var(--muted-foreground)); font-size:.88rem; margin-top:1rem; max-width:22rem; }
.footer-social{ display:flex; gap:.75rem; margin-top:1.25rem; }
.footer-col h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:hsl(var(--muted-foreground)); margin-bottom:1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.65rem; }
.footer-col a,.footer-col p{ font-size:.9rem; color:hsl(var(--foreground) / .85); }
.footer-col a:hover{ color:hsl(var(--primary)); }
.footer-grid-logo img{ max-width:100%; height:auto; border-radius:.75rem; }
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem;
  padding-top:2rem; border-top:1px solid hsl(var(--glass-border));
  font-size:.8rem; color:hsl(var(--muted-foreground));
}

/* ===================================================================
   Floating WhatsApp button (mobile-friendly convenience, matches CTA)
   =================================================================== */
.float-whatsapp{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:90;
  width:3.5rem; height:3.5rem; border-radius:9999px;
  background:var(--gradient-primary); color:hsl(var(--primary-foreground));
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-glow);
}