/* ============================================================
   GÁS & ÁGUA TABOÃO — Estilo principal
   Paleta extraída da logo: azul + laranja fogo + azul água
   ============================================================ */

:root{
  /* Marca */
  --azul:            #0077C8;
  --azul-escuro:     #002E6E;
  --azul-navy:       #063b7a;
  --agua:            #29ABE2;
  --agua-claro:      #7fd6f5;
  --fogo:            #F57C00;
  --fogo-escuro:     #E65100;
  --fogo-claro:      #FF9800;
  --whats:           #25D366;
  --whats-hover:     #1EBE5D;

  /* Neutros */
  --branco:          #FFFFFF;
  --bg:              #F4F7FA;
  --bg-azul:         #EAF3FB;
  --texto:           #16233D;
  --texto-suave:     #5B6B85;
  --borda:           #E1E9F2;

  /* UI */
  --radius:          16px;
  --radius-sm:       10px;
  --shadow:          0 10px 30px rgba(6,28,58,.10);
  --shadow-sm:       0 4px 14px rgba(6,28,58,.08);
  --shadow-hover:    0 18px 40px rgba(6,28,58,.16);
  --maxw:            1180px;
  --header-h:        76px;
  --font:            'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head:       'Poppins', var(--font);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body{
  margin:0; font-family:var(--font); color:var(--texto);
  background:var(--branco); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.15; color:var(--azul-escuro); margin:0 0 .4em; }
ul{ margin:0; padding:0; list-style:none; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px; }

/* Utilitários de cor */
.txt-fogo{ color:var(--fogo); }
.txt-agua{ color:var(--agua); }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-head); font-weight:700; font-size:1rem;
  padding:13px 24px; border-radius:50px; border:2px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap; line-height:1;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn--lg{ padding:16px 32px; font-size:1.08rem; }
.btn--sm{ padding:9px 18px; font-size:.92rem; }

.btn--whats{ background:var(--whats); color:#fff; box-shadow:0 8px 20px rgba(37,211,102,.35); }
.btn--whats:hover{ background:var(--whats-hover); box-shadow:0 12px 26px rgba(37,211,102,.45); }
.btn--fogo{ background:linear-gradient(135deg,var(--fogo-claro),var(--fogo-escuro)); color:#fff; box-shadow:0 8px 20px rgba(245,124,0,.35); }
.btn--fogo:hover{ box-shadow:0 12px 26px rgba(245,124,0,.45); }
.btn--agua{ background:linear-gradient(135deg,var(--agua),var(--azul)); color:#fff; box-shadow:0 8px 20px rgba(41,171,226,.35); }
.btn--agua:hover{ box-shadow:0 12px 26px rgba(41,171,226,.45); }
.btn--light{ background:#fff; color:var(--azul-escuro); box-shadow:var(--shadow-sm); }
.btn--outline{ background:transparent; color:var(--azul-escuro); border-color:var(--azul); }
.btn--outline:hover{ background:var(--azul); color:#fff; }
.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.btn--outline-light:hover{ background:#fff; color:var(--azul-escuro); }

.ico-whats{ width:20px; height:20px; fill:currentColor; flex-shrink:0; }
.btn--lg .ico-whats{ width:24px; height:24px; }

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:sticky; top:0; z-index:100; height:var(--header-h);
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--borda); box-shadow:0 2px 12px rgba(6,28,58,.05);
}
.header__inner{ display:flex; align-items:center; gap:20px; height:100%; }

.brand{ display:flex; align-items:center; gap:11px; }
.brand__logo{ width:48px; height:48px; border-radius:10px; object-fit:cover; box-shadow:var(--shadow-sm); }
.brand__text{ display:flex; flex-direction:column; line-height:1; font-family:var(--font-head); }
.brand__text strong{ font-size:1.12rem; font-weight:800; color:var(--azul-escuro); }
.brand__text em{ font-size:.82rem; font-style:normal; font-weight:700; color:var(--fogo); letter-spacing:.06em; text-transform:uppercase; }

.nav{ display:flex; gap:6px; margin-left:auto; }
.nav__link{
  font-family:var(--font-head); font-weight:600; font-size:.98rem; color:var(--texto);
  padding:9px 14px; border-radius:8px; transition:color .15s, background .15s;
}
.nav__link:hover{ color:var(--azul); background:var(--bg-azul); }

.header__cta{ margin-left:8px; }

.nav__toggle{
  display:none; flex-direction:column; gap:5px; width:44px; height:44px;
  background:transparent; border:0; cursor:pointer; margin-left:auto; padding:10px;
}
.nav__toggle span{ display:block; height:3px; border-radius:3px; background:var(--azul-escuro); transition:.25s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  min-height:clamp(520px, 76vh, 720px);
  display:flex; align-items:center;
  padding:90px 0;
  background:var(--azul-escuro);
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.hero__overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(0,18,42,.94) 0%, rgba(0,28,66,.86) 42%, rgba(0,40,92,.50) 100%),
    linear-gradient(0deg, rgba(0,18,42,.72) 0%, rgba(0,18,42,0) 48%);
}
.hero__inner{ position:relative; z-index:2; }
.hero__content{ max-width:680px; color:#fff; }
.hero__eyebrow{
  display:inline-block; font-family:var(--font-head); font-weight:700; font-size:.9rem;
  color:var(--azul-escuro); background:rgba(255,255,255,.95); padding:8px 16px; border-radius:50px;
  box-shadow:var(--shadow-sm); margin:0 0 18px;
}
.hero__title{
  font-size:clamp(2rem, 4.6vw, 3.4rem); font-weight:900; letter-spacing:-.02em;
  color:#fff; margin-bottom:18px; text-shadow:0 2px 20px rgba(0,10,30,.4);
}
.hero__title .txt-fogo{ color:#ff9d3d; }
.hero__title .txt-agua{ color:#7fd6f5; }
.hero__subtitle{ font-size:1.14rem; color:rgba(255,255,255,.92); max-width:580px; margin:0 0 22px; }
.hero__subtitle strong{ color:#fff; }
.hero__promo{
  display:inline-block; font-family:var(--font-head); font-weight:800; font-size:1.05rem;
  color:#fff; background:linear-gradient(135deg,var(--fogo-claro),var(--fogo-escuro));
  padding:11px 22px; border-radius:12px; margin-bottom:26px; box-shadow:0 8px 22px rgba(245,124,0,.45);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:26px; }
.hero__badges{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.hero__badges li{ font-weight:600; font-size:.96rem; color:#fff; text-shadow:0 1px 12px rgba(0,10,30,.5); }

.hero__wave{
  position:absolute; left:0; right:0; bottom:-1px; height:60px; z-index:2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C 360 70 1080 -10 1440 30 L1440 60 L0 60 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center/cover;
}

/* ============================================================
   DIFERENCIAIS
   ============================================================ */
.features{ padding:56px 0; background:#fff; }
.features__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.feature{
  background:var(--bg); border:1px solid var(--borda); border-radius:var(--radius);
  padding:28px 22px; text-align:center; transition:transform .2s, box-shadow .2s;
}
.feature:hover{ transform:translateY(-5px); box-shadow:var(--shadow); background:#fff; }
.feature__ico{
  width:64px; height:64px; margin:0 auto 16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.9rem;
  background:linear-gradient(135deg,var(--bg-azul),#fff); box-shadow:var(--shadow-sm);
}
.feature h3{ font-size:1.14rem; margin-bottom:8px; }
.feature p{ font-size:.95rem; color:var(--texto-suave); margin:0; }

/* ============================================================
   SEÇÕES DE PRODUTOS
   ============================================================ */
.section-head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.section-tag{
  display:inline-block; font-family:var(--font-head); font-weight:700; font-size:.85rem;
  padding:7px 16px; border-radius:50px; margin-bottom:14px; letter-spacing:.02em;
}
.section-tag--fogo{ background:rgba(245,124,0,.12); color:var(--fogo-escuro); }
.section-tag--agua{ background:rgba(41,171,226,.14); color:var(--azul); }
.section-tag--claro{ background:var(--bg-azul); color:var(--azul-escuro); }
.section-head h2{ font-size:clamp(1.6rem,3vw,2.3rem); font-weight:800; }
.section-sub{ font-size:1.08rem; color:var(--texto-suave); margin:10px 0 0; }

.produtos{ padding:70px 0; }
.produtos--gas{ background:var(--bg); }
.produtos--agua{ background:linear-gradient(180deg,#fff, var(--bg-azul)); }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.cards--4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:#fff; border:1px solid var(--borda); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .22s, box-shadow .22s, border-color .22s;
}
.card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-hover); border-color:var(--agua-claro); }
.card__media{
  height:210px; display:flex; align-items:center; justify-content:center; padding:18px;
  background:radial-gradient(circle at 50% 40%, #fff, var(--bg));
}
.card__media--agua{ background:radial-gradient(circle at 50% 40%, #fff, var(--bg-azul)); }
.card__media img{ height:100%; width:auto; object-fit:contain; transition:transform .3s; }
.card:hover .card__media img{ transform:scale(1.06); }
.card__body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.card__body h3{ font-size:1.18rem; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; }
.card__tag{
  font-family:var(--font); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  background:rgba(245,124,0,.14); color:var(--fogo-escuro); padding:4px 9px; border-radius:6px;
}
.card__tag--agua{ background:rgba(41,171,226,.16); color:var(--azul); }
.card__body p{ font-size:.94rem; color:var(--texto-suave); margin:0 0 18px; flex:1; }
.card__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.price{ font-family:var(--font-head); font-size:1.4rem; font-weight:800; color:var(--azul-escuro); }

.produtos__nota{
  text-align:center; margin:30px auto 0; max-width:640px; font-size:.98rem;
  color:var(--texto-suave); background:#fff; border:1px dashed var(--agua-claro);
  padding:14px 20px; border-radius:var(--radius-sm);
}
.section-cta{ text-align:center; margin-top:40px; }

/* ============================================================
   EMPRESAS (B2B)
   ============================================================ */
.empresas{
  padding:76px 0; color:#fff;
  background:linear-gradient(135deg,var(--azul-escuro),var(--azul));
  position:relative; overflow:hidden;
}
.empresas::before{
  content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px;
  background:radial-gradient(circle, rgba(245,124,0,.35), transparent 65%);
}
.empresas__inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:44px; align-items:center; position:relative; z-index:1; }
.empresas h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.2rem); }
.empresas .section-tag--claro{ background:rgba(255,255,255,.16); color:#fff; }
.empresas__list{ margin:0 0 28px; display:grid; gap:14px; }
.empresas__list li{ display:flex; gap:12px; font-size:1.05rem; align-items:flex-start; }
.empresas__list li span{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--fogo);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:800; margin-top:2px;
}
.empresas__stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.stat{
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius); padding:22px 18px; text-align:center; backdrop-filter:blur(4px);
}
.stat strong{ display:block; font-family:var(--font-head); font-size:1.9rem; font-weight:800; color:var(--fogo-claro); }
.stat span{ font-size:.86rem; color:rgba(255,255,255,.85); }

/* ============================================================
   BAIRROS
   ============================================================ */
.bairros{ padding:70px 0; background:#fff; }
.bairros__grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:36px; }
.bairros__cidade{ background:var(--bg); border:1px solid var(--borda); border-radius:var(--radius); padding:28px; }
.bairros__cidade h3{ font-size:1.3rem; margin-bottom:16px; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chips li{
  background:#fff; border:1px solid var(--borda); color:var(--azul-escuro);
  font-size:.9rem; font-weight:600; padding:7px 14px; border-radius:50px; box-shadow:var(--shadow-sm);
}
.bairros__nota{ font-size:.95rem; color:var(--texto-suave); margin:16px 0 18px; }

.mapa{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--borda); }
.mapa iframe{ display:block; }

/* ============================================================
   SOBRE
   ============================================================ */
.sobre{ padding:76px 0; background:var(--bg); }
.sobre__inner{ display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:center; }
.sobre__media{ display:flex; justify-content:center; }
.sobre__media img{
  width:100%; max-width:520px; border-radius:20px; box-shadow:var(--shadow);
  object-fit:cover; aspect-ratio:4/3;
}
.sobre__content h2{ font-size:clamp(1.6rem,3vw,2.2rem); }
.sobre__content p{ font-size:1.06rem; color:var(--texto-suave); }
.sobre__pilares{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
.sobre__pilares li{ font-weight:600; color:var(--azul-escuro); background:#fff; padding:12px 16px; border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); font-size:.96rem; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ padding:70px 0; background:#fff; }
.faq__list{ max-width:820px; margin:0 auto; display:grid; gap:14px; }
.faq__item{
  background:var(--bg); border:1px solid var(--borda); border-radius:var(--radius-sm);
  padding:4px 22px; transition:box-shadow .2s;
}
.faq__item[open]{ box-shadow:var(--shadow-sm); background:#fff; border-color:var(--agua-claro); }
.faq__item summary{
  font-family:var(--font-head); font-weight:600; font-size:1.05rem; color:var(--azul-escuro);
  padding:16px 0; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; font-size:1.5rem; color:var(--fogo); font-weight:400; transition:transform .2s; }
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item p{ margin:0 0 16px; color:var(--texto-suave); }

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final{
  padding:70px 0; text-align:center;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(41,171,226,.25), transparent 60%),
    linear-gradient(135deg,var(--fogo-escuro),var(--fogo-claro));
}
.cta-final__inner{ max-width:720px; }
.cta-final h2{ color:#fff; font-size:clamp(1.7rem,3.4vw,2.4rem); }
.cta-final p{ color:rgba(255,255,255,.94); font-size:1.1rem; margin-bottom:26px; }
.cta-final__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--azul-escuro); color:rgba(255,255,255,.82); padding:56px 0 0; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1.1fr 1fr 1fr; gap:34px; padding-bottom:40px; }
.footer h4{ color:#fff; font-size:1.05rem; margin-bottom:14px; }
.footer p{ margin:0 0 10px; font-size:.95rem; }
.footer a{ transition:color .15s; }
.footer a:hover{ color:var(--fogo-claro); }
.brand--footer .brand__text strong{ color:#fff; }
.footer__desc{ margin-top:14px; font-size:.94rem; color:rgba(255,255,255,.7); }
.footer__nav{ display:grid; gap:9px; }
.footer__nav a{ font-size:.95rem; }
.footer__bottom{ border-top:1px solid rgba(255,255,255,.12); padding:18px 0; text-align:center; }
.footer__bottom p{ margin:0; font-size:.88rem; color:rgba(255,255,255,.6); }

/* ============================================================
   STICKY BAR MOBILE
   ============================================================ */
.stickybar{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:none;
  grid-template-columns:1fr 1.3fr; gap:0; box-shadow:0 -6px 20px rgba(6,28,58,.18);
}
.stickybar__btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-head); font-weight:700; font-size:1rem; padding:15px 8px; color:#fff;
}
.stickybar__btn--call{ background:var(--fogo); }
.stickybar__btn--whats{ background:var(--whats); }
.stickybar__btn .ico-whats{ width:20px; height:20px; }

/* Floating WhatsApp */
.whats-float{
  position:fixed; right:22px; bottom:26px; z-index:85; width:60px; height:60px; border-radius:50%;
  background:var(--whats); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.5); animation:pulse 2.4s infinite;
}
.whats-float svg{ width:34px; height:34px; fill:#fff; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }

/* ============================================================
   ANIMAÇÃO DE ENTRADA
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ============================================================
   GALERIA / NOSSA ESTRUTURA
   ============================================================ */
.galeria{ padding:70px 0; background:linear-gradient(180deg,var(--bg-azul), #fff); }
.galeria__grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:16px;
}
.galeria__item{
  position:relative; margin:0; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:3/4; background:var(--bg); box-shadow:var(--shadow-sm);
}
.galeria__item img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.galeria__item:hover img{ transform:scale(1.07); }
.galeria__item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:28px 14px 12px;
  font-family:var(--font-head); font-weight:600; font-size:.9rem; color:#fff;
  background:linear-gradient(0deg, rgba(0,18,42,.88), rgba(0,18,42,0));
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1024px){
  .cards--4{ grid-template-columns:repeat(2,1fr); }
  .features__grid{ grid-template-columns:repeat(2,1fr); }
  .empresas__inner{ grid-template-columns:1fr; }
  .sobre__inner{ grid-template-columns:1fr; }
  .sobre__media img{ max-width:100%; }
}

@media (max-width: 860px){
  :root{ --header-h:66px; }
  .nav{
    position:fixed; top:var(--header-h); left:0; right:0;
    flex-direction:column; gap:0; background:#fff; padding:10px;
    box-shadow:0 12px 24px rgba(6,28,58,.12); border-bottom:1px solid var(--borda);
    transform:translateY(-140%); transition:transform .3s ease; margin:0;
  }
  .nav.open{ transform:translateY(0); }
  .nav__link{ padding:14px 12px; border-radius:8px; font-size:1.05rem; }
  .header__cta{ display:none; }
  .nav__toggle{ display:flex; }
  .brand__text strong{ font-size:1rem; }
  body{ padding-bottom:62px; } /* espaço pra sticky bar */
  .stickybar{ display:grid; }
  .whats-float{ display:none; }
}

@media (max-width: 620px){
  .cards, .cards--4, .features__grid, .bairros__grid, .footer__grid, .empresas__stats{
    grid-template-columns:1fr;
  }
  .sobre__pilares{ grid-template-columns:1fr; }
  .galeria__grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .hero{ min-height:auto; padding:56px 0 70px; }
  .hero__actions .btn{ width:100%; }
  .hero__promo{ font-size:.96rem; }
  .btn--lg{ width:100%; }
  .cta-final__actions .btn{ width:100%; }
  .footer__grid{ text-align:left; }
}