/* ========================================
   SPASSOS ENGENHARIA - STYLES
   Design: Arrojado Premium
   ======================================== */

/* VARIABLES & RESET */
:root {
  --azul: #204188;
  --azul-escuro: #051d4b;
  --azul-bg: #030b1a;
  --azul-claro: #7BCFF3;
  --laranja: #CB6125;
  --laranja-light: #e07a3a;
  --branco: #ffffff;
  --cinza: #7a8da8;
  --cinza-claro: #cbd5e0;
  --glass-bg: rgba(32, 65, 136, 0.15);
  --glass-border: rgba(123, 207, 243, 0.12);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body {
  font-family:'Montserrat', sans-serif;
  background:var(--azul-bg);
  color:var(--branco);
  line-height:1.7;
  overflow-x:hidden;
}
h1,h2,h3,h4 { font-family:'Exo 2', sans-serif; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.highlight { color:var(--laranja); }
.center { text-align:center; display:block; }

/* HEADER */
.header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(3,11,26,0.92); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--glass-border);
  transition:all 0.4s ease;
  padding:4px 0;
}
.header.scrolled {
  background:rgba(3,11,26,0.97);
  box-shadow:0 4px 24px rgba(0,0,0,0.3);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; height:72px; }
.logo-img { height:52px; width:auto; filter:none; transition:all 0.3s ease; }
.unde-construction-img { height:70px; width:auto; filter:none; transition:all 0.3s ease; margin-top: 10px; }
.nav-desktop { display:flex; align-items:center; gap:6px; }
.nav-desktop a {
  color:rgba(255,255,255,0.75); font-size:0.8rem; font-weight:500;
  padding:10px 18px; border-radius:10px; transition:all 0.3s ease; letter-spacing:0.3px;
}
.nav-desktop a:hover { color:var(--branco); background:var(--glass-bg); }
.btn-header {
  background:linear-gradient(135deg, var(--laranja), var(--laranja-light)) !important;
  color:var(--branco) !important;
  padding:12px 28px !important; border-radius:10px; font-weight:600 !important;
  transition:all 0.3s ease !important; margin-left:8px;
}
.btn-header:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(203,97,37,0.35); }
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:8px; z-index:1001; }
.hamburger span { display:block; width:26px; height:2px; background:var(--branco); margin:6px 0; border-radius:2px; transition:all 0.3s ease; }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(6px, -6px); }

/* MOBILE NAV */
.mobile-nav {
  position:fixed; top:0; left:0; width:100%; height:100vh; z-index:999;
  background:rgba(3,11,26,0.98); backdrop-filter:blur(20px);
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.mobile-nav.open { display:flex; }
.mobile-nav a {
  color:var(--branco); font-family:'Exo 2', sans-serif; font-size:1.4rem;
  font-weight:600; padding:16px 32px; border-radius:12px;
  transition:all 0.3s ease; letter-spacing:1px;
}
.mobile-nav a:hover { background:var(--glass-bg); color:var(--laranja); }
.mobile-nav .mobile-cta {
  margin-top:16px; background:linear-gradient(135deg, var(--laranja), var(--laranja-light));
  padding:16px 40px; border-radius:14px; font-size:1.1rem;
}

/* HERO */
.hero {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center; background-attachment:fixed;
  position:relative; padding:140px 0 100px; overflow:hidden;
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(3,11,26,0.6) 0%, rgba(5,29,75,0.45) 40%, rgba(3,11,26,0.75) 100%);
}
.hero-content { position:relative; z-index:2; text-align:center; max-width:900px; margin:0 auto; }
.hero-tag {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);
  color:var(--azul-claro); padding:10px 24px; border-radius:50px; font-size:0.78rem;
  font-weight:600; letter-spacing:0.5px; margin-bottom:36px;
}
.hero-tag::before {
  content:''; width:8px; height:8px; background:var(--laranja);
  border-radius:50%; animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity:1; transform:scale(1); }
  50% { opacity:0.5; transform:scale(1.3); }
}
.hero h1 { font-size:4.2rem; font-weight:900; line-height:1.08; margin-bottom:28px; text-align: -webkit-center;}
.hero h1 .grad {
  background:linear-gradient(135deg, var(--azul-claro), #a8e0f7, var(--azul-claro));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub { font-size:1.15rem; color:var(--cinza); max-width:620px; margin:0 auto 44px; line-height:1.8; }
.hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:80px; }
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(135deg, var(--laranja), var(--laranja-light));
  color:var(--branco); padding:16px 36px;
  border-radius:14px; font-weight:700; font-size:0.95rem; transition:all 0.3s ease;
  letter-spacing:0.5px; border:none; cursor:pointer;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 35px rgba(203,97,37,0.4); }
.btn-outline {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);
  color:var(--branco); padding:16px 36px;
  border-radius:14px; font-weight:600; font-size:0.95rem; transition:all 0.3s ease;
}
.btn-outline:hover { background:rgba(32,65,136,0.3); border-color:rgba(123,207,243,0.3); transform:translateY(-3px); }
.hero-stats { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.stat {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:blur(15px); border-radius:20px; padding:32px 28px;
  text-align:center; transition:all 0.3s ease; min-width:180px;
}
.stat:hover { border-color:rgba(123,207,243,0.25); transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,0.2); }
.stat-num {
  font-family:'Exo 2'; font-size:2.6rem; font-weight:900;
  background:linear-gradient(135deg, var(--azul-claro), #a8e0f7);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1;
}
.stat-plus {
  font-family:'Exo 2'; font-size:1.6rem; font-weight:700;
  background:linear-gradient(135deg, var(--azul-claro), #a8e0f7);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-label { display:block; font-size:0.8rem; color:var(--cinza); margin-top:8px; letter-spacing:0.3px; }

/* SECTION TAGS */
.section-tag {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--laranja); font-size:0.72rem; font-weight:700;
  letter-spacing:3px; text-transform:uppercase; margin-bottom:16px;
}
.section-tag::before {
  content:''; width:24px; height:2px; background:var(--laranja); border-radius:2px;
}
.section-tag.center::before { display:none; }
.section-title { font-size:2.6rem; font-weight:800; margin-bottom:20px; text-align:center; line-height:1.15; }
.section-sub { text-align:center; color:var(--cinza); max-width:600px; margin:0 auto 48px; font-size:1rem; line-height:1.8; }

/* SOBRE NÓS */
.sobre { padding:140px 0; position:relative; }
.sobre::before {
  content:''; position:absolute; top:0; left:0; width:100%; height:100%;
  background:radial-gradient(ellipse at 80% 50%, rgba(203,97,37,0.06) 0%, transparent 50%),
             linear-gradient(180deg, var(--azul-bg) 0%, #051d4b 50%, var(--azul-bg) 100%);
  z-index:-1;
}
.sobre-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.sobre-img-wrap {
  position:relative; border-radius:24px; overflow:hidden;
  border:1px solid var(--glass-border);
}
.sobre-img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:24px; }
.sobre-badge {
  position:absolute; bottom:0px; left:15px;
  background:linear-gradient(135deg, var(--laranja), var(--laranja-light));
  color:var(--branco); padding:20px 28px;
  border-radius:18px;
  box-shadow:0 12px 40px rgba(203,97,37,0.3); z-index:5;
  display:flex; align-items:center; gap:14px;
}
.badge-num {
  font-family:'Exo 2'; font-weight:900; font-size:2.2rem; line-height:1;
}
.badge-text {
  font-family:'Montserrat'; font-weight:600; font-size:0.85rem; line-height:1.3;
  opacity:0.95;
}
.sobre-text h2 { font-size:1.7rem; font-weight:700; margin-bottom:20px; text-align:left; line-height:1.3; }
.sobre-text p { color:var(--cinza); margin-bottom:16px; font-size:0.95rem; line-height:1.8; }
.sobre-tags { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.tag {
  display:flex; align-items:center; gap:10px;
  padding:14px 20px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:12px; font-size:0.85rem; font-weight:600;
  transition:all 0.3s ease;
}
.tag:hover { border-color:rgba(203,97,37,0.3); background:rgba(203,97,37,0.08); }

/* SERVIÇOS */
.servicos {
  padding:140px 0; position:relative;
}
.servicos::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--azul-bg), #051d4b, var(--azul-bg));
  z-index:-1;
}
.servicos-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.servico-card {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);
  border-radius:24px; padding:40px 32px; transition:all 0.4s ease;
  cursor:pointer; position:relative; overflow:hidden;
}
.servico-card::before {
  content:''; position:absolute; top:0; left:0; width:4px; height:100%;
  background:linear-gradient(180deg, var(--laranja), var(--azul-claro));
  opacity:0; transition:opacity 0.3s ease;
}
.servico-card:hover::before, .servico-card.expanded::before { opacity:1; }
.servico-card:hover, .servico-card.expanded {
  border-color:rgba(123,207,243,0.2);
  box-shadow:0 24px 60px rgba(0,0,0,0.25);
}
.servico-icon {
  width:64px; height:64px; border-radius:18px;
  background:linear-gradient(135deg, rgba(203,97,37,0.15), rgba(123,207,243,0.1));
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.servico-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:12px; line-height:1.3; }
.servico-desc { color:var(--cinza); font-size:0.88rem; margin-bottom:20px; line-height:1.7; }
.servico-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:none; color:var(--laranja); font-weight:600;
  font-size:0.82rem; cursor:pointer; transition:gap 0.3s ease;
  font-family:'Montserrat', sans-serif; padding:0;
}
.servico-btn:hover { gap:14px; }
.servico-btn .arrow { transition:transform 0.3s; }
.servico-card.expanded .servico-btn .arrow { transform:rotate(90deg); }

/* Mobile accordion details */
.servico-details-mobile {
  max-height:0; overflow:hidden;
  transition:max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease, padding 0.3s ease;
  opacity:0;
}
.servico-details-mobile.open { max-height:800px; opacity:1; padding-top:20px; }
.details-inner {
  padding-top:20px; border-top:1px solid rgba(123,207,243,0.1); margin-top:16px;
}
.details-inner h4 {
  font-family:'Exo 2', sans-serif; color:var(--azul-claro); font-size:0.82rem;
  font-weight:700; text-transform:uppercase; letter-spacing:1px;
  margin:16px 0 12px; padding-bottom:8px;
  border-bottom:1px solid rgba(123,207,243,0.1);
}
.details-inner h4:first-child { margin-top:0; }
.details-inner ul { list-style:none; padding:0; }
.details-inner li {
  padding:4px 0 4px 20px; color:rgba(255,255,255,0.8); font-size:0.84rem;
  position:relative; line-height:1.6; margin-bottom:8px;
}
.details-inner li::before {
  content:''; position:absolute; left:0; top:8px;
  width:6px; height:6px; background:var(--laranja); border-radius:50%;
}
.details-note {
  color:var(--cinza); font-size:0.75rem; font-style:italic;
  margin-top:16px; border-top:1px solid var(--glass-border); padding-top:12px;
}

/* SERVICE MODAL */
.modal-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(3,11,26,0.85); backdrop-filter:blur(12px);
  display:none; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.3s;
}
.modal-overlay.active { display:flex; opacity:1; }
.modal-content {
  background:linear-gradient(135deg, rgba(5,29,75,0.95), rgba(3,11,26,0.98));
  border:1px solid rgba(255,255,255,0.1);
  border-radius:24px; padding:48px; max-width:640px; width:90%;
  max-height:85vh; overflow-y:auto; position:relative;
  transform:scale(0.8) translateY(40px); opacity:0;
  transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:0 32px 80px rgba(0,0,0,0.5);
}
.modal-overlay.active .modal-content {
  transform:scale(1) translateY(0); opacity:1;
}
.modal-close {
  position:absolute; top:16px; right:20px;
  background:none; border:none; color:var(--cinza); font-size:2rem;
  cursor:pointer; transition:color 0.3s; line-height:1;
}
.modal-close:hover { color:var(--laranja); }
.modal-icon {
  width:64px; height:64px; border-radius:16px;
  background:linear-gradient(135deg, rgba(203,97,37,0.15), rgba(123,207,243,0.1));
  border:1px solid rgba(203,97,37,0.3);
  display:flex; align-items:center; justify-content:center; margin-bottom:24px;
}
.modal-content h2 { font-size:1.5rem; font-weight:700; margin-bottom:24px; }
.modal-body h4 {
  font-family:'Exo 2', sans-serif; color:var(--azul-claro); font-size:0.82rem;
  font-weight:700; text-transform:uppercase; letter-spacing:1px;
  margin:20px 0 12px; padding-bottom:8px;
  border-bottom:1px solid rgba(123,207,243,0.1);
}
.modal-body h4:first-child { margin-top:0; }
.modal-body ul { list-style:none; padding:0; }
.modal-body li {
  padding:6px 0 6px 20px; color:rgba(255,255,255,0.8); font-size:0.9rem;
  position:relative; line-height:1.6; margin-bottom:8px;
}
.modal-body li::before {
  content:''; position:absolute; left:0; top:10px;
  width:6px; height:6px; background:var(--laranja); border-radius:50%;
}
.modal-body .details-note {
  color:var(--cinza); font-size:0.75rem; font-style:italic;
  margin-top:20px; border-top:1px solid var(--glass-border); padding-top:16px;
}

/* YOUTUBE */
.youtube-section {
  padding:100px 0; position:relative;
}
.youtube-section::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(32,65,136,0.15) 0%, transparent 60%),
             linear-gradient(180deg, var(--azul-bg), #051d4b, var(--azul-bg));
  z-index:-1;
}
.youtube-wrap {
  max-width:960px; margin:0 auto; border-radius:24px; overflow:hidden;
  aspect-ratio:16/9; box-shadow:0 24px 80px rgba(0,0,0,0.4);
  border:1px solid var(--glass-border);
}
.youtube-wrap iframe { width:100%; height:100%; border:0; }

/* MAPA */
.mapa-section {
  padding:140px 0; position:relative;
}
.mapa-section::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 50%, rgba(32,65,136,0.2) 0%, transparent 60%),
             linear-gradient(180deg, var(--azul-bg), #051d4b, var(--azul-bg));
  z-index:-1;
}
.mapa-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.mapa-svg-wrap {
  position:relative; padding:20px;
}

/* Brazil map SVG styles — NEW REFERENCE MAP */
#brazil-map { width:100%; height:auto; }
#brazil-map polygon,
#brazil-map path {
  transition:all 0.3s ease; cursor:pointer;
}
/* Ilhas e fragmentos costeiros */
#brazil-map .ilhas polygon {
  fill:rgba(10,30,70,0.35);
  cursor:default;
  pointer-events:none;
}
/* Default: all state shapes get a uniform dark blue */
#brazil-map a.estado polygon,
#brazil-map a.estado path {
  fill:rgba(10,30,70,0.5);
  stroke-width:0.8;
}
/* Active states (where Spassos operates) get a brighter blue */
#brazil-map a.estado[data-active="true"] polygon,
#brazil-map a.estado[data-active="true"] path {
  fill:rgba(32,65,136,0.7);
  stroke:rgba(255,255,255,0.3);
}
/* Inactive states get a darker, more muted blue */
#brazil-map a.estado[data-active="false"] polygon,
#brazil-map a.estado[data-active="false"] path {
  fill:rgba(8,20,50,0.5);
  stroke:rgba(255,255,255,0.1);
}
/* Region-active highlight: orange fill */
#brazil-map a.estado polygon.region-active,
#brazil-map a.estado path.region-active {
  fill:var(--laranja) !important;
  stroke:rgba(255,255,255,0.35) !important;
  filter:drop-shadow(0 0 10px rgba(203,97,37,0.5));
}
/* Hover effect — only on active states */
#brazil-map a.estado[data-active="true"]:hover polygon,
#brazil-map a.estado[data-active="true"]:hover path {
  fill:var(--laranja-light) !important;
  filter:drop-shadow(0 0 6px rgba(203,97,37,0.3));
}
/* Hover on inactive — subtle brightening */
#brazil-map a.estado[data-active="false"]:hover polygon,
#brazil-map a.estado[data-active="false"]:hover path {
  fill:rgba(15,40,80,0.6);
}

.mapa-info h2 { font-size:2.5rem; font-weight:900; margin-bottom:24px; text-align:left; line-height:1.15; }
.mapa-info h2 .hl {
  background:linear-gradient(135deg, var(--laranja), var(--laranja-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.mapa-img-container {
  position:relative; border-radius:16px; overflow:hidden; margin-bottom:24px;
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
  border:1px solid var(--glass-border);
}
.mapa-region-img { width:100%; height:280px; object-fit:cover; transition:opacity 0.5s; }
.mapa-img-label {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent, rgba(3,11,26,0.9));
  padding:24px 20px 16px;
}
.mapa-img-label strong { display:block; font-size:1rem; }
.mapa-img-label span { font-size:0.8rem; color:var(--cinza); }
.region-btns { display:flex; flex-wrap:wrap; gap:8px; }
.region-btn {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  color:var(--cinza-claro); padding:10px 16px; border-radius:10px;
  cursor:pointer; font-family:'Montserrat'; font-size:0.85rem; font-weight:500;
  transition:all 0.3s ease; text-align:left;
}
.region-btn small { display:block; font-size:0.7rem; color:var(--cinza); margin-top:2px; }
.region-btn:hover, .region-btn.active {
  background:var(--laranja); border-color:var(--laranja); color:var(--branco);
}
.region-btn.active small, .region-btn:hover small { color:rgba(255,255,255,0.8); }

/* PORTFOLIO */
.portfolio {
  padding:140px 0; position:relative;
}
.portfolio::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--azul-bg), #051d4b, var(--azul-bg));
  z-index:-1;
}
.portfolio-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.portfolio-card {
  border-radius:20px; overflow:hidden; position:relative;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  cursor:pointer; transition:all 0.4s ease;
}
.portfolio-card:hover {
  transform:translateY(-8px);
  box-shadow:0 24px 60px rgba(0,0,0,0.3);
  border-color:rgba(203,97,37,0.3);
}
.portfolio-card img {
  width:100%; height:220px; object-fit:cover;
  transition:transform 0.5s ease;
}
.portfolio-card:hover img { transform:scale(1.08); }
.portfolio-info { padding:24px 28px; }
.portfolio-cat {
  display:inline-block; color:var(--laranja); font-size:0.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1.5px; margin-bottom:8px;
}
.portfolio-info h3 { font-size:1.05rem; margin:8px 0; font-weight:700; line-height:1.3; }
.portfolio-info p { color:var(--cinza); font-size:0.84rem; line-height:1.7; }

/* INSTAGRAM */
.instagram-section {
  padding:100px 0; position:relative;
}
.instagram-section::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 60% 40%, rgba(203,97,37,0.08) 0%, transparent 50%),
             linear-gradient(180deg, var(--azul-bg), #051d4b, var(--azul-bg));
  z-index:-1;
}
.instagram-feed-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;
  max-width:1100px; margin:40px auto 0;
}
.ig-post-card {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:16px; overflow:hidden; transition:all 0.4s ease;
  cursor:pointer; position:relative;
}
.ig-post-card:hover {
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,0.3);
  border-color:rgba(203,97,37,0.3);
}
.ig-post-card img {
  width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform 0.5s ease;
}
.ig-post-card:hover img { transform:scale(1.1); }
.ig-post-overlay {
  position:absolute; top:0; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, transparent 40%, rgba(3,11,26,0.8) 100%);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transition:opacity 0.3s ease; padding:16px;
}
.ig-post-card:hover .ig-post-overlay { opacity:1; }
.ig-post-overlay svg { width:40px; height:40px; fill:white; }
.ig-loading {
  grid-column:1/-1; text-align:center; padding:60px 20px;
  color:var(--cinza); font-size:14px;
}
.ig-post-caption {
  padding:12px 14px; font-size:12px; color:var(--cinza);
  line-height:1.4; max-height:60px; overflow:hidden;
}
.ig-post-date {
  padding:0 14px 12px; font-size:11px; color:rgba(255,255,255,0.3);
}
.instagram-embeds {
  display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;
  max-width:1100px; margin:40px auto 0;
}

.btn-instagram {
  display:inline-flex; align-items:center;
  background:linear-gradient(135deg, #833AB4, #FD1D1D, #F77737);
  color:var(--branco); padding:16px 36px; border-radius:14px;
  font-weight:700; font-size:0.95rem; transition:all 0.3s ease;
}
.btn-instagram:hover { transform:translateY(-3px); box-shadow:0 12px 35px rgba(131,58,180,0.4); }

/* CONTATO */
.contato {
  padding:140px 0; position:relative;
}
.contato::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 70% 30%, rgba(203,97,37,0.08) 0%, transparent 50%),
             linear-gradient(180deg, var(--azul-bg), #051d4b, var(--azul-bg));
  z-index:-1;
}
.contato-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-bottom:48px; }
.contato-card {
  display:flex; align-items:center; gap:20px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);
  border-radius:18px; padding:22px 28px; transition:all 0.3s ease;
}
.contato-card:hover {
  border-color:rgba(203,97,37,0.3); background:rgba(203,97,37,0.06);
  transform:translateX(6px);
}
.contato-icon {
  width:52px; height:52px; min-width:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background: linear-gradient(135deg, rgb(37 153 203 / 44%), rgb(203 97 37 / 21%));
}
.contato-icon.whatsapp svg { color:#25D366; }
.contato-icon.email svg { color:var(--azul-claro); }
.contato-icon.location svg { color:var(--laranja); }
.contato-label { display:block; font-size:0.72rem; color:var(--cinza); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.contato-info strong { font-size:0.95rem; font-weight:600; }
.mapa-embed {
  border-radius:20px; overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
  border:1px solid var(--glass-border);
}

/* FOOTER */
.footer {
  background:rgba(5,29,75,0.5); border-top:1px solid var(--glass-border);
  padding:80px 0 0;
}
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; margin-bottom:60px; }
.footer-logo { height:90px; margin-bottom:16px; }
.footer-col p { color:var(--cinza); font-size:0.85rem; line-height:1.7; }
.footer-col h4 {
  font-family:'Exo 2', sans-serif; font-size:0.85rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; margin-bottom:20px; color:var(--azul-claro);
}
.footer-col a { display:block; color:var(--cinza); font-size:0.85rem; padding:4px 0; margin-bottom:8px; transition:color 0.3s ease; }
.footer-col a:hover { color:var(--branco); }
.footer-social { display:flex; gap:10px; margin-top:24px; }
.footer-social a {
  width:42px; height:42px; border-radius:12px;
  background:var(--glass-bg); border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--branco); font-size:0.95rem; transition:all 0.3s ease;
}
.footer-social a:hover { transform:translateY(-3px); }
.footer-social a:nth-child(1):hover { background:linear-gradient(135deg, #833AB4, #FD1D1D, #F77737); border-color:transparent; }
.footer-social a:nth-child(2):hover { background:#FF0000; border-color:transparent; }
.footer-social a:nth-child(3):hover { background:#25D366; border-color:transparent; }
.footer-social a:nth-child(4):hover { background:var(--azul-claro); border-color:transparent; color:var(--azul-bg); }
.footer-social a:nth-child(5):hover { background:#43E660; border-color:transparent; color:var(--azul-bg); }
.footer-bottom {
  text-align:center; padding:32px 0; margin-top:0;
  border-top:1px solid var(--glass-border);
}
.footer-bottom p { color:var(--cinza); font-size:0.78rem; margin-bottom:4px; }
.footer-credit { color:rgba(255,255,255,0.4); font-size:0.72rem; }
.footer-credit a { color:rgba(255,255,255,0.5); transition:color 0.3s; }
.footer-credit a:hover { color:var(--laranja); }

/* WHATSAPP FLOAT */
.whatsapp-float {
  position:fixed; bottom:28px; right:28px; z-index:998;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.8rem;
  box-shadow:0 8px 25px rgba(37,211,102,0.35); transition:all 0.3s ease;
  animation:wa-pulse 2s infinite;
}
.whatsapp-float:hover { transform:scale(1.1); box-shadow:0 12px 35px rgba(37,211,102,0.5); }
@keyframes wa-pulse {
  0%, 100% { box-shadow:0 8px 25px rgba(37,211,102,0.35); }
  50% { box-shadow:0 8px 35px rgba(37,211,102,0.55), 0 0 0 12px rgba(37,211,102,0.1); }
}

/* ========================================
   ANIMATIONS & EFFECTS
   ======================================== */

/* Base fade-in */
.fade-in { opacity:0; transform:translateY(30px); transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* Directional reveals */
.slide-left { opacity:0; transform:translateX(-60px); transition:all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.slide-left.visible { opacity:1; transform:translateX(0); }
.slide-right { opacity:0; transform:translateX(60px); transition:all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.slide-right.visible { opacity:1; transform:translateX(0); }
.scale-in { opacity:0; transform:scale(0.85); transition:all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.scale-in.visible { opacity:1; transform:scale(1); }
.blur-in { opacity:0; filter:blur(10px); transform:translateY(20px); transition:all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.blur-in.visible { opacity:1; filter:blur(0); transform:translateY(0); }

/* Staggered children */
.stagger-children > *:nth-child(1) { transition-delay:0s; }
.stagger-children > *:nth-child(2) { transition-delay:0.12s; }
.stagger-children > *:nth-child(3) { transition-delay:0.24s; }
.stagger-children > *:nth-child(4) { transition-delay:0.36s; }
.stagger-children > *:nth-child(5) { transition-delay:0.48s; }
.stagger-children > *:nth-child(6) { transition-delay:0.6s; }
.stagger-children > *:nth-child(7) { transition-delay:0.72s; }
.stagger-children > *:nth-child(8) { transition-delay:0.84s; }

/* Hero entrance animation */
@keyframes heroFadeUp {
  from { opacity:0; transform:translateY(40px); }
  to { opacity:1; transform:translateY(0); }
}
.hero-content .hero-tag { animation:heroFadeUp 0.8s ease forwards; animation-delay:0.2s; opacity:0; }
.hero-content h1 { animation:heroFadeUp 0.8s ease forwards; animation-delay:0.5s; opacity:0; }
.hero-content .hero-sub { animation:heroFadeUp 0.8s ease forwards; animation-delay:0.8s; opacity:0; }
.hero-content .hero-btns { animation:heroFadeUp 0.8s ease forwards; animation-delay:1.1s; opacity:0; }
.hero-content .hero-stats { animation:heroFadeUp 0.8s ease forwards; animation-delay:1.4s; opacity:0; }

/* Parallax hero background */
@keyframes subtleFloat {
  0%, 100% { background-position:center center; }
  50% { background-position:center 48%; }
}

/* Glow pulse on buttons */
.btn-primary { position:relative; overflow:hidden; }
.btn-primary::after {
  content:''; position:absolute; top:50%; left:50%;
  width:0; height:0; border-radius:50%;
  background:rgba(255,255,255,0.15);
  transform:translate(-50%, -50%);
  transition:width 0.6s ease, height 0.6s ease;
}
.btn-primary:hover::after { width:300px; height:300px; }

/* Section title reveal glow */
.section-title { position:relative; }
@keyframes titleGlow {
  0% { text-shadow:none; }
  50% { text-shadow:0 0 30px rgba(123,207,243,0.15); }
  100% { text-shadow:none; }
}
.section-title.visible { animation:titleGlow 3s ease infinite; }

/* Card hover lift enhancement */
.servico-card, .portfolio-card, .contato-card {
  transition:all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.servico-card:hover, .portfolio-card:hover {
  transform:translateY(-8px);
  box-shadow:0 24px 60px rgba(0,0,0,0.3), 0 0 40px rgba(123,207,243,0.05);
}

/* Smooth badge entrance */
.sobre-badge {
  animation:badgeSlideIn 0.8s ease forwards;
  animation-delay:0.5s;
  opacity:0;
}
@keyframes badgeSlideIn {
  from { opacity:0; transform:translateX(-30px) scale(0.9); }
  to { opacity:1; transform:translateX(0) scale(1); }
}

/* WhatsApp float entrance */
.whatsapp-float {
  animation:wa-pulse 2s infinite, waEntrance 0.6s ease forwards;
  animation-delay:2s, 0s;
}
@keyframes waEntrance {
  from { opacity:0; transform:scale(0) rotate(-180deg); }
  to { opacity:1; transform:scale(1) rotate(0deg); }
}

/* Smooth scroll indicator */
@keyframes scrollHint {
  0%, 100% { transform:translateY(0); opacity:0.6; }
  50% { transform:translateY(8px); opacity:1; }
}

/* Instagram card hover */
.ig-post-card {
  transition:all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.ig-post-card:hover {
  transform:translateY(-6px) scale(1.02) !important;
  box-shadow:0 20px 50px rgba(0,0,0,0.3) !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width:1200px) {
  .hero h1 { font-size:3.4rem; }
  .servicos-grid { grid-template-columns:1fr; max-width:700px; margin-left:auto; margin-right:auto; }
  .portfolio-grid { grid-template-columns:repeat(2, 1fr); }
  .instagram-feed-grid { grid-template-columns:repeat(3, 1fr); }
}

@media (max-width:1024px) {
  .sobre-grid, .mapa-grid { grid-template-columns:1fr; gap:48px; }
  .contato-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .section-title { font-size:2.2rem; }
  .mapa-svg-wrap { max-width:400px; margin:0 auto; }
  .mapa-info h2 { font-size:2rem; }
}

@media (max-width:768px) {
  .nav-desktop { display:none; }
  .hamburger { display:block; }
  .hero { padding:120px 0 60px; }
  .hero h1 { font-size:2.2rem; }
  .hero-sub { font-size:1rem; }
  .hero-stats { gap:12px; }
  .stat { min-width:140px; padding:20px 16px; }
  .stat-num { font-size:2rem; }
  .section-title { font-size:1.8rem; }
  .sobre, .servicos, .mapa-section, .portfolio, .contato, .youtube-section, .instagram-section { padding:80px 0; }
  .servicos-grid { grid-template-columns:1fr; }
  .portfolio-grid { grid-template-columns:1fr; max-width:500px; margin-left:auto; margin-right:auto; }
  .contato-grid { grid-template-columns:1fr; }
  .instagram-feed-grid { grid-template-columns:repeat(2, 1fr); }
  .footer-grid { grid-template-columns:1fr; }
  .mapa-region-img { height:200px; }
  .mapa-info h2 { font-size:1.8rem; }
}

@media (max-width:480px) {
  .hero { padding:100px 0 60px; }
  .hero h1 { font-size:1.8rem; }
  .hero-sub { font-size:0.95rem; }
  .hero-btns { flex-direction:column; align-items:center; }
  .hero-stats { flex-direction:row; flex-wrap:wrap; gap:8px; }
  .stat { min-width:calc(50% - 4px); }
  .section-title { font-size:1.5rem; }
  .sobre-badge { position:relative; bottom:auto; left:auto; margin-top:16px; justify-content:center; }
  .badge-num { font-size:1.6rem; }
  .badge-text { font-size:0.75rem; }
  .region-btns { gap:6px; }
  .region-btn { padding:8px 12px; font-size:0.8rem; }
  .contato-card { flex-direction:column; text-align:center; }
  .contato-icon { margin:0 auto; }
  .instagram-feed-grid { grid-template-columns:1fr 1fr; gap:10px; }
}