/* ==========================================================================
   iTelas — entrada global de estilos (novo site em código)
   Ordem: tokens do design system (Direção G "Porcelana") + base/chrome.
   Fonte canônica dos tokens: ../../Degign_system_jul_2026/tokens/ (copiados aqui).
   ========================================================================== */
/* inlined: tokens/fonts.css */
/* iTelas — Geist self-hosted (sem Google Fonts / zero dependencia externa) */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/geist-0.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/geist-1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/geist-2.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/geist-3.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/geist-4.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* inlined: tokens/colors.css */
/* ============================================================
   iTelas 2026 — Cores (Direção G "Porcelana")
   Âncora intocável: azul iTelas #2D5BA1 (= --blue-600)
   UM verde de WhatsApp (--color-whatsapp)
   Degradês são parte do sistema (--gradient-*)
   ============================================================ */

:root {
  /* --- Azul iTelas (escala da cor-âncora #2D5BA1) --- */
  --blue-50:  #F2F6FB;
  --blue-100: #E2EAF6;
  --blue-150: #DCE6F4; /* "ice" — chips, eyebrows, tiles */
  --blue-200: #C5D5EC;
  --blue-300: #9DB8DE;
  --blue-350: #8FB0E0;
  --blue-400: #6E93CB;
  --blue-450: #4F84D6; /* luz de degradê */
  --blue-500: #4674B4;
  --blue-600: #2D5BA1; /* ÂNCORA DA MARCA — não alterar */
  --blue-700: #264C87;
  --blue-800: #1C3B6E;
  --blue-900: #182E51;
  --blue-night: #0F1B30; /* seções de alto contraste */
  --blue-950: #0B1422;

  /* --- Neutros (frios, porcelana) --- */
  --gray-0:   #FFFFFF;
  --gray-25:  #FAFBFD;
  --gray-50:  #F4F6F9;  /* fundo de página */
  --gray-100: #E8EDF3;  /* porcelana — canvas/surface */
  --gray-150: #E3E7EC;  /* banda cinza (ex-areia) */
  --gray-200: #D6DBE3;
  --gray-300: #C2C9D4;
  --gray-400: #97A2B4;
  --gray-500: #6B7787;
  --gray-600: #525B68;
  --gray-700: #3A414C;
  --gray-800: #23282F;  /* grafite — faixas escuras secundárias */
  --gray-850: #313845;
  --gray-900: #15181E;
  --gray-950: #0F1115;

  /* --- Verde WhatsApp (ÚNICO) --- */
  --green-50:  #E9F8EF;
  --green-450: #23BA5C; /* topo do degradê do botão */
  --green-500: #1DA851; /* preenchimento de CTA */
  --green-600: #168F43; /* hover / pressed */
  --green-700: #0F7536; /* verde como TEXTO em fundo claro (AA 4.5+) */

  /* --- Semânticas --- */
  --red-500:    #BF3B36;
  --red-50:     #FBEDEC;
  --amber-600:  #B45309;
  --amber-50:   #FDF3E7;

  /* --- Aliases semânticos (use estes nos componentes) --- */
  --color-bg:            var(--gray-50);
  --color-bg-subtle:     var(--gray-25);
  --color-surface:       var(--gray-100);    /* porcelana — seções/canvas */
  --color-surface-2:     var(--gray-150);    /* banda cinza alternada */
  --color-card:          var(--gray-0);
  --color-border:        rgba(21, 24, 30, 0.09);
  --color-border-strong: rgba(21, 24, 30, 0.16);

  --color-text:        var(--gray-900);
  --color-text-2:      var(--gray-600);
  --color-text-muted:  var(--gray-500);
  --color-text-invert: #FFFFFF;

  --color-accent:        var(--blue-600);
  --color-accent-hover:  var(--blue-800);
  --color-accent-soft:   var(--blue-150);
  --color-accent-border: rgba(45, 91, 161, 0.25);

  --color-whatsapp:       var(--green-500);
  --color-whatsapp-hover: var(--green-600);
  --color-whatsapp-text:  var(--green-700);
  --color-whatsapp-soft:  var(--green-50);

  --color-danger:      var(--red-500);
  --color-danger-soft: var(--red-50);
  --color-warning:      var(--amber-600);
  --color-warning-soft: var(--amber-50);
  --color-success:      var(--green-700);
  --color-success-soft: var(--green-50);

  /* Estrela de avaliação Google */
  --color-star: #EFA32B;

  /* --- Degradês do sistema (sempre sutis) --- */
  --gradient-page: linear-gradient(180deg, var(--gray-100) 0%, var(--gray-50) 30%, var(--gray-100) 100%);
  --gradient-card: linear-gradient(180deg, #FFFFFF, #FAFBFD); /* @kind color */
  --gradient-accent: linear-gradient(180deg, #3868B4, var(--blue-600));
  --gradient-ink: linear-gradient(180deg, #242A35, var(--gray-900));
  --gradient-whatsapp: linear-gradient(180deg, var(--green-450), var(--green-500));
  --gradient-ice: linear-gradient(160deg, var(--blue-150), #FFFFFF);
  --gradient-band: linear-gradient(165deg, var(--gray-150), var(--gray-200));
  --gradient-night:
    radial-gradient(60% 90% at 85% 10%, rgba(79, 132, 214, 0.25), transparent 60%),
    radial-gradient(40% 60% at 8% 95%, rgba(79, 132, 214, 0.16), transparent 60%),
    linear-gradient(160deg, var(--blue-950), var(--blue-night) 50%, #16294A);
  --gradient-graphite:
    radial-gradient(60% 130% at 92% 0%, rgba(79, 132, 214, 0.22), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 52px),
    linear-gradient(135deg, var(--gray-800) 0%, var(--gray-850) 100%);
  --gradient-text: linear-gradient(92deg, var(--blue-600) 10%, var(--blue-450) 65%, var(--blue-350) 130%);
  --gradient-text-night: linear-gradient(92deg, #9FC2F2, #DCE9FB);
}

/* ============================================================
   Tema NIGHT — seções de alto contraste / dark mode.
   Aplique data-theme="dark" na <section> ou no <html>.
   ============================================================ */
[data-theme="dark"] {
  --color-bg:            var(--blue-night);
  --color-bg-subtle:     var(--blue-950);
  --color-surface:       #16223A;
  --color-card:          #18253F;
  --color-border:        rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.2);

  --color-text:        #F2F5FA;
  --color-text-2:      rgba(255, 255, 255, 0.72);
  --color-text-muted:  rgba(255, 255, 255, 0.5);

  --color-accent:        var(--blue-350);
  --color-accent-hover:  var(--blue-300);
  --color-accent-soft:   rgba(143, 176, 224, 0.14);
  --color-accent-border: rgba(143, 176, 224, 0.35);

  --color-whatsapp-text: #3FCB76;
  --color-whatsapp-soft: rgba(29, 168, 81, 0.14);

  background-color: var(--color-bg);
  color: var(--color-text);
}

/* inlined: tokens/typography.css */
/* ============================================================
   iTelas 2026 — Tipografia (Direção G)
   Família única: Geist. Personalidade vem de peso + tracking
   apertado + degradê de texto nos destaques.
   ============================================================ */

:root {
  --font-display: 'Geist', system-ui, -apple-system, sans-serif;
  --font-body:    'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', monospace;

  /* Escala (fluida — destino estático, mobile-first) */
  --text-display-1: clamp(2.375rem, calc(1.9rem + 2.6vw), 4rem);     /* 38→64 hero */
  --text-display-2: clamp(1.6875rem, calc(1.4rem + 1.6vw), 2.625rem);/* 27→42 título de seção */
  --text-h3: clamp(1.4375rem, calc(1.3rem + 0.7vw), 1.75rem);        /* 23→28 */
  --text-h4: 1.3125rem;                                              /* 21 card titles */
  --text-body-lg: 1.0625rem;                                         /* 17 lead */
  --text-body: 0.96875rem;                                           /* 15.5 padrão */
  --text-body-sm: 0.875rem;                                          /* 14 */
  --text-caption: 0.78125rem;                                        /* 12.5 metadados */
  --text-overline: 0.8125rem;                                        /* 13 kicker uppercase */

  /* Pesos (Geist variável) */
  --weight-display: 700;
  --weight-bold: 750;        /* valores e preços */
  --weight-semibold: 650;
  --weight-medium: 550;
  --weight-regular: 400;

  /* Métricas */
  --leading-display: 1.06;
  --leading-tight: 1.15;
  --leading-body: 1.6;
  --tracking-display: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-overline: 0.08em;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--text-display-1); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-display-2); letter-spacing: var(--tracking-display); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); font-weight: var(--weight-semibold); }

p { margin: 0; text-wrap: pretty; }

/* Kicker de seção — uppercase, peso 700, azul (ou terra-* não existe mais) */
.overline {
  font-family: var(--font-body);
  font-size: var(--text-overline);
  font-weight: 700;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Destaque com degradê de texto (usar em 1 palavra-chave por título) */
.text-grad {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-grad-night {
  background: var(--gradient-text-night);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* inlined: tokens/spacing.css */
/* ============================================================
   iTelas 2026 — Espaçamento, raios, sombras, motion (Direção G)
   ============================================================ */

:root {
  /* Spacing — base 4px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Raios — Direção G: quadros generosos, botões pill */
  --radius-sm: 10px;      /* thumbs internos, chips quadrados */
  --radius-md: 14px;      /* cards menores, inputs */
  --radius-lg: 20px;      /* cards/painéis principais */
  --radius-xl: 24px;      /* blocos hero */
  --radius-pill: 999px;   /* botões, badges, eyebrows */

  /* Sombras — em camadas (hairline + curta + difusa azulada) */
  --shadow-1: 0 0 0 1px rgba(21, 24, 30, 0.04), 0 1px 2px rgba(21, 24, 30, 0.05);
  --shadow-2: 0 0 0 1px rgba(21, 24, 30, 0.04), 0 1px 2px rgba(21, 24, 30, 0.05), 0 12px 32px -14px rgba(28, 59, 110, 0.18);
  --shadow-3: 0 0 0 1px rgba(21, 24, 30, 0.04), 0 2px 5px rgba(21, 24, 30, 0.07), 0 24px 56px -18px rgba(28, 59, 110, 0.32);
  --shadow-4: 0 0 0 1px rgba(21, 24, 30, 0.05), 0 4px 10px rgba(21, 24, 30, 0.1), 0 32px 80px -20px rgba(28, 59, 110, 0.45); /* modal/sticky apenas */
  --shadow-btn-wa: 0 1px 2px rgba(15, 117, 54, 0.4), 0 8px 20px -8px rgba(29, 168, 81, 0.5);

  /* Motion — discreto e rápido */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* @kind other */
  --duration-fast: 0.15s; /* @kind other */
  --duration-base: 0.2s; /* @kind other */
  --duration-slow: 0.4s; /* @kind other */

  /* Layout */
  --container-max: 1160px;
  --container-pad: clamp(16px, 3vw, 32px);
  --touch-target: 44px;
}

/* inlined: base.css */
/* ==========================================================================
   iTelas — base + chrome (header, footer, botões, WhatsApp bar)
   Traduz os componentes JSX do design system para CSS puro (produção).
   Depende dos tokens em tokens/*.css. Sem framework. WCAG AA.
   ========================================================================== */

/* ---- Reset enxuto ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  min-height: 100%;
  background: var(--gradient-page);
  background-attachment: fixed;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); }
ul { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }

/* Acessibilidade: link "pular para o conteúdo" (IA-friendliness + WCAG) */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--color-accent); color: #fff; padding: 10px 16px;
  border-radius: 0 0 var(--radius-md) 0; font-weight: 650;
}
.skip-link:focus { left: 0; }

/* ---- Layout ---- */
.it-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.it-section { padding-block: clamp(48px, 6.5vw, 84px); }
.it-band { background: var(--gradient-band); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Botões (pill, degradê) ---- */
.it-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 650; font-size: var(--text-body-sm);
  line-height: 1; text-decoration: none; cursor: pointer;
  border: 0; border-radius: var(--radius-pill);
  padding: 0 20px; min-height: var(--touch-target); /* ≥44px touch */
  transition: filter var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  color: #fff;
}
.it-btn:hover { filter: brightness(1.05); }
.it-btn:active { transform: scale(0.985); }
.it-btn--lg { min-height: 52px; padding: 0 26px; font-size: var(--text-body); }
.it-btn--primary  { background: var(--gradient-accent); }
.it-btn--ink      { background: var(--gradient-ink); }
.it-btn--whatsapp { background: var(--gradient-whatsapp); box-shadow: var(--shadow-btn-wa); }
.it-btn--secondary {
  background: rgba(255,255,255,0.7); color: var(--color-text);
  border: 1px solid var(--color-border-strong); backdrop-filter: blur(6px);
}
.it-btn--ghost { background: transparent; color: var(--color-accent); border: 1px solid var(--color-accent-border); }
.it-btn svg { width: 18px; height: 18px; }

/* ---- Overline / kicker (também em typography.css) ---- */
.it-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-overline); font-weight: 650; color: var(--blue-800);
  background: linear-gradient(180deg, #fff, var(--blue-150));
  border: 1px solid var(--color-accent-border); border-radius: var(--radius-pill);
  padding: 7px 13px;
}
.it-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }

/* ---- Tiles de ícone ---- */
.it-icontile, .it-icontile--soft {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; flex: none;
}
.it-icontile { background: var(--gradient-accent); color: #fff; }
.it-icontile--soft { background: var(--gradient-ice); color: var(--color-accent); }
.it-icontile svg, .it-icontile--soft svg { width: 20px; height: 20px; }

/* ---- Card ---- */
.it-card {
  background: var(--gradient-card); border-radius: var(--radius-md);
  box-shadow: var(--shadow-2); overflow: hidden;
}
.it-card--lift { transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.it-card--lift:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); }

/* ==========================================================================
   HEADER — sticky, translúcido + blur, borda inferior 1px
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(244,246,249,0.86);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner { display: flex; align-items: center; gap: var(--space-6); height: 68px; }
.site-header__logo { display: flex; align-items: center; flex: none; }
.site-header__logo img { height: 30px; width: auto; }
.site-nav { display: flex; gap: var(--space-5); margin-left: auto; align-items: center; }
.site-nav a {
  font-size: var(--text-body-sm); font-weight: 500; color: var(--color-text-2);
  text-decoration: none; padding: 8px 2px;
}
.site-nav a:hover { color: var(--color-text); }

/* Dropdown "Serviços" (CSS puro, acessível por foco/hover) */
.site-nav__item { position: relative; }
.site-nav__menu {
  position: absolute; top: 100%; left: 0; min-width: 232px;
  background: rgba(255,255,255,0.98); backdrop-filter: blur(18px);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-3); padding: 8px; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility var(--duration-base);
}
.site-nav__item:hover .site-nav__menu,
.site-nav__item:focus-within .site-nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav__menu a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); }
.site-nav__menu a:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.site-header__cta { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.site-header__phone { font-size: var(--text-body-sm); font-weight: 600; color: var(--color-text); text-decoration: none; }

/* CTAs dentro do drawer mobile (escondidos no desktop, onde ficam no header) */
.site-nav__actions { display: none; }

/* Botão hambúrguer (mobile) */
.site-header__toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--color-text); }
.site-header__toggle svg { width: 26px; height: 26px; transition: transform var(--duration-base) var(--ease-out); }
.site-header__toggle[aria-expanded="true"] svg { transform: rotate(45deg); }

@media (max-width: 860px) {
  .site-nav, .site-header__phone { display: none; }
  .site-header__toggle { display: inline-flex; }
}
/* telas estreitas: header compacto — sem estourar 375px (o CTA de reserva
   permanece no corpo da página e na wa-bar) */
@media (max-width: 620px) {
  .site-header__inner { gap: var(--space-3); }
  .site-header__cta { gap: 8px; }
  .site-header__cta .it-btn--ink { display: none; }
}
@media (max-width: 860px) {
  .site-nav--open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: 68px; left: 0; right: 0;
    background: #F4F6F9;
    border-bottom: 1px solid var(--color-border); padding: 12px var(--container-pad) 20px;
    box-shadow: 0 24px 44px -18px rgba(11,20,34,0.28);
  }
  .site-nav--open .site-nav__menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding-left: 12px; }
  .site-nav--open .site-nav__actions {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    width: 100%; margin-top: 14px; padding-top: 16px;
    border-top: 1px solid var(--color-border);
  }
  /* especificidade: .site-nav a sobrescreve cor/padding do .it-btn dentro do drawer */
  .site-nav--open .site-nav__actions a.it-btn {
    justify-content: center; color: #fff;
    padding: 0 20px; min-height: var(--touch-target); font-weight: 650;
  }
  .site-nav__phone {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 2px; font-weight: 650; color: var(--color-text); text-decoration: none;
    font-size: var(--text-body);
  }
  .site-nav__phone svg { width: 17px; height: 17px; color: var(--color-accent); }
}

/* ==========================================================================
   FOOTER — claro, colunas com kickers, contato real, redes sociais, legal
   ========================================================================== */
.site-footer { border-top: 1px solid var(--color-border); background: rgba(255,255,255,0.55); }
.site-footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: var(--space-7);
  padding-block: var(--space-7) var(--space-5);
}
.site-footer__brand img { height: 26px; width: auto; margin-bottom: 14px; }
.site-footer__brand p { font-size: var(--text-body-sm); color: var(--color-text-2); max-width: 34ch; line-height: 1.6; }
.site-footer__kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 14px; }
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.site-footer a { color: var(--color-text-2); text-decoration: none; font-size: var(--text-body-sm); }
.site-footer a:hover { color: var(--color-accent); }
.site-footer__contact { font-size: var(--text-body-sm); color: var(--color-text-2); line-height: 1.6; }
.site-footer__wa { color: var(--color-whatsapp-text); font-weight: 650; }

/* Redes sociais (regra do projeto: em TODA landing e no site) */
.site-social { display: flex; gap: 10px; margin-top: 14px; }
.site-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-accent-soft); color: var(--color-accent);
}
.site-social a:hover { background: var(--color-accent); color: #fff; }
.site-social svg { width: 18px; height: 18px; }

.site-footer__legal {
  border-top: 1px solid var(--color-border); margin-top: var(--space-6); padding-top: var(--space-5);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: var(--text-caption); color: var(--color-text-muted);
}
@media (max-width: 760px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } .site-footer__brand { grid-column: 1 / -1; } }

/* ==========================================================================
   WHATSAPP BAR (mobile sticky) + banner de consentimento
   ========================================================================== */
.wa-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none; padding: 10px var(--container-pad) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(244,246,249,0.92); backdrop-filter: blur(18px);
  border-top: 1px solid var(--color-border); box-shadow: var(--shadow-4);
}
.wa-bar .it-btn { width: 100%; }
@media (max-width: 860px) { .wa-bar { display: block; } body { padding-bottom: 76px; } }

.consent-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  max-width: 560px; margin-inline: auto;
  background: var(--gradient-card); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-4); padding: 18px 20px;
}
.consent-banner[hidden] { display: none; }
.consent-banner p { font-size: var(--text-body-sm); color: var(--color-text-2); margin-bottom: 12px; line-height: 1.55; }
.consent-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.itelas-chat-launcher {
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  min-width: 64px; min-height: 48px; padding: 11px 18px;
  border: 0; border-radius: 999px; color: #fff; background: #1556a0;
  box-shadow: var(--shadow-4); font: inherit; font-weight: 750; cursor: pointer;
}
.itelas-chat-launcher[hidden] { display: none; }
body:has(.consent-banner:not([hidden])) .itelas-chat-launcher { display: none; }
@media (max-width: 860px) {
  .consent-banner { bottom: 92px; }
  .wa-bar { padding-right: calc(var(--container-pad) + 84px); }
  .itelas-chat-launcher {
    right: var(--container-pad); bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    min-width: 72px; padding-inline: 14px;
  }
}

/* ==========================================================================
   pagina: troca-tela — tabela semântica (categorias de tela + garantia)
   ========================================================================== */
.it-table { width: 100%; border-collapse: collapse; background: var(--gradient-card); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-2); }
.it-table th, .it-table td { text-align: left; padding: 12px 16px; font-size: var(--text-body-sm); border-bottom: 1px solid var(--color-border); }
.it-table th { font-weight: 650; color: var(--color-text); background: var(--gradient-band); }
.it-table td { color: var(--color-text-2); }
.it-table tbody tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   WarrantyBadge — selo de garantia (flat, Direção G). Tiers: vitalicia / 18 / 12.
   ========================================================================== */
.wbadge { display: inline-flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; line-height: 1.2; }
.wbadge__shield { position: relative; display: block; color: var(--color-accent); }
.wbadge__shield svg { display: block; width: 100%; height: 100%; }
.wbadge--lg .wbadge__shield { width: 116px; height: 132px; }
.wbadge--md .wbadge__shield { width: 84px;  height: 96px; }
.wbadge--sm .wbadge__shield { width: 46px;  height: 52px; }
.wbadge__cap { font-weight: 750; letter-spacing: 0.01em; color: var(--color-text); }
.wbadge--lg .wbadge__cap { font-size: var(--text-body-lg); }
.wbadge--md .wbadge__cap { font-size: var(--text-body); }
.wbadge--sm .wbadge__cap { font-size: var(--text-caption); }
.wbadge__cap small { display: block; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent); font-size: 0.62em; margin-bottom: 3px; }
[data-theme="dark"] .wbadge__shield { color: var(--blue-350); }
[data-theme="dark"] .wbadge__cap { color: #F2F5FA; }
[data-theme="dark"] .wbadge__cap small { color: var(--blue-350); }
.wbadge--inline { flex-direction: row; gap: 8px; align-items: center; }
.wbadge--inline .wbadge__cap { font-size: var(--text-body-sm); font-weight: 700; }
.wbadge--inline .wbadge__cap small { display: none; }

/* ==========================================================================
   WarrantyBadge 3D — selo dourado (PADRÃO, decisão Marcelo 2026-07-04).
   Maior contraste que o flat. Assets raster (webp 360²) em assets/img/badges/.
   O flat (.wbadge) permanece como variante para mesclar com a Porcelana.
   Tiers: 12 / 18 / vitalicia. Sizes: lg / md / sm / inline.
   ========================================================================== */
.wbadge3d { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; line-height: 1.2; }
.wbadge3d__img { flex: none; filter: drop-shadow(0 6px 14px rgba(120,84,10,0.28)); }
.wbadge3d--lg .wbadge3d__img { width: 128px; height: 128px; }
.wbadge3d--md .wbadge3d__img { width: 92px;  height: 92px; }
.wbadge3d--sm .wbadge3d__img { width: 54px;  height: 54px; }
.wbadge3d__cap { font-weight: 750; letter-spacing: 0.01em; color: var(--color-text); }
.wbadge3d--lg .wbadge3d__cap { font-size: var(--text-body-lg); }
.wbadge3d--md .wbadge3d__cap { font-size: var(--text-body); }
.wbadge3d--sm .wbadge3d__cap { font-size: var(--text-caption); }
.wbadge3d__cap small { display: block; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent); font-size: 0.62em; margin-bottom: 3px; }
[data-theme="dark"] .wbadge3d__cap { color: #F2F5FA; }
[data-theme="dark"] .wbadge3d__cap small { color: var(--blue-350); }
/* inline (célula de tabela): imagem pequena + rótulo à direita, sem eyebrow */
.wbadge3d--inline { flex-direction: row; gap: 9px; align-items: center; text-align: left; }
.wbadge3d--inline .wbadge3d__img { width: 38px; height: 38px; }
.wbadge3d--inline .wbadge3d__cap { font-size: var(--text-body-sm); font-weight: 700; }
.wbadge3d--inline .wbadge3d__cap small { display: none; }

/* ==========================================================================
   REVIEWS — prova social Google (reutilizável, em TODAS as páginas).
   Topo: nota agregada + resumo consolidado + link para o Google.
   Slider: trilho horizontal com scroll-snap (10+ avaliações) + setas (JS).
   Números/cards/summary vêm do build (data/reviews.json); refresh via reviews-live.js.
   ========================================================================== */
.rv__top { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-8); align-items: center; margin-bottom: var(--space-7); }
.rv__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.rv__score { display: flex; align-items: center; gap: 16px; }
.rv__num { font-family: var(--font-display, var(--font-body)); font-weight: var(--weight-display, 750); font-size: clamp(3rem, 6vw, 4rem); line-height: 0.9; color: var(--color-text); letter-spacing: var(--tracking-tight); }
.rv__scoreside { display: flex; flex-direction: column; gap: 5px; }
.rv__stars { display: inline-flex; gap: 2px; }
.rv__stars svg { width: 20px; height: 20px; color: #F5A623; }
.rv__meta { font-size: var(--text-body-sm); color: var(--color-text-2); }
.rv__meta b { color: var(--color-text); font-weight: 700; }
.rv__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.rv__google { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: var(--text-body-sm); color: var(--color-accent); text-decoration: none; }
.rv__google:hover { text-decoration: underline; }
.rv__google svg { width: 18px; height: 18px; flex: none; }
.rv__verified { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-body-sm); color: var(--color-text-2); }
.rv__verified img { width: 26px; height: 26px; flex: none; filter: drop-shadow(0 3px 7px rgba(120,84,10,0.25)); }
.rv__verified b { color: var(--color-text); font-weight: 700; }
.rv__consolidated { background: var(--gradient-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); border-left: 3px solid var(--color-accent); padding: 22px 26px; }
.rv__consolidated-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.rv__consolidated p { margin-top: 10px; color: var(--color-text-2); font-size: var(--text-body); line-height: 1.6; }

/* ---- Slider ---- */
.rv__slider { position: relative; }
.rv__track {
  display: flex; gap: 16px; list-style: none; margin: 0; padding: 4px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.rv__track::-webkit-scrollbar { display: none; }
.rv__card {
  flex: 0 0 clamp(270px, 82vw, 348px); scroll-snap-align: start;
  background: var(--gradient-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
  padding: 22px; display: flex; flex-direction: column; gap: 11px;
}
.rv__who { display: flex; align-items: center; gap: 11px; }
.rv__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; color: #fff; background: var(--gradient-accent); }
.rv__name { font-weight: 650; font-size: var(--text-body-sm); color: var(--color-text); }
.rv__src { display: flex; align-items: center; gap: 5px; font-size: var(--text-caption); color: var(--color-text-muted); margin-top: 1px; }
.rv__src svg { width: 13px; height: 13px; }
.rv__card .rv__stars svg { width: 15px; height: 15px; }
.rv__text { font-size: var(--text-body-sm); color: var(--color-text-2); line-height: 1.55; margin: 0; }
.rv__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--color-surface, #fff); color: var(--color-accent);
  border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-3);
  display: inline-flex; align-items: center; justify-content: center;
  transition: filter var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
}
.rv__nav:hover { filter: brightness(0.97); }
.rv__nav[hidden], .rv__nav:disabled { opacity: 0; pointer-events: none; }
.rv__nav svg { width: 22px; height: 22px; }
.rv__nav--prev { left: -10px; }
.rv__nav--next { right: -10px; }

/* Dark-aware (f-a-q fechamento etc. usam data-theme=dark ao redor) */
[data-theme="dark"] .rv__num, [data-theme="dark"] .rv__meta b, [data-theme="dark"] .rv__verified b { color: #F2F5FA; }
[data-theme="dark"] .rv__meta, [data-theme="dark"] .rv__verified { color: rgba(255,255,255,0.72); }
[data-theme="dark"] .rv__consolidated, [data-theme="dark"] .rv__card { background: rgba(15,27,48,0.4); box-shadow: 0 0 0 1px rgba(255,255,255,0.08); }
[data-theme="dark"] .rv__consolidated p, [data-theme="dark"] .rv__text { color: rgba(255,255,255,0.74); }
[data-theme="dark"] .rv__name { color: #F2F5FA; }

@media (max-width: 900px) {
  .rv__top { grid-template-columns: 1fr; gap: var(--space-6); }
  .rv__nav { display: none; } /* mobile: swipe nativo */
}
/* desktop: folga lateral para as setas não cobrirem o texto do 1º/último card */
@media (min-width: 901px) {
  .rv__track { padding-inline: 42px; scroll-padding-inline: 42px; }
}

/* ---- Pílula de nota no HERO (reutilizável; destaque das avaliações) -------
   Padrão para hero escuro (data-theme=dark). Link âncora p/ o bloco de reviews. */
.rv-herobadge {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  padding: 8px 15px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.92); font-size: var(--text-body-sm); font-weight: 550;
  backdrop-filter: blur(6px);
  transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.rv-herobadge:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.32); }
.rv-herobadge__stars { display: inline-flex; gap: 1px; color: #FFC24D; }
.rv-herobadge__stars svg { width: 15px; height: 15px; }
.rv-herobadge b { color: #fff; font-weight: 750; }
.rv-herobadge .rv-herobadge__sep { color: rgba(255,255,255,0.35); }
/* variante clara p/ hero em fundo claro */
.rv-herobadge--light { background: rgba(45,91,161,0.06); border-color: var(--color-accent-border); color: var(--color-text-2); }
.rv-herobadge--light:hover { background: rgba(45,91,161,0.1); }
.rv-herobadge--light b { color: var(--color-text); }

/* Linha de confiança do hero (pílula de nota + selos), reutilizável */
.hero-trustrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 24px; }

/* Selo de garantia flutuante no HERO (sobre a arte/telefone) */
.hero-seal { position: absolute; z-index: 3; }
.hero-seal .wbadge3d__img { filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4)); }