/* Ótica Líder · style.css
   Design system: docs/07-design-system.json v4.0 (fiel à referência Óticas Olhar 360,
   decisão do dono em 19/10/2026: cores medidas, Sora em todo o site, container de 1140 px,
   cabeçalho sobre o hero, mesmos raios e espaçamentos).
   Mobile first. Breakpoints: 480, 768, 1024, 1200 (menu completo), 1280.
   Observação: paddings em forma física (top right bottom left) e espaçamentos de seção em
   valores fixos por breakpoint, para o detector do Impeccable ler o respiro corretamente. */

/* ---------- Fonte: Sora 400, 600, 700 e 800 (OFL, auto-hospedada, subconjunto latin) ---------- */
@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/sora-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/sora-600.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/sora-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Sora";
  src: url("/assets/fonts/sora-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face { font-family: "Sora Fallback"; src: local("Arial"); size-adjust: 106%; ascent-override: 92%; descent-override: 26%; line-gap-override: 0%; }

/* ---------- Tokens v4 (medidos na referência; ver docs/07-design-system.json) ---------- */
:root {
  --azul-hero: #015F9B;
  --azul-profundo: #004570;
  --azul-noite: #00385C;
  --turquesa: #55B9CD;
  --turquesa-texto: #5DBDD0;   /* ajuste mínimo da turquesa para 3:1 em título grande sobre o azul do hero */
  --amarelo: #FABF10;
  --amarelo-hover: #FFDA6C;
  --amarelo-ativo: #EAB000;
  --azul-botao: #1D6C9E;
  --azul-botao-hover: #175B86;
  --tinta: #0B263F;
  --card-claro: #D9E3EA;
  --branco: #FFFFFF;

  /* Papéis (nomes herdados, usados por todas as páginas) */
  --primary: var(--tinta);
  --primary-hover: #061A2C;
  --primary-soft: #E8EFF4;
  --primary-soft-2: #D9E3EA;
  --primary-mid: var(--azul-hero);
  --primary-mid-hover: var(--azul-profundo);
  --secondary: var(--turquesa);
  --secondary-light: var(--turquesa-texto);
  --link: #0072B8;          /* 5,12:1 no branco e 3,01:1 contra a tinta do texto (WCAG 1.4.1 sem sublinhado) */
  --accent: var(--amarelo);
  --accent-hover: var(--amarelo-hover);
  --accent-active: var(--amarelo-ativo);
  --text: var(--tinta);
  --text-muted: #3A5368;
  --text-on-dark: #FFFFFF;
  --text-muted-on-dark: #C9DCEA;
  --surface: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-alt: #EEF3F7;
  --surface-ice: var(--card-claro);
  --surface-ice-hover: #CCD9E2;
  --surface-dark: var(--azul-profundo);
  --surface-darker: var(--azul-noite);
  --border: #CBD8E2;
  --border-strong: #6F8496;
  --border-on-dark: rgba(201, 220, 234, 0.28);
  --success: #1A7F4B;
  --error: #B3261E;
  --whatsapp: #1B7A4B;
  --whatsapp-hover: #155F3A;
  --whatsapp-active: #114D2F;

  --font-display: "Sora", "Sora Fallback", "Segoe UI", Arial, sans-serif;
  --font-text: "Sora", "Sora Fallback", "Segoe UI", Arial, sans-serif;

  --fs-hero-turquesa: clamp(2.875rem, 2.05rem + 3.4vw, 4.4375rem);
  --fs-hero-branco: clamp(2.5rem, 1.85rem + 2.7vw, 4rem);
  --fs-h1: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.52rem + 0.95vw, 2.1875rem);
  --fs-h3: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.28vw, 1.25rem);
  --fs-body: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --fs-small: 1rem;
  --fs-label: 1rem;
  --fs-number: clamp(2.375rem, 2.1rem + 1.1vw, 2.875rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3.75rem;
  --space-9: 5rem;
  --space-10: 7.5rem;

  --section-y: 60px;
  --band-y: 60px;
  --hero-bottom: 60px;
  --overlap: 40px;
  --gutter: 20px;
  --gap: 20px;
  --card-pad: 24px;

  --radius-xs: 5px;
  --radius-sm: 9px;
  --radius-btn: 9px;
  --radius-btn-blue: 5px;
  --radius-field: 9px;
  --radius-md: 14px;
  --radius: 20px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-xxl: 40px;
  --radius-panel: 80px;
  --radius-arch: 999px 999px 40px 40px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 6px -2px rgba(9, 14, 18, 0.16);
  --shadow-md: 0 12px 28px -14px rgba(9, 14, 18, 0.28);
  --shadow-lg: 0 24px 48px -20px rgba(9, 14, 18, 0.34);
  --shadow-panel: 0 32px 64px -32px rgba(9, 14, 18, 0.42);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-card: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 150ms;
  --t: 300ms;
  --t-slow: 400ms;

  --header-h: 72px;
  --container: 1140px;
  --container-wide: 1240px;
}
@media (min-width: 768px) {
  :root { --gap: 20px; --section-y: 80px; --band-y: 80px; --hero-bottom: 80px; --overlap: 48px; }
}
@media (min-width: 1024px) {
  :root { --card-pad: 30px; --header-h: 92px; --overlap: 56px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 100px;
  scrollbar-color: var(--azul-hero) var(--surface-alt);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
input, textarea { caret-color: var(--azul-hero); }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
::selection { background: var(--amarelo); color: var(--tinta); }
::marker { color: var(--azul-hero); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--primary);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -0.015em; }
h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.02em; max-width: 26ch; text-wrap: balance; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
/* Caixa alta só por CSS, em títulos curtos das páginas Persuade */
.caps { text-transform: uppercase; line-height: 1; letter-spacing: -0.02em; }
h2.caps { max-width: 22ch; }
/* Título bicolor: uma única troca de cor (regra One Switch) */
.t-2 { color: var(--azul-profundo); }
/* Rótulo de seção (pedido de fidelidade à referência; nunca é heading) */
.label { margin: 0 0 14px; font-family: var(--font-display); font-size: var(--fs-label); font-weight: 800; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta); }
.label--yellow { color: var(--amarelo); }
p { margin: 0; text-wrap: pretty; max-width: 40em; }
p + p { margin-top: 1em; }
strong { font-weight: 700; }
ul, ol { margin: 0; padding: 0; }
a {
  color: var(--link);
  font-weight: 600;
  text-decoration-line: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: color var(--t-fast) var(--ease), text-decoration-thickness var(--t-fast) var(--ease);
}
a:hover, a:focus-visible { color: var(--azul-profundo); text-decoration-line: underline; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--azul-hero); outline-offset: 3px; border-radius: 4px; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; stroke-width: 2; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  background: var(--tinta);
  color: var(--text-on-dark);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.skip-link:focus, .skip-link:hover { top: var(--space-4); color: var(--text-on-dark); outline-color: var(--amarelo); }

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

/* ---------- Seções ---------- */
.section { position: relative; padding: var(--section-y) var(--gutter); }
.section--soft { background: var(--primary-soft); }
.section--alt { background: var(--surface-alt); }
.section__head { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
.section__head--center { justify-items: center; text-align: center; }
.section__head--center h2, .section__head--center p { margin-left: auto; margin-right: auto; }
.section__lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 56ch; }
.section__close { margin-top: var(--space-7); }
@media (min-width: 1024px) {
  .section__head { margin-bottom: var(--space-8); }
}

/* Faixa azul profunda */
.band {
  position: relative;
  background: var(--surface-dark);
  color: var(--text-on-dark);
  padding: var(--band-y) var(--gutter) var(--band-y);
}
.band h2, .band h3 { color: var(--text-on-dark); }
.band p { color: var(--text-muted-on-dark); }
.band .section__lead { color: var(--text-on-dark); }
.band a:not(.btn) { color: var(--text-on-dark); text-decoration-color: var(--turquesa); }
.band a:not(.btn):hover { color: var(--text-on-dark); text-decoration-color: var(--amarelo); }
.band :focus-visible { outline-color: var(--amarelo); }
.wave { display: none !important; }
.lit { color: var(--amarelo); }
.hero .lit { color: var(--amarelo-hover); }

/* ---------- Botões (amarelo 9 px, azul 5 px, sem sombra, sem deslocamento) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 24px;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn .icon { width: 20px; height: 20px; }
.btn--caps { text-transform: uppercase; letter-spacing: 0.01em; font-size: 0.9375rem; }
.btn--lg { min-height: 52px; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--amarelo); border-color: var(--amarelo); color: var(--tinta); }
.btn--primary:hover { background: var(--amarelo-hover); border-color: var(--amarelo-hover); color: var(--tinta); }
.btn--primary:active { background: var(--amarelo-ativo); border-color: var(--amarelo-ativo); }
.btn--blue, .btn--secondary { background: var(--azul-botao); border-color: var(--azul-botao); color: var(--text-on-dark); border-radius: var(--radius-btn-blue); }
.btn--blue:hover, .btn--secondary:hover { background: var(--azul-botao-hover); border-color: var(--azul-botao-hover); color: var(--text-on-dark); }
.btn--blue:active, .btn--secondary:active { background: var(--azul-profundo); border-color: var(--azul-profundo); }
.band .btn--secondary, .hero .btn--secondary { background: var(--surface-card); border-color: var(--surface-card); color: var(--tinta); }
.band .btn--secondary:hover, .hero .btn--secondary:hover { background: var(--primary-soft); border-color: var(--primary-soft); color: var(--tinta); }
.hero .btn--blue { background: var(--azul-botao); border-color: var(--azul-botao); color: var(--text-on-dark); }
.hero .btn--blue:hover { background: var(--azul-botao-hover); border-color: var(--azul-botao-hover); }
.btn--ghost { background: transparent; border-color: var(--tinta); color: var(--tinta); }
.btn--ghost:hover { background: var(--primary-soft); color: var(--tinta); }
.btn--ghost:active { background: var(--primary-soft-2); }
.band .btn--ghost { border-color: var(--text-on-dark); color: var(--text-on-dark); }
.band .btn--ghost:hover { background: var(--azul-noite); color: var(--text-on-dark); }
.btn--whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); color: #FFFFFF; }
.btn--whatsapp:hover { background: var(--whatsapp-hover); border-color: var(--whatsapp-hover); color: #FFFFFF; }
.btn--whatsapp:active { background: var(--whatsapp-active); }
.btn__text { max-width: calc(100% - 28px); }
.btn--block .btn__text { max-width: none; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
@media (max-width: 479.98px) {
  .btn-row .btn { width: 100%; }
}
.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}
.phone-link:hover { color: var(--tinta); text-decoration: underline; text-decoration-thickness: 2px; }
.band .phone-link { color: var(--text-on-dark); }
.band .phone-link .icon { color: var(--turquesa); }
.link-arrow { display: inline-block; padding: 10px 0; line-height: 24px; font-weight: 700; color: var(--link); }
.link-arrow .icon { display: inline-block; vertical-align: -0.2em; margin-left: 6px; transition: transform var(--t) var(--ease); }
.mega__all .link-arrow { display: inline-block; }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ---------- Cabeçalho: azul sólido nas internas, transparente sobre o hero da home ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0 var(--gutter);
  background: var(--azul-hero);
  color: var(--text-on-dark);
  transition: box-shadow var(--t) var(--ease);
}
.header.is-stuck { box-shadow: 0 6px 18px -10px rgba(9, 14, 18, 0.55); }
body:has(.hero--home) .header { position: absolute; left: 0; right: 0; top: 0; background: transparent; box-shadow: none; }
.header > .container { max-width: var(--container-wide); }
.header__inner { display: flex; align-items: center; gap: var(--space-3); height: var(--header-h); }
.header__logo { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; }
.header__logo img { height: 38px; width: auto; }
.header :focus-visible { outline-color: var(--amarelo); }
.header .mega :focus-visible, .header .dropdown :focus-visible, .header .mnav__panel :focus-visible { outline-color: var(--azul-hero); }
.header__phone .phone-link__num { display: none; }
.header__phone .phone-link {
  justify-content: center;
  min-width: 44px;
  border-radius: var(--radius-pill);
  color: var(--text-on-dark);
}
.header__phone .phone-link:hover { color: var(--amarelo-hover); }
.header__cta {
  flex: none;
  min-height: 44px;
  padding: 4px 12px;
  gap: 6px;
  font-size: 0.875rem;
  line-height: 1.15;
  max-width: 10rem;
  white-space: normal;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.header__cta .icon { width: 18px; height: 18px; flex: none; }
@media (max-width: 479.98px) {
  .header__inner { gap: var(--space-2); }
  .header__logo img { height: 32px; }
  .header__phone { display: none; }
  .header__cta { max-width: 11.5rem; padding: 4px 12px; font-size: 0.8125rem; }
  .header__cta .icon { display: none; }
}
@media (min-width: 768px) {
  .header__phone .phone-link__num { display: inline; }
  .header__cta { max-width: none; min-height: 46px; padding: 10px 16px; gap: 8px; font-size: 0.875rem; line-height: 1.2; white-space: nowrap; }
}
@media (min-width: 1024px) {
  .header__logo img { height: 50px; }
}

.nav { display: none; height: 100%; }
.nav__list { display: flex; align-items: stretch; height: 100%; list-style: none; gap: 0; }
.nav__item { display: flex; align-items: center; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 44px;
  padding: 12px 9px;
  border: 0;
  background: none;
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 14px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}
.nav__link:hover { color: var(--amarelo-hover); text-decoration-color: transparent; }
.nav__link[aria-current="page"], .nav__item--drop.is-open > .nav__link, .nav__item--drop:has([aria-current="page"]) > .nav__link { color: var(--text-on-dark); text-decoration-color: var(--amarelo); }
.nav__link[aria-current="page"]:hover { color: var(--amarelo-hover); }
.nav__link .icon { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
/* Desktop: 3 zonas (logo | menu | destaque) */
@media (min-width: 1200px) {
  .header__inner { position: relative; gap: var(--space-4); }
  .header__logo { margin-right: 0; flex: none; }
  .nav { display: block; flex: 1 1 auto; min-width: 0; }
  .nav__list { justify-content: center; gap: 0; }
  .header__phone { display: none; }
  .mnav { display: none; }
}
@media (min-width: 1360px) {
  .nav__link { padding: 12px 12px; }
}

/* Mega menu */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
/* Estado comum dos painéis do menu (mega menu e dropdowns compactos) */
.nav__drop {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
}
.nav__item--drop:hover > .nav__drop,
.nav__item--drop:focus-within > .nav__drop,
.nav__item--drop.is-open > .nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s;
}
.nav__item--drop.is-closed > .nav__drop { opacity: 0; visibility: hidden; transform: translateY(-4px); }
.nav__item--drop:hover > .nav__link .icon, .nav__item--drop.is-open > .nav__link .icon { transform: rotate(180deg); }
.nav__item--drop.is-closed > .nav__link .icon { transform: none; }
/* Dropdown compacto (Onde atendemos e Blog): coluna única, mesmo item do mega menu */
.nav__item--compact { position: relative; }
.dropdown {
  position: absolute;
  left: -12px;
  top: 100%;
  z-index: 60;
  width: 340px;
  padding: var(--space-3);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}
.dropdown .mega__all { margin: var(--space-2) 0 var(--space-1); }
.mega__link[aria-current="page"] { background: var(--primary-soft); }
.mega__link[aria-current="page"] .mega__name { color: var(--primary); }
.mega__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 320px; align-items: start; gap: var(--space-6); padding: var(--space-6); }
.mega__title { display: flex; align-items: center; min-height: 44px; margin: 0 0 var(--space-1); padding: 0 0 0 10px; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--primary); }
.mega__title a, .mega__title span { color: var(--primary); }
.mega__list { list-style: none; display: grid; gap: 2px; }
.mega__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}
.mega__link:hover { background: var(--primary-soft); color: var(--text); }
.mega__link:focus-visible { outline-offset: -3px; }
.mega__ico {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--primary);
  color: var(--secondary);
}
.mega__ico .icon { width: 22px; height: 22px; }
.mega__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.25; color: var(--primary); }
.mega__desc { display: block; font-size: 1rem; color: var(--text-muted); line-height: 1.35; }
.mega__all { margin-top: var(--space-2); padding: 0 0 0 10px; font-size: 1rem; }
.mega__feature { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-4); border-radius: var(--radius); background: var(--surface-ice); }
.mega__feature img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); background: var(--primary-soft); }
.mega__feature-title { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.2; color: var(--primary); }
.mega__feature p { font-size: 1rem; margin: 0; }
.mega__feature .btn { width: 100%; font-size: 1rem; }
.mega__strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--primary-mid);
  list-style: none;
}
.mega__strip li { display: flex; align-items: center; gap: var(--space-2); font-size: 1rem; font-weight: 700; color: var(--text-on-dark); min-width: 0; }
.mega__strip .icon { color: var(--secondary-light); }
.mega__strip a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-on-dark); text-decoration-color: var(--secondary-light); }
.mega__strip a:hover { color: var(--text-on-dark); text-decoration-color: var(--accent); }
.mega__strip :focus-visible { outline-color: var(--accent); }
.mega__title a { display: inline-flex; align-items: center; min-height: 44px; }

/* Menu mobile: link para #menu-mobile (abre por :target sem JS; o JS troca por aria-expanded) */
.mnav__toggle {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  color: var(--primary);
  background: none;
  border: 0;
  cursor: pointer;
}
.mnav__toggle .icon { width: 28px; height: 28px; }
.mnav__toggle:hover { background: var(--primary-soft); }
.mnav__panel {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 80;
  height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-card);
  border-top: 1px solid var(--border);
  padding: var(--space-4) var(--gutter) 6rem;
}
.mnav__panel:target, .mnav.is-open .mnav__panel { display: block; }
.mnav__close {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 44px;
  margin-bottom: var(--space-2);
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}
.mnav__close:hover { color: var(--primary); text-decoration: underline; text-decoration-color: var(--link); }
.mnav__top { list-style: none; }
.mnav__top > li { border-bottom: 1px solid var(--border); padding: 4px 0; }
.mnav__top-link, .mnav__acc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 56px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mnav__acc-btn .icon { width: 22px; height: 22px; color: var(--primary); transition: transform var(--t) var(--ease); }
.mnav__acc-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.mnav__top-link:hover, .mnav__acc-btn:hover { background: var(--primary-soft); color: var(--text); }
.mnav__top-link[aria-current="page"], .mnav__acc:has([aria-current="page"]) > .mnav__acc-btn { color: var(--primary); }
.mnav__acc-panel { padding-bottom: var(--space-3); }
.mnav__acc-panel[hidden] { display: none; }
.mnav__acc .mnav__list { padding-left: var(--space-2); }
.mnav__acc .mnav__list > li:last-child { border-bottom: 0; }
.mnav__acc-panel > .mnav__group-title:first-child { margin-top: var(--space-1); }
.mnav__acc .mnav__group-title { padding-left: var(--space-2); }
.mnav__list a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); }
.mnav__group-title { margin: var(--space-4) 0 var(--space-2); font-size: var(--fs-small); font-weight: 700; color: var(--text-muted); }
.mnav__list { list-style: none; }
.mnav__list > li { border-bottom: 1px solid var(--border); padding: 4px 0; }
.mnav__list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.mnav__list a:hover { background: var(--primary-soft); color: var(--text); }
.mnav__list .icon { color: var(--primary); }
.mnav__list .mnav__all { color: var(--link); }
.mnav__offer { width: 100%; margin: 0 0 var(--space-3); }
.mnav__contact { margin-top: var(--space-5); display: grid; gap: var(--space-3); }
.mnav__contact .btn { width: 100%; }
html.menu-open { overflow: hidden; }
html.menu-open .wa-bar { display: none; }

/* Barra fixa de WhatsApp no celular */
.wa-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  transition: transform var(--t) var(--ease);
}
.wa-bar .btn { width: 100%; }
.wa-bar.is-hidden { transform: translateY(110%); }
@media (min-width: 1200px) {
  .wa-bar { display: none; }
}

/* ---------- Formulários ---------- */
.field { display: grid; gap: 6px; }
.field label, .field__label { font-size: 1rem; font-weight: 700; color: var(--text); }
.field__hint { font-size: var(--fs-small); color: var(--text-muted); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-field);
  background: var(--surface-card);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1.125rem;
  line-height: 1.4;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--primary); box-shadow: 0 2px 8px -5px rgba(16, 22, 38, 0.24); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--link); outline: 3px solid var(--link); outline-offset: 2px; }
.field input:user-invalid, .field select:user-invalid { border: 2px solid var(--error); }
.field select { appearance: none; padding: 12px 48px 12px 16px; }
.field__select { position: relative; display: block; }
.field__chevron { position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--primary); pointer-events: none; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; min-height: 44px; padding: 4px 0; font-size: var(--fs-small); color: var(--text-muted); cursor: pointer; }
.consent a { display: inline-block; padding: 10px 0; margin: -10px 0; }
.consent input { width: 24px; height: 24px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.form-grid { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 768px) {
  .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* rótulos alinhados pela base (reserva de 2 linhas); o erro cresce para baixo sem empurrar o vizinho */
  .form-grid--2 .field:not(.field--full) { grid-template-rows: minmax(2.6em, auto) auto; }
  .form-grid--2 .field:not(.field--full) > label { align-self: end; }
  .form-grid--2 .field--full { grid-column: 1 / -1; }
}
.form-card {
  display: grid;
  gap: var(--space-4);
  padding: 24px;
  background: var(--surface-card);
  color: var(--text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.form-card h2, .form-card__title, .band .form-card__title, .hero .form-card__title { color: var(--primary); font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.2; max-width: none; }
.form-card p { color: var(--text-muted); }
.form-card a:not(.btn), .hero .form-card a:not(.btn), .band .form-card a:not(.btn), .footer .footer__form a { color: var(--link); text-decoration-line: none; text-decoration-color: currentColor; text-decoration-thickness: 1.5px; }
.form-card a:not(.btn):hover, .hero .form-card a:not(.btn):hover, .band .form-card a:not(.btn):hover, .footer .footer__form a:hover { color: var(--primary); }
.form-card :focus-visible { outline-color: var(--link); }
.form-status { font-size: var(--fs-small); color: var(--text); }
.form-status:empty { display: none; }
.form-status.is-ok { padding: 12px 16px; border: 1px solid var(--success); border-radius: var(--radius-md); background: #E8F5EE; }
@media (min-width: 1024px) {
  .form-card { padding: 32px; }
}


/* ---------- Hero com formulário ---------- */
.hero {
  position: relative;
  background: var(--primary-mid);
  color: var(--text-on-dark);
  padding: var(--space-7) var(--gutter) var(--hero-bottom);
}
.hero p { color: var(--text-muted-on-dark); }
.hero a:not(.btn) { color: var(--text-on-dark); text-decoration-color: var(--secondary-light); }
.hero a:not(.btn):hover { color: var(--text-on-dark); text-decoration-color: var(--accent); }
.hero :focus-visible { outline-color: var(--accent); }
.hero .form-card :focus-visible { outline-color: var(--link); }
.hero__grid { position: relative; display: grid; gap: var(--space-7); align-items: start; }
.hero__copy { display: grid; gap: var(--space-5); justify-items: start; position: relative; z-index: 1; }
.hero__label { color: var(--secondary-light) !important; font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; }
.hero__title { color: var(--text-on-dark); max-width: 20ch; }
.hero__brand { display: block; font-size: clamp(3rem, 2rem + 4.6vw, 5.5rem); line-height: 1; letter-spacing: -0.03em; }
.hero__desc { display: block; margin-top: 0.35em; font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem); line-height: 1.18; letter-spacing: -0.01em; }
.hero__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-on-dark) !important; }
.hero .btn-row .btn { flex: 1 1 auto; }
.guarantees { list-style: none; display: grid; gap: var(--space-3); width: 100%; }
.guarantees li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-weight: 700; font-size: 1rem; line-height: 1.4; color: var(--text-on-dark); }
.guarantees .icon { color: var(--secondary-light); margin-top: 1px; }
@media (min-width: 768px) {
  .guarantees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hero__cutout { display: none; }
.hero__aside { position: relative; z-index: 1; }
@media (min-width: 1024px) {
  .hero { padding: var(--space-8) var(--gutter) var(--hero-bottom); }
}
/* Entre 1024 e 1199 px só o hero COM formulário empilha como no tablet (formulário em 2 colunas) */
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 7fr 5fr; gap: var(--space-8); }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .hero__grid:has(.form-card) { grid-template-columns: minmax(0, 1fr); }
}
/* Recorte do atendente oculto até existir a imagem real (Fase 6, pendência 82) */

/* Consulta de bairro */
.lookup { display: grid; gap: var(--space-3); width: 100%; max-width: 36rem; }
.lookup__label { font-weight: 700; color: var(--text-on-dark); }
.lookup__row { display: grid; gap: var(--space-3); }
.lookup__input { position: relative; }
.lookup__input .icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--primary); pointer-events: none; }
.lookup__input input {
  width: 100%;
  min-height: 52px;
  padding: 12px 20px 12px 50px;
  border: 1.5px solid var(--surface-card);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1.125rem;
}
.lookup__input input:hover { border-color: var(--secondary); }
.lookup__input input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.lookup__result {
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text);
  font-size: 1rem;
}
.lookup__result:empty { display: none; }
.hero .lookup__result, .hero .lookup__result p { color: var(--text); }
.lookup__result strong { color: var(--primary); }
.lookup__result a { color: var(--link) !important; }
.lookup__result a:hover { color: var(--primary) !important; }
.lookup__result :focus-visible { outline-color: var(--link) !important; }
@media (prefers-reduced-motion: no-preference) {
  .lookup__result { animation: aparecer var(--t) var(--ease); }
  @keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
}
@media (min-width: 1200px) {
  .lookup__row { grid-template-columns: minmax(0, 1fr) auto; }
}
.lookup--light .lookup__label { color: var(--text); }
.lookup--light .lookup__input input { border-color: var(--border-strong); }
.lookup--light .lookup__input input:focus-visible { outline-color: var(--link); }
.lookup--light .lookup__result { background: var(--primary-soft); }

/* ---------- Serviços (grade 1 de 2) ---------- */
.svc-grid { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
@media (min-width: 480px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: 28px 24px;
  background: var(--primary-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.svc-card__ico { order: -1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--primary); color: var(--secondary); }
.svc-card__ico .icon { width: 28px; height: 28px; stroke-width: 1.75; }
.svc-card h3 { margin-top: var(--space-1); font-size: 1.3125rem; line-height: 1.25; }
.svc-card p { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.45; }
.svc-card__btn {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 10px 18px;
  border: 2px solid var(--primary);
  border-radius: var(--radius-pill);
  color: var(--primary);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.svc-card__btn::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.svc-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.svc-card:hover .svc-card__btn { background: var(--primary); color: var(--text-on-dark); }
.svc-card:active { transform: translateY(0); }
.svc-card:focus-within { outline: 3px solid var(--link); outline-offset: 3px; }
.svc-card__btn:focus-visible { outline: none; }
.svc-card--feature { background: var(--accent); }
.svc-card--feature h3 { color: var(--primary); }
.svc-card--feature p { color: var(--primary); }
.svc-card--feature .svc-card__ico { color: var(--accent); }
.svc-foot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-7); text-align: center; }
.svc-foot p { margin: 0 auto; }

/* ---------- Como funciona ---------- */
.steps { list-style: none; display: grid; gap: var(--space-6); counter-reset: etapa; }
.step { position: relative; display: grid; align-content: start; grid-template-columns: 48px 1fr; gap: var(--space-2) var(--space-4); counter-increment: etapa; }
.step::before {
  content: counter(etapa);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--primary);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  position: relative;
  z-index: 1;
}
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 23px; top: 48px;
  bottom: calc(-1 * var(--space-6));
  width: 2px;
  background: var(--primary);
}
.step h3 { font-size: 1.3125rem; padding: 10px 0 0; }
.step p { grid-column: 2; font-size: 1rem; color: var(--text-muted); }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); }
  .step { grid-template-columns: 1fr; gap: var(--space-3); }
  .step::before { grid-row: auto; }
  .step:not(:last-child)::after { left: 56px; right: calc(-1 * var(--space-5)); top: 23px; bottom: auto; width: auto; height: 2px; }
  .step h3 { padding: 0; min-height: 2.5em; }
  .step p { grid-column: auto; }
}

/* ---------- Diferenciais (grade 2 de 2) ---------- */
.diff-grid { list-style: none; display: grid; gap: var(--gap); }
@media (min-width: 1024px) { .diff-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.diff-card { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; padding: var(--card-pad); background: var(--surface-card); border-radius: var(--radius); box-shadow: var(--shadow-md); transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.diff-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.diff-card:focus-within { outline: 3px solid var(--link); outline-offset: 3px; }
.diff-card__ico { order: -1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: var(--secondary); }
.diff-card__ico .icon { width: 26px; height: 26px; stroke-width: 1.75; }
.diff-card h3 { font-size: 1.3125rem; }
.diff-card p { font-size: 1rem; color: var(--text-muted); }
.diff-card .link-arrow { margin-top: auto; align-self: flex-start; }

/* ---------- Split (urgência, especial) ---------- */
.split { display: grid; gap: var(--space-7); align-items: center; }
.split__media { position: relative; }
.split__body { display: grid; gap: var(--space-5); justify-items: start; }
.media-frame { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--primary-soft); }
.media-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--primary-soft); color: var(--text-muted); font-size: var(--fs-small); }
.section--soft .media-frame, .section--soft .media-frame img { background: var(--surface-card); }
.band .media-frame { background: var(--azul-noite); }
.band .media-frame img { background: var(--azul-noite); color: var(--text-muted-on-dark); }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
}
.checks { list-style: none; display: grid; gap: var(--space-3) var(--space-5); width: 100%; }
.checks li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 1rem; line-height: 1.45; font-weight: 700; }
.checks .icon { width: 22px; height: 22px; color: var(--success); margin-top: 1px; }
.band .checks li { color: var(--text-on-dark); }
.band .checks .icon { color: var(--secondary); }
@media (min-width: 768px) {
  .checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Selo circular */
.seal {
  position: absolute;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  width: 132px; height: 132px;
  padding: 16px;
  border-radius: 50%;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}
a.seal:hover { color: var(--primary); text-decoration: underline; text-decoration-thickness: 2px; }
.seal .icon { width: 28px; height: 28px; }
.seal--offer { right: -12px; bottom: -24px; background: var(--accent); color: var(--primary); }
.seal--hours { left: -12px; bottom: -28px; width: 188px; height: 188px; padding: 12px; background: var(--surface-card); color: var(--primary); font-size: 1rem; }
.seal--hours .icon { color: var(--primary); }
.band .seal--hours, .band .seal--hours span { color: var(--primary); }
.seal span { display: block; }
@media (max-width: 767.98px) {
  .seal { width: 104px; height: 104px; font-size: 0.9375rem; padding: 12px; }
  .seal--hours { width: 184px; height: 184px; left: 8px; font-size: 1rem; padding: 10px; }
  .seal--offer { right: 8px; }
}

/* ---------- Tabela de fatores ---------- */
.table-wrap {
  padding: 8px;
  overflow-x: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  background: var(--surface-card);
}
.factors { width: 100%; min-width: 0; border-collapse: collapse; font-size: 1rem; }
.factors caption { text-align: left; padding: 16px 20px; font-weight: 700; color: var(--primary); background: var(--surface-card); }
.factors th, .factors td { padding: 16px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); }
.factors thead th { background: var(--primary); color: var(--text-on-dark); font-weight: 700; border-top: 0; }
.factors tbody tr:nth-child(odd) { background: var(--surface); }
.factors tbody tr:nth-child(even) { background: var(--surface-card); }
.factors tbody tr:hover { background: var(--surface-alt); }
.factors tbody th { font-weight: 700; color: var(--primary); min-width: 160px; }
@media (max-width: 767.98px) {
  .table-wrap { overflow: visible; }
  .factors, .factors caption, .factors tbody, .factors tr, .factors th, .factors td { display: block; width: 100%; }
  .factors thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .factors tbody tr { padding: 16px 12px; border-top: 1px solid var(--border); }
  .factors tbody th, .factors td { padding: 4px 8px; border-top: 0; min-width: 0; }
  .factors tbody th { font-size: 1.125rem; }
  .factors td::before { content: attr(data-label); display: block; font-weight: 700; color: var(--text); }
}

/* ---------- Faixa de números ---------- */
.numbers-wrap { display: grid; gap: var(--space-7); align-items: center; }
.numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.numbers > p { display: grid; gap: var(--space-2); align-content: start; margin: 0; max-width: none; padding: var(--space-4) var(--space-4) var(--space-4) 0; }
.numbers > p:nth-child(even) { border-left: 1px solid var(--border-on-dark); padding: var(--space-4) 0 var(--space-4) var(--space-5); }
.numbers > p:nth-child(n+3) { border-top: 1px solid var(--border-on-dark); }
.numbers__value { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-number); line-height: 1; letter-spacing: -0.02em; color: var(--text-on-dark); font-variant-numeric: lining-nums tabular-nums; }
.numbers__label { display: block; font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted-on-dark); line-height: 1.3; }
@media (min-width: 1024px) {
  .numbers-wrap { grid-template-columns: 8fr 4fr; gap: var(--space-8); }
}
@media (min-width: 1200px) {
  .numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .numbers > p, .numbers > p:nth-child(n) { border-top: 0; padding: var(--space-2) var(--space-4); }
  .numbers > p:first-child { padding-left: 0; }
  .numbers > p + p { border-left: 1px solid var(--border-on-dark); }
}

/* ---------- Avaliações ---------- */
.rating { display: grid; gap: var(--space-6); align-items: center; }
.rating__copy { display: grid; gap: var(--space-4); justify-items: start; }
.rating__card { display: grid; justify-items: start; gap: var(--space-3); padding: var(--card-pad); background: var(--surface-card); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.rating__score { font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 3rem + 4vw, 6rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--primary); font-variant-numeric: lining-nums tabular-nums; }
.rating__stars { display: inline-flex; gap: 4px; }
.rating__stars .icon { width: 28px; height: 28px; fill: var(--primary); color: var(--primary); }
.rating__meta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.rating__note { font-size: var(--fs-small); color: var(--text-muted); }
.pending { font-size: var(--fs-small); color: var(--text-muted); }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .rating__card { max-width: 28rem; }
}
@media (min-width: 1024px) {
  .rating { grid-template-columns: 7fr 5fr; gap: var(--space-8); }
}
/* Carrossel de avaliações (scroll-snap, sem JS): usado quando houver avaliações autorizadas */
.reviews { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 85%; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 16px; }
.reviews > li { scroll-snap-align: start; }
@media (min-width: 1024px) { .reviews { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }

/* ---------- Abas "Antes de vir à loja" (radio + label, sem JS) ---------- */
.tabs { margin: 0; padding: 0; border: 0; min-width: 0; }
.tabs__radio { position: absolute; opacity: 0; pointer-events: none; }
.tabs__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.tabs__list label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid var(--primary);
  border-radius: var(--radius-pill);
  color: var(--primary);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tabs__list label:hover { background: var(--primary-soft); }
.tabs__panel { display: none; }
#aba-grau:checked ~ .tabs__list label[for="aba-grau"],
#aba-contato:checked ~ .tabs__list label[for="aba-contato"],
#aba-conserto:checked ~ .tabs__list label[for="aba-conserto"],
#aba-multifocal:checked ~ .tabs__list label[for="aba-multifocal"],
#aba-sol:checked ~ .tabs__list label[for="aba-sol"] { background: var(--primary); color: var(--text-on-dark); }
#aba-grau:focus-visible ~ .tabs__list label[for="aba-grau"],
#aba-contato:focus-visible ~ .tabs__list label[for="aba-contato"],
#aba-conserto:focus-visible ~ .tabs__list label[for="aba-conserto"],
#aba-multifocal:focus-visible ~ .tabs__list label[for="aba-multifocal"],
#aba-sol:focus-visible ~ .tabs__list label[for="aba-sol"] { outline: 3px solid var(--link); outline-offset: 3px; }
#aba-grau:checked ~ .tabs__panels #painel-grau,
#aba-contato:checked ~ .tabs__panels #painel-contato,
#aba-conserto:checked ~ .tabs__panels #painel-conserto,
#aba-multifocal:checked ~ .tabs__panels #painel-multifocal,
#aba-sol:checked ~ .tabs__panels #painel-sol { display: grid; }
.tabs__panel { gap: var(--space-6); align-items: center; }
.tabs__body { display: grid; gap: var(--space-4); }
.tabs__body h3 { font-size: var(--fs-h3); }
@media (min-width: 1024px) {
  .tabs__panel { grid-template-columns: 5fr 7fr; gap: var(--space-8); }
}

/* ---------- Cuiabá e Várzea Grande (cards na faixa) ---------- */
.seg-grid { display: grid; gap: var(--gap); }
@media (min-width: 768px) { .seg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.seg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--surface-card);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.seg-card .media-frame { border-radius: 0; background: var(--primary-soft); }
.seg-card .media-frame img { background: var(--primary-soft); color: var(--text-muted); transition: transform var(--t-slow) var(--ease); }
.seg-card__body { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; padding: var(--card-pad); }
.band .seg-card h3 { color: var(--primary); }
.band .seg-card h3 a { color: var(--primary); text-decoration: none; }
.band .seg-card h3 a:hover { color: var(--primary); }
.seg-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); }
.band .seg-card .checks li { color: var(--text); }
.band .seg-card .checks .icon { color: var(--success); }
.seg-card__btn { margin-top: auto; align-self: flex-start; }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .seg-card__btn { align-self: stretch; width: 100%; min-height: 72px; }
}
.seg-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.seg-card:hover .media-frame img { transform: scale(1.03); }
.seg-card:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.seg-card h3 a:focus-visible { outline: none; }
.tag { align-self: flex-start; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary); font-size: var(--fs-small); font-weight: 700; line-height: 1.2; }
.tag .icon { width: 16px; height: 16px; }
.band .seg-card .seg-card__btn { background: var(--primary); border-color: var(--primary); color: var(--text-on-dark); }

/* ---------- Área atendida ---------- */
.area { display: grid; gap: var(--space-7); align-items: center; }
.area__map { margin: 0; }
.area__map svg { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.area__map figcaption { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); }
.area__body { display: grid; gap: var(--space-5); justify-items: start; }
.cities { list-style: none; display: grid; gap: var(--space-4); width: 100%; }
.cities li { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 16px 20px; border-radius: var(--radius-md); background: var(--surface-card); box-shadow: var(--shadow-sm); }
.cities .icon { color: var(--primary); width: 24px; height: 24px; margin-top: 2px; }
.cities strong { display: block; color: var(--primary); }
.cities span { font-size: 1rem; }
.nap-line { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: 1rem; }
.nap-line .icon { color: var(--primary); margin-top: 3px; }
@media (min-width: 1024px) {
  .area { grid-template-columns: 6fr 6fr; gap: var(--space-8); }
}

/* ---------- Blog ---------- */
.blog-grid { display: grid; gap: var(--gap); }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.blog-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--surface-card); border-radius: var(--radius); box-shadow: var(--shadow-md); transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.blog-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-alt); color: var(--text-muted); font-size: var(--fs-small); transition: transform var(--t-slow) var(--ease); }
.blog-card__media { overflow: hidden; }
.blog-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--card-pad); flex: 1; }
.blog-card h3 { font-size: 1.3125rem; }
.blog-card h3 a { color: var(--primary); text-decoration: none; }
.blog-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.blog-card p { font-size: 1rem; color: var(--text-muted); }
.blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.blog-card:hover h3 a { text-decoration: underline; text-decoration-color: var(--link); }
.blog-card:hover img { transform: scale(1.03); }
.blog-card:focus-within { outline: 3px solid var(--link); outline-offset: 3px; }
.blog-card h3 a:focus-visible { outline: none; }
.blog-card .tag { background: var(--surface-alt); }

/* ---------- CTA final ---------- */
.cta-final__grid { display: grid; gap: var(--space-7); align-items: center; }
.cta-final__copy { display: grid; gap: var(--space-5); justify-items: start; }
@media (min-width: 1024px) {
  .cta-final__grid { grid-template-columns: 7fr 5fr; gap: var(--space-8); }
}

/* ---------- Ajustes de tablet (768 a 1023 px) ---------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .diff-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--space-5); row-gap: var(--space-2); align-content: start; }
  .diff-card__ico { grid-column: 1; grid-row: 1 / span 3; }
  .diff-card > :not(.diff-card__ico) { grid-column: 2; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .blog-card { flex-direction: row; align-items: stretch; }
  .blog-card__media { flex: 0 0 38%; position: relative; }
  .blog-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
}
.mega__title a { text-decoration: none; }
.mega__title a:hover { text-decoration: underline; }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .svc-card:hover, .diff-card:hover, .seg-card:hover, .blog-card:hover,
  .feature-post:hover, .cat-card:hover, .channel:hover, .footer__social a:hover,
  .seg-card:hover .media-frame img, .blog-card:hover img, .feature-post:hover img { transform: none; }
}

/* Faixas marinho: sem sombra tingida sobre o fundo escuro (a separação vem do contraste do card) */
.band .seg-card, .band .seg-card:hover, .hero .form-card, .band .form-card,
.band .btn, .band .btn:hover, .hero .btn, .hero .btn:hover, .band .seal { box-shadow: none; }

/* =====================================================================
   Páginas internas (Fase 4B). Só classes novas ou modificadores: nada aqui
   altera a home aprovada.
   ===================================================================== */

/* ---------- Breadcrumb (sobre o hero interno marinho) ---------- */
.breadcrumb { margin: 0 0 var(--space-4); overflow-x: auto; scrollbar-width: none; }
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb ol { display: flex; align-items: center; gap: 2px; list-style: none; white-space: nowrap; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-small); }
.breadcrumb li > .icon { width: 16px; height: 16px; color: var(--secondary-light); }
.breadcrumb a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; color: var(--text-on-dark); text-decoration-color: var(--secondary-light); }
.breadcrumb a .icon { width: 16px; height: 16px; }
.breadcrumb a:hover { color: var(--text-on-dark); text-decoration-color: var(--accent); }
.breadcrumb [aria-current="page"] { padding: 0 4px; font-weight: 700; color: var(--text-on-dark); }

/* ---------- Hero interno ---------- */
.hero--inner { padding-top: var(--space-4); }
.hero--inner .hero__title { font-size: clamp(2.125rem, 1.55rem + 2.4vw, 3.5rem); line-height: 1.08; max-width: 22ch; }
.hero__media { margin: 0; }
.hero__media.media-frame, .hero__media .media-frame { background: var(--primary-mid-hover); }
.hero__media img { background: var(--primary-mid-hover); color: var(--text-muted-on-dark); }
.hero--compact .hero__title { max-width: 26ch; }
.hero__sub { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-on-dark) !important; }
.guarantees--stack { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 1024px) {
  .hero--inner { padding-top: var(--space-5); }
  .hero__grid--media { grid-template-columns: 7fr 5fr; align-items: center; }
}

/* ---------- Metadados (artigo, blog) ---------- */
.meta-line { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; font-size: var(--fs-small); }
.meta-line li { display: inline-flex; align-items: center; gap: 8px; }
.meta-line .icon { width: 18px; height: 18px; color: var(--secondary-light); }
.hero .meta-line li { color: var(--text-muted-on-dark); }
.hero .meta-line time, .hero .meta-line strong { color: var(--text-on-dark); }
.blog-card .meta-line { margin-top: auto; color: var(--text-muted); }
.blog-card .meta-line .icon { color: var(--link); }

/* ---------- Modificadores de grades existentes ---------- */
.blog-grid--2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .blog-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .blog-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .blog-grid--2 .blog-card, .blog-grid--stack .blog-card { flex-direction: column; }
  .blog-grid--2 .blog-card__media, .blog-grid--stack .blog-card__media { flex: none; position: static; }
  .blog-grid--2 .blog-card__media img, .blog-grid--stack .blog-card__media img { position: static; height: auto; aspect-ratio: 16 / 9; }
}
.blog-card .link-arrow { position: relative; z-index: 2; margin-top: auto; align-self: flex-start; }
@media (min-width: 1024px) {
  .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps--vertical { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); max-width: 46rem; }
  .steps--vertical .step { grid-template-columns: 48px 1fr; gap: var(--space-2) var(--space-4); }
  .steps--vertical .step::before { grid-row: 1 / span 3; }
  .steps--vertical .step:not(:last-child)::after { left: 23px; right: auto; top: 48px; bottom: calc(-1 * var(--space-6)); width: 2px; height: auto; }
  .steps--vertical .step h3 { padding: 10px 0 0; min-height: 0; }
  .steps--vertical .step p, .steps--vertical .step .step__time { grid-column: 2; }
}
.step__time { display: inline-flex; align-items: center; gap: 6px; grid-column: 2; font-size: var(--fs-small); font-weight: 700; color: var(--primary); }
.step__time .icon { width: 16px; height: 16px; }
@media (min-width: 1024px) { .steps:not(.steps--vertical) .step__time { grid-column: auto; } }
.checks--no .icon { color: var(--error); }
.checks--plain li { font-weight: 400; }

/* ---------- Leitura: prosa, sumário, caixas ---------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1em; }
.prose p, .prose li { max-width: none; }
.prose h2 { margin-top: 2.2em; scroll-margin-top: 110px; max-width: 28ch; }
.prose h3 { margin-top: 1.7em; scroll-margin-top: 110px; }
.prose h4 { margin-top: 1.5em; margin-bottom: 0.4em; font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); font-weight: 800; line-height: 1.3; color: var(--primary); }
.prose h5 { margin-top: 1.5em; margin-bottom: 0.4em; font-family: var(--font-text); font-size: 1.0625rem; font-weight: 700; line-height: 1.4; color: var(--text); }
.prose > :first-child { margin-top: 0; }
.prose ul:not(.checks), .prose ol:not(.steps) { padding-left: 1.4em; }
.prose ul:not(.checks) li + li, .prose ol:not(.steps) li + li { margin-top: 0.5em; }
.prose ul:not(.checks) li::marker { color: var(--primary); }
.prose ol:not(.steps) li::marker { color: var(--primary); font-weight: 700; }
.prose .table-wrap, .prose .callout, .prose .inline-cta, .prose figure { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.prose figure { margin-left: 0; margin-right: 0; }
.prose figcaption { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); }
.read-layout { display: grid; gap: var(--space-7); align-items: start; }
.read-layout__aside { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) {
  .read-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-8); }
  .read-layout__aside { position: sticky; top: calc(var(--header-h) + 24px); }
  .read-layout__aside--first { order: 2; }
}
.toc { padding: 24px; background: var(--surface-card); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.toc__title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--primary); }
.toc ol { list-style: none; display: grid; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc ol a { display: grid; grid-template-columns: 2ch 1fr; gap: 8px; align-items: baseline; min-height: 44px; padding: 10px 0; font-size: var(--fs-small); line-height: 1.4; color: var(--text-muted); text-decoration: none; border-top: 1px solid var(--border); }
.toc li:first-child a { border-top: 0; }
.toc ol a::before { content: counter(toc); font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.toc ol a:hover { color: var(--primary); text-decoration: underline; text-decoration-color: var(--link); }
.callout { padding: 24px 28px; border-radius: var(--radius); background: var(--primary-soft); }
.callout__title { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.25; color: var(--primary); }
.callout__title .icon { width: 24px; height: 24px; flex: none; }
.callout .checks { margin-bottom: var(--space-3); }
.callout .checks li { font-weight: 400; }
.callout > p + p { margin-top: 0.75em; }
.callout--warn { background: #FFF4D6; }
.callout--warn .callout__title .icon { color: #7A5C00; }
.aside-cta, .inline-cta { display: grid; gap: var(--space-4); justify-items: start; padding: 28px; border-radius: var(--radius); background: var(--surface-dark); color: var(--text-on-dark); }
.aside-cta p, .inline-cta p { color: var(--text-muted-on-dark); }
.aside-cta__title, .inline-cta__title { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; line-height: 1.2; color: var(--text-on-dark) !important; }
.aside-cta .phone-link, .inline-cta .phone-link { color: var(--text-on-dark); }
.aside-cta .phone-link .icon, .inline-cta .phone-link .icon { color: var(--secondary); }
.aside-cta .btn, .inline-cta .btn { box-shadow: none; }
.aside-cta .btn { width: 100%; }
.aside-cta :focus-visible, .inline-cta :focus-visible { outline-color: var(--accent); }
.aside-cta a:not(.btn), .inline-cta a:not(.btn) { color: var(--text-on-dark); text-decoration-color: var(--secondary); }

/* ---------- Autor ---------- */
.author { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: 24px; background: var(--surface-card); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--primary-soft); color: transparent; }
.author__name { font-weight: 700; color: var(--primary); }
.author__role { font-size: var(--fs-small); color: var(--text-muted); }
.author p { font-size: 1.0625rem; }
.author p + p { margin-top: 0.5em; }
.author__byline { display: inline-flex; align-items: center; gap: 12px; }
.author__byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--primary-mid-hover); color: transparent; }

/* ---------- Ficha e dados (sobre, contato) ---------- */
.facts { display: grid; margin: 0; background: var(--surface-card); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; }
.facts > div { display: grid; gap: 4px; padding: 16px 20px; border-top: 1px solid var(--border); }
.facts > div:first-child { border-top: 0; }
.facts dt { font-size: var(--fs-small); font-weight: 700; color: var(--primary); }
.facts dd { margin: 0; font-size: 1.0625rem; }
@media (min-width: 768px) {
  .facts > div { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-5); align-items: baseline; }
}

/* ---------- Canais de contato (grade de 4) ---------- */
.channel-grid { list-style: none; display: grid; gap: var(--gap); }
@media (min-width: 768px) { .channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .channel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.channel { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; padding: var(--card-pad); background: var(--surface-card); border-radius: var(--radius); box-shadow: var(--shadow-md); transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.channel:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.channel:focus-within { outline: 3px solid var(--link); outline-offset: 3px; }
.channel__ico { order: -1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: var(--secondary); }
.channel__ico .icon { width: 26px; height: 26px; stroke-width: 1.75; }
.channel h3 { font-size: 1.3125rem; }
.channel p { font-size: 1rem; color: var(--text-muted); }
.channel .link-arrow { margin-top: auto; }

/* ---------- Mapa sob clique ---------- */
.map-embed { position: relative; display: grid; place-items: center; align-content: center; gap: var(--space-4); min-height: 320px; padding: var(--space-6); border-radius: var(--radius); background: var(--surface-alt); text-align: center; overflow: hidden; }
.map-embed p { margin: 0 auto; max-width: 32ch; }
.map-embed__pin { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--primary); color: var(--accent); }
.map-embed__pin .icon { width: 30px; height: 30px; }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 1024px) { .map-embed { min-height: 420px; } }

/* ---------- Bairros em colunas (onde atendemos) ---------- */
.anchor-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; }
.anchor-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 18px; border: 2px solid var(--primary); border-radius: var(--radius-pill); color: var(--primary); font-weight: 700; font-size: 1rem; text-decoration: none; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.anchor-nav a:hover { background: var(--primary-soft); color: var(--primary); }
.anchor-nav a[aria-current="page"] { background: var(--primary); color: var(--text-on-dark); }
.anchor-nav .icon { width: 18px; height: 18px; }
.region { padding: var(--space-6) 0 0; }
.region + .region { margin-top: var(--space-6); border-top: 1px solid var(--border); }
.region__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-4); }
.region__head h3 { scroll-margin-top: 110px; }
.region__count { font-size: var(--fs-small); font-weight: 700; color: var(--text-muted); }
.region > p { margin-bottom: var(--space-4); }
.bairros { list-style: none; columns: 2; column-gap: var(--space-6); }
.bairros li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 1.0625rem; line-height: 1.35; }
@media (min-width: 768px) { .bairros { columns: 3; } }
@media (min-width: 1024px) { .bairros { columns: 4; } }
.city-block { scroll-margin-top: 100px; }

/* ---------- Blog: destaque, categorias, paginação ---------- */
.feature-post { position: relative; display: grid; overflow: hidden; background: var(--surface-card); border-radius: var(--radius); box-shadow: var(--shadow-md); transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.feature-post__media { overflow: hidden; }
.feature-post__media img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-alt); color: var(--text-muted); transition: transform var(--t-slow) var(--ease); }
.feature-post__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--card-pad); }
.feature-post h3 { font-size: var(--fs-h3); }
.feature-post h3 a { color: var(--primary); text-decoration: none; }
.feature-post h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.feature-post p { color: var(--text-muted); }
.feature-post .meta-line { color: var(--text-muted); }
.feature-post .meta-line .icon { color: var(--link); }
.feature-post:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.feature-post:hover h3 a { text-decoration: underline; text-decoration-color: var(--link); }
.feature-post:hover img { transform: scale(1.03); }
.feature-post:focus-within { outline: 3px solid var(--link); outline-offset: 3px; }
.feature-post h3 a:focus-visible { outline: none; }
@media (min-width: 1024px) {
  .feature-post { grid-template-columns: 7fr 5fr; }
  .feature-post__media img { aspect-ratio: auto; min-height: 100%; }
  .feature-post__body { justify-content: center; padding: var(--space-7); }
}
.cat-grid { list-style: none; display: grid; gap: var(--gap); }
@media (min-width: 768px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cat-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: 24px; background: var(--surface-card); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.cat-card h3 { font-size: 1.25rem; }
.cat-card h3 a { color: var(--primary); text-decoration: none; }
.cat-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.cat-card p { font-size: 1rem; color: var(--text-muted); }
.cat-card__count { margin-top: auto; font-size: var(--fs-small); font-weight: 700; color: var(--link); }
.cat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cat-card:hover h3 a { text-decoration: underline; text-decoration-color: var(--link); }
.cat-card:focus-within { outline: 3px solid var(--link); outline-offset: 3px; }
.cat-card h3 a:focus-visible { outline: none; }
.cat-card--current { background: var(--primary-soft); box-shadow: none; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-7); list-style: none; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 48px; padding: 8px 16px; border: 2px solid var(--primary); border-radius: var(--radius-pill); font-weight: 700; color: var(--primary); text-decoration: none; }
.pagination a:hover { background: var(--primary-soft); color: var(--primary); }
.pagination [aria-current="page"] { background: var(--primary); color: var(--text-on-dark); }
.pagination .is-disabled { border-color: var(--border); color: var(--text-muted); }

/* ---------- Mensagem central (obrigado, 404) ---------- */
.notice__ico { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: var(--primary); }
.notice__ico .icon { width: 34px; height: 34px; }

/* ---------- Tabela comparativa ---------- */
.factors td .link-arrow { padding: 0; }
.factors td strong { color: var(--primary); }
.band .cities li { color: var(--text); }
.band .cities strong { color: var(--primary); }
.factors tbody th a { display: inline-flex; align-items: center; min-height: 44px; }
.hero--inner .btn-row .btn { flex: 0 1 auto; }
@media (max-width: 479.98px) { .hero--inner .btn-row .btn { flex: 1 1 100%; } }
.callout--spaced { margin-top: var(--space-7); }
.step__time { align-items: flex-start; }
.step__time .icon { margin-top: 3px; }
@media (min-width: 1024px) {
  .steps:not(.steps--vertical) .step:has(.step__time) { grid-template-rows: auto auto 1fr auto; }
  .steps:not(.steps--vertical) .step:has(.step__time) .step__time { align-self: end; padding-top: var(--space-2); }
}
@media (min-width: 480px) { .svc-grid--3 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 768px) { .svc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-more { display: grid; gap: var(--space-3) var(--space-7); margin-top: var(--space-6); padding: 24px; background: var(--surface-card); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.svc-more__title { font-family: var(--font-display); font-weight: 800; font-size: 1.3125rem; line-height: 1.25; color: var(--primary); }
.svc-more__list { display: grid; list-style: none; }
.svc-more__list li + li { border-top: 1px solid var(--border); }
.svc-more__list a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 4px; color: var(--primary); font-weight: 700; font-size: 1.0625rem; text-decoration: none; }
.svc-more__list a:hover { color: var(--primary); text-decoration: underline; text-decoration-color: var(--link); }
.svc-more__list .icon { width: 20px; height: 20px; color: var(--link); }
@media (min-width: 1024px) { .svc-more { grid-template-columns: 4fr 8fr; align-items: start; padding: 32px; } }
.hero .area__map figcaption { color: var(--text-muted-on-dark); }
.toc__title a { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary); text-decoration-color: var(--link); }
.hero .seal--offer, .hero .seal--offer span { color: var(--primary); }
.callout--warn .checks .icon { color: #7A5C00; }
@media (min-width: 768px) { .cat-grid--3 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1024px) { .cat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cities a { overflow-wrap: anywhere; }
@media (min-width: 768px) { .read-layout__aside .facts > div { grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-4); } }
.faq--single { grid-template-columns: minmax(0, 1fr) !important; max-width: 52rem; }
@media (min-width: 768px) and (max-width: 1023.98px) { .blog-grid--stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inline-cta .btn--ghost, .aside-cta .btn--ghost { border-color: var(--text-on-dark); color: var(--text-on-dark); }
.inline-cta .btn--ghost:hover, .aside-cta .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-on-dark); }
.prose .faq summary h3 { margin-top: 0; }
.prose .faq { margin-top: var(--space-4); }
.prose .author { margin-top: var(--space-7); }
.hero .meta-line { gap: var(--space-3) var(--space-5); }
.hero .meta-line .author__byline { flex-basis: 100%; }
@media (max-width: 1023.98px) { .read-layout__aside--first .aside-cta { display: none; } }
.hero--compact .hero__lead { max-width: 46rem; }
.hero--compact .hero__copy > .notice__ico:first-child { margin-top: var(--space-5); }
.breadcrumb a { min-width: 44px; justify-content: center; }
@media (max-width: 767.98px) { .breadcrumb ol { flex-wrap: wrap; white-space: normal; } }
.band .seal--offer, .band .seal--offer span { color: var(--primary); }
.channel .link-arrow { margin-top: auto; padding-bottom: 0; white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1199.98px) { .split--stack-lg { grid-template-columns: minmax(0, 1fr); } }
.guide-index { display: grid; gap: var(--space-5); }
.guide-index .svc-more { margin-top: 0; }
.guide-index .svc-more__list a { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; }
.guide-index .svc-more__list .svc-more__meta { grid-column: 2; margin-left: 0; }
@media (min-width: 768px) { .guide-index .svc-more__list a { grid-template-columns: 20px minmax(0, 1fr) auto; } .guide-index .svc-more__list .svc-more__meta { grid-column: 3; } }
.svc-more__title a { color: var(--primary); text-decoration-color: var(--link); }
.svc-more__meta { margin-left: auto; font-size: var(--fs-small); font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.channel .link-arrow { display: inline-block; padding: 10px 0; line-height: 24px; }
@media (min-width: 768px) and (max-width: 1023px) { .table-wrap .factors--5col tbody th { min-width: 120px; } }

/* ---------- Captação de leads: erros, carregamento e honeypot (Fase 7) ---------- */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.field__error { margin: 0; font-size: var(--fs-small); font-weight: 700; color: var(--error); line-height: 1.35; overflow-wrap: anywhere; }
.field__error:empty { display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border: 2px solid var(--error); }
.consent.has-error { grid-template-columns: auto 1fr; }
.consent .field__error { grid-column: 1 / -1; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border: 2px solid var(--error); }
.form-card .field__error, .footer__form .field__error { color: var(--error); }
.form-status { overflow-wrap: anywhere; }
.form-status.is-erro { padding: 12px 16px; border: 1px solid var(--error); border-radius: var(--radius-md); background: #FCEEEC; color: var(--text); }
.form-status a { color: var(--link); }
.btn[aria-disabled="true"] { pointer-events: none; cursor: progress; }
.btn.is-loading .icon { display: none; }
.btn.is-loading::before { content: ""; flex: none; width: 20px; height: 20px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-giro 0.8s linear infinite; }
@keyframes btn-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::before { animation: none; border-right-color: currentColor; opacity: 0.6; }
}

/* ---------- Aviso de cookies ---------- */
.link-btn { display: inline-block; padding: 10px 0; margin: -10px 0; border: 0; background: none; color: var(--text-on-dark); font: inherit; text-decoration: none; font-weight: 700; text-decoration-color: var(--secondary); text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { text-decoration-thickness: 2px; }
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 0 8px calc(8px + env(safe-area-inset-bottom)); pointer-events: none; }
.cookie[hidden] { display: none; }
.cookie__box { pointer-events: auto; display: grid; gap: 12px; max-width: 720px; max-height: calc(100vh - 16px); margin: 0 auto; padding: 16px; overflow-y: auto; background: var(--surface-card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.cookie__head { display: flex; align-items: center; gap: 10px; }
.cookie__ico { flex: none; width: 24px; height: 24px; color: var(--primary); }
.cookie__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; line-height: 1.2; color: var(--primary); }
.cookie__text { margin: 0; max-width: none; font-size: var(--fs-small); line-height: 1.45; color: var(--text-muted); }
.cookie__text a { color: var(--link); }
.cookie__actions { display: flex; }
.cookie__actions .cookie__btn { width: 100%; }
.cookie__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 10px; border: 2px solid var(--primary); border-radius: var(--radius-pill); background: var(--surface-card); color: var(--primary); font-family: var(--font-text); font-size: var(--fs-small); font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.cookie__btn:hover { background: var(--primary-soft); }
.cookie__btn:active { background: var(--primary-soft-2); }
.cookie__btn:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
@media (min-width: 768px) {
  .cookie { left: 24px; right: auto; bottom: 24px; width: min(560px, calc(100vw - 48px)); padding: 0; }
  .cookie__box { padding: 20px; }
}

/* Aviso de cookies: esconde a barra de WhatsApp enquanto o aviso está aberto */
body:has(.cookie:not([hidden])) .wa-bar { transform: translateY(110%); }

/* Mapa de entidades (/entitymap.html, gerado por scripts/gerar-entitymap.py). Seletores exclusivos dessa página. */
.prose .entity { margin-top: 2.2em; padding-top: 1.6em; border-top: 1px solid var(--surface-alt); }
.prose .entity > h3 { margin-top: 0; }
.prose .entity blockquote { margin: 1em 0 0; padding: 1em 1.2em; background: var(--surface-alt); border-radius: var(--radius); }
.prose .entity blockquote p { margin: 0; }
.prose .entity cite { display: block; margin-top: 0.6em; font-style: normal; font-weight: 700; }


/* =====================================================================
   v4 · fiel à referência Óticas Olhar 360 (docs/07-design-system.json,
   components_v4). Restyle global + componentes da home.
   ===================================================================== */

.container--wide { max-width: var(--container-wide); }
.section--ice { background: var(--card-claro); }

/* Títulos bicolores conforme o fundo (uma troca de cor por título) */
.band .t-2, .reviews-panel .t-2 { color: var(--amarelo); }
.hero .t-2 { color: var(--turquesa-texto); }
.products .t-2 { color: var(--azul-profundo); }

/* Menu do celular: ícone branco sobre o azul */
.mnav__toggle { color: var(--text-on-dark); }
.mnav__toggle:hover { background: rgba(255, 255, 255, 0.12); }
.mnav__panel { border-top: 0; box-shadow: 0 24px 40px -24px rgba(9, 14, 18, 0.5); }
.mega, .dropdown { border: 0; }
.mega, .dropdown, .mnav__panel { color: var(--text); }
.mega__ico { background: var(--azul-profundo); color: var(--text-on-dark); }
.mega__strip { background: var(--azul-profundo); }

/* ---------- Espaço reservado de foto (até as fotos reais chegarem) ---------- */
.foto-reservada {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  background: var(--card-claro);
  border-radius: var(--radius);
  overflow: hidden;
}
.foto-reservada__ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface-card); color: var(--azul-hero); }
.foto-reservada__ico .icon { width: 28px; height: 28px; stroke-width: 1.75; }

/* ---------- Hero azul da home (ajuste do dono: proporções da referência) ---------- */
.hero--home {
  --shape-h: 150px;
  position: relative;
  overflow: hidden;
  padding: calc(var(--header-h) + 32px) var(--gutter) 24px;
  background: var(--azul-hero);
  color: var(--text-on-dark);
}
.hero--home .hero__grid { position: relative; display: grid; gap: 28px; align-items: start; }
.hero--home .hero__copy { position: relative; z-index: 4; display: grid; gap: 0; justify-items: start; }
.hero--home .hero__title { max-width: none; color: var(--text-on-dark); font-weight: 700; text-transform: uppercase; }
.hero__brand { display: block; font-size: var(--fs-hero-turquesa); line-height: 1; letter-spacing: -0.01em; color: var(--turquesa-texto); }
.hero__big { display: block; max-width: 13ch; font-size: var(--fs-hero-branco); line-height: 1; letter-spacing: -0.015em; color: var(--text-on-dark); }
.hero--home .hero__desc { display: block; margin-top: 14px; max-width: 24ch; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.2; letter-spacing: -0.005em; color: var(--text-on-dark); }
.hero--home .hero__lead { margin-top: 20px; max-width: 30rem; font-size: var(--fs-lead); line-height: 1.6; color: var(--text-on-dark) !important; }
.hero__ctas { display: grid; gap: 14px; width: 100%; margin-top: 28px; }
.hero__ctas .btn__text { max-width: none; }
.hero__ctas .btn { min-height: 52px; padding: 12px 22px; }
.hero__cities { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 14px; list-style: none; }
.city-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 2px;
  color: var(--text-on-dark) !important;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color var(--t) var(--ease);
}
.city-pill .icon { width: 18px; height: 18px; color: var(--turquesa-texto); }
.city-pill:hover { color: var(--amarelo-hover) !important; text-decoration-color: var(--amarelo) !important; }
.hero__figure { position: relative; height: 430px; margin: 0 calc(-1 * var(--gutter)); }
.hero__fachada {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, var(--azul-hero) 0%, rgba(1, 95, 155, 0) 30%),
    linear-gradient(90deg, rgba(0, 69, 112, 0.35), rgba(29, 108, 158, 0.55)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 120px),
    var(--azul-botao);
}
.hero--home .foto-reservada--recorte {
  position: absolute;
  z-index: 3;
  right: 4%;
  bottom: 0;
  width: min(88%, 390px);
  aspect-ratio: 795 / 863;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, #2F7FB2 0%, #1D6C9E 100%);
}
.hero--home .foto-reservada--recorte .foto-reservada__ico { width: 96px; height: 96px; margin-bottom: 26%; background: var(--azul-hero); color: var(--turquesa-texto); }
.hero--home .foto-reservada--recorte .foto-reservada__ico .icon { width: 44px; height: 44px; }
.hero__shape { position: absolute; left: 0; bottom: -1px; z-index: 2; display: block; width: 100%; height: var(--shape-h); fill: var(--amarelo); pointer-events: none; }
@media (min-width: 480px) {
  .hero__ctas { grid-template-columns: repeat(2, max-content); }
}
@media (min-width: 768px) {
  .hero--home { --shape-h: 220px; padding-top: calc(var(--header-h) + 48px); }
  .hero__figure { height: 560px; }
  .hero--home .foto-reservada--recorte { width: 500px; right: 8%; }
}
@media (min-width: 1024px) {
  .hero--home { --shape-h: clamp(260px, 25vw, 370px); padding-top: calc(var(--header-h) + 56px); min-height: 860px; }
  .hero--home .hero__grid { position: static; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }
  .hero--home .hero__copy { padding-bottom: calc(var(--shape-h) - 200px); }
  .hero__ctas { gap: 20px; }
  .hero__ctas .btn { min-height: 50px; padding: 12px 24px; }
  .hero__figure { position: static; height: auto; margin: 0; }
  .hero__fachada { left: 44%; right: 0; top: 0; bottom: 0; background:
    linear-gradient(90deg, var(--azul-hero) 0%, rgba(1, 95, 155, 0.2) 22%, rgba(1, 95, 155, 0) 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 140px),
    linear-gradient(180deg, #1D6C9E 0%, #15659A 100%); }
  .hero--home .foto-reservada--recorte { left: 50%; right: auto; width: 46vw; }
}
@media (min-width: 1280px) {
  .hero--home .foto-reservada--recorte { left: calc(50% - 150px); width: min(46vw, 660px); }
}

/* ---------- Sobre nós: painel branco sobre o amarelo e o azul ---------- */
.about {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0 0 var(--section-y);
  background: linear-gradient(180deg, var(--amarelo) 0 120px, var(--azul-hero) 120px 100%);
}
.about__panel { position: relative; z-index: 1; margin-right: 20px; padding: 48px 24px 48px var(--gutter); background: var(--surface-card); border-radius: 0 var(--radius-xxl) var(--radius-xxl) 0; }
.about__body { display: grid; justify-items: start; }
.about__body h2 { margin-bottom: 22px; }
.about__body .t-2 { color: var(--azul-profundo); }
.about__lead { max-width: 34rem; }
.about__list { list-style: none; display: grid; gap: 28px; width: 100%; margin-top: 34px; }
.about__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.about__text { display: grid; gap: 6px; align-content: start; }
.about__item > .icon { width: 44px; height: 44px; stroke-width: 1.5; color: var(--tinta); }
.about__item h3 { font-size: 1rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; color: var(--tinta); }
.about__item p { font-size: 1rem; line-height: 1.45; color: var(--tinta); }
.about__close { margin-top: 32px; font-size: 1rem; color: var(--text-muted); }
.about__media { position: relative; z-index: 1; padding: 32px var(--gutter) 0; }
.about__photo { width: min(78%, 340px); margin: 0 auto; aspect-ratio: 4 / 5; border: 12px solid var(--surface-card); border-radius: 90px; background: #2A77AA; }
.about__photo .foto-reservada__ico { background: var(--azul-hero); color: var(--turquesa-texto); }
.nums { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 48px 0 0; padding: 0 var(--gutter); }
.num { display: grid; gap: 6px; justify-items: center; align-content: center; min-height: 112px; padding: 20px 12px; border-radius: var(--radius); background: var(--amarelo); text-align: center; }
.num__value { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-number); line-height: 1; letter-spacing: -0.02em; color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; }
.num__label { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; line-height: 1.25; letter-spacing: 0.01em; text-transform: uppercase; color: var(--tinta); }
@media (min-width: 768px) {
  .about__panel { padding: 72px 48px 64px var(--gutter); border-radius: 0 var(--radius-panel) var(--radius-panel) 0; margin-right: 48px; }
  /* 5 diferenciais com o mesmo layout (ícone à esquerda), em lista de 1 coluna: sem linha órfã (inspeção do site) */
  .about__list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .about__text { gap: 8px; }
  .about__photo { width: min(60%, 440px); }
  .nums { gap: 16px; }
}
@media (min-width: 1024px) {
  .nums { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Entre 1024 e 1199 o Sobre nós fica empilhado como a 768 (coluna de texto larga); o painel com foto ao lado começa em 1200 */
@media (min-width: 1200px) {
  .about {
    grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [c-start] minmax(0, 650px) [mid] minmax(0, 490px) [c-end] minmax(var(--gutter), 1fr) [full-end];
    background: linear-gradient(180deg, var(--amarelo) 0 140px, var(--azul-hero) 140px 100%);
  }
  .about__panel { grid-column: full-start / mid; grid-row: 1; display: grid; grid-template-columns: subgrid; margin-right: -28px; padding: 100px 64px 80px 0; }
  .about__body { grid-column: c-start / mid; }
  .about__media { grid-column: mid / c-end; grid-row: 1; padding: 0 0 0 52px; }
  .about__photo { width: 100%; height: 100%; min-height: 640px; aspect-ratio: auto; margin: 0; border-width: 15px; border-radius: 110px 110px 110px 110px; }
  .nums { grid-column: c-start / c-end; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 50px; padding: 0; }
}

/* ---------- Bloco azul "Cobrimos qualquer oferta" (no lugar da marca própria) ---------- */
.cover { padding: var(--section-y) var(--gutter) 80px; background: linear-gradient(180deg, var(--azul-hero) 0%, var(--azul-profundo) 100%); color: var(--text-on-dark); }
.cover__grid { display: grid; gap: 40px; align-items: start; }
.cover__copy { display: grid; justify-items: start; }
.cover__title { max-width: 14ch; font-size: clamp(2.5rem, 1.8rem + 2.9vw, 3.75rem); font-weight: 400; line-height: 1.02; letter-spacing: -0.03em; color: var(--text-on-dark); }
.cover__sub { margin-top: 14px; max-width: 30ch; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 800; line-height: 1.3; text-transform: uppercase; color: var(--amarelo); }
.cover__copy > p:not(.cover__sub) { margin-top: 18px; max-width: 34rem; color: var(--text-on-dark); }
.cover a:not(.btn) { color: var(--text-on-dark); text-decoration-color: var(--amarelo); }
.cover a:not(.btn):hover { color: var(--amarelo-hover); }
.cover :focus-visible { outline-color: var(--amarelo); }
.caps-list { list-style: none; display: grid; grid-template-columns: minmax(0, max-content); gap: 8px; margin-top: 22px; max-width: 34rem; }
@media (min-width: 560px) { .caps-list { grid-template-columns: repeat(2, minmax(0, max-content)); } }
.caps-list li { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px; border-radius: var(--radius-xs); background: var(--tinta); color: var(--text-on-dark); font-size: 0.9375rem; line-height: 1.3; }
.caps-list li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--amarelo); }
.cover .btn { margin-top: 26px; }
.gallery { display: grid; gap: 12px; width: 100%; }
.gallery__stage { position: relative; overflow: hidden; border: 2px solid var(--surface-card); border-radius: var(--radius); background: #D5DEE5; }
.gallery__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline: 3px solid var(--amarelo); outline-offset: -5px; border-radius: var(--radius); }
.gallery__slide { aspect-ratio: 463 / 448; border-radius: 0; scroll-snap-align: start; scroll-snap-stop: always; background: #D5DEE5; }
.gallery__nav { position: absolute; top: 50%; z-index: 2; display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-card); color: var(--tinta); cursor: pointer; transform: translateY(-50%); transition: background-color var(--t) var(--ease), opacity var(--t) var(--ease); }
.gallery.is-ready .gallery__nav { display: grid; }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
.gallery__nav .icon { width: 22px; height: 22px; }
.gallery__nav:hover { background: var(--amarelo); }
.gallery__nav:disabled { opacity: 0.45; cursor: default; background: var(--surface-card); }
.gallery__nav:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }
.gallery__thumbs { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.gallery__thumb { display: block; width: 100%; padding: 0; overflow: hidden; border: 2px solid var(--surface-card); border-radius: var(--radius-md); background: none; cursor: pointer; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.gallery__thumb .foto-reservada { aspect-ratio: 1; border-radius: 0; background: #C3D0DA; }
.gallery__thumb .foto-reservada__ico { width: 36px; height: 36px; }
.gallery__thumb .foto-reservada__ico .icon { width: 18px; height: 18px; }
.gallery__thumb:hover { border-color: var(--amarelo-hover); }
.gallery__thumb[aria-current="true"] { border-color: var(--amarelo); box-shadow: 0 0 0 2px var(--amarelo); }
.gallery__thumb:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; }
.products .gallery__thumb[aria-current="true"] { border-color: var(--tinta); box-shadow: 0 0 0 2px var(--tinta); }
.products .gallery__thumb:hover { border-color: var(--azul-profundo); }
.products .gallery__thumb:focus-visible, .products .gallery__nav:focus-visible, .products .gallery__track:focus-visible { outline-color: var(--tinta); }
@media (min-width: 1024px) {
  .cover { padding-bottom: 90px; }
  .cover__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 463px); column-gap: 60px; }
}

/* ---------- Lentes: lente-moldura (armação em SVG próprio) + cards claros 2x2 (grade 1 de 2) ---------- */
.lenses { display: grid; background: var(--surface-card); }
.lens-photo { padding: 48px var(--gutter) 0; }
.lens-photo__img { aspect-ratio: 4 / 5; border-radius: var(--radius-xxl); background: var(--card-claro); }
.lens-photo__img.tem-foto > img { object-position: center 55%; }
.lenses__body { padding: var(--section-y) var(--gutter); }
.lenses__body h2 { max-width: 20ch; }
.lenses__lead { margin-top: 18px; max-width: 34rem; }
.lens-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.lens-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 12px; border-radius: var(--radius-xl); background: var(--card-claro); text-align: center; transition: background-color var(--t) var(--ease); }
.lens-card__ico { display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 50%; background: var(--azul-profundo); color: var(--text-on-dark); }
.lens-card__ico .icon { width: 22px; height: 22px; stroke-width: 1.75; }
.lens-card h3 { margin-top: 4px; font-size: 1rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; }
.lens-card h3 a { color: var(--tinta); }
.lens-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-xl); }
.lens-card p { font-size: 1rem; line-height: 1.45; color: var(--tinta); }
.lens-card:hover { background: var(--surface-ice-hover); }
.lens-card:hover h3 a { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.lens-card:focus-within { outline: 3px solid var(--azul-hero); outline-offset: 3px; }
.lens-card h3 a:focus-visible { outline: none; }
@media (min-width: 768px) {
  .lens-grid { gap: 20px; }
  .lens-card { padding: 35px 28px; }
}
@media (min-width: 1024px) {
  .lenses { grid-template-columns: minmax(0, 45%) minmax(0, 1fr); }
  .lens-photo { padding: 80px 0 80px 0; }
  .lens-photo__img { height: 100%; min-height: 680px; aspect-ratio: auto; border-radius: 0 var(--radius-panel) var(--radius-panel) 0; }
  .lenses__body { align-self: center; max-width: 620px; padding: 90px var(--gutter) 90px 72px; }
}

/* ---------- Produtos: faixa amarela inteira com arco azul profundo (grade 2 de 2) ---------- */
.products { position: relative; overflow: hidden; padding: 150px var(--gutter) var(--section-y); background: var(--amarelo); color: var(--tinta); }
.products::before { content: ""; position: absolute; top: -450px; right: -350px; width: 520px; height: 520px; border: 78px solid var(--azul-profundo); border-radius: 50%; pointer-events: none; }
.products__grid { position: relative; z-index: 1; display: grid; gap: 40px; }
.products__head { display: grid; justify-items: start; }
.products__head h2 { margin-bottom: 18px; color: var(--tinta); }
.products__head p:not(.label) { max-width: 34rem; color: var(--tinta); }
.products a:not(.btn) { color: var(--tinta); text-decoration-color: var(--azul-profundo); }
.products a:not(.btn):hover { color: var(--azul-profundo); }
.products :focus-visible { outline-color: var(--tinta); }
.products__gallery { position: relative; }
.products__gallery::before { content: ""; position: absolute; z-index: -1; top: 55%; bottom: -40px; left: -100vw; right: -12px; border-radius: 0 var(--radius-xxl) var(--radius-xxl) 0; background: var(--azul-profundo); }
.products__gallery .gallery__slide { aspect-ratio: 457 / 436; }
.cats { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
.cat { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cat__circle { display: grid; place-items: center; width: 112px; height: 112px; flex: none; margin-bottom: 8px; border-radius: 50%; background: var(--surface-card); color: var(--tinta); transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.cat__circle .icon { width: 40px; height: 40px; stroke-width: 1.5; }
.cat--deep .cat__circle { background: var(--azul-profundo); color: var(--text-on-dark); }
.cat--soft .cat__circle { background: var(--amarelo-hover); }
.cat__title { font-size: 1rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; }
.cat__title a { color: var(--tinta) !important; text-decoration: none; }
.cat__title a::after { content: ""; position: absolute; inset: 0; }
.cat p { font-size: 1rem; line-height: 1.45; color: var(--tinta); }
.cat:hover .cat__circle { background: var(--azul-profundo); color: var(--amarelo); }
.cat--deep:hover .cat__circle { background: var(--tinta); }
.cat:hover .cat__title a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.cat:focus-within .cat__circle { outline: 3px solid var(--tinta); outline-offset: 3px; }
.cat__title a:focus-visible { outline: none; }
@media (min-width: 768px) {
  .products { padding-top: 80px; }
  .products::before { top: -520px; right: -420px; width: 900px; height: 900px; border-width: 130px; }
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat__circle { width: 136px; height: 136px; }
}
@media (min-width: 1024px) {
  .products { padding-top: 80px; padding-bottom: 80px; }
  .products__grid { grid-template-columns: minmax(0, 457px) minmax(0, 1fr); column-gap: 80px; row-gap: 44px; }
  .products__head { grid-column: 1 / -1; max-width: 640px; }
  .cat__circle { width: 150px; height: 150px; }
  .cat__circle .icon { width: 48px; height: 48px; }
}

/* Toque de 44 px nos links de título dos produtos e dos cards de lentes (o card inteiro continua clicável pelo ::after) */
.cat__title a { display: inline-flex; align-items: center; min-height: 44px; }
.lens-card h3 a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }

/* ---------- Passos com foto, etiqueta numerada e linha de itens (ajuste do dono) ---------- */
.steps-photo { padding: var(--section-y) var(--gutter); background: var(--surface-card); }
.steps-photo__head { display: grid; gap: 20px; align-items: center; justify-items: start; }
.psteps { list-style: none; display: grid; gap: 44px; margin-top: 32px; }
.pstep { display: grid; grid-template-rows: auto auto auto; align-content: start; }
.pstep__photo { aspect-ratio: 313 / 355; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.pstep__tag { display: flex; align-items: center; gap: 14px; min-height: 74px; padding: 12px 20px; border-radius: 0 0 var(--radius) var(--radius); }
.pstep__num { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-xs); font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; }
.pstep__title { font-size: 1rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; text-transform: uppercase; color: inherit; }
.pstep--blue .pstep__tag { background: var(--azul-profundo); color: var(--text-on-dark); }
.pstep--blue .pstep__num { background: var(--turquesa); }
.pstep--yellow .pstep__tag { background: var(--amarelo); color: var(--tinta); }
.pstep--yellow .pstep__num { background: var(--surface-card); }
.pstep__info { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 26px; }
.pstep__ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--azul-profundo); color: var(--text-on-dark); }
.pstep__ico--yellow { background: var(--amarelo); color: var(--tinta); }
.pstep__ico .icon { width: 22px; height: 22px; stroke-width: 1.75; }
.pstep__info-title { margin-bottom: 6px; font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; line-height: 1.2; color: var(--tinta); }
.pstep__info p { font-size: 1rem; line-height: 1.5; }
.pstep__info p + p { margin-top: 0; }
.steps-photo__close { margin-top: 40px; max-width: 48rem; }
@media (min-width: 768px) {
  .steps-photo__head { grid-template-columns: minmax(0, 1fr) auto; }
  .psteps { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 0 20px; }
  .pstep { grid-row: span 3; grid-template-rows: subgrid; }
}
@media (min-width: 1024px) {
  .steps-photo__head, .psteps, .steps-photo__close { padding-left: 80px; padding-right: 80px; }
}

/* ---------- Painel azul profundo de depoimentos ---------- */
.reviews-sec { padding: var(--section-y) var(--gutter); background: var(--surface-card); }
.reviews-panel { display: grid; overflow: hidden; border-radius: var(--radius-xxl); background: var(--azul-profundo); color: var(--text-on-dark); }
.reviews-panel__body { display: grid; justify-items: start; padding: 48px 24px; }
.reviews-panel h2 { color: var(--text-on-dark); }
.reviews-panel p { color: var(--text-on-dark); }
.reviews-panel a:not(.btn) { color: var(--text-on-dark); text-decoration-color: var(--amarelo); }
.reviews-panel :focus-visible { outline-color: var(--amarelo); }
.score { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 26px 0 20px; }
.score__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.5rem, 2.8rem + 2.6vw, 5rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--amarelo); font-variant-numeric: lining-nums tabular-nums; }
.score__stars { display: inline-flex; gap: 4px; }
.score__stars .icon { width: 24px; height: 24px; color: var(--amarelo); fill: var(--amarelo); }
.score__meta { display: inline-flex; flex-basis: 100%; align-items: center; gap: 8px; font-weight: 600; }
.review-slots { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 12px; width: 100%; margin-top: 26px; }
@media (min-width: 600px) {
  .review-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
  .review-slots .review-slot--wide { grid-column: 1 / -1; }
}
.reviews-panel .pending { margin-top: 14px; font-size: 1rem; color: var(--text-muted-on-dark); }
.reviews-panel .btn { margin-top: 26px; }
.reviews-panel__mosaic { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.reviews-panel__mosaic .foto-reservada { aspect-ratio: 1; border-radius: 0; }
.reviews-panel__mosaic .foto-reservada:nth-child(odd) { background: #2A77AA; }
.reviews-panel__mosaic .foto-reservada:nth-child(even) { background: #1D6C9E; }
.reviews-panel__mosaic .foto-reservada__ico { width: 44px; height: 44px; background: var(--azul-profundo); color: var(--turquesa); }
.reviews-panel__mosaic .foto-reservada__ico .icon { width: 20px; height: 20px; }

/* ---------- Avaliações do Google (texto literal dos clientes) ---------- */
.avaliacoes { display: grid; gap: 12px; width: 100%; }
.avaliacao { display: grid; grid-template-rows: auto 1fr auto; align-content: start; gap: 14px; margin: 0; padding: 20px; border-radius: var(--radius); background: var(--azul-noite); color: var(--text-on-dark); }
.avaliacao__stars { display: inline-flex; gap: 3px; }
.avaliacao__stars .icon { width: 18px; height: 18px; color: var(--amarelo); fill: var(--amarelo); stroke-width: 1.5; }
.avaliacao .avaliacao__text { margin: 0; max-width: 60ch; font-size: 1.0625rem; font-weight: 500; line-height: 1.55; color: var(--text-on-dark); }
.avaliacao__by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 1rem; line-height: 1.4; }
.avaliacao__by cite { font-style: normal; font-weight: 700; color: var(--text-on-dark); }
.avaliacao__by span { color: var(--text-muted-on-dark); }
.avaliacao__by time { white-space: nowrap; }
@media (min-width: 768px) {
  .avaliacoes { grid-auto-rows: 1fr; }
  .avaliacao { padding: 22px 24px; }
}
.v4 .band--nums .avaliacao { background: var(--azul-profundo); }
.numbers-wrap .avaliacoes { margin-top: 24px; }
@media (min-width: 768px) {
  .reviews-panel { border-radius: 60px; }
  .reviews-panel__body { padding: 64px 48px; }
}
@media (min-width: 1024px) {
  .reviews-panel { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); overflow: visible; background: none; }
  .reviews-panel__body { padding: 64px 30px 60px; border-radius: 60px 0 0 60px; background: var(--azul-profundo); }
  .reviews-panel__mosaic { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(5, minmax(0, 1fr)); align-self: stretch; overflow: hidden; border-radius: 0 60px 60px 0; }
  .reviews-panel__mosaic .foto-reservada { aspect-ratio: auto; height: 100%; }
}

/* ---------- FAQ (cards claros) ---------- */
.faq-sec { padding: var(--section-y) var(--gutter); background: var(--surface-card); }
.faq-sec__head { display: grid; gap: 14px; margin-bottom: 36px; }
.faq { display: grid; gap: 12px 20px; }
@media (min-width: 1024px) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.faq__col { display: grid; align-content: start; gap: 12px; }
.faq details { border: 2px solid transparent; border-radius: var(--radius); background: var(--card-claro); transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease); }
.faq details[open] { border-color: var(--card-claro); background: var(--surface-card); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; padding: 16px 18px 16px 22px; border-radius: var(--radius); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; letter-spacing: -0.005em; color: var(--tinta); transition: color var(--t-fast) var(--ease); }
.faq summary:hover h3 { color: var(--azul-profundo); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.faq summary .icon { width: 36px; height: 36px; padding: 8px; flex: none; border-radius: 50%; background: var(--azul-profundo); color: var(--text-on-dark); transition: transform var(--t) var(--ease); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq__answer { padding: 0 22px 22px; }
.faq__answer p { font-size: 1rem; }
.section--ice .faq details, .band .faq details { background: var(--surface-card); }
.section--ice .faq details[open] { border-color: var(--surface-card); }
.band .faq summary h3, .band .faq__answer p { color: var(--tinta); }
.band .faq__answer a { color: var(--link); }

/* ---------- Formulário de orçamento: painel branco sobre o azul ---------- */
.quote { position: relative; overflow: hidden; padding: 120px var(--gutter) var(--section-y); background: var(--azul-hero); }
.quote__shape { position: absolute; left: 0; top: 0; width: 100%; height: 160px; fill: var(--amarelo); pointer-events: none; }
.quote .container { position: relative; z-index: 1; }
.quote__panel { display: grid; gap: 32px; padding: 32px 20px; border-radius: var(--radius-xxl); background: var(--surface-card); color: var(--text); }
.quote__intro { display: grid; gap: 16px; align-content: start; justify-items: start; }
.quote__intro h2 { max-width: 14ch; }
.quote__alt { font-size: 1rem; color: var(--text-muted); }
.quote__form { padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
.quote :focus-visible { outline-color: var(--azul-hero); }
@media (min-width: 768px) {
  .quote { padding-top: 170px; }
  .quote__shape { height: 230px; }
  .quote__panel { padding: 48px; border-radius: 60px; }
}
@media (min-width: 1200px) {
  .quote__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 60px; padding: 64px 60px; border-radius: var(--radius-panel); }
}

/* Consulta de bairro (claro) */
.lookup--light { max-width: none; }
.lookup--light .lookup__label { color: var(--tinta); font-family: var(--font-display); font-weight: 700; }
.lookup--light .lookup__input input { border-color: var(--border-strong); border-radius: var(--radius-field); }
.lookup--light .lookup__input input:focus-visible { outline-color: var(--azul-hero); }
.lookup--light .lookup__result { background: var(--primary-soft); }
.quote .lookup__row { grid-template-columns: minmax(0, 1fr); }

/* ---------- Visite a Ótica Líder: galeria + NAP ---------- */
.visit { padding: var(--section-y) var(--gutter); background: var(--surface-card); }
.visit__grid { display: grid; gap: 40px; align-items: center; }
.visit__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 120px; gap: 8px; }
.visit__gallery .foto-reservada { border-radius: var(--radius-md); }
.visit__gallery .foto-reservada:nth-child(-n+2) { grid-row: span 2; }
.visit__gallery .foto-reservada:nth-child(even) { background: #C3D0DA; }
.visit__body { display: grid; justify-items: start; }
.visit__body h2 { max-width: 22ch; margin-bottom: 20px; font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--tinta); }
.visit__body > p:not(.label) { max-width: 34rem; }
.nap-list { list-style: none; display: grid; gap: 10px; width: 100%; margin-top: 26px; }
.nap-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: center; font-size: 1rem; line-height: 1.45; }
.nap-list__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--amarelo); color: var(--tinta); transition: background-color var(--t-fast) var(--ease); }
.nap-list__ico .icon { width: 18px; height: 18px; }
.nap-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); font-weight: 600; text-decoration-color: var(--azul-hero); }
.nap-list li:has(> a:hover) .nap-list__ico { background: var(--amarelo-hover); }
.visit__social { display: flex; gap: 10px; margin-top: 18px; list-style: none; }
.visit__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--amarelo); color: var(--tinta); transition: background-color var(--t) var(--ease); }
.visit__social a:hover { background: var(--amarelo-hover); }
.visit__social a:active { background: var(--amarelo-ativo); }
.visit__social .icon { width: 20px; height: 20px; }
.visit .btn { margin-top: 24px; }
@media (min-width: 768px) {
  .visit__gallery { grid-auto-rows: 184px; }
}
@media (min-width: 1024px) {
  .visit__grid { grid-template-columns: minmax(0, 558px) minmax(0, 1fr); column-gap: 60px; }
}

/* ---------- Rodapé azul profundo (estrutura aprovada; estilo da referência) ---------- */
.footer { position: relative; background: var(--azul-profundo); color: var(--text-on-dark); border-radius: var(--radius-xxl) var(--radius-xxl) 0 0; }
.footer__main { padding: 64px var(--gutter) 40px; }
.footer__main > .container { display: grid; gap: 40px; }
.footer__top { display: contents; }
.footer__brand { display: grid; gap: 16px; justify-items: start; align-content: start; }
.footer__brand img { height: 60px; width: auto; filter: none; }
.footer__brand p { font-size: 1rem; line-height: 1.6; color: var(--text-on-dark); max-width: 30rem; }
.footer :focus-visible { outline-color: var(--amarelo); }
.footer a { color: var(--text-on-dark); text-decoration: none; }
.footer a:hover { color: var(--amarelo-hover); text-decoration: underline; text-decoration-color: var(--amarelo); text-decoration-thickness: 2px; }
.footer a:active { color: var(--amarelo); }
.footer__contact { list-style: none; display: grid; }
.footer__contact li a, .footer__contact li > span { display: inline-flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; font-size: 1rem; line-height: 1.45; color: var(--text-on-dark); }
.footer__contact .icon, .footer__col .icon { width: 20px; height: 20px; color: var(--amarelo); margin-top: 1px; flex: none; }
.footer__contact a[href^="tel:"] { white-space: nowrap; }
.footer__social { display: flex; gap: 10px; list-style: none; margin: 4px 0 0; }
.footer__social a { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--turquesa); color: var(--azul-profundo); transition: background-color var(--t) var(--ease); }
.footer__social a:hover { background: var(--amarelo); color: var(--tinta); }
.footer__social .icon { width: 22px; height: 22px; }
.footer__cols { display: grid; gap: 32px; padding: 0; }
.footer__col h2 { margin: 0 0 12px; max-width: none; font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amarelo); }
.footer__col ul { list-style: none; display: grid; }
.footer__col li a, .footer__col li > span { display: inline-flex; align-items: flex-start; gap: 8px; min-height: 44px; padding: 10px 0; font-size: 1rem; line-height: 1.4; }
.footer__col li > span { color: var(--text-muted-on-dark); }
.footer__form { display: grid; gap: 16px; padding: 24px; background: var(--surface-card); color: var(--text); border-radius: var(--radius-xl); box-shadow: none; }
.footer__form-title { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.2; text-transform: uppercase; letter-spacing: -0.01em; color: var(--tinta); }
.footer__form :focus-visible { outline-color: var(--azul-hero); }
.footer__form .consent, .footer__form .consent span { color: var(--text-muted); }
.footer .footer__form a { color: var(--link); text-decoration-line: none; text-decoration-color: currentColor; text-decoration-thickness: 1.5px; }
.footer .footer__form a:hover { color: var(--azul-profundo); }
.footer__bottom { padding: 24px var(--gutter) 32px; background: var(--azul-profundo); color: var(--text-muted-on-dark); font-size: 1rem; border-top: 1px solid var(--border-on-dark); }
.footer__bottom .container { display: grid; gap: 8px; }
.footer__bottom p { max-width: none; color: var(--text-muted-on-dark); }
.footer__bottom a, .footer__bottom .link-btn { color: var(--text-on-dark); text-decoration-color: var(--turquesa); }
.footer__bottom :focus-visible { outline-color: var(--amarelo); }
@media (min-width: 768px) {
  .footer { border-radius: 60px 60px 0 0; }
  .footer__main { padding-top: 96px; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__form { padding: 28px 32px; }
}
@media (min-width: 1024px) {
  .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
}
@media (min-width: 1200px) {
  .footer__main > .container { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 60px; row-gap: 56px; }
  .footer__brand { grid-column: 1; grid-row: 1; }
  .footer__cols { grid-column: 2; grid-row: 1; }
}
@media (min-width: 1024px) {
  .footer__form { grid-column: 1 / -1; grid-row: auto; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); column-gap: 28px; row-gap: 8px; align-items: end; padding: 32px 36px; }
  .footer__form > .footer__form-title { grid-column: 1; grid-row: 1; align-self: center; }
  .footer__form > .form-grid { grid-column: 2; grid-row: 1; }
  .footer__form > .btn { grid-column: 3; grid-row: 1; }
  .footer__form > .consent { grid-column: 2 / -1; grid-row: 2; }
  .footer__form > .form-status { grid-column: 1 / -1; }
  .footer__form .form-grid--2 .field:not(.field--full) { grid-template-rows: auto auto; }
}
@media (max-width: 1199.98px) {
  .footer__bottom { padding-bottom: 88px; }
}

/* ---------- Ajustes v4 dos componentes gerais (páginas internas) ---------- */
.hero { background: var(--azul-hero); }
.hero p { color: var(--text-muted-on-dark); }
.hero .hero__lead, .hero .hero__sub { color: var(--text-on-dark) !important; }
.hero a:not(.btn) { text-decoration-color: var(--turquesa-texto); }
.hero :focus-visible { outline-color: var(--amarelo); }
.svc-card, .diff-card, .channel { background: var(--card-claro); box-shadow: none; border-radius: var(--radius-xl); }
.svc-card:hover, .diff-card:hover, .channel:hover { background: var(--surface-ice-hover); box-shadow: none; }
.svc-card__ico, .diff-card__ico, .channel__ico { background: var(--azul-profundo); color: var(--text-on-dark); }
.form-card { border-radius: var(--radius-xl); }
.field input, .field select, .field textarea { font-family: var(--font-text); font-size: 1rem; }
.tag { font-family: var(--font-display); }
.cta-final__copy h2 { max-width: 22ch; }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .cat:hover .cat__circle, .visit__social a:hover { transform: none; }
}

/* ---------- Links de texto sem sublinhado em repouso (pedido do dono, 19/10/2026) ----------
   WCAG 1.4.1: no claro, cor #0072B8 com 3:1 contra a tinta do texto e 5,12:1 no fundo, peso 600;
   no azul e no amarelo, cor e peso 700 distintos do texto; sublinhado no hover e no foco; foco visível.
   No card claro (#D9E3EA) o contraste de cor não fecha: ali o sublinhado continua. */
a:focus-visible { text-decoration-line: underline; }
.link-btn:hover, .link-btn:focus-visible { text-decoration-line: underline; text-decoration-thickness: 2px; }
.btn:hover, .btn:focus-visible { text-decoration-line: none; }
.band p a:not(.btn), .band li a:not(.btn), .hero p a:not(.btn), .cover a:not(.btn), .reviews-panel a:not(.btn), .aside-cta a:not(.btn), .inline-cta a:not(.btn) { color: var(--amarelo-hover); font-weight: 700; text-decoration-color: currentColor; }
.band p a:not(.btn):hover, .hero p a:not(.btn):hover, .cover a:not(.btn):hover, .reviews-panel a:not(.btn):hover, .aside-cta a:not(.btn):hover, .inline-cta a:not(.btn):hover { color: var(--text-on-dark); }
.hero .breadcrumb a { color: var(--text-on-dark); font-weight: 600; }
.products a:not(.btn), .cta-yellow a:not(.btn), .cat-band a:not(.btn) { color: var(--azul-profundo); font-weight: 700; text-decoration-color: currentColor; }
.section--ice p a:not(.btn), .faq details:not([open]) a { color: var(--azul-profundo); text-decoration-line: underline; }
.about__close, .quote__alt, .consent, .cookie__text, .footer__form .consent, .footer__form .consent span { color: var(--tinta); }
.footer__col a, .footer__contact a, .footer__bottom a { font-weight: 400; }
.mega__link, .mnav__list a, .mnav__top-link, .nav__link, .city-pill, .breadcrumb a, .header__logo, .skip-link { text-decoration-line: none; }
.mega__link:hover .mega__name { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.blog-card h3 a, .feature-post h3 a, .cat-card h3 a, .seg-card h3 a, .cat__title a, .lens-card h3 a { font-weight: inherit; }

/* ---------- Fotos reais (campanha da Ótica Líder no Instagram, 2022; autorização na pendência 126) ---------- */
.foto-reservada.tem-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero--home .foto-reservada--recorte.tem-foto { aspect-ratio: 720 / 891; overflow: visible; border-radius: 0; background: none; }
.hero--home .foto-reservada--recorte.tem-foto > img { object-fit: contain; object-position: center bottom; }
.about__photo.tem-foto > img { object-position: 64% 35%; }
/* Links sobre o card claro (#D9E3EA): azul-profundo (7,7:1); o sublinhado continua só no texto corrido do FAQ */
.svc-card a:not(.btn), .diff-card a:not(.btn), .channel a:not(.btn), .lens-card a, .section--ice a:not(.btn), .mega__feature a:not(.btn), .faq a:not(.btn) { color: var(--azul-profundo); }
.faq__answer a { text-decoration-line: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }

/* ---------- Fotos reais da loja (assets/img/loja, 2026) ---------- */
.hero__fachada.tem-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; opacity: 0.4; mix-blend-mode: luminosity; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
.visit__gallery .foto-reservada.tem-foto > img, .pstep__photo.tem-foto > img, .gallery__slide.tem-foto > img { object-position: center 45%; }

/* ---------- Hero refeito (feedback do dono): plano americano à direita, cintura atrás da forma amarela ---------- */
.hero__shape--back { z-index: 1; }
.hero__shape--front { z-index: 3; }
.hero--home .hero__copy { z-index: 4; }
.hero--home .foto-reservada--recorte, .hero--home .foto-reservada--recorte.tem-foto { z-index: 2; }
.hero--home .foto-reservada--recorte.tem-foto { aspect-ratio: 640 / 679; right: 50%; bottom: 36px; width: min(92%, 400px); transform: translateX(50%); }
.hero__figure { height: 440px; }
@media (min-width: 768px) {
  .hero__figure { height: 520px; }
  .hero--home .foto-reservada--recorte.tem-foto { width: 480px; bottom: 60px; }
}
@media (min-width: 1024px) {
  .hero__ctas { grid-template-columns: max-content; }
  .hero--home .foto-reservada--recorte.tem-foto { transform: none; left: auto; right: 24px; width: 44vw; bottom: -40px; }
}
@media (min-width: 1280px) {
  .hero__ctas { grid-template-columns: repeat(2, max-content); gap: 16px; }
  .hero__ctas .btn { min-width: 0; min-height: 48px; padding: 12px 18px; font-size: 0.875rem; gap: 8px; }
  .hero--home .foto-reservada--recorte.tem-foto { right: max(24px, calc(50% - 680px)); width: min(41vw, 580px); bottom: 50px; }
}

/* ---------- Recorte do hero e composição de lente ---------- */
.hero--home .foto-reservada--recorte.tem-foto { aspect-ratio: 640 / 791; bottom: 0; width: min(88%, 380px); transform: translateX(50%) translateY(20%); }
.hero__figure { height: 400px; }
.lens-photo__img.tem-foto > img { object-position: center 45%; }
.hero__fachada.tem-foto > img { object-position: center 55%; }
@media (min-width: 768px) {
  .hero__figure { height: 480px; }
  .hero--home .foto-reservada--recorte.tem-foto { width: 460px; bottom: 0; transform: translateX(50%) translateY(18%); }
}
@media (min-width: 1024px) {
  .hero--home .foto-reservada--recorte.tem-foto { width: 42vw; max-width: 560px; bottom: 0; transform: none; }
}
@media (min-width: 1280px) {
  .hero--home .foto-reservada--recorte.tem-foto { width: min(39vw, 560px); bottom: 0; }
}
.visit__gallery [data-foto="loja-placa"] > img { object-position: center 25%; }

/* ---------- Galeria de produtos com 6 fotos ---------- */
.products__gallery .gallery__slide { aspect-ratio: 5 / 4; }
.products__gallery .gallery__slide.tem-foto > img { object-position: center 35%; }
.gallery--6 .gallery__thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery--6 .gallery__thumb .foto-reservada { aspect-ratio: 1; }
@media (min-width: 480px) { .gallery--6 .gallery__thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } .gallery--6 .gallery__thumb .foto-reservada { aspect-ratio: 1; } }
.gallery { align-content: start; }

/* =====================================================================
   v4 · PÁGINAS INTERNAS (tools/migrar-v4.py; receita em docs/v4-aplicacao.md)
   Tudo aqui depende de <body class="v4 v4--tipo">: página ainda em v2 não muda.
   Componentes da home reaproveitados: forma amarela, painel branco, cards claros,
   faixa amarela com arco, cards de número, passos com foto, galeria, FAQ, quote.
   ===================================================================== */

/* ---------- Fundos das seções ---------- */
.v4 .section { background: var(--surface-card); }
.v4 .section--alt, .v4 .section--soft { background: var(--surface-alt); }
.v4 .section__head h2, .v4 .split__body h2, .v4 .prose h2, .v4 .rating__copy h2 { color: var(--tinta); }

/* ---------- Hero interno azul com forma amarela ---------- */
.v4 .hero--inner { position: relative; overflow: hidden; background: var(--azul-hero); padding: 16px var(--gutter) 48px; }
.v4 .hero--inner > .container { position: relative; z-index: 2; }
.v4 .hero--inner .hero__title { color: var(--text-on-dark); font-weight: 800; letter-spacing: -0.02em; }
.v4 .hero__kw { color: var(--turquesa-texto); }
.v4 .hero--v4 { --shape-h: 84px; padding-bottom: calc(var(--shape-h) * 0.62 + 28px); }
.v4 .hero__shape--inner { z-index: 1; height: var(--shape-h); }
.v4 .hero--inner .guarantees .icon { color: var(--turquesa-texto); }
.v4 .hero--inner .phone-link { color: var(--text-on-dark); }
.v4 .hero--inner .phone-link .icon { color: var(--turquesa-texto); }
.v4 .hero--inner .phone-link:hover { color: var(--amarelo-hover); }
.v4 .hero__media.media-frame { position: relative; z-index: 2; overflow: hidden; border: 10px solid var(--surface-card); border-radius: var(--radius-xxl); background: var(--azul-profundo); }
.v4 .hero__media.media-frame img { aspect-ratio: 4 / 3; }
.v4 .hero--inner .area__map { padding: 10px; border-radius: var(--radius-xxl); background: var(--surface-card); }
.v4 .hero--inner .area__map svg { border-radius: var(--radius-xl); }
.v4 .hero--inner .area__map figcaption { padding: 4px 8px 2px; color: var(--tinta); }
.v4 .hero--inner .form-card { border-radius: var(--radius-xl); box-shadow: none; }
.v4 .hero--simple { padding: 16px var(--gutter) 56px; }
.v4 .hero--simple .hero__title { max-width: 24ch; }
.v4 .hero--simple .hero__lead { max-width: 44rem; }
@media (min-width: 768px) {
  .v4 .hero--v4 { --shape-h: 130px; }
  .v4 .hero__media.media-frame { border-width: 12px; border-radius: 60px; }
}
@media (min-width: 1024px) {
  .v4 .hero--inner { padding-top: 24px; }
  .v4 .hero--v4 { --shape-h: 190px; padding-bottom: 104px; }
  .v4 .hero--inner .hero__title { font-size: clamp(2.5rem, 1.6rem + 1.8vw, 3.375rem); }
  .v4 .hero__media.media-frame { border-width: 15px; border-radius: 80px 80px 80px 30px; }
  .v4 .hero--simple { padding-bottom: 72px; }
}

/* ---------- Painel branco arredondado sobre o amarelo e o azul (1ª seção) ---------- */
.v4 .sec-panel { padding: 0 var(--gutter) var(--section-y); background: linear-gradient(180deg, var(--amarelo) 0 96px, var(--azul-hero) 96px 100%); }
.v4 .sec-panel > .container { max-width: calc(var(--container) + 128px); padding: 40px 22px; border-radius: var(--radius-xxl); background: var(--surface-card); }
@media (min-width: 768px) {
  .v4 .sec-panel { background: linear-gradient(180deg, var(--amarelo) 0 140px, var(--azul-hero) 140px 100%); }
  .v4 .sec-panel > .container { padding: 64px 48px; border-radius: 60px; }
}
@media (min-width: 1200px) {
  .v4 .sec-panel > .container { padding: 80px 64px; border-radius: 0 var(--radius-panel) var(--radius-panel) var(--radius-panel); }
}

/* ---------- Cards claros com ícone circular (diferenciais, serviços, canais) ---------- */
.v4 .diff-card, .v4 .channel { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 24px; border-radius: var(--radius-xl); background: var(--card-claro); text-align: center; box-shadow: none; }
.v4 .diff-card:hover, .v4 .channel:hover { background: var(--surface-ice-hover); transform: none; }
.v4 .diff-card__ico, .v4 .channel__ico { width: 56px; height: 56px; background: var(--azul-profundo); color: var(--text-on-dark); }
.v4 .diff-card h3, .v4 .channel h3, .v4 .svc-card h3 { font-size: 1.0625rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; color: var(--tinta); }
.v4 .diff-card p, .v4 .channel p, .v4 .svc-card p { color: var(--tinta); }
.v4 .diff-card .link-arrow, .v4 .channel .link-arrow { align-self: center; color: var(--azul-profundo); }
.v4 .svc-card { border-radius: var(--radius-xl); background: var(--card-claro); box-shadow: none; }
.v4 .svc-card:hover { background: var(--surface-ice-hover); transform: none; }
.v4 .svc-card__ico { background: var(--azul-profundo); color: var(--text-on-dark); }
.v4 .svc-card__btn { min-height: 52px; border-color: var(--azul-profundo); border-radius: var(--radius-btn); color: var(--azul-profundo); }
.v4 .svc-card:hover .svc-card__btn { background: var(--azul-profundo); color: var(--text-on-dark); }
.v4 .section--alt .diff-card, .v4 .section--alt .channel, .v4 .section--alt .svc-card,
.v4 .section--soft .diff-card, .v4 .section--soft .channel, .v4 .section--soft .svc-card { background: var(--surface-card); }

/* ---------- Cards de artigo e serviço com foto ---------- */
.v4 .blog-card, .v4 .feature-post { border-radius: var(--radius-xl); background: var(--card-claro); box-shadow: none; }
.v4 .blog-card:hover, .v4 .feature-post:hover { background: var(--surface-ice-hover); box-shadow: none; }
.v4 .section--alt .blog-card, .v4 .section--soft .blog-card, .v4 .section--alt .feature-post, .v4 .section--soft .feature-post { background: var(--surface-card); }
.v4 .blog-card h3 a, .v4 .feature-post h3 a { color: var(--tinta); }
.v4 .blog-card p, .v4 .feature-post p { color: var(--tinta); }
.v4 .tag, .v4 .blog-card .tag { border-radius: var(--radius-xs); background: var(--tinta); color: var(--text-on-dark); }
.v4 .cat-card { border-radius: var(--radius); background: var(--card-claro); box-shadow: none; }
.v4 .cat-card:hover { background: var(--surface-ice-hover); box-shadow: none; }
.v4 .section--alt .cat-card, .v4 .section--soft .cat-card { background: var(--surface-card); }
.v4 .cat-card h3 a, .v4 .cat-card h3 { color: var(--tinta); }

/* ---------- Tabelas, caixas, listas e fichas ---------- */
.v4 .table-wrap { padding: 8px; border: 2px solid var(--card-claro); border-radius: var(--radius-xl); box-shadow: none; background: var(--surface-card); }
.v4 .factors caption { padding: 20px 24px; font-family: var(--font-display); font-weight: 800; color: var(--tinta); background: var(--surface-card); }
.v4 .factors thead th { background: var(--azul-profundo); }
.v4 .factors tbody tr:nth-child(odd) { background: var(--surface-alt); }
.v4 .factors tbody th, .v4 .factors td strong { color: var(--tinta); }
@media (max-width: 767.98px) { .v4 .table-wrap { border-radius: var(--radius); } }
.v4 .callout { border-radius: var(--radius-xl); background: var(--card-claro); }
.v4 .callout--warn { background: var(--amarelo-hover); }
.v4 .section--alt .callout:not(.callout--warn), .v4 .section--soft .callout:not(.callout--warn) { background: var(--surface-card); }
.v4 .callout__title { color: var(--tinta); }
.v4 .callout__title .icon { color: var(--azul-profundo); }
.v4 .callout--warn .callout__title .icon, .v4 .callout--warn .checks .icon { color: var(--tinta); }
.v4 .checks .icon { color: var(--azul-hero); }
.v4 .checks--no .icon { color: var(--error); }
.v4 .media-frame { border-radius: var(--radius-xxl); }
.v4 .split__media .media-frame, .v4 .read-layout__aside .media-frame { border-radius: var(--radius-xxl) var(--radius-xxl) var(--radius-xxl) var(--radius); }
.v4 .facts { border: 2px solid var(--card-claro); border-radius: var(--radius-xl); box-shadow: none; }
.v4 .facts > div { border-top-color: var(--card-claro); }
.v4 .facts dt { color: var(--azul-profundo); font-weight: 800; }
.v4 .cities li { border-radius: var(--radius); background: var(--card-claro); box-shadow: none; }
.v4 .section--alt .cities li, .v4 .section--soft .cities li { background: var(--surface-card); }
.v4 .cities .icon, .v4 .cities strong { color: var(--azul-profundo); }
.v4 .svc-more { border-radius: var(--radius-xl); background: var(--card-claro); box-shadow: none; }
.v4 .section--alt .svc-more, .v4 .section--soft .svc-more { background: var(--surface-card); }
.v4 .svc-more__title, .v4 .svc-more__list a { color: var(--tinta); }
.v4 .svc-more__list .icon { color: var(--azul-hero); }
.v4 .author { border-radius: var(--radius-xl); background: var(--card-claro); box-shadow: none; }
.v4 .section--alt .author { background: var(--surface-card); }
.v4 .map-embed { border-radius: var(--radius-xxl); background: var(--card-claro); }
.v4 .map-embed__pin { background: var(--azul-profundo); color: var(--amarelo); }
.v4 .section--alt .faq details, .v4 .section--soft .faq details { background: var(--surface-card); }
.v4 .section--alt .faq details[open], .v4 .section--soft .faq details[open] { border-color: var(--card-claro); }
.v4 .anchor-nav a { border-color: var(--azul-profundo); border-radius: var(--radius-btn); color: var(--azul-profundo); }
.v4 .anchor-nav a[aria-current="page"] { background: var(--azul-profundo); color: var(--text-on-dark); }
.v4 .pagination a, .v4 .pagination span { border-color: var(--azul-profundo); border-radius: var(--radius-btn); color: var(--azul-profundo); }
.v4 .pagination [aria-current="page"] { background: var(--azul-profundo); color: var(--text-on-dark); }
.v4 .seal { box-shadow: none; }

/* Linha do tempo (história): número amarelo e linha azul-profunda, sem cards */
.v4 .steps--vertical .step::before { background: var(--amarelo); color: var(--tinta); }
.v4 .steps--vertical .step:not(:last-child)::after { background: var(--azul-profundo); }
.v4 .steps--vertical .step h3 { color: var(--tinta); }

/* ---------- Passos com foto e etiqueta numerada (psteps, como a home) ---------- */
.v4 .psteps { counter-reset: passo; margin-top: 8px; padding: 0; }
.v4 .pstep { counter-increment: passo; }
.v4 .pstep__num::before { content: counter(passo); }
.v4 .pstep__photo { aspect-ratio: 4 / 3; }
.v4 .pstep__info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
.v4 .pstep__info p { color: var(--tinta); }
.v4 .pstep__info .step__time { grid-column: auto; color: var(--azul-profundo); }
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* 4 passos: 2 x 2; 5 passos: lista com a foto ao lado (sem linha incompleta) */
  .v4 .psteps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
  .v4 .psteps--5 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .v4 .psteps--5 .pstep { grid-row: auto; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 24px; }
  .v4 .psteps--5 .pstep__photo { grid-row: 1 / span 2; aspect-ratio: auto; height: 100%; min-height: 200px; border-radius: var(--radius-xl); }
  .v4 .psteps--5 .pstep__tag { border-radius: var(--radius); }
  .v4 .psteps--5 .pstep__info { margin-top: 14px; }
}
@media (min-width: 1024px) {
  .v4 .psteps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v4 .psteps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 16px; }
  .v4 .psteps--5 .pstep__tag { padding: 12px 14px; gap: 10px; }
  .v4 .psteps--5 .pstep__num { width: 34px; height: 34px; font-size: 1.25rem; }
  .v4 .psteps--5 .pstep__title { font-size: 0.9375rem; }
}

/* ---------- Faixa amarela com arco azul-profundo (sun) ---------- */
/* O arco fica no canto superior direito, dentro do respiro extra do topo (como a faixa de produtos da home), sem cruzar o texto */
.v4 .sun { position: relative; overflow: hidden; padding: 130px var(--gutter) var(--section-y); background: var(--amarelo); color: var(--tinta); }
.v4 .sun::before { content: ""; position: absolute; top: -200px; right: -150px; width: 300px; height: 300px; border: 50px solid var(--azul-profundo); border-radius: 50%; pointer-events: none; }
.v4 .sun > .container { position: relative; z-index: 1; }
.v4 .sun h2, .v4 .sun h3, .v4 .sun p, .v4 .sun li, .v4 .sun .section__lead { color: var(--tinta); }
.v4 .sun p a:not(.btn), .v4 .sun li a:not(.btn) { color: var(--azul-profundo); font-weight: 700; text-decoration-line: underline; text-decoration-thickness: 1.5px; }
.v4 .sun p a:not(.btn):hover { color: var(--tinta); }
.v4 .sun :focus-visible { outline-color: var(--tinta); }
.v4 .sun .btn--primary { background: var(--azul-profundo); border-color: var(--azul-profundo); color: var(--text-on-dark); }
.v4 .sun .btn--primary:hover { background: var(--azul-noite); border-color: var(--azul-noite); color: var(--text-on-dark); }
.v4 .sun .phone-link { color: var(--tinta); }
.v4 .sun .phone-link .icon { color: var(--azul-profundo); }
.v4 .sun .cities li, .v4 .sun .svc-more, .v4 .sun .callout, .v4 .sun .cat-card, .v4 .sun .facts { background: var(--surface-card); border-color: var(--surface-card); }
.v4 .sun .svc-more__list a, .v4 .sun .cat-card h3 a { color: var(--tinta); text-decoration-line: none; }
.v4 .sun .checks .icon { color: var(--azul-profundo); }
.v4 .sun .seal--hours, .v4 .sun .seal--offer { background: var(--azul-profundo); color: var(--text-on-dark); }
.v4 .sun .seal--hours span, .v4 .sun .seal--offer span, .v4 .sun .seal .icon { color: var(--text-on-dark); }
.v4 .sun a.seal--offer:hover { color: var(--text-on-dark); }
.v4 .sun .media-frame { border: 10px solid var(--surface-card); }
.v4 .sun .gallery__thumb[aria-current="true"] { border-color: var(--tinta); box-shadow: 0 0 0 2px var(--tinta); }
.v4 .sun .gallery__thumb:hover { border-color: var(--azul-profundo); }
.v4 .sun .gallery__thumb:focus-visible, .v4 .sun .gallery__nav:focus-visible, .v4 .sun .gallery__track:focus-visible { outline-color: var(--tinta); }
@media (min-width: 768px) {
  .v4 .sun { padding-top: 160px; }
  .v4 .sun::before { top: -330px; right: -260px; width: 520px; height: 520px; border-width: 80px; }
}

/* ---------- Galeria com miniaturas nas internas ---------- */
.v4 .gallery--v4 .gallery__slide { aspect-ratio: 4 / 3; }
/* selo de horário fora da foto (não cobre rostos): faixa abaixo das miniaturas, em todas as larguras */
.v4 .split__media:has(.gallery) .seal { position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; width: auto; height: auto; margin-top: 14px; padding: 12px 18px; border-radius: var(--radius); }

/* ---------- Faixa azul com cards de número amarelos ---------- */
.v4 .band--nums { background: var(--azul-hero); }
.v4 .band--nums .numbers { gap: 12px; }
.v4 .band--nums .numbers > p, .v4 .band--nums .numbers > p:nth-child(n) { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 112px; padding: 20px 12px; border: 0; border-radius: var(--radius); background: var(--amarelo); text-align: center; }
.v4 .band--nums .numbers__value { color: var(--tinta); }
.v4 .band--nums .numbers__label { color: var(--tinta); font-size: 0.9375rem; letter-spacing: 0.01em; }
@media (min-width: 1200px) { .v4 .band--nums .numbers { gap: 16px; } }

/* ---------- Painel azul-profundo de avaliações ---------- */
.v4 .rating { padding: 40px 24px; border-radius: var(--radius-xxl); background: var(--azul-profundo); color: var(--text-on-dark); }
.v4 .rating h2, .v4 .rating p, .v4 .rating strong { color: var(--text-on-dark); }
.v4 .rating .pending { color: var(--text-muted-on-dark); }
.v4 .rating a:not(.btn) { color: var(--amarelo-hover); font-weight: 700; }
.v4 .rating :focus-visible { outline-color: var(--amarelo); }
.v4 .rating .btn--secondary { background: var(--amarelo); border-color: var(--amarelo); border-radius: var(--radius-btn); color: var(--tinta); }
.v4 .rating .btn--secondary:hover { background: var(--amarelo-hover); border-color: var(--amarelo-hover); color: var(--tinta); }
.v4 .rating__card { padding: 28px; border-radius: var(--radius-xl); background: var(--azul-noite); box-shadow: none; }
.v4 .rating__score { color: var(--amarelo); }
.v4 .rating__stars .icon { color: var(--amarelo); fill: var(--amarelo); }
.v4 .rating__meta { color: var(--text-on-dark); }
.v4 .rating__note { color: var(--text-muted-on-dark); }
@media (min-width: 768px) { .v4 .rating { padding: 56px 48px; border-radius: 60px; } }
@media (min-width: 1024px) { .v4 .rating { padding: 64px 60px; } }

/* ---------- CTA final: faixa azul com onda amarela e painel branco (quote) ---------- */
.v4 .quote--final .quote__panel { align-items: start; }
.v4 .quote--final .cta-final__copy h2 { color: var(--tinta); max-width: 18ch; }
.v4 .quote--final .cta-final__copy .lit { color: var(--azul-profundo); }
.v4 .quote--final .cta-final__copy p { color: var(--tinta); }
.v4 .quote--final .phone-link { color: var(--tinta); }
.v4 .quote--final .phone-link .icon { color: var(--azul-profundo); }
.v4 .quote--final .form-card { padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
@media (min-width: 1024px) {
  .v4 .quote--final .quote__panel.cta-final__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; padding: 64px 60px; border-radius: var(--radius-panel); }
}

/* ---------- Painel de chamada (inline-cta) com arco amarelo ---------- */
.v4 .inline-cta { position: relative; overflow: hidden; padding: 40px 28px; border-radius: var(--radius-xxl); background: var(--azul-profundo); }
.v4 .inline-cta::after { content: ""; position: absolute; top: -150px; right: -150px; width: 260px; height: 260px; border: 44px solid var(--amarelo); border-radius: 50%; pointer-events: none; }
.v4 .inline-cta > * { position: relative; z-index: 1; max-width: 46rem; }
@media (min-width: 768px) { .v4 .inline-cta { padding: 56px; border-radius: 60px; } }

/* ---------- Modo leitura (blog, categoria, artigo, legal) ---------- */
.v4 .toc { border-radius: var(--radius); background: var(--card-claro); box-shadow: none; }
.v4 .toc__title, .v4 .toc__title a { color: var(--tinta); }
.v4 .toc ol a { border-top-color: rgba(11, 38, 63, 0.14); color: var(--tinta); }
.v4 .toc ol a::before { color: var(--azul-profundo); }
.v4 .aside-cta { border-radius: var(--radius-xl); background: var(--azul-profundo); }
.v4 .prose h2, .v4 .prose h3, .v4 .prose h4 { color: var(--tinta); text-transform: none; }
.v4 .prose ul:not(.checks) li::marker, .v4 .prose ol:not(.steps) li::marker { color: var(--azul-hero); }
.v4 .meta-line .icon { color: var(--turquesa-texto); }
.v4 .blog-card .meta-line .icon, .v4 .feature-post .meta-line .icon { color: var(--azul-profundo); }
.v4 .tag { white-space: normal; text-align: left; }
.v4 .hero--inner .btn--secondary { background: var(--azul-botao); border-color: var(--azul-botao); border-radius: var(--radius-btn-blue); color: var(--text-on-dark); }
.v4 .hero--inner .btn--secondary:hover { background: var(--azul-botao-hover); border-color: var(--azul-botao-hover); color: var(--text-on-dark); }
.v4 .sun .lit, .v4 .section .lit, .v4 .sec-panel .lit { color: var(--azul-profundo); }
/* Links sobre o card claro e nas caixas: azul-profundo (7,7:1 no #D9E3EA), sublinhados no texto corrido */
.v4 .callout a:not(.btn), .v4 .cat-card__count, .v4 .author a, .v4 .cities a, .v4 .svc-more a, .v4 .map-embed a:not(.btn), .v4 .blog-card a, .v4 .feature-post a, .v4 .toc a { color: var(--azul-profundo); }
.v4 .callout p a, .v4 .author p a, .v4 .cities a { text-decoration-line: underline; text-decoration-thickness: 1.5px; }
.v4 .band--nums h2, .v4 .band--nums .section__head h2 { color: var(--text-on-dark); }
.v4 .band--nums .lit { color: var(--amarelo-hover); }
.v4 .factors thead th:first-child { border-radius: var(--radius-md) 0 0 0; }
.v4 .factors thead th:last-child { border-radius: 0 var(--radius-md) 0 0; }

/* ---------- Sem sublinhado em nenhum link (pedido do dono, 21/10/2026) ----------
   Links de texto se destacam pela cor e pelo peso; o foco do teclado continua visível pelo contorno (:focus-visible).
   Sem exceção, inclusive nas respostas da FAQ (dono, 21/10/2026). */
a, a:hover, a:focus-visible,
a *, a:hover *,
.blog-card:hover h3 a, .feature-post:hover h3 a, .cat-card:hover h3 a, .lens-card:hover h3 a, .cat:hover .cat__title a,
.mega__link:hover .mega__name, .faq summary:hover h3, summary, summary *, h1, h2, h3, h4, .link-btn:hover, .link-btn:focus-visible { text-decoration: none !important; }
.faq__answer a { font-weight: 700; }
main p a:not(.btn), main td a:not(.btn), main dd a:not(.btn) { font-weight: 700; }

/* Frase de fechamento curta em uma linha no desktop (dono, 21/10/2026) */
@media (min-width: 1024px) { .section__close--linha { max-width: none; } }

/* ---------- Marcas (Sobre): grade de marcas de armações e lentes ---------- */
.brands__title { margin: var(--space-6) 0 var(--space-4); font-size: 1.125rem; color: var(--tinta); }
.brands { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; }
.brand { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 16px; border-radius: 20px; background: var(--card-claro, #D9E3EA); text-align: center; }
.brand__name { font-weight: 800; font-size: 1.125rem; color: var(--azul-profundo); letter-spacing: -0.01em; }
.brand img { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; }
@media (min-width: 768px) { .brands--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .brands--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .brands--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* grade de marcas com número ímpar no celular: o último item ocupa a linha inteira (simetria) */
@media (max-width: 767.98px) { .brands > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 768px) { .brands--2 { grid-template-columns: repeat(2, minmax(0, 320px)); } .brands--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* resumo das marcas por categoria, abaixo das logos: colunas iguais com fio no topo */
.brands-resumo { display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin: var(--space-7) 0 0; }
.brands-resumo > div { padding-top: var(--space-4); border-top: 2px solid var(--card-claro); }
.brands-resumo dt { font-weight: 800; font-size: 1.125rem; color: var(--azul-profundo); }
.brands-resumo dd { margin: var(--space-2) 0 0; color: var(--tinta); line-height: 1.5; }
@media (min-width: 768px) { .brands-resumo--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .brands-resumo--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Formulário de orçamento em janela (aberto pelos links do WhatsApp; leads.js) ---------- */
.orc-modal { width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.orc-modal::backdrop { background: rgb(11 38 63 / 0.62); }
.orc-modal[open] { animation: orc-entrar 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes orc-entrar { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .orc-modal[open] { animation: none; } }
html:has(.orc-modal[open]) { overflow: hidden; }
.orc-modal__box { position: relative; }
.orc-modal__form { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; box-shadow: none; }
.orc-modal .form-card__title { padding-right: 52px; }
.orc-modal__lead { margin: 0; }
.orc-modal__fechar { position: absolute; top: 14px; right: 14px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--surface-alt); color: var(--tinta); cursor: pointer; transition: background-color 0.15s ease; }
.orc-modal__fechar:hover { background: var(--card-claro); }
.orc-modal__fechar:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.orc-modal__fechar .icon { width: 22px; height: 22px; }
@media (min-width: 768px) { .orc-modal__form { padding: 32px; } }