/* =========================
   VARIÁVEIS BASE
========================= */
:root{
  --bg:#ffffff;
  --muted:#6b7280;
  --text:#081124;
  --accent:#0ea5e9;
  --primary:#0b78a6;
  --primary-light:#2b9fd1;
  --radius:12px;
  --container:1200px;
  --easing:cubic-bezier(.2,.9,.2,1);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size:16px;
}

/* RESET & LAYOUT */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.container{max-width:var(--container);margin:0 auto;padding:24px;width:calc(100% - 48px)}

/* SKIP LINK */
.skip-link {
  position:fixed;
  left:0; top:0;
  transform:translateY(-120%);
  background:#000;color:#fff;padding:8px 12px;border-radius:8px;
  z-index:9999;opacity:0;transition:all .18s ease;
}
.skip-link:focus {
  transform:translateY(0); left:16px; top:16px; opacity:1;
  outline:2px solid var(--primary);
}

/* HEADER */
.site-header {
  background:#ffffff;
  position:sticky; top:0; left:0; z-index:100;
  box-shadow:0 1px 8px rgba(0,0,0,0.05);
}
.site-header .container { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo img { max-height:44px; display:block; }
.nav a { margin-left:20px; color:var(--text); text-decoration:none; font-weight:600; position:relative; padding:8px 4px; }
.nav a::after { content:""; display:block; width:0; height:2px; background:var(--accent); transition:width .25s ease; position:absolute; bottom:-6px; left:0; }
.nav a:hover::after, .nav a:focus::after { width:100%; }

/* HERO (Full viewport) */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-image: url('../img/elevador.webp');
  background-size: cover;
  background-position: center;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  padding: 0;
}
.hero-inner {
  padding: 84px 24px;
  width:100%;
}
.hero-overlay { position:absolute; inset:0; background: linear-gradient(180deg, rgba(4,22,34,0.75), rgba(4,22,34,0.55)); z-index:0; }
.hero-copy { position:relative; z-index:2; max-width:780px; }
.eyebrow { font-weight:600; margin-bottom:12px; color:rgba(255,255,255,0.9); }
.hero-copy h1 { font-size:clamp(1.6rem,2.8vw,2.8rem); margin-bottom:12px; color:#fff; }
.lead { color:rgba(255,255,255,0.95); max-width:60ch; margin-bottom:18px; }

/* NOSSO PROCESSO */
.section-processo {
  background: linear-gradient(180deg,#fbfdff 0%,#f8fbfd 100%);
  padding:64px 0;
  border-top:1px solid rgba(11,17,32,0.03);
  border-bottom:1px solid rgba(11,17,32,0.03);
}
.section-processo .section-header { text-align:center; margin-bottom:28px; }
.cards-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; align-items:start; }
.service-card { background:#fff; border:1px solid rgba(11,17,32,0.06); border-radius:12px; padding:18px; box-shadow:0 4px 16px rgba(0,0,0,0.03); text-align:center; }
.service-card h3 { color:var(--primary); margin-bottom:8px; }
.service-card p { color:var(--muted); }

/* ABOUT / SOBRE (Parallax) */
.about-section {
  position: relative;
  min-height: 520px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  overflow:hidden;
  background-image: url('../img/about.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* parallax effect on desktop */
}
.about-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,10,20,0.55) 0%, rgba(5,10,20,0.75) 100%);
  z-index: 0;
}
.about-content {
  position:relative;
  z-index:2;
  text-align:center;
  padding:40px 16px;
  width:100%;
  max-width:780px;
}
.about-content h2 { font-size:2rem; margin-bottom:12px; color:#fff; }
.about-content .lead { font-size:1.125rem; line-height:1.6; color:rgba(255,255,255,0.95); margin-bottom:18px; }
.about-list { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.about-list li { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25); padding:8px 16px; border-radius:999px; font-weight:500; }

/* fallback for mobile: disable fixed attachment (fixes jitter & performance on iOS/Android) */
@media (max-width:900px) {
  .about-section { background-attachment: scroll; background-position: center; min-height: 420px; }
}

/* PRODUTOS */
.section-produtos { padding:72px 0; background:#fff; }
.section-produtos .section-header { text-align:center; margin-bottom:28px; }
.products-frame {
  display:flex; align-items:center; justify-content:center; gap:12px; position:relative; padding:0 16px;
}
.carousel-btn {
  width:40px; height:40px; border-radius:50%; border:none; background:var(--primary); color:#fff; font-size:22px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.carousel-btn:focus { outline:3px solid rgba(11,120,166,0.25); }
.products-carousel {
  display:flex; gap:22px; overflow:hidden; scroll-behavior:smooth; width:100%; max-width:1150px; border-radius:14px;
}
.product-item {
  min-width:calc(33.333% - 15px);
  background:#fff; border:1px solid rgba(11,17,32,0.08); border-radius:14px; padding:18px; text-align:center;
  transition:all .25s var(--easing); box-shadow:0 4px 18px rgba(0,0,0,0.03);
}
.product-item img { width:100%; height:180px; object-fit:cover; border-radius:10px; margin-bottom:12px; display:block; }
.product-item h4 { margin:0; font-size:1rem; font-weight:700; color:var(--text); }
.products-cta { text-align:center; margin-top:24px; }

/* responsive adjustments */
@media (max-width:1100px){ .product-item { min-width:calc(50% - 12px); } }
@media (max-width:680px){ .product-item { min-width:100%; } .carousel-btn{display:none} }

/* =========================
   VARIÁVEIS BASE
========================= */
:root{
  --bg:#ffffff;
  --muted:#6b7280;
  --text:#081124;
  --accent:#0ea5e9;
  --primary:#0b78a6;
  --primary-light:#2b9fd1;
  --radius:12px;
  --container:1200px;
  --easing:cubic-bezier(.2,.9,.2,1);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size:16px;
}

/* RESET & LAYOUT */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.container{max-width:var(--container);margin:0 auto;padding:24px;width:calc(100% - 48px)}

/* SKIP LINK */
.skip-link {
  position:fixed;
  left:0; top:0;
  transform:translateY(-120%);
  background:#000;color:#fff;padding:8px 12px;border-radius:8px;
  z-index:9999;opacity:0;transition:all .18s ease;
}
.skip-link:focus {
  transform:translateY(0); left:16px; top:16px; opacity:1;
  outline:2px solid var(--primary);
}

/* HEADER */
.site-header {
  background:#ffffff;
  position:sticky; top:0; left:0; z-index:100;
  box-shadow:0 1px 8px rgba(0,0,0,0.05);
}
.site-header .container { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo img { max-height:44px; display:block; }
.nav a { margin-left:20px; color:var(--text); text-decoration:none; font-weight:600; position:relative; padding:8px 4px; }
.nav a::after { content:""; display:block; width:0; height:2px; background:var(--accent); transition:width .25s ease; position:absolute; bottom:-6px; left:0; }
.nav a:hover::after, .nav a:focus::after { width:100%; }

/* HERO (Full viewport) */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-image: url('../img/elevador.webp');
  background-size: cover;
  background-position: center;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  padding: 0;
}
.hero-inner {
  padding: 84px 24px;
  width:100%;
}
.hero-overlay { position:absolute; inset:0; background: linear-gradient(180deg, rgba(4,22,34,0.75), rgba(4,22,34,0.55)); z-index:0; }
.hero-copy { position:relative; z-index:2; max-width:780px; }
.eyebrow { font-weight:600; margin-bottom:12px; color:rgba(255,255,255,0.9); }
.hero-copy h1 { font-size:clamp(1.6rem,2.8vw,2.8rem); margin-bottom:12px; color:#fff; }
.lead { color:rgba(255,255,255,0.95); max-width:60ch; margin-bottom:18px; }

/* NOSSO PROCESSO */
.section-processo {
  background: linear-gradient(180deg,#fbfdff 0%,#f8fbfd 100%);
  padding:64px 0;
  border-top:1px solid rgba(11,17,32,0.03);
  border-bottom:1px solid rgba(11,17,32,0.03);
}
.section-processo .section-header { text-align:center; margin-bottom:28px; }
.cards-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; align-items:start; }
.service-card { background:#fff; border:1px solid rgba(11,17,32,0.06); border-radius:12px; padding:18px; box-shadow:0 4px 16px rgba(0,0,0,0.03); text-align:center; }
.service-card h3 { color:var(--primary); margin-bottom:8px; }
.service-card p { color:var(--muted); }

/* ABOUT / SOBRE (Parallax) */
.about-section {
  position: relative;
  min-height: 520px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  overflow:hidden;
  background-image: url('../img/about.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* parallax effect on desktop */
}
.about-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,10,20,0.55) 0%, rgba(5,10,20,0.75) 100%);
  z-index: 0;
}
.about-content {
  position:relative;
  z-index:2;
  text-align:center;
  padding:40px 16px;
  width:100%;
  max-width:780px;
}
.about-content h2 { font-size:2rem; margin-bottom:12px; color:#fff; }
.about-content .lead { font-size:1.125rem; line-height:1.6; color:rgba(255,255,255,0.95); margin-bottom:18px; }
.about-list { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.about-list li { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25); padding:8px 16px; border-radius:999px; font-weight:500; }

/* fallback for mobile: disable fixed attachment (fixes jitter & performance on iOS/Android) */
@media (max-width:900px) {
  .about-section { background-attachment: scroll; background-position: center; min-height: 420px; }
}

/* PRODUTOS */
.section-produtos { padding:72px 0; background:#fff; }
.section-produtos .section-header { text-align:center; margin-bottom:28px; }
.products-frame {
  display:flex; align-items:center; justify-content:center; gap:12px; position:relative; padding:0 16px;
}
.carousel-btn {
  width:40px; height:40px; border-radius:50%; border:none; background:var(--primary); color:#fff; font-size:22px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.carousel-btn:focus { outline:3px solid rgba(11,120,166,0.25); }
.products-carousel {
  display:flex; gap:22px; overflow:hidden; scroll-behavior:smooth; width:100%; max-width:1150px; border-radius:14px;
}
.product-item {
  min-width:calc(33.333% - 15px);
  background:#fff; border:1px solid rgba(11,17,32,0.08); border-radius:14px; padding:18px; text-align:center;
  transition:all .25s var(--easing); box-shadow:0 4px 18px rgba(0,0,0,0.03);
}
.product-item img { width:100%; height:180px; object-fit:cover; border-radius:10px; margin-bottom:12px; display:block; }
.product-item h4 { margin:0; font-size:1rem; font-weight:700; color:var(--text); }
.products-cta { text-align:center; margin-top:24px; }

/* responsive adjustments */
@media (max-width:1100px){ .product-item { min-width:calc(50% - 12px); } }
@media (max-width:680px){ .product-item { min-width:100%; } .carousel-btn{display:none} }

/* CONTATO (form + mapa) */
.contact-map-section { background:linear-gradient(180deg,#f3f5f7 0%,#e8ebee 100%); padding:56px 0; }
.contact-map-inner { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
@media (max-width:980px){ .contact-map-inner{grid-template-columns:1fr;} }
.lead-form { background:#fff; padding:22px; border-radius:12px; box-shadow:0 4px 18px rgba(0,0,0,0.05); }
.form-row { position:relative; margin-bottom:18px; }
.form-row input, .form-row textarea { width:100%; padding:14px 16px; border-radius:8px; border:1px solid rgba(11,17,32,0.08); font:inherit; color:var(--text); background:#fff; }
.form-row label { position:absolute; left:14px; top:12px; color:var(--muted); pointer-events:none; transition:all .18s ease; background:#fff; padding:0 6px; }
.form-row input:focus + label, .form-row textarea:focus + label, .form-row input:not(:placeholder-shown) + label, .form-row textarea:not(:placeholder-shown) + label { transform:translateY(-26px); font-size:.85rem; color:var(--primary); }
.form-status { margin-top:10px; min-height:1.1em; color:var(--muted); }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:10px; font-weight:700; cursor:pointer; border:1px solid transparent; }
.btn-primary { background:var(--primary); color:#fff; box-shadow:0 8px 26px rgba(11,120,166,0.12); }
.btn-ghost { background:transparent; color:var(--primary); border:1px solid rgba(11,120,166,0.12); }

/* MAP */
.map-placeholder { 
  border-radius:12px; 
  overflow:hidden; 
  border:1px solid rgba(11,17,32,0.05); 
  min-height:300px; 
  background:#f3f6f8; 
  position:relative;
  /* Removido: display:flex, align-items, justify-content */
}
.map-thumb { 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  filter:blur(6px) grayscale(20%); 
  display:block;
  position: absolute; /* ESSENCIAL: Permite que coexista com o iframe */
  top: 0;
  left: 0;
  transition: opacity .4s ease; /* Transição para sumir suavemente */
}
.map-overlay { 
  position:absolute; 
  inset:0; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  pointer-events: none; 
}
.map-overlay .btn { 
  pointer-events:auto; 
  width:auto; 
  padding:10px 16px; 
  border-radius:8px; 
}

/* Estilos do Iframe e da Transição de Carregamento (Novo/Ajustado) */
.map-iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; /* Inicia invisível para a transição */
  transition: opacity .4s ease;
}

/* Quando o JS adiciona a classe .loaded, revelamos o iframe e escondemos o thumb */
.map-placeholder.loaded .map-iframe {
  opacity: 1; /* Torna o mapa visível com transição */
}

.map-placeholder.loaded .map-thumb {
  opacity: 0; /* Esconde o thumbnail para que o mapa apareça */
}

/* RODAPÉ (azul claro, fontes brancas) */
.site-footer { background: linear-gradient(180deg, var(--primary-light), #0b5f8a); color:#fff; padding:18px 24px; }
.footer-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; align-items:start; }
.footer-about h3 { color:#fff; font-weight:700; margin-bottom:8px; }
.footer-about p { color:rgba(255,255,255,0.9); margin:0; }
.footer-nav ul { list-style:none; padding:0; margin:0; display:block; }
.footer-nav li { margin-bottom:8px; }
.footer-nav a { color:#fff; text-decoration:none; font-weight:500; }
.footer-nav a:hover, .footer-nav a:focus { text-decoration:underline; opacity:0.95; }
.footer-contact a { color:#fff; text-decoration:none; font-weight:500; }
.footer-contact a:hover { text-decoration:underline; opacity:0.95; }
.footer-copy { text-align:center; margin-top:12px; font-size:0.9rem; color:rgba(255,255,255,0.9); }

/* WHATSAPP FLOAT */
.whatsapp-float { position:fixed; bottom:20px; right:20px; z-index:150; width:52px; height:52px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.12); }
.whatsapp-float img { width:26px; height:26px; filter:none; }

/* ACCESSIBILITY & MOTION */
:focus-visible { outline: 3px solid rgba(11,120,166,0.25); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }

/* RODAPÉ (azul claro, fontes brancas) */
.site-footer { background: linear-gradient(180deg, var(--primary-light), #0b5f8a); color:#fff; padding:18px 24px; }
.footer-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; align-items:start; }
.footer-about h3 { color:#fff; font-weight:700; margin-bottom:8px; }
.footer-about p { color:rgba(255,255,255,0.9); margin:0; }
.footer-nav ul { list-style:none; padding:0; margin:0; display:block; }
.footer-nav li { margin-bottom:8px; }
.footer-nav a { color:#fff; text-decoration:none; font-weight:500; }
.footer-nav a:hover, .footer-nav a:focus { text-decoration:underline; opacity:0.95; }
.footer-contact a { color:#fff; text-decoration:none; font-weight:500; }
.footer-contact a:hover { text-decoration:underline; opacity:0.95; }
.footer-copy { text-align:center; margin-top:12px; font-size:0.9rem; color:rgba(255,255,255,0.9); }

/* WHATSAPP FLOAT */
.whatsapp-float { position:fixed; bottom:20px; right:20px; z-index:150; width:52px; height:52px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.12); }
.whatsapp-float img { width:26px; height:26px; filter:none; }

/* ACCESSIBILITY & MOTION */
:focus-visible { outline: 3px solid rgba(11,120,166,0.25); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }