/* ==========================================================================
   DICAS POOL — Design System
   Cores: Navy #0B2447 (base), Navy escuro #061A33 (profundidade),
          Ciano elétrico #0095EF (ação), Ciano claro #00CBFF (destaque),
          Prata/nevoa #E8EDF2 (superfícies claras), Branco #FFFFFF
   Tipografia: Sora (display/headlines) + Inter (corpo de texto)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Cores — calibradas a partir da logo oficial da Dicas Pool */
  --navy-900:#01132D;
  --navy-800:#0B2447;
  --navy-700:#123361;
  --cyan-500:#0095EF;
  --cyan-300:#00CBFF;
  --silver:#C6C6CC;
  --mist-100:#F2F6F9;
  --mist-200:#E8EDF2;
  --white:#FFFFFF;
  --ink:#0F2238;
  --ink-soft:#4C5C72;
  --line:#DDE6ED;
  --success:#2FBF71;

  /* Tipografia */
  --font-display:'Sora', sans-serif;
  --font-body:'Inter', sans-serif;

  /* Escala tipográfica */
  --fs-h1: clamp(2.4rem, 4.4vw, 3.8rem);
  --fs-h2: clamp(1.9rem, 3vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-body: 1rem;
  --fs-lead: 1.15rem;

  /* Espaçamento & forma */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 32px;
  --container: 1180px;
  --shadow-soft: 0 12px 32px rgba(11,36,71,0.10);
  --shadow-strong: 0 20px 48px rgba(6,26,51,0.28);

  --transition: 200ms ease;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}

a{color:inherit; text-decoration:none;}

ul{list-style:none;}

button{font-family:inherit; cursor:pointer; border:none; background:none;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--navy-800);
  line-height:1.15;
  font-weight:700;
}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}

.section{padding-block:96px;}
.section--tight{padding-block:64px;}

.section-head{
  max-width:640px;
  margin-bottom:48px;
}
.section-head.center{margin-inline:auto; text-align:center;}

.section-head h2{margin-bottom:14px;}
.section-head p{color:var(--ink-soft); font-size:var(--fs-lead);}

.section--dark{background:var(--navy-800); color:var(--mist-200);}
.section--dark h2, .section--dark h3{color:var(--white);}
.section--dark p{color:#B9C9DD;}

.section--mist{background:var(--mist-100);}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--cyan-500);
  outline-offset:2px;
}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 28px;
  border-radius:999px;
  font-weight:600;
  font-size:0.98rem;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg, var(--cyan-500), var(--cyan-300));
  color:var(--navy-900);
  box-shadow:0 10px 24px rgba(0,149,239,0.35);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,149,239,0.45);}

.btn-outline{
  background:transparent;
  color:var(--white);
  border:1.5px solid rgba(255,255,255,0.55);
}
.btn-outline:hover{background:rgba(255,255,255,0.12); border-color:var(--white);}

.btn-ghost{
  background:var(--mist-200);
  color:var(--navy-800);
}
.btn-ghost:hover{background:var(--line);}

.btn-block{width:100%;}
.btn-sm{padding:10px 18px; font-size:0.9rem;}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding-block:18px;
  transition:background var(--transition), padding var(--transition), box-shadow var(--transition);
}
.header--transparent{
  background:linear-gradient(to bottom, rgba(6,26,51,0.55), rgba(6,26,51,0));
}
.header--solid{
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 6px 24px rgba(11,36,71,0.08);
  padding-block:10px;
}
.header--solid .nav-link{color:var(--navy-800);}
.header--solid .hamburger span{background:var(--navy-800);}
.header--transparent .hamburger span{background:var(--white);}

.header--solid .logo-text strong{
  background:linear-gradient(135deg, var(--navy-800), var(--ink-soft));
  -webkit-background-clip:text; background-clip:text;
}
.header--solid .logo-sub{color:var(--ink-soft);}

.header .container{max-width:1440px;}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.logo{display:flex; align-items:center; gap:11px; flex-shrink:0;}
.logo-badge{
  height:42px; width:42px;
  border-radius:12px;
  object-fit:cover;
  box-shadow:0 6px 16px rgba(0,149,239,0.35);
  flex-shrink:0;
}
.logo-text{
  display:flex;
  flex-direction:column;
  line-height:1;
  white-space:nowrap;
}
.logo-text .word{
  font-family:var(--font-display);
  font-weight:800;
  font-style:italic;
  font-size:1.3rem;
  letter-spacing:-0.01em;
  display:inline-flex;
  gap:5px;
  white-space:nowrap;
}
.logo-text strong{
  background:linear-gradient(135deg, #FFFFFF, var(--silver));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  font-style:italic;
}
.logo-text em{
  font-style:italic;
  background:linear-gradient(135deg, var(--cyan-300), var(--cyan-500));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.logo-sub{
  margin-top:2px;
  font-size:0.6rem;
  font-weight:600;
  letter-spacing:0.14em;
  color:#B9C9DD;
  white-space:nowrap;
  transition:color var(--transition);
}
.footer-logo{margin-bottom:4px;}
.footer-logo .logo-badge{height:58px; width:58px; border-radius:16px;}
.footer-logo .logo-text .word{font-size:1.7rem;}
.footer-logo .logo-sub{font-size:0.68rem;}

.nav{display:flex; align-items:center; gap:2px;}
.nav-link{
  padding:10px 12px;
  font-weight:600;
  font-size:0.9rem;
  color:var(--white);
  border-radius:999px;
  white-space:nowrap;
  transition:background var(--transition), color var(--transition);
}
.nav-link:hover{background:rgba(0,149,239,0.18); color:var(--cyan-300);}
.header--solid .nav-link:hover{color:var(--cyan-500);}

.header-actions{display:flex; align-items:center; gap:14px;}

.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:8px;
}
.hamburger span{
  width:26px; height:2.5px; border-radius:2px;
  background:var(--white);
  transition:transform var(--transition), opacity var(--transition);
}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

.mobile-menu{
  position:fixed;
  inset:0 0 0 auto;
  width:min(320px, 82vw);
  height:100vh;
  background:var(--navy-800);
  padding:100px 28px 32px;
  transform:translateX(100%);
  transition:transform 280ms ease;
  z-index:99;
  overflow-y:auto;
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu a{
  display:block;
  padding:14px 0;
  color:var(--white);
  font-weight:600;
  font-size:1.05rem;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.menu-overlay{
  position:fixed; inset:0; background:rgba(6,26,51,0.6);
  opacity:0; pointer-events:none; transition:opacity var(--transition);
  z-index:98;
}
.menu-overlay.open{opacity:1; pointer-events:auto;}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:120px;
  padding-bottom:80px;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(0,149,239,0.25), transparent 60%),
    linear-gradient(100deg, rgba(1,17,40,0.92) 0%, rgba(1,17,40,0.75) 32%, rgba(1,17,40,0.35) 58%, rgba(1,17,40,0.15) 100%),
    url('../assets/img/hero-bg.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, center 30%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  overflow:hidden;
  color:var(--white);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 90px);
  pointer-events:none;
}
.hero-caustics{
  position:absolute;
  right:-10%;
  top:0;
  width:70%;
  height:100%;
  opacity:0.5;
  background:
    radial-gradient(circle at 30% 20%, rgba(0,203,255,0.35), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(0,149,239,0.28), transparent 45%),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,0.12), transparent 40%);
  filter:blur(20px);
  animation:drift 14s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes drift{
  from{transform:translate(0,0) scale(1);}
  to{transform:translate(-3%, 2%) scale(1.05);}
}

.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:center;
}

.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--cyan-300);
  font-weight:600;
  font-size:0.95rem;
  margin-bottom:20px;
}
.hero-eyebrow::before{
  content:"";
  width:8px; height:8px; border-radius:50%;
  background:var(--cyan-300);
  box-shadow:0 0 0 4px rgba(0,203,255,0.25);
}

.hero h1{
  color:var(--white);
  font-size:var(--fs-h1);
  margin-bottom:20px;
  max-width:15ch;
}
.hero h1 .accent{color:var(--cyan-300);}

.hero-lead{
  font-size:var(--fs-lead);
  color:#C7D6E8;
  max-width:46ch;
  margin-bottom:32px;
}

.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:44px;
}

.trust-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 24px;
}
.trust-list li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.92rem;
  color:#DCE7F2;
}
.trust-list li svg{flex-shrink:0; color:var(--cyan-300);}

.hero-visual{
  position:relative;
}
.hero-mark-glow{
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(circle at 45% 42%, rgba(0,203,255,0.32), transparent 55%),
    radial-gradient(circle at 60% 60%, rgba(0,149,239,0.22), transparent 60%);
  filter:blur(30px);
  animation:drift 14s ease-in-out infinite alternate;
  pointer-events:none;
}
.hero-mark{
  position:relative;
  width:100%;
  max-width:460px;
  margin-inline:auto;
  display:block;
  border-radius:28px;
  box-shadow:0 30px 60px rgba(0,20,50,0.55), 0 0 0 1px rgba(255,255,255,0.08);
  animation:float-mark 6s ease-in-out infinite;
}
@keyframes float-mark{
  0%, 100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}

.scroll-cue{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  color:#9FB4CC;
  font-size:0.8rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.scroll-cue .line{width:1px; height:30px; background:linear-gradient(var(--cyan-300), transparent); animation:scroll-move 1.8s ease-in-out infinite;}
@keyframes scroll-move{0%{opacity:0;} 30%{opacity:1;} 100%{opacity:0; transform:translateY(10px);}}

/* ==========================================================================
   SERVIÇOS
   ========================================================================== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.service-card{
  background:var(--white);
  border:1px solid var(--line);
  border-top:3px solid var(--cyan-500);
  border-radius:var(--radius-sm);
  padding:32px 28px;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-soft);
}
.service-icon{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--navy-800), var(--cyan-500));
  color:var(--white);
  margin-bottom:20px;
}
.service-card h3{margin-bottom:10px; font-size:1.2rem;}
.service-card p{color:var(--ink-soft); font-size:0.95rem; margin-bottom:18px;}
.card-link{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--cyan-500); font-weight:600; font-size:0.92rem;
  transition:gap var(--transition);
}
.card-link:hover{gap:10px;}

/* ==========================================================================
   FILTROS (piscinas / galeria)
   ========================================================================== */
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:36px;
}
.filter-btn{
  padding:10px 20px;
  border-radius:999px;
  background:var(--mist-200);
  color:var(--navy-800);
  font-weight:600;
  font-size:0.9rem;
  transition:background var(--transition), color var(--transition);
}
.filter-btn.active, .filter-btn:hover{
  background:var(--navy-800);
  color:var(--white);
}

/* ---------- Grid de produto (piscinas / equipamentos) ---------- */
.product-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
.product-card{
  background:var(--white);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:transform var(--transition);
}
.product-card:hover{transform:translateY(-6px);}
.product-media{
  aspect-ratio:4/3;
  position:relative;
  overflow:hidden;
}
.product-media img{width:100%; height:100%; object-fit:cover;}
.product-tag{
  position:absolute; top:14px; left:14px;
  background:rgba(6,26,51,0.75);
  color:var(--white);
  font-size:0.75rem;
  font-weight:600;
  padding:6px 12px;
  border-radius:999px;
  backdrop-filter:blur(6px);
}
.product-body{padding:22px;}
.product-body h3{font-size:1.1rem; margin-bottom:6px;}
.product-body p{color:var(--ink-soft); font-size:0.92rem; margin-bottom:14px;}
.product-specs{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:16px;
}
.product-specs li{
  font-size:0.78rem;
  color:var(--navy-700);
  background:var(--mist-200);
  padding:5px 10px;
  border-radius:6px;
}

.stat-note{
  grid-column:1/-1;
  font-size:0.78rem;
  color:#8CA2BC;
  text-align:center;
  margin-top:4px;
}

/* ==========================================================================
   GALERIA
   ========================================================================== */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:180px;
  gap:14px;
}
.gallery-item{
  position:relative;
  border-radius:var(--radius-sm);
  overflow:hidden;
  cursor:pointer;
}
.gallery-item.tall{grid-row:span 2;}
.gallery-item.wide{grid-column:span 2;}
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 400ms ease;
}
.gallery-item:hover img{transform:scale(1.08);}
.gallery-caption{
  position:absolute; inset:auto 0 0 0;
  padding:14px;
  background:linear-gradient(to top, rgba(6,26,51,0.85), transparent);
  color:var(--white);
  font-size:0.85rem;
  font-weight:600;
  opacity:0;
  transform:translateY(8px);
  transition:opacity var(--transition), transform var(--transition);
}
.gallery-item:hover .gallery-caption{opacity:1; transform:translateY(0);}

.lightbox{
  position:fixed; inset:0;
  background:rgba(6,26,51,0.92);
  display:flex; align-items:center; justify-content:center;
  z-index:200;
  opacity:0; pointer-events:none;
  transition:opacity var(--transition);
  padding:32px;
}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox img{max-width:min(900px, 90vw); max-height:80vh; border-radius:var(--radius-sm);}
.lightbox-close{
  position:absolute; top:24px; right:28px;
  color:var(--white); font-size:2rem;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
}

/* ==========================================================================
   ANTES E DEPOIS
   ========================================================================== */
.ba-slider{
  position:relative;
  max-width:820px;
  margin-inline:auto;
  aspect-ratio:16/9;
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  user-select:none;
}
.ba-slider .ba-after, .ba-slider .ba-before{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.ba-slider .ba-before-wrap{
  position:absolute; inset:0;
  width:50%;
  overflow:hidden;
}
.ba-slider .ba-before{width:calc(var(--ba-w, 820px)); max-width:none; height:100%;}
.ba-label{
  position:absolute; top:16px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(6,26,51,0.75);
  color:var(--white);
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.02em;
}
.ba-label.before{left:16px;}
.ba-label.after{right:16px;}
.ba-handle{
  position:absolute; top:0; bottom:0;
  left:50%;
  width:4px;
  background:var(--white);
  transform:translateX(-50%);
  cursor:ew-resize;
}
.ba-handle::after{
  content:"⇔";
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:44px; height:44px;
  background:var(--white);
  color:var(--navy-800);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  box-shadow:var(--shadow-soft);
}
.ba-range{
  width:100%;
  max-width:820px;
  margin:18px auto 0;
  display:block;
  accent-color:var(--cyan-500);
}

/* ==========================================================================
   DEPOIMENTOS
   ========================================================================== */
.testimonial-track{
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:12px;
  scrollbar-width:none;
}
.testimonial-track::-webkit-scrollbar{display:none;}
.testimonial-card{
  scroll-snap-align:start;
  flex:0 0 min(380px, 86vw);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:28px;
}
.stars{color:#F5A623; margin-bottom:14px; letter-spacing:2px;}
.testimonial-card p{color:var(--ink-soft); margin-bottom:20px; font-size:0.96rem;}
.testimonial-person{display:flex; align-items:center; gap:12px;}
.testimonial-avatar{
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg, var(--navy-800), var(--cyan-500));
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-weight:700; font-family:var(--font-display);
}
.testimonial-person strong{display:block; font-size:0.92rem; color:var(--navy-800);}
.testimonial-person span{font-size:0.8rem; color:var(--ink-soft);}
.testimonial-controls{display:flex; gap:10px; margin-top:24px; justify-content:center;}
.testimonial-controls button{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--transition);
}
.testimonial-controls button:hover{background:var(--mist-200);}

/* ==========================================================================
   CTA / FORM
   ========================================================================== */
.cta-band{
  position:relative;
  background:linear-gradient(120deg, var(--navy-900), var(--navy-700));
  color:var(--white);
  text-align:center;
  overflow:hidden;
}
.cta-band .waves{
  position:absolute; inset:0;
  color:rgba(0,149,239,0.18);
  animation:wave-shift 12s linear infinite;
}
@keyframes wave-shift{
  0%{transform:translateX(0);}
  100%{transform:translateX(-8%);}
}
.cta-band .container{position:relative; z-index:1;}
.cta-band h2{color:var(--white); max-width:20ch; margin-inline:auto; margin-bottom:16px;}
.cta-band p{color:#C7D6E8; max-width:52ch; margin-inline:auto; margin-bottom:32px;}

.quote-form-wrap{
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-strong);
  padding:48px;
  max-width:920px;
  margin-inline:auto;
  margin-top:-90px;
  position:relative;
  z-index:2;
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.form-field{display:flex; flex-direction:column; gap:6px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-size:0.85rem; font-weight:600; color:var(--navy-800);}
.form-field input, .form-field select, .form-field textarea{
  padding:13px 16px;
  border:1.5px solid var(--line);
  border-radius:10px;
  font-family:inherit;
  font-size:0.95rem;
  background:var(--mist-100);
  transition:border-color var(--transition), background var(--transition);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  border-color:var(--cyan-500);
  background:var(--white);
  outline:none;
}
.form-field.error input, .form-field.error select, .form-field.error textarea{border-color:#E5484D;}
.field-error{font-size:0.78rem; color:#E5484D; display:none;}
.form-field.error .field-error{display:block;}
.radio-group{display:flex; gap:16px;}
.radio-option{display:flex; align-items:center; gap:8px; font-size:0.92rem;}
.form-note{font-size:0.8rem; color:var(--ink-soft); margin-top:14px; text-align:center;}
.form-success{
  display:none;
  text-align:center;
  padding:40px 10px;
}
.form-success.show{display:block;}
.form-success svg{color:var(--success); margin-bottom:16px;}
.form-success h3{margin-bottom:10px;}
.form-success p{color:var(--ink-soft);}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  background:var(--navy-900);
  color:#9FB0C6;
  padding-top:72px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-brand p{margin-top:16px; font-size:0.9rem; max-width:30ch;}
.footer-social{display:flex; gap:10px; margin-top:20px;}
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--transition), border-color var(--transition);
}
.footer-social a:hover{background:var(--cyan-500); border-color:var(--cyan-500); color:var(--navy-900);}
.footer h4{color:var(--white); font-size:0.95rem; margin-bottom:18px;}
.footer-links li{margin-bottom:11px;}
.footer-links a{font-size:0.9rem; transition:color var(--transition);}
.footer-links a:hover{color:var(--cyan-300);}
.footer-contact li{display:flex; gap:10px; margin-bottom:14px; font-size:0.9rem;}
.footer-contact svg{flex-shrink:0; color:var(--cyan-300); margin-top:2px;}
.footer-bottom{
  padding-block:24px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:0.82rem;
}

/* ==========================================================================
   WHATSAPP FLUTUANTE
   ========================================================================== */
.whatsapp-float{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:90;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#25D366;
  color:var(--white);
  padding:14px 20px;
  border-radius:999px;
  font-weight:700;
  font-size:0.92rem;
  box-shadow:0 14px 30px rgba(37,211,102,0.45);
  transition:transform var(--transition);
}
.whatsapp-float:hover{transform:translateY(-3px) scale(1.03);}

/* ==========================================================================
   BARRA INFERIOR MOBILE
   ========================================================================== */
.mobile-bar{
  display:none;
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:95;
  background:var(--white);
  box-shadow:0 -8px 24px rgba(11,36,71,0.14);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
}
.mobile-bar-inner{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px;
}
.mobile-bar a{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:0.72rem;
  font-weight:600;
  color:var(--navy-800);
  padding:6px 0;
}
.mobile-bar a.wa{color:#1EA952;}

/* ==========================================================================
   ANIMAÇÕES SCROLL REVEAL
   ========================================================================== */
.reveal{opacity:0; transform:translateY(24px); transition:opacity 600ms ease, transform 600ms ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ==========================================================================
   UTILITÁRIOS
   ========================================================================== */
.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--white); color:var(--navy-800);
  padding:12px 18px; border-radius:8px; z-index:999;
}
.skip-link:focus{left:16px; top:16px;}

.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.divider{color:var(--white); line-height:0;}
.divider.flip{transform:scaleY(-1);}
.divider.on-mist{color:var(--mist-100);}
.divider.on-navy{color:var(--navy-800);}
.divider.on-white{color:var(--white);}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1180px){
  .nav, .header-actions .btn-primary{display:none;}
  .hamburger{display:flex;}
}

@media (max-width: 1024px){
  .hero-grid{grid-template-columns:1fr; text-align:left;}
  .hero-visual{order:-1; max-width:340px;}
  .services-grid, .product-grid{grid-template-columns:repeat(2, 1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .gallery-grid{grid-template-columns:repeat(3, 1fr); grid-auto-rows:150px;}
}

@media (max-width: 860px){
  .section{padding-block:64px;}
  .form-grid{grid-template-columns:1fr;}
  .quote-form-wrap{padding:32px 22px; margin-top:-60px;}
  .mobile-bar{display:block;}
  body{padding-bottom:78px;}
  .whatsapp-float{bottom:96px;}
}

@media (max-width: 640px){
  .services-grid, .product-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2, 1fr); grid-auto-rows:130px;}
  .gallery-item.wide{grid-column:span 2;}
  .gallery-item.tall{grid-row:span 1;}
  .trust-list{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; gap:32px;}
}