/* =========================================================================
   Jaguar Piscinas — Settings + Base + Layout.
   Design-system (tokens.css + base.css) já importado no HTML.
   Componentes reutilizáveis ficam em components.css.
   Escrito mobile-first (base = telas pequenas; sobe com min-width).

   Convenção de nomes: blocos de seção (hero, intro, callout…) e de chrome
   (site-header, site-footer) não levam prefixo; primitivas de UI reutilizáveis
   levam c- (c-button, c-eyebrow, c-skip-link, c-whatsapp-float).
   ========================================================================= */

/* ---------- Settings: marca Jaguar + tokens locais ---------- */
:root {
  /* Paleta base Jaguar (fonte única de verdade da cor) */
  --jaguar-blue: #0050a1;
  --jaguar-deep: #003a74;
  --jaguar-sky: #0196c7;
  --jaguar-pool: #76d7f4;
  --jaguar-blue-soft: #1a7ac4;

  /* Marca do design-system apontando para a paleta (sem duplicar hex) */
  --brand-primary: var(--jaguar-blue);
  --brand-primary-hover: var(--jaguar-deep);
  --brand-secondary: var(--jaguar-deep);
  --brand-accent: var(--jaguar-sky);

  /* Neutros travados em claro — o design é claro por intenção;
     evita o flip do @media (prefers-color-scheme: dark) do design-system. */
  --color-bg: #ffffff;
  --color-surface: #e5e5e5;
  --color-border: #e5e5e5;
  --color-text: #333333;
  --color-text-muted: #556070;

  /* Fonte da marca */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Montserrat", var(--font-sans);

  /* Peso extra (Montserrat 800) — o design-system só vai até 700 */
  --fw-extrabold: 800;

  /* Tamanhos de display (a referência extrapola a escala base) */
  --fs-display: clamp(2.5rem, 1.4rem + 5vw, 4.5rem);
  --fs-statement: clamp(2rem, 1.2rem + 3.6vw, 3.6rem);
  --fs-title: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  --fs-step-number: 2.6rem;   /* marca-d'água dos passos */

  /* Raios que a referência usa e o design-system não tem */
  --radius-media: 1.125rem; /* 18px */
  --radius-card: 1.25rem;   /* 20px */
  --radius-panel: 1.5rem;   /* 24px */
  --radius-cta: 1.75rem;    /* 28px */

  /* Sombras azuladas da marca */
  --shadow-blue-xs: 0 6px 24px rgba(0, 58, 116, 0.08);
  --shadow-blue-sm: 0 10px 30px rgba(0, 80, 161, 0.12);
  --shadow-blue-md: 0 14px 30px rgba(0, 58, 116, 0.12);
  --shadow-blue-lg: 0 20px 40px rgba(0, 58, 116, 0.10);

  /* Barras decorativas de acento */
  --accent-bar-h: 2px;
  --accent-bar-h-lg: 4px;

  /* Camadas (z-index) — coerentes com --z-header/--z-modal do design-system */
  --z-float: 900;
  --z-nav-backdrop: 1100;
  --z-nav: 1200;
  --z-toggle: 1300;
  --z-preloader: 9999;

  /* Ritmo vertical de seção (fluido: ~76px → ~110px) */
  --space-section: clamp(4.75rem, 3rem + 6vw, 6.875rem);

  /* Gradientes reutilizados */
  --grad-hero: linear-gradient(135deg, var(--jaguar-deep) 0%, var(--jaguar-blue) 55%, var(--jaguar-blue-soft) 100%);
  --grad-deep: linear-gradient(135deg, var(--jaguar-deep), var(--jaguar-blue));
  --grad-panel: linear-gradient(150deg, var(--jaguar-blue), var(--jaguar-deep));
  --grad-sky: linear-gradient(145deg, var(--jaguar-blue), var(--jaguar-sky));

  /* Easing da referência */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Base local ---------- */
body { overflow-x: hidden; }
/* Links do site são estilizados por contexto (nav, footer, botões) */
a { color: inherit; text-decoration: none; }

/* Foco de alto contraste sobre superfícies escuras (WCAG 1.4.11) */
.hero a:focus-visible,
.cta a:focus-visible,
.site-footer a:focus-visible,
.site-nav__list a:focus-visible { outline-color: var(--color-text-inverse); }

/* Skip link: oculto até receber foco */
.c-skip-link {
  position: fixed; top: 0; left: var(--space-4); z-index: var(--z-preloader);
  transform: translateY(-120%); transition: transform var(--transition-fast);
  background: var(--jaguar-blue); color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-4);
  border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md);
}
.c-skip-link:focus { transform: translateY(0); }

/* Água decorativa (usa o filtro SVG compartilhado, estático) */

/* Objeto de seção: ritmo vertical padrão */
.l-section { position: relative; padding-block: var(--space-section); }

/* ---------- Tipografia de seção reutilizável ---------- */
.c-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--jaguar-blue); font-weight: var(--fw-bold);
  letter-spacing: 0.16em; font-size: var(--fs-xs); text-transform: uppercase;
  margin-bottom: var(--space-4); max-width: 100%;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full); background: var(--color-bg);
}
.c-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.c-eyebrow--light { color: var(--jaguar-pool); border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); }

.section-title {
  font-size: var(--fs-title); line-height: 1.08; letter-spacing: -0.02em;
  color: var(--jaguar-blue); max-width: 20ch;
}
.section-title--light { color: var(--color-text-inverse); }

.lead { font-size: var(--fs-lg); color: var(--color-text-muted); max-width: 56ch; margin-top: var(--space-5); }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: var(--z-preloader); background: var(--jaguar-blue);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-5); transition: opacity 0.4s var(--ease-out), visibility 0.4s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__logo { height: 52px; width: auto; }
.preloader__bar { width: min(240px, 60vw); height: 3px; background: rgba(255, 255, 255, 0.18); border-radius: var(--radius-full); overflow: hidden; }
.preloader__fill { height: 100%; width: 0; background: var(--jaguar-pool); transition: width 0.15s linear; }
.preloader__count { color: var(--jaguar-pool); font-weight: var(--fw-medium); font-size: var(--fs-sm); letter-spacing: 0.18em; max-width: none; }

/* ---------- Header / Navbar ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-modal);
  padding-block: var(--space-4);
  transition: background 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), padding 0.4s var(--ease-out);
}
.site-header--scrolled {
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-blue-xs); padding-block: var(--space-3);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
/* Logo do header (SVG; troca de versão ao rolar) — acima do scrim quando o menu abre */
.site-header__logo { display: inline-flex; position: relative; z-index: var(--z-toggle); }
.site-header__logo-img { display: block; height: 36px; width: auto; transition: opacity 0.4s var(--ease-out); }
.site-header__logo-img--dark { position: absolute; top: 0; left: 0; opacity: 0; }
.site-header--scrolled .site-header__logo-img--light { opacity: 0; }
.site-header--scrolled .site-header__logo-img--dark { opacity: 1; }

.site-nav__list {
  position: fixed; inset: 0 0 0 auto; width: 78%; max-width: 320px;
  list-style: none; padding: var(--space-8); margin: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-5);
  background: var(--jaguar-blue); transform: translateX(100%); visibility: hidden;
  transition: transform 0.4s var(--ease-out), visibility 0.4s var(--ease-out); z-index: var(--z-nav);
}
.site-nav__list.is-open { transform: none; visibility: visible; }
.site-nav__list a { color: var(--color-text-inverse); font-weight: var(--fw-medium); font-size: var(--fs-lg); }
.site-nav__list .c-button { margin-top: var(--space-4); }

.site-nav__toggle {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-width: 44px; min-height: 44px;
  background: none; border: 0; cursor: pointer; z-index: var(--z-toggle);
}
.site-nav__toggle span { width: 26px; height: var(--accent-bar-h); background: var(--color-text-inverse); transition: background 0.3s; }
.site-header--scrolled .site-nav__toggle span { background: var(--jaguar-blue); }

/* Menu aberto: força logo claro + hambúrguer branco, mesmo se o header já rolou
   (evita azul-sobre-azul quando o painel do menu abre) */
.site-header--menu-open .site-nav__toggle span { background: var(--color-text-inverse); }
.site-header--menu-open .site-header__logo-img--light { opacity: 1; }
.site-header--menu-open .site-header__logo-img--dark { opacity: 0; }

/* Fundo escurecido atrás do menu mobile (fecha ao tocar) */
.site-nav__backdrop {
  position: fixed; inset: 0; z-index: var(--z-nav-backdrop);
  background: rgba(9, 20, 40, 0.55); opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0.4s var(--ease-out);
}
.site-nav__backdrop.is-open { opacity: 1; visibility: visible; }

/* ---------- Hero ---------- */
.hero { min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: var(--grad-hero); }
.hero__overlay { position: absolute; inset: 0; background: radial-gradient(120% 90% at 80% 20%, rgba(118, 215, 244, 0.18), transparent 55%); }
.hero__inner { position: relative; z-index: 2; padding-block: calc(var(--space-12) + var(--space-6)) var(--space-10); display: grid; grid-template-columns: 1fr; grid-template-areas: "content" "media" "stats"; gap: var(--space-6); align-items: center; }
.hero__content { grid-area: content; }
.hero__media { grid-area: media; position: relative; z-index: 1; border-radius: var(--radius-panel); overflow: hidden; box-shadow: var(--shadow-blue-lg); aspect-ratio: 3 / 2; }
.hero__img { width: 100%; height: 100%; object-fit: cover; }
.hero__tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--jaguar-pool); font-weight: var(--fw-bold); letter-spacing: 0.16em;
  font-size: var(--fs-xs); text-transform: uppercase; margin-bottom: var(--space-5); max-width: 100%;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.06);
}
.hero__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hero__title { color: var(--color-text-inverse); font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.02em; max-width: 14ch; }
.hero__title span { color: var(--jaguar-pool); }
.u-accent { color: var(--jaguar-pool); }
.hero__subtitle { color: rgba(255, 255, 255, 0.92); font-size: var(--fs-lg); max-width: 44ch; margin-block: var(--space-5) var(--space-6); }
.hero__cta { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero__stats {
  grid-area: stats; list-style: none; z-index: 2;
  width: 300px; max-width: 100%; margin-inline: auto;
  margin-top: calc(-1 * var(--space-6) - 10px);
  padding: var(--space-2) var(--space-5);
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.08);
  border: var(--border-width) solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-panel);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero__stat { display: flex; align-items: center; gap: var(--space-3); max-width: none; padding-block: var(--space-4); }
.hero__stat + .hero__stat { border-top: var(--border-width) solid rgba(255, 255, 255, 0.12); }
.hero__stat-icon { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); background: rgba(118, 215, 244, 0.14); color: var(--jaguar-pool); }
.hero__stat-body { display: flex; flex-direction: column; }
.hero__stat-value { color: var(--color-text-inverse); font-size: var(--fs-lg); font-weight: var(--fw-medium); line-height: 1.15; letter-spacing: -0.01em; }
.hero__stat-label { color: rgba(255, 255, 255, 0.85); font-size: var(--fs-sm); }

/* ---------- Footer ---------- */
.site-footer { background: var(--jaguar-deep); color: var(--color-text-inverse); padding-block: var(--space-10) var(--space-8); }
.site-footer__logo { height: 40px; width: auto; }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); }
.site-footer__desc { color: rgba(255, 255, 255, 0.65); font-size: var(--fs-sm); margin-top: var(--space-5); max-width: 34ch; }
.site-footer__title { font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--jaguar-pool); margin-bottom: var(--space-4); font-weight: var(--fw-bold); }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__col li, .site-footer__col a { color: rgba(255, 255, 255, 0.78); font-size: var(--fs-sm); }
.site-footer__col a:hover { color: var(--color-text-inverse); }
.site-footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.site-footer__social a { width: 44px; height: 44px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.1); display: grid; place-items: center; transition: background 0.3s, transform 0.3s; }
.site-footer__social a:hover { background: var(--jaguar-sky); transform: translateY(-3px); }
.site-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-8); padding-top: var(--space-5);
  border-top: var(--border-width) solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.68); font-size: var(--fs-xs);
}

/* ---------- WhatsApp flutuante ---------- */
.c-whatsapp-float {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: var(--z-float);
  width: 60px; height: 60px; border-radius: var(--radius-full); background: #25d366;
  display: grid; place-items: center; box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45); transition: transform 0.3s;
}
.c-whatsapp-float:hover { transform: scale(1.08); }

/* ---------- Reveal on scroll (só oculta quando há JS) ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Página 404 ---------- */
.error { min-height: 100vh; display: grid; place-items: center; text-align: center; background: var(--grad-hero); color: var(--color-text-inverse); padding: var(--space-6); }
.error__inner { max-width: 40rem; }
.error__code { font-size: clamp(4rem, 3rem + 12vw, 8rem); font-weight: var(--fw-extrabold); line-height: 1; color: var(--jaguar-pool); letter-spacing: -0.02em; }
.error__title { font-size: var(--fs-2xl); color: var(--color-text-inverse); margin-block: var(--space-4) var(--space-3); }
.error__text { color: rgba(255, 255, 255, 0.85); max-width: 44ch; margin-inline: auto; margin-bottom: var(--space-6); }

/* ---------- Mobile: centralizar textos e elementos (o rodapé fica como está) ---------- */
@media (max-width: 47.99em) {
  .hero__content, .intro__content, .differentials__head,
  .pillars > .l-container, .gallery > .l-container { text-align: center; }
  .hero__title, .hero__subtitle, .section-title, .lead { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .differentials__head { align-items: center; }
  .card { text-align: center; }
  .card__icon { margin-inline: auto; }
}

/* =========================================================================
   Responsivo (mobile-first: incrementa com min-width)
   ========================================================================= */
@media (min-width: 48em) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }

  /* Stats do hero em linha (com divisórias verticais) */
  .hero__stats { flex-direction: row; width: fit-content; margin-top: var(--space-6); padding: var(--space-4) var(--space-5); }
  .hero__stat { padding-block: 0; padding-inline: var(--space-5); }
  .hero__stat:first-child { padding-left: 0; }
  .hero__stat:last-child { padding-right: 0; }
  .hero__stat + .hero__stat { border-top: 0; border-left: var(--border-width) solid rgba(255, 255, 255, 0.16); }
}

@media (min-width: 64em) {
  /* Nav inline no desktop */
  .site-nav__list {
    position: static; width: auto; max-width: none; background: none; visibility: visible;
    flex-direction: row; align-items: center; justify-content: flex-end;
    padding: 0; gap: var(--space-6); transform: none;
  }
  .site-nav__list a { color: var(--color-text-inverse); font-size: var(--fs-sm); position: relative; }
  .site-nav__list a:not(.c-button)::after {
    content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: var(--accent-bar-h);
    background: var(--jaguar-sky); transition: width 0.3s var(--ease-out);
  }
  .site-nav__list a:not(.c-button):hover::after { width: 100%; }
  .site-nav__list .c-button { margin-top: 0; }
  .site-header--scrolled .site-nav__list a:not(.c-button) { color: var(--color-text); }
  .site-header--scrolled .site-nav__list a:focus-visible { outline-color: var(--color-focus); }
  .site-nav__toggle { display: none; }
  .site-nav__backdrop { display: none; }

  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }

  /* Hero em 2 colunas (texto+stats à esquerda, foto à direita) no desktop */
  .hero__inner { grid-template-columns: 1.05fr 0.85fr; grid-template-areas: "content media" "stats media"; gap: var(--space-6) var(--space-10); align-items: center; }
  .hero__media { aspect-ratio: 4 / 5; }
  .hero__stats { width: fit-content; margin: var(--space-6) 0 0; z-index: auto; }
}