/* ===== Design tokens ===== */
:root {
  --color-primary: #2563EB;
  --color-primary-dark: #1642B8;
  --color-primary-neon: #22D3EE;
  --color-secondary: #10B981;
  --color-secondary-dark: #067A56;
  --color-secondary-neon: #39FFB0;
  --color-whatsapp: #128445;
  --color-ink: #0B1B33;
  --color-ink-muted: #55697E;
  --color-bg: #F3F9FC;
  --color-bg-alt: #EAF7F1;
  /* "azul chama de gás" — same electric blue used across the brand (see design system doc) */
  --color-flame-blue: #2563EB;

  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --font-accent: 'Roboto Slab', serif;

  --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-entrance: 900ms;

  --radius-glass: 24px;
  --shadow-glass: 0 8px 32px rgba(20,33,61,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
  --shadow-glow-neon-blue: 0 0 0 1px rgba(34,211,238,0.6), 0 0 24px rgba(34,211,238,0.55);
  --shadow-glow-neon-green: 0 0 0 1px rgba(57,255,176,0.6), 0 0 24px rgba(57,255,176,0.5);

  /* Shared tilt for every wave-background layer (hero, CTA panels, light
     section backgrounds) so the diagonal reads the same everywhere. Scaled
     well past 1 so the rotated edges still cover the box's corners once
     clipped by the parent's overflow:hidden. */
  --wave-tilt: rotate(-17deg) scale(1.6);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; color: var(--color-ink); }
h1 { font-size: clamp(2.2rem, 4vw + 1rem, 3.625rem); font-weight: 800; }
/* Product-page H1s split into two visual lines within a single semantic <h1>
   (SEO term + location on line 1, product/weight/use-case on line 2). em-based
   so it scales proportionally with h1's own responsive clamp() above. */
h1 span { display: block; font-size: .55em; font-style: italic; font-weight: 500; margin-top: .5em; line-height: 1.25; }
h2 { font-size: clamp(1.6rem, 2.5vw + 1rem, 2.625rem); }
h3 { font-size: clamp(1.15rem, 1vw + 1rem, 1.375rem); font-weight: 600; }
/* Section and card titles use the "gas flame blue" brand color */
h2, h3 { color: var(--color-flame-blue); }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; }
.container { width: min(1180px, 92%); margin-inline: auto; }
.section {
  padding: clamp(48px, 8vw, 96px) 0; position: relative; overflow: hidden;
}
.section::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url('../img/wave-bg-light.svg') center / cover no-repeat;
  transform: var(--wave-tilt);
}
/* This section sits right where the page is typically scrolled to first —
   the sticky header (~74px tall) overlaps most of the standard padding-top,
   leaving barely any visible gap above the title. Extra top padding restores
   a gap that reads the same as the section's own bottom padding. */
#historia { padding-top: calc(clamp(48px, 8vw, 96px) + 80px); }
.section--alt { background-color: var(--color-bg-alt); }
.section-title { text-align: center; margin-bottom: .3em; }
.section-sub { text-align: center; color: var(--color-ink-muted); max-width: 60ch; margin: 0 auto 1.5em; }
.area-atendimento-highlight { text-align: center; font-size: 1.35rem; font-weight: 600; color: var(--color-ink); margin-bottom: 0; }

/* ===== Área de Atendimento: light-blue gradient section + unified card =====
   Distinct from the standard .section wave treatment — this section asks for
   a visible light-blue backdrop, so the heading/subtitle/pills are grouped
   into one solid white card that reads clearly on top of it. */
.section--sky { background: linear-gradient(135deg, #EAF6FE 0%, #D2EFFC 50%, #B9E4F7 100%); }
.area-card {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(37,99,235,.15);
  border-radius: var(--radius-glass);
  box-shadow: var(--shadow-glass);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
.area-card .trust-bar { margin-top: 1.5rem; padding: 0; }
.eyebrow { font-family: var(--font-body); font-weight: 600; letter-spacing: .04em; color: var(--color-secondary-dark); text-transform: uppercase; font-size: .85rem; }
.price, .accent-number { font-family: var(--font-accent); font-weight: 700; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ===== Glass ===== */
.glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,255,255,0.55));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: var(--radius-glass);
  box-shadow: var(--shadow-glass);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-heading); font-weight: 600; font-size: 1rem;
  padding: .95em 1.8em; border-radius: 999px; border: none; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out-expo), background-position 600ms var(--ease-out-expo);
}
/* Primary buttons: mirrored (symmetric) neon green/blue gradient */
.btn-primary {
  color: var(--color-ink);
  background: linear-gradient(90deg, var(--color-secondary-neon) 0%, var(--color-primary-neon) 50%, var(--color-secondary-neon) 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  box-shadow: 0 10px 24px rgba(34,211,238,.4);
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.65) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow-neon-blue); background-position: 100% 50%; }
.btn-primary:hover::before { transform: translateX(120%); }

.btn-glass {
  color: var(--color-ink);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(16,185,129,.35);
}
.btn-glass:hover { border-color: var(--color-secondary-neon); box-shadow: var(--shadow-glow-neon-green); transform: translateY(-2px); }

.btn-whatsapp {
  color: #fff; background: var(--color-whatsapp);
  box-shadow: 0 10px 24px rgba(18,132,69,.4);
}
.btn-whatsapp::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--color-whatsapp); opacity: .6;
  animation: pulseRing 1.8s var(--ease-out-expo) infinite;
}
@keyframes pulseRing {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.35); opacity: 0; }
}
.btn-whatsapp:hover { transform: translateY(-2px); }

.btn-ghost { color: var(--color-primary); background: transparent; border: 1.5px solid var(--color-primary); padding: .5em 1.6em; border-radius: 10px; }
.btn-ghost:hover { background: rgba(37,99,235,.08); }

/* ===== TBD placeholder marker (visible, editable-later flag; blue-gray only) ===== */
.tbd {
  display: inline-block; font-size: .85em; font-style: italic; color: var(--color-ink-muted);
  border: 1px dashed var(--color-ink-muted); border-radius: 8px; padding: .1em .5em; background: rgba(85,105,126,.06);
}
.tbd::before { content: "\270E a confirmar: "; font-style: normal; font-weight: 600; }

/* ===== Entrance reveal =====
   Content is visible by default (no-JS / JS-failure safe — crawlers and
   users must always see it). The hidden-until-scrolled state only turns on
   once html.js-reveal is set by the very first inline script in <head>,
   confirming JS actually runs before we hide anything. */
.js-reveal .reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity var(--dur-entrance) var(--ease-out-expo), transform var(--dur-entrance) var(--ease-out-expo), filter var(--dur-entrance) var(--ease-out-expo); }
.js-reveal .reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.d1 { transition-delay: 0ms; } .d2 { transition-delay: 100ms; } .d3 { transition-delay: 200ms; }
.d4 { transition-delay: 300ms; } .d5 { transition-delay: 400ms; } .d6 { transition-delay: 500ms; }

/* ===== Card tilt + spotlight (used on smaller/secondary hover surfaces) ===== */
.card-tilt {
  --x: 50%; --y: 50%; --rx: 0deg; --ry: 0deg;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform var(--dur-fast) var(--ease-out-expo);
  position: relative; overflow: hidden;
}
.card-tilt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(280px circle at var(--x) var(--y), rgba(34,211,238,.25), transparent 60%);
  transition: opacity var(--dur-base) var(--ease-out-expo);
}
.card-tilt:hover::after { opacity: 1; }

/* ===== Card glow: thin animated conic-gradient RING traced along the border
   only, via a masked ::before overlay — never touches the card's own
   background (.glass keeps full control of that). The ring is built from
   two mask layers (content-box vs border-box) combined with
   mask-composite: exclude, which punches out everything except the
   `padding` band — so only a 2px outline remains visible. Only
   `--border-angle` is animated (via @property), so the gradient's colors
   sweep around a perfectly static ring — nothing about the box itself
   rotates or resizes. */
@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes borderRotate { to { --border-angle: 360deg; } }
.card-glow { position: relative; isolation: isolate; transition: transform var(--dur-base) var(--ease-spring); }
.card-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--border-angle),
    var(--color-primary),
    var(--color-primary-neon),
    var(--color-secondary-neon),
    var(--color-secondary),
    var(--color-primary));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: borderRotate 4s linear infinite;
  pointer-events: none;
}
.card-glow:hover { transform: scale(1.035); }
/* When a card combines the 3D tilt (mouse-tracked spotlight) with the glow ring,
   let .card-tilt own the `transform` property so rotateX/rotateY aren't lost —
   the higher-specificity combo selector adds the hover scale on top of the tilt. */
.card-tilt.card-glow:hover { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.035); }
/* Desync neighboring cards in the same grid so their light doesn't travel in lockstep */
.products-grid .card-glow:nth-child(2)::before, .steps-grid .card-glow:nth-child(2)::before { animation-delay: -1s; }
.products-grid .card-glow:nth-child(3)::before, .steps-grid .card-glow:nth-child(3)::before { animation-delay: -2s; }
.products-grid .card-glow:nth-child(4)::before { animation-delay: -3s; }

/* ===== Card edge: left-side neon accent, full height, that traces the
   host's own rounded corners. Built the same way as the .card-glow ring
   (a stroke-width band cut out via a content-box vs border-box mask, so it
   always follows border-radius: inherit exactly) and then clipped down to
   just the left sliver — so the curve painted is the card's real corner
   arc, not a straight bar approximating it. */
.card-edge { position: relative; padding-left: 1.25rem; }
.card-edge::before {
  content: ""; position: absolute; inset: 0; padding: 4px; border-radius: inherit;
  background: linear-gradient(180deg, var(--color-secondary-neon), var(--color-primary-neon));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  clip-path: inset(0 calc(100% - 16px) 0 0);
  pointer-events: none;
}

/* ===== Hero: sweeping diagonal wave/blob background, free-floating media ===== */
.hero { position: relative; overflow: hidden; padding: 70px 0 64px; color: #fff; }
.hero--compact { padding: 70px 0 56px; }
/* Solid base color always shows first — guarantees white text stays readable —
   the ribbon artwork sits on top at reduced opacity so it reads as softer/
   lighter instead of a heavy, fully-saturated dark blue block. */
.hero-waves {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background-color: var(--color-primary-dark);
}
.hero-waves::before {
  content: "";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJiYXNlIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwQjFCMzMiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9IiMxNjQyQjgiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMEIxQjMzIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyaWJib25BIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMC4zIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE2NDJCOCIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjU2M0VCIiBzdG9wLW9wYWNpdHk9IjAuNTUiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InJpYmJvbkIiIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIwLjIiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMjU2M0VCIiBzdG9wLW9wYWNpdHk9IjAuNjUiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjJEM0VFIiBzdG9wLW9wYWNpdHk9IjAuNCIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icmliYm9uQyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjAuMiI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiIHN0b3Atb3BhY2l0eT0iMC40NSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMkQzRUUiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGZpbHRlciBpZD0iZ2xvdyIgeD0iLTMwJSIgeT0iLTMwJSIgd2lkdGg9IjE2MCUiIGhlaWdodD0iMTYwJSI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjciIHJlc3VsdD0iYiIvPgogICAgICA8ZmVNZXJnZT48ZmVNZXJnZU5vZGUgaW49ImIiLz48ZmVNZXJnZU5vZGUgaW49IlNvdXJjZUdyYXBoaWMiLz48L2ZlTWVyZ2U+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjE2MDAiIGhlaWdodD0iOTAwIiBmaWxsPSJ1cmwoI2Jhc2UpIi8+CiAgPHBhdGggZmlsbD0idXJsKCNyaWJib25BKSIgZD0iTS0xMDAsMTYwIEMyNTAsNDAgNTIwLDMwMCA4ODAsMTgwIFMxNDUwLDYwIDE3NTAsMTgwIEwxNzUwLDM4MCBDMTQ1MCwyNjAgMTE1MCw0MDAgODgwLDM2MCBTMzUwLDIyMCAtMTAwLDM0MCBaIi8+CiAgPHBhdGggZmlsbD0idXJsKCNyaWJib25CKSIgZD0iTS0xMDAsMzgwIEMzMjAsMzAwIDY0MCw1MjAgMTAwMCw0MjAgUzE1MjAsMzIwIDE3NTAsNDYwIEwxNzUwLDYyMCBDMTUyMCw1MDAgMTIwMCw1ODAgMTAwMCw1NjAgUzM1MCw0NjAgLTEwMCw1NDAgWiIvPgogIDxwYXRoIGZpbGw9InVybCgjcmliYm9uQykiIGQ9Ik0tMTAwLDU2MCBDMzAwLDUwMCA3MDAsNzAwIDEwNTAsNjAwIFMxNTUwLDUyMCAxNzUwLDYyMCBMMTc1MCw5MDAgTC0xMDAsOTAwIFoiLz4KICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMyMkQzRUUiIHN0cm9rZS13aWR0aD0iNCIgb3BhY2l0eT0iMC44NSIgZmlsdGVyPSJ1cmwoI2dsb3cpIiBkPSJNLTEwMCwxNjAgQzI1MCw0MCA1MjAsMzAwIDg4MCwxODAgUzE0NTAsNjAgMTc1MCwxODAiLz4KICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMzOUZGQjAiIHN0cm9rZS13aWR0aD0iMyIgb3BhY2l0eT0iMC43NSIgZmlsdGVyPSJ1cmwoI2dsb3cpIiBkPSJNLTEwMCwzODAgQzMyMCwzMDAgNjQwLDUyMCAxMDAwLDQyMCBTMTUyMCwzMjAgMTc1MCw0NjAiLz4KICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMyMkQzRUUiIHN0cm9rZS13aWR0aD0iMi41IiBvcGFjaXR5PSIwLjU1IiBmaWx0ZXI9InVybCgjZ2xvdykiIGQ9Ik0tMTAwLDU2MCBDMzAwLDUwMCA3MDAsNzAwIDEwNTAsNjAwIFMxNTUwLDUyMCAxNzUwLDYyMCIvPgo8L3N2Zz4K") center / cover no-repeat;
  transform: var(--wave-tilt);
  opacity: .22;
}

/* .hero-content wraps ALL text elements in normal flow (flex column) instead
   of individual grid rows — this decouples their stacking/spacing entirely
   from .hero-media, which used to span all those rows at once and force
   empty rows (e.g. an unused breadcrumb slot on Home) to inflate to make
   room for the image, breaking precise gap control between elements. */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  grid-template-areas: "content media" "trust trust";
  gap: 0 3rem;
  align-items: start;
}
/* Sobre hero (stripped down to just headline + logo): vertically center the
   row instead of the default top alignment, since there's no badge/breadcrumb/
   sub-copy stack to anchor against anymore. */
.hero-grid--center { align-items: center; }
.hero-content { grid-area: content; display: flex; flex-direction: column; }
.hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 1em; margin-bottom: 30px; }
.hero-badge { display: inline-flex; align-items: center; }
.hero-badge img { height: 174px; width: auto; border-radius: 25%; filter: drop-shadow(0 6px 16px rgba(0,0,0,.3)); }
/* Small text pills (e.g. "Mais vendido") keep the glass-pill treatment */
.hero-badge.hero-badge--pill { gap: .6em; padding: .5em 1em; border-radius: 999px; background: rgba(255,255,255,.14); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.35); font-size: .8rem; }
.hero-breadcrumb { font-size: .85rem; opacity: .8; display: block; margin-bottom: .4em; }
.hero-breadcrumb a { color: #fff; text-decoration: underline; }
.hero-grid h1 { color: #fff; margin: 0 0 .4em; }
/* Home hero only (the one hero without --compact): the H1's own two lines
   swap visual weight — the SEO-first line (with the "há 35 anos" copy) stays
   small/neon-green, while the second line (wrapped in <span>, still part of
   the same H1) reads as the big headline-style text that carries the visual
   emphasis. Product/About heroes have no such span, so their H1 keeps the
   normal full heading size from the base `.hero-grid h1` rule above and the
   shared two-line `h1 span` treatment (small italic) defined earlier. */
.hero:not(.hero--compact) h1 { font-size: 25px; color: var(--color-secondary-neon); margin: 0 0 .6em; }
.hero:not(.hero--compact) h1 span {
  display: block; font-family: var(--font-heading); font-weight: 600; font-style: normal;
  font-size: clamp(2.2rem, 4vw + 1rem, 3.625rem); line-height: 1.15; color: #fff; margin-top: .2em;
}
.hero-sub { color: rgba(255,255,255,.85); font-size: 1.1rem; max-width: 46ch; margin: .4em 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1em; margin-top: 1.5em; }
.hero-media { grid-area: media; display: flex; align-items: center; justify-content: center; }
.hero-media img { width: 100%; max-width: 640px; height: auto; filter: drop-shadow(0 40px 50px rgba(0,0,0,.35)); }
/* Sobre hero: solid white-card logo instead of a cutout photo — same drop
   shadow, but rounded into a badge and capped smaller so it reads as a seal,
   not a full-bleed image. */
.hero-media--logo img { max-width: 320px; border-radius: 80px; }
.hero-trust { grid-area: trust; display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "content" "media" "trust";
    justify-items: center;
    text-align: center;
  }
  .hero-content { align-items: center; }
  .hero-badges, .hero-actions, .hero-trust { justify-content: center; }
  .hero-media img { max-width: 300px; }
  /* Stacked layout: media now sits below the text column, so the gap
     between them is literally this margin-top on the logo block. */
  .hero-media--logo { margin-top: 2rem; }
}

/* ===== Trust bar ===== */
.trust-bar { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; padding: 1.5rem 0; }
.trust-pill { padding: .6em 1.1em; border-radius: 999px; font-size: .9rem; font-weight: 500; color: var(--color-primary-dark); }
.trust-pill--blue, .trust-pill--green {
  background: linear-gradient(135deg, #EAF6FE 0%, #D2EFFC 50%, #B9E4F7 100%);
  color: var(--color-ink);
  border: 1px solid var(--color-flame-blue);
  font-weight: 600;
}

/* ===== Product grid & generic cards ===== */
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2rem; }
.product-card { padding: 1.5rem; text-align: center; display: flex; flex-direction: column; }
.product-card img { width: 70%; height: auto; margin-inline: auto; }
.product-card .btn { margin-top: auto; }
.brands-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2rem; }
.brand-card { padding: 1.5rem; display: flex; align-items: center; justify-content: center; }
.brand-card img { width: 100%; height: auto; border-radius: var(--radius-glass); }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; list-style: none; padding: 0; margin-top: 1.5rem; }
.info-grid li { padding: 1.25rem; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; list-style: none; padding: 0; }
.steps-grid li { padding: 1.5rem; }
.steps-grid .accent-number { color: var(--color-flame-blue); font-size: 1.5rem; display: block; margin-bottom: .3em; }
.promo-block { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 2.5rem; align-items: center; }
.promo-media { display: flex; gap: 1rem; align-items: center; justify-content: center; }
.promo-media img { width: 45%; height: auto; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.contact-card { padding: 2rem; }
.contact-map { border: 0; border-radius: var(--radius-glass); width: 100%; height: 320px; }
@media (max-width: 860px) { .products-grid, .brands-grid { grid-template-columns: repeat(2,1fr); } .info-grid, .steps-grid, .promo-block, .contact-grid { grid-template-columns: 1fr; } }

/* ===== Sections with full wave background (used sparingly, strategic spots) =====
   Content inside must be wrapped in a .glass panel so text stays readable.
   Overrides the subtle .section wave-bg-light with the bold hero-style artwork. */
.section--waves {
  position: relative; overflow: hidden;
  background-color: var(--color-primary-dark);
}
.section--waves::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgc2xpY2UiPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJiYXNlIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwQjFCMzMiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9IiMxNjQyQjgiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMEIxQjMzIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyaWJib25BIiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMC4zIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE2NDJCOCIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjU2M0VCIiBzdG9wLW9wYWNpdHk9IjAuNTUiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9InJpYmJvbkIiIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIwLjIiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMjU2M0VCIiBzdG9wLW9wYWNpdHk9IjAuNjUiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjJEM0VFIiBzdG9wLW9wYWNpdHk9IjAuNCIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icmliYm9uQyIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjAuMiI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxMEI5ODEiIHN0b3Atb3BhY2l0eT0iMC40NSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMkQzRUUiIHN0b3Atb3BhY2l0eT0iMC41Ii8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGZpbHRlciBpZD0iZ2xvdyIgeD0iLTMwJSIgeT0iLTMwJSIgd2lkdGg9IjE2MCUiIGhlaWdodD0iMTYwJSI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjciIHJlc3VsdD0iYiIvPgogICAgICA8ZmVNZXJnZT48ZmVNZXJnZU5vZGUgaW49ImIiLz48ZmVNZXJnZU5vZGUgaW49IlNvdXJjZUdyYXBoaWMiLz48L2ZlTWVyZ2U+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjE2MDAiIGhlaWdodD0iOTAwIiBmaWxsPSJ1cmwoI2Jhc2UpIi8+CiAgPHBhdGggZmlsbD0idXJsKCNyaWJib25BKSIgZD0iTS0xMDAsMTYwIEMyNTAsNDAgNTIwLDMwMCA4ODAsMTgwIFMxNDUwLDYwIDE3NTAsMTgwIEwxNzUwLDM4MCBDMTQ1MCwyNjAgMTE1MCw0MDAgODgwLDM2MCBTMzUwLDIyMCAtMTAwLDM0MCBaIi8+CiAgPHBhdGggZmlsbD0idXJsKCNyaWJib25CKSIgZD0iTS0xMDAsMzgwIEMzMjAsMzAwIDY0MCw1MjAgMTAwMCw0MjAgUzE1MjAsMzIwIDE3NTAsNDYwIEwxNzUwLDYyMCBDMTUyMCw1MDAgMTIwMCw1ODAgMTAwMCw1NjAgUzM1MCw0NjAgLTEwMCw1NDAgWiIvPgogIDxwYXRoIGZpbGw9InVybCgjcmliYm9uQykiIGQ9Ik0tMTAwLDU2MCBDMzAwLDUwMCA3MDAsNzAwIDEwNTAsNjAwIFMxNTUwLDUyMCAxNzUwLDYyMCBMMTc1MCw5MDAgTC0xMDAsOTAwIFoiLz4KICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMyMkQzRUUiIHN0cm9rZS13aWR0aD0iNCIgb3BhY2l0eT0iMC44NSIgZmlsdGVyPSJ1cmwoI2dsb3cpIiBkPSJNLTEwMCwxNjAgQzI1MCw0MCA1MjAsMzAwIDg4MCwxODAgUzE0NTAsNjAgMTc1MCwxODAiLz4KICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMzOUZGQjAiIHN0cm9rZS13aWR0aD0iMyIgb3BhY2l0eT0iMC43NSIgZmlsdGVyPSJ1cmwoI2dsb3cpIiBkPSJNLTEwMCwzODAgQzMyMCwzMDAgNjQwLDUyMCAxMDAwLDQyMCBTMTUyMCwzMjAgMTc1MCw0NjAiLz4KICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMyMkQzRUUiIHN0cm9rZS13aWR0aD0iMi41IiBvcGFjaXR5PSIwLjU1IiBmaWx0ZXI9InVybCgjZ2xvdykiIGQ9Ik0tMTAwLDU2MCBDMzAwLDUwMCA3MDAsNzAwIDEwNTAsNjAwIFMxNTUwLDUyMCAxNzUwLDYyMCIvPgo8L3N2Zz4K") center / cover no-repeat;
  transform: var(--wave-tilt);
  opacity: .22;
}
.section--waves > .container { position: relative; z-index: 1; }
/* Promo panel: flat lighter-blue field instead of the wave artwork —
   quieter backdrop so the product photos and glass card stay the focus. */
#promocao.section--waves { background-color: var(--color-primary); }
#promocao.section--waves::before { display: none; }

/* ===== FAQ ===== */
.faq-list { max-width: 800px; margin-top: 1.5rem; }
.faq-item { border-bottom: 1px solid rgba(11,27,51,.1); }
.faq-question { width: 100%; text-align: left; background: none; border: none; padding: 1.1em 0; font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; color: var(--color-ink); }
.faq-question .faq-icon { transition: transform var(--dur-base) var(--ease-out-expo); color: var(--color-flame-blue); flex-shrink: 0; margin-left: 1em; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--dur-base) var(--ease-out-expo); }
.faq-item.is-open .faq-answer { max-height: 400px; }
.faq-answer p { padding-bottom: 1.1em; color: var(--color-ink-muted); }

/* ===== Header / Nav ===== */
.site-header { position: sticky; top: 0; z-index: 50; }
.nav-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; position: relative; }
.nav-bar img { height: 60px; width: auto; }
/* Centered independently of the logo/toggle via absolute positioning on the
   (already horizontally centered) .container, so its width doesn't push
   against them in the flex flow. Mobile media query below overrides back to
   a fixed full-screen panel, taking it out of this centering entirely. */
.nav-links { display: flex; list-style: none; gap: 1.5em; margin: 0; padding: 0; align-items: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; }
.nav-toggle { display: none; background: none; border: 1.5px solid var(--color-primary); color: var(--color-primary); border-radius: 8px; padding: .5em .8em; font-size: 1.1rem; cursor: pointer; }
/* A duplicate "Fazer Pedido" link (same data-whatsapp-message, wired up by the
   same JS as the one still inside .nav-links) pinned to the bar's edge —
   visible at every width so the CTA never hides behind the mobile hamburger,
   independent of the centered .nav-links group. The copy inside .nav-links is
   hidden everywhere since this one always covers it. */
.nav-cta-desktop { display: inline-flex; }
.nav-links li:last-child { display: none; }
@media (min-width: 861px) {
  .nav-cta-desktop { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
}
@media (max-width: 860px) {
  /* Reorder past .nav-toggle's DOM position so both sit grouped at the bar's
     right edge (order:2/3) instead of space-between spreading them apart. */
  .nav-cta-desktop { order: 2; margin-left: auto; margin-right: .6em; padding: .65em 1.1em; font-size: .85rem; }
  .nav-toggle { order: 3; }
}
.nav-links li > a:not(.btn) { position: relative; padding-bottom: 4px; }
.nav-links li > a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-secondary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.nav-links li > a:not(.btn):hover::after,
.nav-links li > a:not(.btn):focus-visible::after { transform: scaleX(1); }
@media (max-width: 860px) {
  .nav-links { position: fixed; top: 72px; left: 0; right: 0; width: auto; height: calc(100vh - 72px); height: calc(100dvh - 72px); flex-direction: column; padding: 24px; gap: 0; background: var(--color-bg); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: all var(--dur-base) var(--ease-out-expo); align-items: center; text-align: center; overflow-y: auto; }
  .site-header.nav-open .nav-links { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-toggle { display: inline-flex; }
  /* Blue divider between mobile menu items — :nth-last-child(2) is the last
     *visible* item (Sobre), since :last-child (the duplicate Fazer Pedido
     link) is already hidden, so it gets no trailing line under it. */
  .nav-links li { width: 100%; padding: 10px 0; border-bottom: 1px solid var(--color-primary); }
  .nav-links li:nth-last-child(2) { border-bottom: none; }
}

/* ===== Footer ===== */
.site-footer { background: var(--color-ink); color: #fff; padding: 48px 0; }
.site-footer img { width: 180px; height: auto; margin-bottom: .75rem; }
.site-footer .footer-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.site-footer h3 { color: #fff; }
.site-footer a { opacity: .85; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer ul li { margin-bottom: .4em; }
@media (max-width: 860px) { .site-footer .footer-grid { grid-template-columns: 1fr; text-align: center; } }

/* ===== WhatsApp floating button ===== */
.whatsapp-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(37,211,102,.45);
}
.whatsapp-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--color-whatsapp); animation: pulseRing 1.8s var(--ease-out-expo) infinite; }
.whatsapp-float img { width: 100%; height: 100%; border-radius: 50%; }

/* ===== Mobile: center all text ===== */
@media (max-width: 860px) {
  body { text-align: center; }
  .section-sub { margin-inline: auto; }
  .products-grid, .steps-grid { justify-items: center; }
  /* Cards must all share the same width (grid's default stretch) instead of
     shrinking to each item's own text length — only the text inside is
     centered, not the card box itself. */
  .info-grid li { text-align: center; }
  .promo-block { justify-items: center; text-align: center; }
  .promo-media { justify-content: center; }
  .contact-card { text-align: center; }
  .contact-card > div { justify-content: center; }
  .faq-question { text-align: center; }
  .site-footer .footer-grid > div, .site-footer nav { display: flex; flex-direction: column; align-items: center; }
}