/* =====================================================================
   OFICINA DAS PISCINAS — Landing Page
   Design system: "Glassmorphism aquático premium" (ref. PIU Piscinas)
   Motion: GSAP + ScrollTrigger + Lenis · Carousel: Swiper
   ===================================================================== */
:root{
  /* ---- Brand (azul-assinatura) ---- */
  --primary-dark:#1E5C7C;  --primary:#5A9BC4;  --primary-light:#72B3D6;
  --secondary-dark:#2BA4A0; --secondary:#3ACBC7; --secondary-light:#73DEDB;

  /* ---- Neutros ---- */
  --ink:#16191D; --dark:#16191D; --dark-deep:#06090E; --dark-2:#25282D;
  --bg:#D9E8FA;            /* fundo do site */
  --white:#EBF4FF;         /* fundo de cards */
  --white-light:#FFFFFF;

  /* ---- Texto (ajustado p/ contraste sobre fundo claro) ---- */
  --text-title:#20252B; --text-body:#4F6274; --text-muted:#7f96aa;

  /* ---- Cores mapeadas p/ os divisores de onda (usadas inline no HTML) ---- */
  --color-bg:#D9E8FA; --color-dark:#16191D; --color-contact:#CFE2F8; --color-footer:#06090E;
  --color-wa:#25D366;

  /* ---- Fontes ---- */
  --font-display:'Sora', system-ui, sans-serif;      /* hero (substituta grátis p/ Nebula) */
  --font-head:'Overpass', system-ui, sans-serif;     /* títulos h1-h6 */
  --font-body:'Outfit', system-ui, sans-serif;       /* corpo */

  /* ---- Layout ---- */
  --max:1180px;
  --pad:clamp(20px, 4vw, 40px);
  --section-y:clamp(80px, 9vw, 128px);

  /* ---- Movimento ---- */
  --ease:cubic-bezier(.16, 1, .3, 1);   /* power4.out */

  /* ---- Seta do botão (círculo que gira 675°) ---- */
  --arrow-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316191D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --arrow-blue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5C7C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:110px; overflow-x:clip; }
body{
  font-family:var(--font-body); font-weight:400;
  background:var(--bg); color:var(--text-body);
  line-height:1.6; overflow-x:clip;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* Lenis smooth-scroll base */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

img,svg,video,iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--primary); color:#fff; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--max); margin:0 auto; padding-inline:var(--pad); }
.section{ position:relative; z-index:1; background:var(--bg); padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(48px,6vw,80px); }
.section--dark{ background:var(--dark); color:#c2cedb; }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{ color:#fff; }
.section--dark p{ color:#9fb0bf; }

/* =====================================================================
   TIPOGRAFIA
   ===================================================================== */
h1,h2,h3,h4,h5,h6{ font-family:var(--font-head); font-weight:600; color:var(--text-title); line-height:1.14; letter-spacing:-.01em; }
.h2{ font-size:clamp(29px, 4.4vw, 54px); font-weight:700; line-height:1.08; letter-spacing:-.015em; }
.lead{ color:var(--text-body); font-size:clamp(16px,1.7vw,20px); font-weight:400; line-height:1.55; }
p{ font-weight:400; }
strong,b{ color:var(--primary-dark); font-weight:600; }

/* Títulos que "acendem" palavra a palavra no scroll */
[data-lit] .lw{ color:rgba(32,37,43,.20); transition:color .5s var(--ease); }
[data-lit] .lw.lit{ color:var(--text-title); }
.section--dark [data-lit] .lw{ color:rgba(235,244,255,.20); }
.section--dark [data-lit] .lw.lit{ color:#fff; }

/* =====================================================================
   REVEAL (GSAP dirige; escondido só com html.js + failsafe inline no HTML)
   ===================================================================== */
html.js [data-reveal]{ opacity:0; }
html.js [data-reveal-group] > *{ opacity:0; }
html.js .hero-line{ opacity:0; }

/* =====================================================================
   BOTÕES — estrela: círculo com seta que gira 675° no hover
   ===================================================================== */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:600; font-size:15px; letter-spacing:.01em;
  padding:15px 64px 15px 30px; border-radius:32px; color:#fff; white-space:nowrap;
  border:3px solid rgba(255,255,255,.42);
  background:rgba(255,255,255,.10); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 4px 32px rgba(12,23,37,.22); text-shadow:0 0 14px rgba(0,0,0,.3);
  transition:padding .7s var(--ease), border-color .7s ease, box-shadow .7s ease, transform .7s var(--ease), background .7s ease, filter .7s ease;
}
.btn::before{
  content:''; position:absolute; top:50%; right:7px; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(235,244,255,.95) var(--arrow-dark) center/44% no-repeat;
  border:3px solid #fff; filter:drop-shadow(0 3px 10px rgba(12,23,37,.32));
  transition:transform 1s var(--ease), right 1s var(--ease);
}
.btn:hover{ padding-right:70px; border-color:rgba(255,255,255,.9); box-shadow:0 12px 72px rgba(12,23,37,.4); transform:translate3d(0,-3px,0); }
.btn:hover::before{ transform:translateY(-50%) rotate(675deg); right:11px; }
.btn:focus-visible{ outline:3px solid var(--primary); outline-offset:4px; }

.btn-primary{ background:linear-gradient(224deg,#1E5C7C,#5A9BC4); border-color:rgba(255,255,255,.55); box-shadow:0 8px 34px rgba(30,92,124,.4); text-shadow:0 1px 6px rgba(6,9,14,.25); }
.btn-primary:hover{ filter:brightness(1.04); box-shadow:0 14px 74px rgba(30,92,124,.55); }
.btn-wa{ background:linear-gradient(224deg,#17b24f,#25D366); border-color:rgba(255,255,255,.5); box-shadow:0 8px 34px rgba(37,211,102,.38); }
.btn-wa:hover{ filter:brightness(1.05); box-shadow:0 14px 74px rgba(37,211,102,.5); }

/* Link com seta (secundário) */
.link-arrow{
  display:inline-flex; align-items:center; gap:9px; position:relative;
  font-family:var(--font-head); font-weight:600; color:var(--primary-dark); letter-spacing:.01em;
}
.section--dark .link-arrow{ color:var(--primary-light); }
.link-arrow::after{
  content:''; position:absolute; left:0; bottom:-4px; height:2px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left; opacity:.6;
  transition:transform .5s var(--ease);
}
.link-arrow:hover::after{ transform:scaleX(1); }
.link-arrow .arw{ transition:transform .45s var(--ease); }
.link-arrow:hover .arw{ transform:translateX(6px); }

/* =====================================================================
   CARDS · ICON PILLS (bg-icon)
   ===================================================================== */
.card{
  background:var(--white); border:3px solid rgba(255,255,255,.9); border-radius:18px;
  box-shadow:0 4px 32px rgba(2,2,27,.08); transition:transform .7s var(--ease), box-shadow .7s var(--ease), border-color .7s ease;
}
.card:hover{ transform:translate3d(0,-4px,0); box-shadow:0 12px 64px rgba(2,2,27,.16); border-color:#fff; }
.section--dark .card h3, .section--dark .card p, .section--dark .card .who,
.section--dark .card .ci-value, .section--dark .card .ci-value a{ color:inherit; }

.bg-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:60px; height:60px; border-radius:20px; color:var(--primary-dark);
  background:linear-gradient(200deg,#EBF4FF,#D3E6FF); border:3px solid #fff;
  box-shadow:0 10px 26px rgba(23,58,97,.14); transition:transform .7s var(--ease), box-shadow .7s var(--ease);
}
.bg-icon svg{ width:30px; height:30px; }
.bg-icon--sm{ width:46px; height:46px; border-radius:14px; flex:none; }
.bg-icon--sm svg{ width:22px; height:22px; }

/* =====================================================================
   BRAND / LOGO
   ===================================================================== */
.brand{ display:flex; align-items:center; gap:11px; }
.brand-logo{ height:58px; width:auto; display:block; }
.brand--footer{ display:inline-flex; align-items:center; }
.brand--footer .brand-logo{ height:60px; }

/* =====================================================================
   NAV — pílula de vidro flutuante
   ===================================================================== */
.nav{
  position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:120;
  width:calc(100% - 28px); max-width:1140px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:6px 12px 6px 18px; border-radius:44px;
  background:rgba(217,232,250,.42); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border:3px solid rgba(255,255,255,.62);
  box-shadow:0 6px 40px rgba(66,87,112,.16);
  transition:background .7s ease, box-shadow .7s ease, border-color .7s ease, backdrop-filter .7s ease, max-width .7s var(--ease);
}
.nav.scrolled{ max-width:1080px; background:rgba(235,244,255,.66); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-color:#fff; box-shadow:0 8px 64px rgba(66,87,112,.26); }
.nav-right{ display:flex; align-items:center; gap:24px; }
.nav-links{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:clamp(18px,2.2vw,32px); }
.nav-links a{ font-family:var(--font-head); font-weight:500; font-size:14.5px; color:var(--text-body); position:relative; transition:color .4s ease; }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:-6px; height:2px; width:100%; background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.nav-links a:hover{ color:var(--primary-dark); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-links a[aria-current="page"]{ color:var(--primary-dark); }
.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-cta{
  display:inline-flex; align-items:center; font-family:var(--font-head); font-weight:600; font-size:14px; color:#fff;
  background:linear-gradient(224deg,#1E5C7C,#5A9BC4); padding:11px 22px; border-radius:32px;
  border:3px solid rgba(255,255,255,.5); box-shadow:0 8px 24px rgba(30,92,124,.35);
  transition:transform .5s var(--ease), box-shadow .5s ease, filter .4s ease;
}
.nav-cta:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 12px 44px rgba(30,92,124,.5); }

/* Dropdown "Soluções" */
.nav-drop{ position:relative; display:flex; align-items:center; }
.nav-drop-toggle{ display:inline-flex; align-items:center; gap:5px; position:relative; font-family:var(--font-head); font-weight:500; font-size:14.5px; color:var(--text-body); cursor:pointer; padding:0; background:none; border:0; }
.nav-drop-toggle::after{ content:''; position:absolute; left:0; bottom:-6px; height:2px; width:100%; background:var(--primary); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.nav-drop:hover .nav-drop-toggle, .nav-drop:focus-within .nav-drop-toggle{ color:var(--primary-dark); }
.nav-drop:hover .nav-drop-toggle::after, .nav-drop:focus-within .nav-drop-toggle::after{ transform:scaleX(1); }
.nav-chev{ width:15px; height:15px; transition:transform .4s var(--ease); }
.nav-drop:hover .nav-chev, .nav-drop:focus-within .nav-chev{ transform:rotate(180deg); }
.nav-drop-menu{ position:absolute; top:100%; left:50%; margin-top:18px; min-width:200px; display:flex; flex-direction:column; gap:2px; padding:8px; border-radius:20px; background:rgba(235,244,255,.94); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:3px solid rgba(255,255,255,.75); box-shadow:0 16px 50px rgba(66,87,112,.26); opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-50%) translateY(10px); transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; }
.nav-drop-menu::before{ content:''; position:absolute; top:-20px; left:0; right:0; height:20px; } /* ponte de hover sobre o gap */
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav-drop-menu a{ display:block; padding:10px 16px; border-radius:12px; font-family:var(--font-head); font-weight:500; font-size:14px; color:var(--text-body); white-space:nowrap; text-align:center; transition:background .3s ease, color .3s ease; }
.nav-drop-menu a::after{ display:none; }
.nav-drop-menu a:hover{ background:rgba(90,155,196,.14); color:var(--primary-dark); }

/* Burger — 4 pontos que viram X */
.burger{ display:none; width:46px; height:46px; border-radius:50%; position:relative; z-index:130;
  border:3px solid rgba(255,255,255,.7); background:rgba(217,232,250,.5); backdrop-filter:blur(6px); }
.burger .point{ position:absolute; width:6px; height:6px; border-radius:50%; background:var(--text-title); transition:.6s var(--ease); }
.burger .point-1{ top:12px; left:12px; } .burger .point-2{ top:12px; right:12px; }
.burger .point-3{ bottom:12px; left:12px; } .burger .point-4{ bottom:12px; right:12px; }
.menu-open .burger .point-2, .menu-open .burger .point-3{ opacity:0; transform:scale(0); }
.menu-open .burger .point-1{ width:22px; height:3px; border-radius:3px; top:50%; left:50%; transform:translate(-50%,-50%) rotate(45deg); }
.menu-open .burger .point-4{ width:22px; height:3px; border-radius:3px; top:50%; left:50%; right:auto; bottom:auto; transform:translate(-50%,-50%) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:115; background:rgba(223,236,250,.97); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(22px,5vh,46px);
  padding:96px 24px 52px; overflow-y:auto;
  opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s ease;
}
.menu-open .mobile-menu{ opacity:1; visibility:visible; }
/* itens uniformes (estilo pílula, ativo destacado) */
.mobile-menu > a:not(.mm-cta), .mm-sol-toggle{
  font-family:var(--font-head); font-weight:600; font-size:clamp(18px,4.8vw,22px); color:var(--text-title);
  padding:11px 28px; border-radius:16px; line-height:1; transition:background .25s ease, color .25s ease; cursor:pointer;
}
.mobile-menu > a:not(.mm-cta):hover, .mm-sol-toggle:hover{ color:var(--primary-dark); background:rgba(90,155,196,.10); }
.mobile-menu > a[aria-current="page"]:not(.mm-cta){ color:var(--primary-dark); background:rgba(90,155,196,.16); }
/* Soluções — acordeão com setinha (▾) */
.mm-solucoes{ display:flex; flex-direction:column; align-items:center; width:100%; }
.mm-sol-toggle{ display:inline-flex; align-items:center; gap:8px; background:none; border:0; }
.mm-chev{ width:16px; height:16px; transition:transform .3s var(--ease); }
.mm-solucoes.open .mm-sol-toggle{ color:var(--primary-dark); }
.mm-solucoes.open .mm-chev{ transform:rotate(180deg); }
.mm-sol-panel{ display:flex; flex-direction:column; align-items:center; gap:2px; width:100%; max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.mm-solucoes.open .mm-sol-panel{ max-height:360px; padding-top:4px; }
.mm-sol-panel a{ font-family:var(--font-head); font-weight:500; font-size:clamp(15px,4vw,18px); color:var(--text-body); padding:8px 24px; border-radius:12px; transition:background .25s ease, color .25s ease; }
.mm-sol-panel a:hover{ color:var(--primary-dark); background:rgba(90,155,196,.10); }
.mm-cta{ margin-top:0; }
.mm-contact{ font-family:var(--font-body); font-size:14px; color:var(--primary-dark); letter-spacing:.04em; margin-top:0; }

/* =====================================================================
   ATMOSFERA (shimmer sutil)
   ===================================================================== */
.shimmer-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.shimmer-layer::before{
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:repeating-linear-gradient(-45deg, transparent, transparent 46px, rgba(90,155,196,.05) 46px, rgba(90,155,196,.05) 48px);
  animation:shimmer 9s linear infinite;
}
.shimmer-layer--soft::before{ animation-duration:13s; opacity:.6; }
@keyframes shimmer{ 0%{ transform:translateX(-100%) rotate(-45deg); opacity:0; } 50%{ opacity:.08; } 100%{ transform:translateX(200%) rotate(-45deg); opacity:0; } }

/* ---------- Ondas divisórias ---------- */
.wave{ position:absolute; left:0; right:0; bottom:-1px; height:60px; line-height:0; pointer-events:none; z-index:5; }
.wave svg{ width:100%; height:100%; display:block; }

/* =====================================================================
   HERO — aquático claro sobre vídeo
   ===================================================================== */
.hero{
  position:fixed; top:0; left:0; right:0; height:100svh; z-index:0; display:flex; align-items:safe center; overflow:hidden;
  padding-top:clamp(104px, 13vh, 146px); padding-bottom:clamp(40px, 5vh, 64px);
  background:linear-gradient(160deg,#bcd6f5,#d9e8fa 58%,#c6dcf6);
}
/* Efeito scroll: a 1ª seção sobe por cima do hero (que fica fixo atrás) */
.hero + section{ margin-top:100svh; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0; transition:opacity 1.2s ease; }
.hero-video.ready{ opacity:1; }
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(217,232,250,.26) 0%, rgba(217,232,250,.08) 40%, rgba(217,232,250,.62) 100%),
    linear-gradient(90deg, rgba(217,232,250,.80) 0%, rgba(217,232,250,.50) 42%, rgba(217,232,250,.12) 70%, rgba(217,232,250,0) 100%);
}
.hero .container{ position:relative; z-index:3; display:flex; flex-direction:column; width:100%; }
.hero-inner{ max-width:660px; }

.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.hero-badge{ font-family:var(--font-body); font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:9px 18px; border-radius:32px; white-space:nowrap; font-weight:500; }
.hero-badge--solid{ color:#fff; background:linear-gradient(224deg,#1E5C7C,#5A9BC4); border:3px solid rgba(255,255,255,.5); box-shadow:0 8px 22px rgba(30,92,124,.38); }
.hero-badge--ghost{ color:var(--primary-dark); background:rgba(255,255,255,.4); border:3px solid rgba(255,255,255,.85); backdrop-filter:blur(6px); }

.hero-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(35px, 4.5vw, 62px); line-height:1.06; letter-spacing:-.025em; color:var(--ink); max-width:15ch; margin-bottom:22px; text-shadow:0 2px 34px rgba(255,255,255,.4); overflow-wrap:break-word; }
.hero-title .accent{ color:var(--primary-dark); }
.hero-sub{ font-family:var(--font-body); font-size:clamp(16px,1.7vw,19px); color:var(--text-title); max-width:520px; margin-bottom:30px; font-weight:500; text-shadow:0 1px 16px rgba(255,255,255,.7), 0 1px 3px rgba(255,255,255,.6); }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }

.hero-stats{
  margin-top:clamp(30px,4.2vh,48px); display:inline-flex; flex-wrap:wrap; gap:clamp(22px,4vw,52px);
  padding:20px clamp(22px,3vw,34px); border-radius:24px; width:fit-content;
  background:rgba(255,255,255,.3); border:3px solid rgba(255,255,255,.72); backdrop-filter:blur(10px);
  box-shadow:0 8px 44px rgba(66,87,112,.14);
}
.hero-stat{ display:flex; flex-direction:column; }
.hero-stat-num{ font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3vw,38px); color:var(--primary-dark); line-height:1; letter-spacing:-.02em; }
.hero-stat-label{ font-size:12.5px; color:var(--text-body); margin-top:8px; }
.hero-stars{ color:#FFC24B; font-size:clamp(19px,2.2vw,26px); letter-spacing:2px; }

/* =====================================================================
   QUEM SOMOS
   ===================================================================== */
.about-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(40px,6vw,80px); align-items:center; }
.about-copy .h2{ margin:6px 0 4px; max-width:17ch; }
.about-copy p{ color:var(--text-body); margin-top:20px; max-width:56ch; font-size:16.5px; }
.timeline{ display:flex; gap:0; margin-top:48px; position:relative; }
.tl-item{ flex:1; min-width:0; position:relative; padding-right:20px; }
.tl-item .tl-line{ height:3px; background:rgba(90,155,196,.28); border-radius:3px; position:relative; }
.tl-item .tl-line::before{ content:''; position:absolute; left:0; top:-3px; width:9px; height:9px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px rgba(90,155,196,.16); }
.tl-item .tl-year{ font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--primary-dark); margin-top:18px; }
.tl-item .tl-desc{ font-size:13.5px; color:var(--text-body); margin-top:6px; max-width:20ch; }

.about-num{ text-align:center; padding:44px 34px; }
.about-num .big{ font-family:var(--font-display); font-weight:800; color:var(--primary-dark); font-size:clamp(96px,15vw,168px); line-height:.9; letter-spacing:-.04em; }
.about-num .unit{ font-family:var(--font-head); font-weight:600; font-size:15px; color:var(--text-title); letter-spacing:.28em; text-transform:uppercase; margin-top:4px; }
.about-num .about-caption{ color:var(--text-body); font-size:15px; max-width:26ch; margin:20px auto 0; }

/* =====================================================================
   SEÇÃO HEAD
   ===================================================================== */
.section-head{ max-width:660px; margin-bottom:56px; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head .lead{ margin-top:20px; }

/* =====================================================================
   SERVIÇOS
   ===================================================================== */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.svc-card{ position:relative; background:var(--white); border:3px solid rgba(255,255,255,.85); border-radius:18px; padding:34px 30px; box-shadow:0 4px 32px rgba(2,2,27,.08); overflow:hidden; transition:transform .7s var(--ease), box-shadow .7s var(--ease), border-color .7s ease; }
.svc-card::before{ content:''; position:absolute; inset:0; opacity:0; transition:opacity .6s ease; pointer-events:none; background:radial-gradient(120% 90% at 50% -10%, rgba(90,155,196,.14), transparent 60%); }
.svc-card:hover{ transform:translate3d(0,-6px,0); box-shadow:0 16px 66px rgba(2,2,27,.18); border-color:#fff; }
.svc-card:hover::before{ opacity:1; }
.svc-card h3{ font-size:22px; font-weight:600; margin:22px 0 10px; color:var(--text-title); letter-spacing:-.01em; }
.svc-card p{ color:var(--text-body); font-size:15.5px; margin-bottom:20px; }
.svc-tag{ position:absolute; top:20px; right:20px; font-family:var(--font-body); font-weight:600; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:linear-gradient(224deg,#2BA4A0,#3ACBC7); padding:6px 13px; border-radius:32px; box-shadow:0 6px 16px rgba(43,164,160,.32); }
.svc-more{ font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--primary-dark); display:inline-flex; align-items:center; gap:8px; }
.svc-more .arw{ transition:transform .5s var(--ease); }
.svc-card:hover .svc-more .arw{ transform:translateX(6px); }

/* =====================================================================
   NÚMEROS
   ===================================================================== */
.stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(32px,4.5vw,64px); }
.stat{ position:relative; border-top:3px solid rgba(90,155,196,.25); padding-top:26px; }
.stat::before{ content:''; position:absolute; top:-3px; left:0; width:40px; height:3px; background:var(--primary); border-radius:3px; }
.stat .num{ font-family:var(--font-display); font-weight:800; font-size:clamp(44px,4.6vw,72px); color:var(--primary-dark); line-height:1; letter-spacing:-.03em; }
.stat .stat-label{ color:var(--text-body); font-size:clamp(12px,1vw,13px); margin-top:18px; max-width:22ch; text-transform:uppercase; letter-spacing:.05em; line-height:1.5; }

.diff-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:80px; }
.diff{ padding:28px 26px; }
.diff-marker{ display:block; width:9px; height:9px; border-radius:50%; background:var(--primary); margin-bottom:18px; box-shadow:0 0 0 5px rgba(90,155,196,.16); }
.diff p{ color:var(--text-title); font-size:16px; font-weight:400; line-height:1.6; }
.diff p b{ color:var(--primary-dark); font-weight:600; }

/* =====================================================================
   MARCAS
   ===================================================================== */
.brands-label{ text-align:center; font-family:var(--font-head); font-weight:600; font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-muted); margin-bottom:34px; }
/* Marquee elegante e lento (esquerda → direita, loop infinito) */
.brands-marquee{ position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.brands-track{ display:flex; align-items:center; width:max-content; animation:brands-scroll 52s linear infinite; }
.brands-copy{ display:contents; }
.brands-marquee:hover .brands-track{ animation-play-state:paused; }
.brands-track .brand-item{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:clamp(140px,15vw,178px); height:clamp(74px,8.5vw,92px); margin-right:clamp(16px,2vw,26px); background:#fff; border:1px solid rgba(30,92,124,.12); border-radius:16px; box-shadow:0 8px 22px rgba(30,92,124,.08); padding:0 clamp(14px,1.6vw,22px); transition:box-shadow .4s ease, transform .4s ease; }
.brands-track .brand-item img{ max-height:46px; max-width:100%; width:auto; height:auto; object-fit:contain; display:block; }
.brands-track .brand-item:hover{ box-shadow:0 14px 30px rgba(30,92,124,.16); transform:translateY(-2px); }
@keyframes brands-scroll{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

/* =====================================================================
   GALERIA CIRCULAR 3D (piscinas prontas)
   ===================================================================== */
.gallery3d{ --card-w:280px; --card-h:380px; --radius:440px; --angle:45deg; position:relative; margin-top:16px; }
.gallery3d-stage{ position:relative; height:clamp(380px, 54vh, 480px); perspective:1600px; touch-action:pan-y; cursor:grab; }
.gallery3d.is-3d .gallery3d-stage:active{ cursor:grabbing; }
.gallery3d-ring{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }

/* Fallback (sem JS / movimento reduzido): faixa horizontal rolável */
.gallery3d:not(.is-3d) .gallery3d-ring{ display:flex; gap:20px; overflow-x:auto; align-items:center; padding:10px max(var(--pad), calc((100% - var(--max))/2 + var(--pad))); scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.gallery3d:not(.is-3d) .g3d-card{ position:relative; flex:0 0 auto; scroll-snap-align:center; }

.g3d-card{ width:var(--card-w); height:var(--card-h); margin:0; border-radius:18px; overflow:hidden; border:3px solid rgba(255,255,255,.5); background:var(--white); box-shadow:0 24px 60px rgba(2,2,27,.5); }
.gallery3d.is-3d .g3d-card{ position:absolute; left:50%; top:50%; margin-left:calc(var(--card-w) / -2); margin-top:calc(var(--card-h) / -2); transform:rotateY(calc(var(--i) * var(--angle))) translateZ(var(--radius)); -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.g3d-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.g3d-card figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:28px 18px 16px; display:flex; flex-direction:column; gap:2px; background:linear-gradient(to top, rgba(6,9,14,.92), rgba(6,9,14,.42) 55%, transparent); }
.g3d-title{ font-family:var(--font-head); font-weight:600; font-size:16px; color:#fff; letter-spacing:-.01em; }
.g3d-sub{ font-family:var(--font-body); font-size:12px; color:var(--primary-light); letter-spacing:.05em; }

@media (max-width:768px){
  .gallery3d{ --card-w:220px; --card-h:300px; --radius:320px; }
  .gallery3d-stage{ height:clamp(340px, 50vh, 400px); }
}
@media (max-width:520px){
  .gallery3d{ --card-w:186px; --card-h:252px; --radius:250px; }
  .g3d-title{ font-size:15px; }
}

/* =====================================================================
   DEPOIMENTOS (Swiper)
   ===================================================================== */
/* Marquee de depoimentos (mesmo efeito das marcas: lento, esquerda→direita, loop) */
.testi-marquee{ position:relative; overflow:hidden; margin-top:8px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.testi-track{ display:flex; align-items:stretch; width:max-content; padding:18px 0 34px; animation:testi-scroll 72s linear infinite; }
.testi-copy{ display:contents; }
.testi-marquee:hover .testi-track{ animation-play-state:paused; }
.testi-track .testi{ flex:0 0 auto; width:min(410px, 84vw); margin-right:24px; }
@keyframes testi-scroll{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.testi{ padding:38px 32px; height:100%; display:flex; flex-direction:column; }
.testi .quote-mark{ font-family:var(--font-display); font-weight:800; font-size:72px; line-height:.55; color:var(--primary); opacity:.26; margin-bottom:6px; }
.testi p{ font-family:var(--font-body); font-style:italic; font-weight:400; color:var(--text-title); font-size:16.5px; line-height:1.6; margin-bottom:22px; flex:1; }
.testi .who{ font-family:var(--font-head); font-weight:600; color:var(--primary-dark); font-size:15px; font-style:normal; }
.testi .who small{ display:block; color:var(--text-muted); font-weight:400; font-size:13px; margin-top:3px; }


/* =====================================================================
   CONTATO
   ===================================================================== */
.contato{ position:relative; overflow:hidden; background:linear-gradient(200deg,#E6F1FF,#CFE2F8); }
.contato .container{ position:relative; z-index:3; }
.contato-head{ text-align:center; max-width:720px; margin:0 auto; }
.contato h2{ font-size:clamp(30px,4.6vw,54px); font-weight:700; letter-spacing:-.02em; margin-bottom:20px; }
.contato-head .lead{ margin:0 auto; max-width:600px; }
.contato-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:32px; margin-top:52px; align-items:stretch; }
.contato-info{ display:flex; flex-direction:column; gap:22px; padding:38px 34px; }
.ci-row{ display:flex; gap:16px; align-items:center; }
.ci-row .ci-label{ font-family:var(--font-body); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--primary-dark); }
.ci-row .ci-value{ font-size:16.5px; color:var(--text-title); margin-top:3px; }
.ci-row .ci-value a{ color:var(--text-title); transition:color .3s ease; }
.ci-row .ci-value a:hover{ color:var(--primary); }
.contato-info .btn{ margin-top:6px; align-self:flex-start; }
.contato-map{ position:relative; display:block; border-radius:18px; overflow:hidden; border:3px solid #fff; min-height:380px; box-shadow:0 8px 44px rgba(66,87,112,.18); transition:box-shadow .7s var(--ease); }
.contato-map:hover{ box-shadow:0 14px 72px rgba(66,87,112,.3); }
.contato-map iframe{ width:100%; height:100%; min-height:380px; border:0; pointer-events:none; }
.contato-map .cm-btn{ position:absolute; z-index:2; top:16px; left:16px; display:inline-flex; align-items:center; gap:6px; font-family:var(--font-head); font-weight:600; font-size:13px; color:#fff; background:linear-gradient(224deg,#1E5C7C,#5A9BC4); padding:9px 16px; border-radius:32px; border:3px solid rgba(255,255,255,.6); box-shadow:0 6px 18px rgba(30,92,124,.4); transition:transform .5s var(--ease), filter .3s ease; }
.contato-map:hover .cm-btn{ transform:translateY(-2px); filter:brightness(1.05); }

/* =====================================================================
   CTA EM VÍDEO (banner final)
   ===================================================================== */
.cta-video{ position:relative; z-index:1; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; min-height:clamp(420px, 62vh, 600px); padding:clamp(64px,10vh,120px) 0; background:#0c1620; }
.cta-video-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0; transition:opacity 1.2s ease; }
.cta-video-bg.ready{ opacity:1; }
.cta-video-overlay{ position:absolute; inset:0; z-index:1; background:radial-gradient(120% 90% at 50% 50%, rgba(6,9,14,.35), rgba(6,9,14,.62) 78%), linear-gradient(180deg, #16191D 0%, rgba(8,14,20,.5) 26%, rgba(8,14,20,.5) 72%, #06090E 100%); }
.cta-video .container{ position:relative; z-index:2; }
.cta-video-inner{ max-width:780px; margin:0 auto; }
.cta-video-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,4.8vw,58px); line-height:1.08; letter-spacing:-.02em; color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.45); }
.cta-video-sub{ font-family:var(--font-body); font-size:clamp(16px,1.7vw,19px); color:#d7e2ec; max-width:560px; margin:20px auto 34px; text-shadow:0 1px 14px rgba(0,0,0,.4); }

/* =====================================================================
   PÁGINAS DE SOLUÇÕES (placeholder de categoria)
   ===================================================================== */
/* PAGE-HERO — herói com foto de fundo p/ páginas internas (padrão premium, ref. Maremar) */
.page-hero{ position:relative; overflow:hidden; padding:clamp(140px,20vh,198px) 0 clamp(60px,9vh,98px); background:radial-gradient(135% 125% at 72% 0%, #1e4470 0%, #0b1b2e 70%); }
.page-hero .ph-photo{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; }
.page-hero::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(8,20,34,.93) 0%, rgba(8,20,34,.70) 40%, rgba(8,20,34,.32) 72%, rgba(9,24,40,.10) 100%),
             linear-gradient(0deg, rgba(8,20,34,.58) 0%, transparent 46%); }
.page-hero .container{ position:relative; z-index:2; }
.page-hero .inner{ max-width:800px; }
.page-hero .crumb{ color:rgba(255,255,255,.72); margin-bottom:20px; }
.page-hero .crumb a{ color:#bfe6ff; } .page-hero .crumb a:hover{ color:#fff; text-decoration:underline; }
.page-hero .crumb .sep{ color:rgba(255,255,255,.42); }
.page-hero h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(38px,5.6vw,68px); line-height:1.05; letter-spacing:-.02em; color:#fff; }
.page-hero h1 .accent{ color:#8fd0ff; }
.page-hero .lead{ margin-top:20px; max-width:600px; color:rgba(255,255,255,.9); }

/* corpo das páginas internas (conteúdo claro, abaixo do herói) */
.subpage-body{ position:relative; background:linear-gradient(200deg,#E6F1FF,#CFE2F8); padding:clamp(52px,7vh,88px) 0 clamp(72px,9vw,112px); }
/* Grupos (ex.: página combinada Equipamentos / Produtos) */
.prod-group{ margin-bottom:clamp(44px,6vw,72px); }
.prod-group:last-of-type{ margin-bottom:0; }
.prod-group-title{ font-family:var(--font-head); font-weight:700; font-size:clamp(22px,2.6vw,30px); color:var(--text-title); letter-spacing:-.01em; margin-bottom:clamp(20px,2.6vw,30px); padding-bottom:14px; border-bottom:2px solid rgba(30,92,124,.16); }
.subpage-body .container{ position:relative; z-index:2; }

.crumb{ font-family:var(--font-body); font-size:13px; color:var(--text-body); margin-bottom:20px; }
.crumb a{ color:var(--primary-dark); } .crumb a:hover{ text-decoration:underline; }
.crumb .sep{ margin:0 8px; color:var(--text-muted); }
.nav-drop-menu a.is-current, .mobile-menu .mm-solucoes a.is-current{ color:var(--primary-dark); font-weight:700; }

/* CTA das páginas internas */
.subpage-cta{ text-align:center; margin-top:44px; color:var(--text-body); font-size:16px; }
/* Página Sobre Nós */
.about-why{ margin-top:clamp(56px,7vw,90px); }
.about-why .h2{ text-align:center; margin:0 auto clamp(26px,4vw,42px); max-width:24ch; }
.subpage-cta .link-arrow{ display:inline-flex; }

/* =====================================================================
   LOJA / SOLUÇÕES — grade de produtos (lida de data/produtos-data.js)
   ===================================================================== */
.prod-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(258px, 1fr)); gap:22px; text-align:left; }
.store-empty{ grid-column:1 / -1; text-align:center; color:var(--text-body); background:var(--white); border:3px solid rgba(255,255,255,.9); border-radius:18px; padding:48px 28px; box-shadow:0 4px 32px rgba(2,2,27,.08); font-size:16px; }
.store-empty a{ color:var(--primary-dark); font-weight:600; }

.prod-card{ position:relative; display:flex; flex-direction:column; background:var(--white); border:3px solid rgba(255,255,255,.9); border-radius:18px; overflow:hidden; box-shadow:0 4px 32px rgba(2,2,27,.08); animation:prodIn .6s var(--ease) both; transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s ease; }
@keyframes prodIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.prod-card:hover{ transform:translate3d(0,-5px,0); box-shadow:0 16px 60px rgba(2,2,27,.16); border-color:#fff; }
.prod-card.is-clickable{ cursor:pointer; }
.prod-media{ position:relative; aspect-ratio:4/3; background:linear-gradient(160deg,#EAF6FE,#D6ECFB); overflow:hidden; }
.prod-media img{ width:100%; height:100%; object-fit:cover; }
.prod-ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--primary); opacity:.5; font-family:var(--font-body); font-size:12px; }
.prod-ph svg{ width:42px; height:42px; }
.prod-tag{ position:absolute; top:12px; left:12px; z-index:2; font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:linear-gradient(224deg,#2BA4A0,#3ACBC7); padding:6px 12px; border-radius:32px; box-shadow:0 6px 16px rgba(43,164,160,.3); }
.prod-body{ display:flex; flex-direction:column; flex:1; padding:20px 20px 18px; }
.prod-brand{ font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); }
.prod-name{ font-family:var(--font-head); font-weight:600; font-size:18px; color:var(--text-title); margin:4px 0 8px; letter-spacing:-.01em; }
.prod-desc{ font-family:var(--font-body); font-size:14.5px; color:var(--text-body); line-height:1.55; }
.prod-foot{ margin-top:auto; padding-top:16px; display:flex; flex-direction:column; gap:12px; }
.prod-price{ font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--primary-dark); }
.prod-price.consulta{ font-family:var(--font-head); font-weight:600; font-size:15px; color:var(--text-muted); }
.prod-actions{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; }
.prod-more{ font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--primary-dark); background:none; border:0; cursor:pointer; padding:0; }
.prod-more:hover{ text-decoration:underline; }
.prod-order{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:600; font-size:13.5px; color:#fff; background:linear-gradient(224deg,#17b24f,#25D366); padding:9px 15px; border-radius:32px; box-shadow:0 6px 18px rgba(37,211,102,.3); transition:transform .4s var(--ease), box-shadow .4s ease; margin-left:auto; }
.prod-order svg{ width:15px; height:15px; }
.prod-order:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(37,211,102,.42); }

/* Modal "Ver detalhes" */
.prod-modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(6,9,14,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.prod-modal.open{ display:flex; }
.prod-modal-box{ position:relative; max-width:560px; width:100%; max-height:88vh; overflow:auto; background:var(--white); border:3px solid #fff; border-radius:22px; box-shadow:0 30px 80px rgba(2,2,27,.4); }
.pm-media{ aspect-ratio:16/10; background:linear-gradient(160deg,#EAF6FE,#D6ECFB); overflow:hidden; }
.pm-media img{ width:100%; height:100%; object-fit:cover; }
.pm-inner{ padding:24px 26px 26px; }
.pm-close{ position:absolute; top:12px; right:12px; z-index:2; width:40px; height:40px; border-radius:50%; border:3px solid #fff; background:rgba(255,255,255,.9); color:var(--text-title); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.2); }
.pm-close svg{ width:18px; height:18px; }
.pm-brand{ font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--primary); }
.pm-name{ font-family:var(--font-display); font-weight:700; font-size:clamp(22px,3vw,30px); color:var(--text-title); margin:4px 0 12px; letter-spacing:-.01em; }
.pm-detail{ font-family:var(--font-body); font-size:15px; color:var(--text-body); line-height:1.65; white-space:pre-line; }
.pm-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:22px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
/* FOOTER CLARO (aquático) — casa com a logo petróleo, sem fundo escuro */
.footer{ background:linear-gradient(180deg,#DCEBFB 0%,#C7DDF3 100%); color:var(--text-body); padding-block:76px 40px; position:relative; z-index:1; }
/* onda de transição: o footer claro "sobe" na seção acima (escura na home, clara nas subpáginas) */
.footer::before{ content:''; position:absolute; top:-46px; left:0; right:0; height:48px; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,24 C240,48 480,4 720,22 C960,40 1200,44 1440,18 L1440,48 L0,48 Z' fill='%23DCEBFB'/%3E%3C/svg%3E") no-repeat;
  background-size:100% 100%; }
.footer-grid{ display:grid; grid-template-columns:1.6fr .8fr .9fr 1.3fr; gap:44px; }
.footer-tag{ color:var(--text-body); font-size:15px; max-width:32ch; margin-top:18px; }
.footer-auth{ margin-top:22px; display:flex; align-items:flex-start; gap:9px; max-width:30ch; font-family:var(--font-body); font-size:13px; line-height:1.4; color:var(--text-body); }
.footer-auth svg{ width:20px; height:20px; flex:none; color:var(--primary-dark); margin-top:1px; }
.footer-auth strong{ color:var(--primary-dark); font-weight:700; }
.footer-social{ display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.footer-social a{ display:inline-flex; align-items:center; gap:11px; color:var(--text-body); font-size:15px; transition:color .3s ease; width:fit-content; }
.footer-social a svg{ width:18px; height:18px; flex:none; }
.footer-social a:hover{ color:var(--primary-dark); }
.footer-col h4{ font-family:var(--font-head); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--primary-dark); margin-bottom:20px; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer-col a, .footer-col .fc-line{ color:var(--text-body); font-size:15px; transition:color .3s ease; }
.footer-col a:hover{ color:var(--primary-dark); }
.footer-contact .fc-line{ display:block; margin-bottom:12px; }
.footer-contact .fc-line strong{ color:var(--text-title); font-weight:600; }
.footer-map{ position:relative; display:block; margin-top:18px; border-radius:12px; overflow:hidden; border:1px solid rgba(30,92,124,.22); height:150px; box-shadow:0 8px 22px rgba(30,92,124,.14); }
.footer-map iframe{ width:100%; height:100%; border:0; pointer-events:none; }
.footer-map .fm-btn{ position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; gap:6px; font-family:var(--font-head); font-weight:600; font-size:12px; color:#fff; background:linear-gradient(224deg,#1E5C7C,#5A9BC4); padding:7px 13px; border-radius:32px; box-shadow:0 4px 12px rgba(30,92,124,.3); }
.footer-bottom{ margin-top:54px; padding-top:26px; border-top:1px solid rgba(30,92,124,.18); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; }
.footer-bottom p{ font-family:var(--font-body); font-size:12.5px; color:var(--text-muted); letter-spacing:.03em; }
/* Assinatura "Feito por ExyCode" — gradiente + leve ampliação no hover */
.footer-bottom .made-by{ font-family:var(--font-head); font-weight:600; font-size:14px; color:var(--text-muted); display:inline-flex; align-items:center; gap:6px; letter-spacing:.02em; transform-origin:center; transition:transform .35s var(--ease); }
.footer-bottom .made-by:hover{ transform:scale(1.07); }
.footer-bottom .made-by .made-by-brand{ font-family:var(--font-head); font-weight:800; letter-spacing:.01em; background:linear-gradient(90deg,#1E5C7C,#2E93B0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* ===== ASSISTÊNCIA TÉCNICA AUTORIZADA (Fluidra/Komeco) — seção dedicada na home ===== */
.auth-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(30px,5vw,68px); align-items:center; }
.auth-copy .h2{ max-width:17ch; }
.auth-copy .lead{ margin-top:16px; max-width:48ch; }
.auth-copy .link-arrow{ margin-top:22px; display:inline-flex; }
.auth-seals{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,22px); }
.auth-seal{ text-align:center; padding:clamp(30px,3.4vw,42px) clamp(18px,2vw,26px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; min-height:clamp(170px,20vw,210px); }
.auth-logo{ max-width:82%; max-height:58px; width:auto; height:auto; object-fit:contain; }
.auth-tag{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--primary-dark); }
.auth-tag .auth-check{ width:16px; height:16px; flex:none; }
@media(max-width:860px){ .auth-grid{ grid-template-columns:1fr; gap:clamp(28px,5vw,40px); } .auth-copy .h2, .auth-copy .lead{ max-width:none; } }
@media(max-width:460px){ .auth-seals{ grid-template-columns:1fr; } }

/* Depoimentos — botão para as avaliações reais do Google */
.testi-cta{ text-align:center; margin-top:clamp(26px,4vh,44px); }
.testi-google{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:600; font-size:15px; color:var(--text-title); background:#fff; border:1px solid rgba(66,87,112,.16); padding:12px 22px; border-radius:32px; box-shadow:0 6px 26px rgba(66,87,112,.10); transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s ease; }
.testi-google:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(66,87,112,.16); border-color:var(--primary); }
.testi-google svg{ width:19px; height:19px; flex:none; }
.testi-google .arw{ transition:transform .45s var(--ease); }
.testi-google:hover .arw{ transform:translate(3px,-3px); }

/* Página Aquecimento — grade dos tipos de aquecimento */
.heat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:clamp(16px,2vw,24px); margin-top:clamp(26px,4vh,46px); }
.heat{ padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; align-items:flex-start; }
.heat h2{ font-family:var(--font-head); font-weight:600; font-size:clamp(19px,2.3vw,22px); color:var(--text-title); margin:16px 0 10px; line-height:1.2; }
.heat p{ color:var(--text-body); font-size:15.5px; line-height:1.6; }
.heat .link-arrow{ margin-top:18px; }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width:1024px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .burger{ display:block; }
  .nav{ padding:8px 10px 8px 16px; }
  .brand-logo{ height:50px; }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-row{ grid-template-columns:repeat(2,1fr); gap:36px 24px; }
  .diff-row{ grid-template-columns:1fr; gap:18px; }
  .about-grid{ grid-template-columns:minmax(0,1fr); gap:44px; }
  .about-num{ order:-1; }
  .container{ padding-inline:32px; }
  .contato-grid{ grid-template-columns:1fr; gap:28px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:40px 32px; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:768px){
  .container{ padding-inline:20px; }
  .wave{ height:42px; }
  section{ scroll-margin-top:90px; }
  /* mobile: hero cresce com o conteudo e rola normal; quando o fundo dele encosta na
     base da tela (hero todo exibido), ele "gruda" (sticky) e a secao Sobre sobe por cima */
  .hero{ position:sticky; top:auto; left:auto; right:auto; bottom:0; height:auto; min-height:100svh; padding-top:clamp(92px,12vh,116px); padding-bottom:40px; }
  .hero + section{ margin-top:0; }
  .hero .container{ justify-content:center; }
  .hero-inner{ max-width:100%; }
  .hero-title{ font-size:clamp(38px,10vw,50px); max-width:100%; margin-bottom:18px; }
  .hero-sub{ max-width:100%; }
  .hero-stats{ width:100%; gap:14px 20px; margin-top:clamp(24px,3.5vh,40px); }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .footer-brand{ grid-column:auto; }
  .testi-track{ animation-duration:56s; }
}
@media (max-width:520px){
  .container{ padding-inline:18px; }
  .services-grid{ grid-template-columns:1fr; }
  .stats-row{ grid-template-columns:1fr 1fr; gap:30px 20px; }
  .brands-track{ animation-duration:38s; }
  .timeline{ flex-direction:column; gap:24px; margin-top:38px; }
  .tl-item{ padding-right:0; }
  .tl-item .tl-line{ width:60px; }
  .tl-item .tl-desc{ max-width:none; }
  .hero-ctas{ flex-direction:column; align-items:flex-start; gap:14px; }
  .hero-ctas .btn{ width:auto; }
  .btn{ padding:12px 52px 12px 24px; font-size:14px; }
  .btn::before{ width:38px; height:38px; right:6px; }
  .btn:hover{ padding-right:56px; }
  .hero-stat-num{ font-size:24px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  html.js [data-reveal], html.js [data-reveal-group] > *, html.js .hero-line{ opacity:1 !important; transform:none !important; }
  .shimmer-layer{ display:none; }
  .brands-marquee{ overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .brands-track{ animation:none; transform:none; flex-wrap:wrap; justify-content:center; row-gap:14px; }
  .brands-copy:last-child{ display:none; }
  .testi-marquee{ overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .testi-track{ animation:none; transform:none; flex-wrap:wrap; justify-content:center; gap:22px; padding:0; }
  .testi-copy:last-child{ display:none; }
  .testi-track .testi{ margin-right:0; }
}