@charset "UTF-8";
/* =============================================================================
   Optical Classic · BH Shopping — Landing page
   styles.css

   Autoridade visual: style-guide-3.html, na pasta do design
   (SITES/LP_Optical_classic_Shopping; Design System v3 · Paleta Optical Classic). Os tokens da seção 2 são os do
   style guide; as extensões da LP vêm marcadas logo abaixo deles. Todos os
   componentes usam o prefixo .oc- para não colidir com classes do tema.

   ÍNDICE
    1. Fontes
    2. Tokens (design system + extensões da LP)
    3. Base
    4. Layout e utilitários
    5. Componentes: botões e botões de ícone
    6. Header
    7. HERO: título, foto, subtítulo e CTA
    8. Carrossel de armações (pílula sobre a borda da foto)
    9. Faixas divididas (seções 3–6: armações, lentes, sunwear, Ray-Ban Meta)
   10. Carrossel de marcas (seção 7: duas linhas em sentidos opostos)
   11. Por que a Optical Classic (seção 8: texto, credenciais e mosaico da loja)
   12. Depoimentos (seção 9: nota do Google e avaliações de clientes)
   13. Perguntas frequentes (seção 10: sanfona nativa)
   14. Visite-nos (seção 11: localização, mapa e CTA final)
   15. Rodapé
   16. Movimento: entrada da HERO e revelação no scroll
   17. Movimento reduzido
   ========================================================================== */


/* 1. Fontes ----------------------------------------------------------------
   Em assets/fonts, com nomes limpos (os originais estão na pasta do design).
   O arquivo original da Monarch Nova tinha extensão .woff, mas o conteúdo é
   WOFF2; aqui ele já foi renomeado para .woff2. */
@font-face {
  font-family: 'Monarch Nova';
  src: url("../fonts/monarch-nova.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lausanne';
  src: url("../fonts/lausanne-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lausanne';
  src: url("../fonts/lausanne-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* 2. Tokens ---------------------------------------------------------------- */
:root {
  /* color: paleta Optical Classic — 80–90% neutros nobres, até 10% vermelho */
  --color-primary: #2D3136;        /* Grafite Chumbo Nobre */
  --color-primary-hover: #1F2225;
  --color-bg: #F9F9F7;             /* Off-White Alabastro */
  --color-bg-alt: #ECECE9;
  --color-text: #181A1C;           /* Preto Ônix */
  --color-text-muted: #5C6269;
  --color-accent: #D90416;         /* Vermelho Classic: só conversão e destaques */
  --color-accent-hover: #B50312;
  --color-surface: #FFFFFF;
  --color-stone: #D6D4CE;
  --color-line: #E1E1DD;
  --color-control: #C8CBCD;
  --color-placeholder: #6B7178;
  --color-text-a12: rgba(24, 26, 28, .12);
  --color-text-a40: rgba(24, 26, 28, .4);
  --color-bg-a00: rgba(249, 249, 247, 0);
  --color-bg-a55: rgba(249, 249, 247, .55);
  --color-border: var(--color-text-a12);
  --color-white: var(--color-surface);
  --gradient-graphite: linear-gradient(135deg, var(--color-primary) 0%, var(--color-text) 100%); /* faixas escuras */

  /* type */
  --font-display: 'Monarch Nova', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font-sans: 'Lausanne', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-semibold: 600;
  --text-h1: 35px;
  --text-h4: 14px;             /* Lausanne 600 — também .btn */
  --text-h4-secondary: 12px;
  --text-body: 14px;
  --text-body-lg: 17px;        /* Lausanne 300 */
  --text-small: 11px;
  --text-btn-small: 12px;
  --leading-display: 1.1;
  --leading-base: 1.2;
  --leading-tight: 1.12;
  --tracking-none: 0;

  /* space */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 30px;
  --space-6: 40px;
  --space-7: 60px;
  --space-8: 80px;
  --space-9: 100px;
  --section-space: 40px;

  /* layout */
  --container-gutter: 20px;
  --container-max: 1440px;

  /* radius */
  --radius-none: 0;
  --radius-pill: 50px;
  --radius-strip: 100px;
  --radius-full: 50%;

  /* elevation */
  --shadow-hairline: 0 0 0 1px #d6d6d6;

  /* controls */
  --btn-height: 52px;
  --btn-min-width: 130px;
  --btn-padding-x: 20px;

  /* motion */
  --duration-instant: .1s;
  --duration-fast: .125s;
  --duration-base: .15s;
  --duration-slow: .3s;
  --duration-underline: .8s;
  --duration-link: .2s;
  --ease-in-out: ease-in-out;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --reveal-distance: .9375rem;
  --focus-ring: 1px solid var(--color-text);
  --focus-offset: 3px;

  /* LP: extensões derivadas dos tokens acima */
  --leading-relaxed: 1.45;                      /* subtítulo: leitura confortável */
  --header-h: 64px;
  --logo-h: 44px;                               /* ≈ 96px de largura */
  --hero-title-size: clamp(26px, 8.4vw, 40px);  /* 3 linhas: ÓCULOS DAS / GRANDES MARCAS / E LENTES PREMIUM */
  --hero-lead-size: clamp(16px, 4.5vw, 17px);   /* 4 linhas curtas */
  --hero-band-h: auto;                          /* altura da faixa de foto (≥1000px) */
  --frame-w: 112px;                             /* largura de cada armação no carrossel */
  --frame-gap: 10px;
  --frame-ratio: 1.483;                         /* proporção .featured-frames-item (67,44%) */
  --pill-pad: 6px;
  --pill-h: calc(var(--frame-w) / var(--frame-ratio) + 2 * var(--pill-pad));
  --split-title-size: clamp(26px, 7vw, 32px);   /* títulos das faixas: 2 linhas por sentido */
  --duration-entrance: .9s;
  --duration-curtain: 1.5s;
  --ease-curtain: cubic-bezier(.77, 0, .175, 1);
}

@media (min-width: 768px) {
  :root {
    --text-body-lg: 18px;
    --text-h1: 40px;
    --container-gutter: 30px;
    --section-space: 60px;
    --header-h: 76px;
    --logo-h: 52px;                             /* ≈ 114px */
    --hero-title-size: clamp(44px, 6.4vw, 60px);
    --hero-lead-size: 18px;
    --frame-w: 143px;
    --frame-ratio: 1.589;                       /* 62,94% */
    --pill-pad: 8px;
    --split-title-size: clamp(32px, 4.4vw, 40px);
  }
}
@media (min-width: 1000px) {
  :root {
    --text-h4-secondary: 15px;
    --text-h1: 50px;
    --text-h4: 15px;
    --text-body: 15px;
    --text-small: 13px;
    --text-btn-small: 15px;
    --container-gutter: 40px;
    --section-space: 80px;
    --header-h: 84px;
    --logo-h: 60px;                             /* ≈ 131px */
    --hero-title-size: clamp(38px, 3.6vw, 76px); /* cabe na faixa livre entre os modelos (30–70%) */
    --hero-lead-size: clamp(18px, 1.4vw, 22px);
    /* 34vw mantém os rostos inteiros acima da pílula de armações */
    --hero-band-h: max(420px, 34vw);
    --frame-w: 168px;
    --frame-ratio: 1.68;                        /* 59,52% */
    --split-title-size: clamp(30px, 2.85vw, 41px);
  }
}
@media (min-width: 1200px) {
  :root {
    --text-h1: 65px;
    --section-space: 100px;
  }
}
@media (min-width: 1440px) {
  :root {
    --container-gutter: 80px;
  }
}


/* 3. Base ------------------------------------------------------------------
   Reset mínimo com especificidade zero (:where) para não brigar com as
   próximas seções. */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-none);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(h1, h2, h3, h4, p, figure, ul, ol) {
  margin: 0;
}
:where(ul, ol)[role="list"] {
  padding: 0;
  list-style: none;
}
:where(img, svg, picture) {
  display: block;
  max-width: 100%;
}
:where(a) {
  color: inherit;
}
:where(button) {
  font: inherit;
  color: inherit;
}
:where(a, button) {
  -webkit-tap-highlight-color: transparent;
}
:where(a, button, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}


/* 4. Layout e utilitários -------------------------------------------------- */
.oc-container {
  width: calc(100% - 2 * var(--container-gutter));
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Estrutura pronta para as próximas seções (marcas, lentes, consultoria…) */
.oc-section {
  padding-block: var(--section-space);
}
.oc-section--alt {
  background: var(--color-bg-alt);
}
.oc-section--dark {
  background: var(--color-primary);
  color: var(--color-white);
}

.oc-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.oc-skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: 12px 18px;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--duration-base) var(--ease-in-out);
}
.oc-skip-link:focus {
  transform: none;
}

.oc-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Ícones de traço fino (0,7–1px), cantos vivos, sem preenchimento */
.oc-icon {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

/* ® de marcas (Varilux, Crizal, Transitions) e chamada de nota: menores e
   elevados, sem alterar a entrelinha */
.oc-reg,
.oc-note {
  font-size: .62em;
  line-height: 0;
  vertical-align: .55em;
}
.oc-reg {
  margin-left: .03em;
}


/* 5. Componentes ----------------------------------------------------------- */

/* Botões — retos, sem sombra, rótulo Lausanne 600 (style guide § Botões) */
.oc-btn {
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-height);
  min-width: var(--btn-min-width);
  padding: 0 var(--btn-padding-x);
  border: 0;
  border-radius: var(--radius-none);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition:
    background-color var(--duration-fast) var(--ease-in-out),
    color var(--duration-fast) var(--ease-in-out),
    transform var(--duration-base) var(--ease-in-out);
}
.oc-btn__icon {
  width: 18px;
  height: 18px;
  transition: transform var(--duration-slow) var(--ease-out-quart);
}

/* Acento (conversão): Vermelho Classic com varredura em Vermelho hover */
.oc-btn--accent {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-white);
  padding-inline: 24px;
}
.oc-btn--accent::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-accent-hover);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .55s var(--ease-out-quart);
}
.oc-btn--accent:active {
  transform: translateY(1px);
}
@media (hover: hover) {
  .oc-btn--accent:hover::before {
    transform: scaleX(1);
    transform-origin: left center;
  }
  .oc-btn--accent:hover .oc-btn__icon {
    transform: rotate(-8deg) scale(1.08);
  }
}

/* Secundário: link sublinhado (.btn--secondary) com seta longa do tema.
   Fora da HERO por ora; reservado para "Como chegar à loja" na seção de localização. */
.oc-btn--link {
  min-width: 0;
  padding-inline: 0;
  gap: var(--space-3);
}
.oc-btn__label {
  position: relative;
  padding-block: 3px;
}
.oc-btn--link .oc-btn__label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}
.oc-btn__arrow {
  width: 34px;
  height: 11px;
  transition: transform var(--duration-link) var(--ease-standard);
}
@media (hover: hover) {
  .oc-btn--link:hover .oc-btn__label::after {
    animation: oc-change-width var(--duration-underline) ease forwards;
  }
  .oc-btn--link:hover .oc-btn__arrow {
    transform: translate3d(6px, 0, 0);
  }
}
@keyframes oc-change-width {
  0% { width: 100%; }
  50% { width: 0; }
  to { width: 100%; }
}

/* Botão redondo de ícone (controles do carrossel, ações compactas) */
.oc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition:
    border-color var(--duration-base) var(--ease-in-out),
    transform var(--duration-base) var(--ease-in-out);
}
.oc-icon-btn .oc-icon {
  width: 18px;
  height: 18px;
}
.oc-icon-btn:active {
  transform: scale(.94);
}
@media (hover: hover) {
  .oc-icon-btn:hover {
    border-color: var(--color-primary);
  }
}


/* 6. Header ---------------------------------------------------------------- */
.oc-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  transition:
    transform var(--duration-base) ease,
    opacity .6s var(--ease-out-quart);
}
.oc-header.is-hidden {
  transform: translateY(-100%);
}
.oc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--header-h);
}

/* Logo oficial (PNG transparente, proporção 959 × 439). A altura acompanha o
   header; a largura segue a proporção. */
.oc-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  transition: opacity var(--duration-base) var(--ease-in-out);
}
.oc-logo__img {
  width: auto;
  height: var(--logo-h);
}
@media (hover: hover) {
  .oc-logo:hover {
    opacity: .85;
  }
}

.oc-header__side {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.oc-header__meta {
  display: none;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  line-height: var(--leading-base);
}
.oc-header__meta .oc-icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

/* WhatsApp do header: ícone redondo no mobile, botão Grafite a partir de 768px */
.oc-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-btn-small);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-in-out),
    border-color var(--duration-fast) var(--ease-in-out);
}
.oc-header__cta .oc-icon {
  width: 18px;
  height: 18px;
}
.oc-header__cta-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .oc-header__cta {
    width: auto;
    padding: 0 var(--space-3) 0 14px;
    border-color: var(--color-primary);
    border-radius: var(--radius-none);
    background: var(--color-primary);
    color: var(--color-white);
  }
  .oc-header__cta-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
  }
  .oc-header__cta:hover {
    border-color: var(--color-primary-hover);
    background: var(--color-primary-hover);
  }
}
@media (min-width: 1000px) {
  .oc-header__meta {
    display: inline-flex;
  }
}


/* 7. HERO ------------------------------------------------------------------
   Mobile e tablet (<1000): título → foto → armações (pílula sobre a borda da
   foto) → subtítulo → CTA. O palco e a intro usam display: contents para que
   o subtítulo, que no HTML vem logo após o título, desça para depois das
   armações.
   Desktop (≥1000): título e subtítulo sobre o espaço livre entre os modelos;
   a pílula apoiada na borda inferior da foto; CTA logo abaixo. */
.oc-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  padding-bottom: var(--section-space);
}
.oc-hero__stage,
.oc-hero__intro {
  display: contents;
}

.oc-hero__title {
  order: 1;
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 11em;                 /* garante as três linhas */
  margin: var(--space-6) var(--container-gutter) var(--space-5);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--hero-title-size);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-none);
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

.oc-hero__media {
  order: 2;
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: calc(-1 * var(--space-5)) 0 0;
  background: var(--color-stone);
  /* Recorte da foto mobile: de 7% a 91% da altura original. Os dois rostos
     ficam inteiros acima da pílula e o fundo claro se dissolve no Alabastro. */
  aspect-ratio: 640 / 960;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 11%);
  mask-image: linear-gradient(180deg, transparent 0, #000 11%);
}
.oc-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}

/* Cortina: dois painéis Alabastro que se abrem do centro para as bordas */
.oc-hero__curtain {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.oc-hero__curtain::before,
.oc-hero__curtain::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.5%;
  background: var(--color-bg);
  transition: transform var(--duration-curtain) var(--ease-curtain) .1s;
}
.oc-hero__curtain::before {
  left: 0;
  transform-origin: 0 50%;
}
.oc-hero__curtain::after {
  right: 0;
  transform-origin: 100% 50%;
}

/* Subtítulo: quatro linhas curtas, abertas por um fio fino */
.oc-hero__lead {
  order: 4;
  align-self: center;
  margin: var(--space-5) var(--container-gutter) 0;
  color: var(--color-primary);
  font-size: var(--hero-lead-size);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  text-align: center;
}
.oc-hero__lead::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin: 0 auto var(--space-4);
  background: currentColor;
  opacity: .4;
}

/* CTA: ação dominante, logo abaixo das armações */
.oc-hero__action {
  order: 5;
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}
.oc-hero__cta {
  width: 100%;
}

/* Tablet */
@media (min-width: 768px) {
  .oc-hero__title {
    margin: var(--space-7) var(--container-gutter) var(--space-6);
  }
  .oc-hero__media {
    margin-top: 0;
    aspect-ratio: 12 / 5;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .oc-hero__img {
    object-position: 50% 22%;
  }
  .oc-hero__lead {
    margin-top: var(--space-6);
  }
  .oc-hero__cta {
    width: auto;
    padding-inline: var(--space-6);
  }
}

/* Desktop: título e subtítulo sobre a foto */
@media (min-width: 1000px) {
  .oc-hero {
    display: block;
  }
  .oc-hero__stage {
    display: block;
    position: relative;
    height: var(--hero-band-h);
  }
  .oc-hero__media {
    position: absolute;
    inset: 0;
    margin: 0;
    aspect-ratio: auto;
  }
  /* 10%: respiro acima do cabelo do modelo; os dois rostos acima da pílula */
  .oc-hero__img {
    object-position: 50% 10%;
  }
  /* véu Alabastro suave atrás do texto: legibilidade sem esconder a foto */
  .oc-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 32% 60% at 50% 44%, var(--color-bg-a55) 0%, var(--color-bg-a00) 100%);
    pointer-events: none;
  }
  /* coluna de 40vw = faixa livre entre os modelos (30%–70% da foto);
     termina na metade da pílula, para centralizar o texto na foto visível */
  .oc-hero__intro {
    position: absolute;
    top: 0;
    right: 0;
    bottom: calc(var(--pill-h) / 2);
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40vw;
    margin-inline: auto;
  }
  .oc-hero__title {
    margin: 0;
  }
  .oc-hero__lead {
    margin: var(--space-4) 0 0;
    color: var(--color-text);
  }
  .oc-hero__action {
    margin-top: var(--space-5);
  }
}


/* 8. Carrossel de armações -------------------------------------------------
   Pílula branca do tema (.featured-frames) apoiada na borda inferior da foto:
   letreiro contínuo, arrastar com mouse ou toque, setas e pausa dentro da
   própria pílula. No hover a armação cresce e as vizinhas desfocam, como no
   site original. */
.oc-frames {
  order: 3;
  position: relative;
  z-index: 3;
  margin-top: calc(var(--pill-h) / -2);
}
.oc-frames__pill {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--pill-h);
  padding-block: var(--pill-pad);
  overflow: hidden;
  border-radius: var(--radius-strip);
  background: var(--color-surface);
  box-shadow: var(--shadow-hairline);
}

/* Título: só para leitores de tela abaixo de 1000px */
.oc-frames__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.oc-frames__viewport {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.oc-frames__viewport:focus-visible {
  outline-offset: -3px;
}
.oc-frames.is-dragging .oc-frames__viewport {
  cursor: grabbing;
}
.oc-frames__track {
  display: flex;
  align-items: flex-start;
  gap: var(--frame-gap);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}
.oc-frame {
  position: relative;
  flex: 0 0 var(--frame-w);
  width: var(--frame-w);
  aspect-ratio: var(--frame-ratio);
  transition:
    transform var(--duration-slow) var(--ease-out-quart),
    filter var(--duration-base) var(--ease-in-out);
}
.oc-frame__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5px;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Controles dentro da ponta direita da pílula, separados por um fio */
.oc-frames__controls {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 var(--space-2);
}
.oc-frames__controls::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 36px;
  background: var(--color-line);
  transform: translateY(-50%);
}
.oc-frames .oc-icon-btn {
  width: 36px;
  height: 36px;
}
.oc-frames__nav {
  display: none;
}
.oc-frames__toggle .oc-icon--play,
.oc-frames.is-paused .oc-frames__toggle .oc-icon--pause {
  display: none;
}
.oc-frames.is-paused .oc-frames__toggle .oc-icon--play {
  display: block;
}

@media (min-width: 768px) {
  .oc-frames__nav {
    display: inline-flex;
  }
  .oc-frames__controls {
    padding: 0 22px 0 var(--space-3);
  }
  .oc-frames__controls::before {
    height: 44px;
  }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .oc-frames:not(.is-dragging) .oc-frames__track:hover .oc-frame:hover {
    z-index: 2;
    transform: scale(1.2);
  }
  .oc-frames:not(.is-dragging) .oc-frames__track:hover .oc-frame:not(:hover) {
    filter: blur(3px);
  }
}
@media (min-width: 1000px) {
  /* rótulo visível na ponta esquerda da pílula, espelhando os controles */
  .oc-frames__title {
    position: relative;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0 var(--space-4) 0 36px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: nowrap;
    color: var(--color-text);
    font-size: 13px;
    font-weight: var(--weight-semibold);
    line-height: 1.3;
  }
  .oc-frames__title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 44px;
    background: var(--color-line);
    transform: translateY(-50%);
  }
}


/* 9. Faixas divididas (seções 3–6) -----------------------------------------
   Estrutura das dobras de produto da LP Pátio Savassi: painel de conteúdo +
   fotografia de meia tela, alternando de lado (.oc-split--flip). Aqui o
   painel usa os neutros do design system (Alabastro, Alabastro alt, Grafite),
   a foto entra por máscara na cor do painel e tem parallax de ponteiro
   discreto. Abaixo de 1000px vira coluna, com a foto no topo. */
.oc-split {
  --split-bg: var(--color-bg);
  --split-fill: var(--color-bg);          /* cor sólida da máscara de entrada */
  --split-fg: var(--color-text);
  --split-text: var(--color-primary);
  --split-muted: var(--color-text-muted);
  --split-line: var(--color-line);
  --split-rule: var(--color-text-a40);
  --split-tint: var(--color-surface);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--split-bg);
  color: var(--split-fg);
}
.oc-split--alt {
  --split-bg: var(--color-bg-alt);
  --split-fill: var(--color-bg-alt);
  --split-line: var(--color-control);
}
.oc-split--dark {
  --split-bg: var(--gradient-graphite);
  --split-fill: var(--color-primary);
  --split-fg: var(--color-white);
  --split-text: rgba(255, 255, 255, .8);
  --split-muted: rgba(255, 255, 255, .62);
  --split-line: rgba(255, 255, 255, .16);
  --split-rule: rgba(255, 255, 255, .45);
  --split-tint: rgba(255, 255, 255, .05);
}
/* foco visível também sobre o Grafite */
.oc-split--dark :focus-visible {
  outline-color: var(--color-white);
}

/* ---- painel da fotografia */
.oc-split__media {
  position: relative;
  order: -1;                      /* no celular, a foto vem antes do texto */
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-stone);
}
/* camada 6% maior que o painel: a sobra é o curso do parallax */
.oc-split__layer {
  position: absolute;
  inset: -3%;
  display: block;
  transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px), 0);
  transition: transform .7s var(--ease-out-quart);
}
.oc-split__img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: transform 1.8s var(--ease-out-quart);
}
/* máscara na cor do painel: recolhe a partir da emenda com o texto */
.oc-split__cover {
  --cover-out: scaleY(0);
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--split-fill);
  transform-origin: 50% 0;
}

/* ---- painel de conteúdo */
.oc-split__copy {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(48px, 12vw, 64px) var(--container-gutter);
}
.oc-split__inner {
  width: 100%;
  max-width: 580px;
}
.oc-split__eyebrow {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-4);
  color: var(--split-muted);
  font-size: var(--text-h4-secondary);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-base);
}
/* índice da série (01–04) em Monarch, seguido de um fio fino */
.oc-split__index {
  display: inline-flex;
  align-items: center;
  color: var(--split-fg);
  font-family: var(--font-display);
  font-size: 1.15em;
  font-weight: var(--weight-regular);
  line-height: 1;
}
.oc-split__index::after {
  content: "";
  width: 28px;
  height: 1px;
  margin: 0 12px;
  background: var(--split-rule);
}
.oc-split__title {
  max-width: 14em;
  color: var(--split-fg);
  font-family: var(--font-display);
  font-size: var(--split-title-size);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-none);
  text-transform: uppercase;
  text-wrap: balance;
}
.oc-split__subtitle {
  margin-top: var(--space-3);
  color: var(--split-fg);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-light);
  line-height: 1.35;
}
.oc-split__rule {
  display: block;
  width: 40px;
  height: 1px;
  margin: var(--space-5) 0;
  background: var(--split-rule);
  transform-origin: 0 50%;
}
.oc-split__text {
  max-width: 34em;
  color: var(--split-text);
  font-size: 16px;
  font-weight: var(--weight-light);
  line-height: 1.65;
}
.oc-split__text p + p {
  margin-top: var(--space-3);
}
/* Destaques do texto: a Lausanne só tem 300 e 600, então o negrito é
   explícito (o "bolder" padrão cairia em 400 e voltaria para 300). A cor
   cheia do painel reforça o trecho: grafite no claro, branco no escuro. */
.oc-split__text strong {
  color: var(--split-fg);
  font-weight: var(--weight-semibold);
}

/* box de destaque (campanha Varilux® em Dobro) — reto, com fio fino e
   compacto: respiro vertical curto para não pesar entre o texto e o botão */
.oc-split__highlight {
  max-width: 34em;
  margin-top: var(--space-4);
  padding: 12px var(--space-4) 14px;
  border: 1px solid var(--split-line);
  background: var(--split-tint);
}
.oc-split__highlight-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  color: var(--split-fg);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-base);
}
.oc-split__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}
.oc-split__highlight-text {
  color: var(--split-text);
  font-size: 15px;
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
}

/* linha sazonal de presente (Ray-Ban Meta) */
.oc-split__gift {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 34em;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--split-line);
  color: var(--split-fg);
  font-size: 15px;
  line-height: 1.5;
}
.oc-split__gift[hidden] {
  display: none;
}
.oc-split__gift .oc-icon {
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.oc-split__cta {
  width: 100%;
  margin-top: var(--space-6);
}

/* Tablet: ainda em coluna, foto mais panorâmica */
@media (min-width: 768px) {
  .oc-split__media {
    aspect-ratio: 16 / 9;
  }
  .oc-split__copy {
    justify-content: center;
    padding: var(--space-8) var(--container-gutter);
  }
  .oc-split__inner {
    max-width: 640px;
  }
  .oc-split__text {
    font-size: 17px;
  }
  .oc-split__cta {
    width: auto;
    padding-inline: var(--space-6);
  }
}

/* Desktop: faixa dividida ao meio; o texto alinha com a grade do container */
@media (min-width: 1000px) {
  .oc-split {
    flex-direction: row;
    min-height: clamp(600px, 46vw, 780px);
  }
  .oc-split--flip {
    flex-direction: row-reverse;
  }
  .oc-split__media {
    order: 0;
    flex: 0 0 50%;
    max-width: 50%;
    aspect-ratio: auto;
  }
  .oc-split__cover {
    --cover-out: scaleX(0);
    transform-origin: 100% 50%;
  }
  .oc-split--flip .oc-split__cover {
    transform-origin: 0 50%;
  }
  /* 50% = metade da faixa: a borda externa do texto cai na borda do container */
  .oc-split__copy {
    flex: 0 0 50%;
    max-width: 50%;
    justify-content: flex-start;
    padding-block: var(--space-9);
    padding-left: max(var(--container-gutter), calc(50% - var(--container-max) / 2));
    padding-right: clamp(40px, 5vw, 96px);
  }
  .oc-split--flip .oc-split__copy {
    padding-left: clamp(40px, 5vw, 96px);
    padding-right: max(var(--container-gutter), calc(50% - var(--container-max) / 2));
  }
  .oc-split__inner {
    max-width: 580px;
  }
  .oc-split__subtitle {
    font-size: clamp(18px, 1.5vw, 22px);
  }
}


/* 10. Carrossel de marcas ------------------------------------------------
   Releitura do "Shop by Brand" do tema (.brands / .brands-card): duas linhas
   de cards de borda a borda, cada uma andando para um lado no ritmo do
   letreiro do tema (~30px/s, ver initBrands em main.js). O logo vem aplicado
   na imagem. No celular o card é vertical (0.9), para as fotos verticais com
   o logo embaixo; a partir de 768px volta ao formato horizontal do tema.
   A partir de 1200px, o hover mantém a marca apontada nítida e desfoca as
   vizinhas. */
.oc-brands {
  --brand-w: 170px;                 /* .brands-card: 170 → 220 → 325 → 20vw */
  --brand-h: 189px;                 /* celular: vertical 0.9 · tablet: 135 · desktop: 172 */
  --brand-gap: 6px;                 /* entre cards e entre as duas linhas */
  --brands-title-size: 24px;        /* .h2 do design system: 24 → 35 → 40 */
}
.oc-brands__title {
  margin-bottom: var(--space-4);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--brands-title-size);
  font-weight: var(--weight-regular);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-none);
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}
.oc-brands__rows {
  display: grid;
  gap: var(--brand-gap);
}
.oc-brands__row {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.oc-brands__row.is-dragging {
  cursor: grabbing;
}
.oc-brands__track {
  display: flex;
  gap: var(--brand-gap);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}
.oc-brands__item {
  flex: 0 0 var(--brand-w);
}
.oc-brand {
  position: relative;
  display: block;
  width: var(--brand-w);
  height: var(--brand-h);
  overflow: hidden;
  background: var(--color-stone);
}
.oc-brand picture {
  width: 100%;
  height: 100%;
}
.oc-brand__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  transition: filter var(--duration-slow) var(--ease-in-out);
}

/* Pausar/retomar o movimento (WCAG 2.2.2), centralizado sob as linhas */
.oc-brands__controls {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}
.oc-brands__toggle .oc-icon--play,
.oc-brands.is-paused .oc-brands__toggle .oc-icon--pause {
  display: none;
}
.oc-brands.is-paused .oc-brands__toggle .oc-icon--play {
  display: block;
}

@media (min-width: 768px) {
  .oc-brands {
    --brand-w: 220px;
    --brand-h: 135px;               /* altura do .brands-card menos o respiro de 4px */
  }
  .oc-brands__title {
    margin-bottom: var(--space-5);
  }
  .oc-brands__controls {
    margin-top: var(--space-5);
  }
}
@media (min-width: 1000px) {
  .oc-brands {
    --brand-w: 325px;
    --brand-h: 172px;
    --brands-title-size: 35px;
  }
  .oc-brands__title {
    margin-bottom: var(--space-6);
  }
}
@media (min-width: 1200px) {
  .oc-brands {
    --brands-title-size: 40px;
  }
}
@media (min-width: 1800px) {
  .oc-brands {
    --brand-w: 20vw;
    --brand-h: calc(11vw - 8px);
  }
}
/* Desfoque das vizinhas. A imagem fica 10% maior que o card para a borda
   desfocada não aparecer (como .brands-card__image-wrapper do tema). */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .oc-brand__img {
    transform: scale(1.1);
  }
  .oc-brands:not(.is-dragging) .oc-brands__rows:hover .oc-brand:not(:hover) .oc-brand__img {
    filter: blur(10px);
  }
}


/* 11. Por que a Optical Classic --------------------------------------------
   Releitura da "Proposta de valor" do tema (.value-props): faixa Grafite com
   os argumentos da marca. Desktop: texto à esquerda e mosaico das fotos da
   loja à direita, com o texto centralizado na altura do mosaico. Celular:
   título → mosaico → texto → botão. Credenciais em três colunas (≥768px) e
   compromisso final com fio vermelho, o único destaque em cor da faixa. */
.oc-about {
  --about-fg: var(--color-white);
  --about-text: rgba(255, 255, 255, .8);
  --about-muted: rgba(255, 255, 255, .62);
  --about-line: rgba(255, 255, 255, .16);
  --about-rule: rgba(255, 255, 255, .45);
  background: var(--gradient-graphite);
  color: var(--about-fg);
}
/* foco visível também sobre o Grafite */
.oc-about :focus-visible {
  outline-color: var(--color-white);
}

/* ---- cabeçalho: rótulo com fio, título e fio de abertura */
.oc-about__eyebrow {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-4);
  color: var(--about-muted);
  font-size: var(--text-h4-secondary);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-base);
}
.oc-about__eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 1px;
  margin-right: 12px;
  background: var(--about-rule);
}
.oc-about__title {
  max-width: 14em;
  color: var(--about-fg);
  font-family: var(--font-display);
  font-size: var(--split-title-size);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-none);
  text-transform: uppercase;
  text-wrap: balance;
}
.oc-about__rule {
  display: block;
  width: 40px;
  height: 1px;
  margin-top: var(--space-5);
  background: var(--about-rule);
  transform-origin: 0 50%;
}

/* ---- mosaico: 2 colunas × 3 linhas; fachada e recepção ocupam duas linhas,
   intercaladas com as fotos horizontais (Ray-Ban e Prada) */
.oc-about__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 6px;
  max-width: 600px;
  aspect-ratio: 8 / 9;
  margin-block: var(--space-6);
}
.oc-about__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
}
.oc-about__photo--fachada {
  grid-area: 1 / 1 / 3 / 2;
}
.oc-about__photo--rayban {
  grid-area: 1 / 2 / 2 / 3;
}
.oc-about__photo--recepcao {
  grid-area: 2 / 2 / 4 / 3;
}
.oc-about__photo--prada {
  grid-area: 3 / 1 / 4 / 2;
}
.oc-about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: transform 1.2s var(--ease-out-quart);
}

/* ---- texto */
.oc-about__text {
  max-width: 34em;
  color: var(--about-text);
  font-size: 16px;
  font-weight: var(--weight-light);
  line-height: 1.65;
}
.oc-about__text p + p {
  margin-top: var(--space-3);
}

/* ---- credenciais: no celular, linhas (valor + rótulo); a partir de 768px,
   três colunas separadas por fios */
.oc-about__facts {
  display: grid;
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--about-line);
}
.oc-about__fact {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--about-line);
}
.oc-about__fact-value {
  display: flex;
  flex: 0 0 72px;
  align-items: center;
  color: var(--about-fg);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--weight-regular);
  line-height: 1;
}
.oc-about__fact-icon {
  width: 32px;
  height: 32px;
}
.oc-about__fact-label {
  color: var(--about-text);
  font-size: 14px;
  font-weight: var(--weight-light);
  line-height: 1.4;
}

/* ---- compromisso: a frase-assinatura da marca */
.oc-about__pledge {
  max-width: 30em;
  margin-top: var(--space-6);
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-accent);
  color: var(--about-fg);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
}
.oc-about__cta {
  width: 100%;
  margin-top: var(--space-6);
}

@media (min-width: 768px) {
  .oc-about__text {
    font-size: 17px;
  }
  .oc-about__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--about-line);
  }
  .oc-about__fact {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) var(--space-4) 0;
    border-bottom: 0;
  }
  .oc-about__fact + .oc-about__fact {
    padding-left: var(--space-4);
    border-left: 1px solid var(--about-line);
  }
  .oc-about__fact-value {
    flex: none;
    min-height: 40px;
    font-size: 40px;
  }
  .oc-about__fact-icon {
    width: 38px;
    height: 38px;
  }
  .oc-about__cta {
    width: auto;
    padding-inline: var(--space-6);
  }
}

/* Desktop: texto (cabeçalho + corpo) numa coluna, centralizado na altura do
   mosaico pelas linhas flexíveis de cima e de baixo */
@media (min-width: 1000px) {
  .oc-about__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      ".    gallery"
      "head gallery"
      "body gallery"
      ".    gallery";
    column-gap: clamp(48px, 6vw, 112px);
  }
  .oc-about__head {
    grid-area: head;
  }
  .oc-about__body {
    grid-area: body;
    padding-top: var(--space-5);
  }
  .oc-about__gallery {
    grid-area: gallery;
    align-self: center;
    max-width: none;
    margin: 0;
  }
  .oc-about__pledge {
    font-size: clamp(18px, 1.5vw, 22px);
  }
}
@media (hover: hover) and (pointer: fine) {
  .oc-about__photo:hover .oc-about__img {
    transform: scale(1.04);
  }
}

/* o fio de abertura se desenha da esquerda para a direita */
.js .oc-about__rule[data-reveal] {
  transform: scaleX(0);
}
.is-ready .oc-about__rule[data-reveal].is-in {
  transform: none;
}


/* 12. Depoimentos ----------------------------------------------------------
   Avaliações reais do Google em cards brancos, sem sombra nem borda (regra
   de cards do design system), sobre o Alabastro alt. Cabeçalho com a nota
   em destaque: o "5,0" em Monarch e as estrelas em Vermelho, o único ponto
   de cor da faixa; nos cards, estrelas em Grafite. Abaixo de 1000px os cards
   correm num carrossel nativo (scroll-snap) de borda a borda; no desktop
   viram um mosaico de 3 colunas. */
.oc-reviews {
  --review-gap: 12px;
}

/* ---- cabeçalho: rótulo, título, subtítulo + nota */
.oc-reviews__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.oc-reviews__eyebrow {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-h4-secondary);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-base);
}
.oc-reviews__eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 1px;
  margin-right: 12px;
  background: var(--color-text-a40);
}
.oc-reviews__title {
  max-width: 14em;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--split-title-size);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-none);
  text-transform: uppercase;
  text-wrap: balance;
}
.oc-reviews__subtitle {
  max-width: 32em;
  margin-top: var(--space-3);
  color: var(--color-primary);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
}

.oc-reviews__score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.oc-reviews__rating {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.oc-reviews__rating-value {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: var(--weight-regular);
  line-height: 1;
}
.oc-reviews__rating-detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.oc-reviews__stars {
  display: flex;
  gap: 2px;
  color: var(--color-accent);
}
.oc-reviews__stars .oc-star {
  width: 16px;
  height: 16px;
}
.oc-reviews__count {
  color: var(--color-text);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-base);
}
/* link de texto com a seta longa do tema, que avança no hover */
.oc-reviews__more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-base);
  text-decoration: none;
}
.oc-reviews__more-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 11px;
  transition: transform var(--duration-slow) var(--ease-out-quart);
}
@media (hover: hover) {
  .oc-reviews__more:hover .oc-reviews__more-icon {
    transform: translateX(5px);
  }
}

/* estrela cheia (exceção aos ícones de traço: nota precisa ser lida de relance) */
.oc-star {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ---- trilho: carrossel nativo de borda a borda; o recuo lateral alinha o
   primeiro card com o container e o próximo aparece na borda */
.oc-reviews__track {
  display: flex;
  gap: var(--review-gap);
  margin: 0;
  padding: 4px var(--container-gutter) var(--space-2);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container-gutter);
  scrollbar-width: none;
}
.oc-reviews__track::-webkit-scrollbar {
  display: none;
}
.oc-reviews__item {
  display: flex;
  flex: 0 0 min(84%, 360px);
  scroll-snap-align: start;
}

/* ---- card */
.oc-review {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: var(--color-surface);
}
.oc-review__stars {
  display: flex;
  gap: 2px;
  color: var(--color-primary);
}
.oc-review__quote {
  margin: 0;
  color: var(--color-text);
  font-size: 15px;
  font-weight: var(--weight-light);
  line-height: 1.6;
}
.oc-review__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}
/* foto do perfil do Google (<img>); sem foto, a inicial do nome (<span>) */
.oc-review__avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-size: 18px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  object-fit: cover;
}
.oc-review__who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.oc-review__name {
  color: var(--color-text);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-base);
}
.oc-review__meta {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: var(--leading-base);
}

@media (min-width: 600px) {
  .oc-reviews__item {
    flex-basis: calc((100% - var(--review-gap)) / 2.15);
  }
}
@media (min-width: 768px) {
  .oc-reviews {
    --review-gap: 16px;
  }
  .oc-review__quote {
    font-size: 16px;
  }
}
/* Desktop: cabeçalho em duas pontas e mosaico de 3 colunas no container */
@media (min-width: 1000px) {
  .oc-reviews {
    --review-gap: 20px;
  }
  .oc-reviews__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-7);
  }
  .oc-reviews__score {
    flex: 0 0 auto;
    align-items: flex-end;
  }
  .oc-reviews__rating-value {
    font-size: 56px;
  }
  .oc-reviews__track {
    display: block;
    width: calc(100% - 2 * var(--container-gutter));
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 0;
    overflow: visible;
    columns: 3;
    column-gap: var(--review-gap);
  }
  .oc-reviews__item {
    display: block;
    margin-bottom: var(--review-gap);
    break-inside: avoid;
  }
  .oc-review {
    padding: var(--space-6) var(--space-6) var(--space-5);
  }
}


/* 13. Perguntas frequentes -------------------------------------------------
   Sanfona nativa (<details>/<summary>): funciona sem JS e com teclado. Fios
   finos entre as perguntas; o "+" num círculo vira "×" ao abrir. Onde o
   navegador suporta ::details-content, a resposta abre deslizando. */
.oc-faq {
  interpolate-size: allow-keywords;
}
.oc-faq__title {
  max-width: 14em;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--split-title-size);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-none);
  text-transform: uppercase;
  text-wrap: balance;
}
.oc-faq__help {
  margin-top: var(--space-4);
  color: var(--color-primary);
  font-size: 15px;
  font-weight: var(--weight-light);
  line-height: 1.5;
}
.oc-faq__help a {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.oc-faq__list {
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.oc-faq__item {
  border-bottom: 1px solid var(--color-border);
}
.oc-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 22px 0;
  color: var(--color-text);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.oc-faq__question::-webkit-details-marker {
  display: none;
}
.oc-faq__question:focus-visible {
  outline-offset: 4px;
}
/* "+" desenhado com dois fios; gira 45° e vira "×" */
.oc-faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  transition:
    transform var(--duration-slow) var(--ease-out-quart),
    border-color var(--duration-base) var(--ease-in-out);
}
.oc-faq__icon::before,
.oc-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1px;
  background: var(--color-text);
  transform: translate(-50%, -50%);
}
.oc-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.oc-faq__item[open] .oc-faq__icon {
  transform: rotate(45deg);
}
@media (hover: hover) {
  .oc-faq__question:hover .oc-faq__icon {
    border-color: var(--color-primary);
  }
}
.oc-faq__answer {
  max-width: 40em;
  padding: 0 52px 24px 0;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: var(--weight-light);
  line-height: 1.65;
}
/* abertura deslizante (Chrome/Edge); nos demais, abre na hora */
.oc-faq__item::details-content {
  block-size: 0;
  overflow-y: clip;
  transition:
    block-size .45s var(--ease-out-quart),
    content-visibility .45s allow-discrete;
}
.oc-faq__item[open]::details-content {
  block-size: auto;
}

@media (min-width: 768px) {
  .oc-faq__question {
    font-size: 17px;
  }
  .oc-faq__answer {
    font-size: 17px;
  }
}
/* Desktop: título à esquerda, perguntas à direita */
@media (min-width: 1000px) {
  .oc-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(48px, 7vw, 120px);
    align-items: start;
  }
  .oc-faq__list {
    margin-top: 0;
  }
  .oc-faq__question {
    padding: 26px 0;
    font-size: 18px;
  }
}


/* 14. Visite-nos -----------------------------------------------------------
   Fechamento da página em Grafite: convite, endereço, telefone, horários,
   botão de WhatsApp e "Como chegar" (a seta longa do tema, reservada para
   este link). Desktop: texto à esquerda e mapa à direita, na altura do
   texto. Celular: título → mapa → informações → botões. */
.oc-visit {
  --visit-fg: var(--color-white);
  --visit-text: rgba(255, 255, 255, .8);
  --visit-muted: rgba(255, 255, 255, .62);
  --visit-line: rgba(255, 255, 255, .16);
  --visit-rule: rgba(255, 255, 255, .45);
  background: var(--gradient-graphite);
  color: var(--visit-fg);
}
.oc-visit :focus-visible {
  outline-color: var(--color-white);
}

/* ---- cabeçalho */
.oc-visit__eyebrow {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-4);
  color: var(--visit-muted);
  font-size: var(--text-h4-secondary);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-base);
}
.oc-visit__eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 1px;
  margin-right: 12px;
  background: var(--visit-rule);
}
.oc-visit__title {
  max-width: 14em;
  color: var(--visit-fg);
  font-family: var(--font-display);
  font-size: var(--split-title-size);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-none);
  text-transform: uppercase;
  text-wrap: balance;
}
.oc-visit__lead {
  max-width: 30em;
  margin-top: var(--space-4);
  color: var(--visit-text);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
}

/* ---- mapa */
.oc-visit__map {
  position: relative;
  margin-block: var(--space-6);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, .05);
}
.oc-visit__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- informações: ícone de traço + rótulo + valor, entre fios */
.oc-visit__info {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--visit-line);
}
.oc-visit__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: 18px 0;
  border-bottom: 1px solid var(--visit-line);
}
.oc-visit__icon {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--visit-muted);
}
.oc-visit__label {
  margin-bottom: 6px;
  color: var(--visit-muted);
  font-size: var(--text-h4-secondary);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-base);
}
.oc-visit__value {
  color: var(--visit-fg);
  font-size: 16px;
  font-style: normal;
  font-weight: var(--weight-light);
  line-height: 1.55;
}
.oc-visit__value a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.oc-visit__hours {
  display: grid;
  gap: 4px;
  margin: 0;
}
.oc-visit__hours div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 300px;
  font-size: 16px;
  font-weight: var(--weight-light);
  line-height: 1.55;
}
.oc-visit__hours dt {
  color: var(--visit-text);
}
.oc-visit__hours dd {
  margin: 0;
  color: var(--visit-fg);
  font-variant-numeric: tabular-nums;
}

/* ---- ações */
.oc-visit__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.oc-visit__cta {
  width: 100%;
}
.oc-visit__route {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-block: var(--space-2);
  color: var(--visit-fg);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-base);
  text-decoration: none;
}
.oc-visit__route-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 11px;
  transition: transform var(--duration-slow) var(--ease-out-quart);
}
@media (hover: hover) {
  .oc-visit__route:hover .oc-visit__route-icon {
    transform: translateX(5px);
  }
}

@media (min-width: 768px) {
  .oc-visit__actions {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }
  .oc-visit__cta {
    width: auto;
    padding-inline: var(--space-6);
  }
}
/* Desktop: texto em duas linhas da grade, mapa ocupando as duas à direita */
@media (min-width: 1000px) {
  .oc-visit__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "head map"
      "body map";
    column-gap: clamp(48px, 6vw, 112px);
  }
  .oc-visit__head {
    grid-area: head;
  }
  .oc-visit__body {
    grid-area: body;
    padding-top: var(--space-6);
  }
  .oc-visit__map {
    grid-area: map;
    min-height: 460px;
    margin: 0;
    aspect-ratio: auto;
  }
}


/* 15. Rodapé ---------------------------------------------------------------
   Simples, sobre o Alabastro: logo e contato numa linha (empilhados e
   centralizados no celular); abaixo de um fio, direitos e "voltar ao topo". */
.oc-footer {
  padding: var(--section-space) 0 var(--space-5);
  background: var(--color-bg);
  color: var(--color-text);
}
.oc-footer__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  text-align: center;
}
.oc-footer__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--color-primary);
  font-size: 14px;
  font-style: normal;
  font-weight: var(--weight-light);
  line-height: 1.5;
}
.oc-footer__info a {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
@media (hover: hover) {
  .oc-footer__info a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}
.oc-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.oc-footer__copy {
  color: var(--color-text-muted);
  font-size: var(--text-small);
  line-height: 1.4;
}
/* direitos em cima; razão social, CNPJ e política de privacidade embaixo */
.oc-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.oc-footer__copy a {
  color: var(--color-text);
  text-underline-offset: 3px;
}
/* chevron do carrossel girado para cima */
.oc-footer__top .oc-icon {
  transform: rotate(-90deg);
}

@media (min-width: 768px) {
  .oc-footer__main {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  .oc-footer__info {
    align-items: flex-end;
    text-align: right;
  }
}

/* âncoras (voltar ao topo, logo) rolam suave; desligado com "reduzir movimento" */
@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}


/* 16. Movimento ------------------------------------------------------------
   Os estados iniciais só existem com JS ativo (classe .js no <html>); a
   classe .is-ready dispara a entrada. Só transform e opacity. */

/* Entrada da HERO */
.js .oc-header {
  opacity: 0;
}
.is-ready .oc-header {
  opacity: 1;
}

.js [data-intro] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
.is-ready [data-intro] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--duration-entrance) var(--ease-out-quart) var(--d, 0s),
    transform var(--duration-entrance) var(--ease-out-quart) var(--d, 0s);
}

/* Título linha a linha, cada uma subindo por trás de uma máscara.
   A máscara é estendida para cima (acentos) e o deslocamento esconde tudo. */
.oc-word {
  display: inline-block;
  clip-path: inset(-.3em -.1em 0 -.1em);
}
.oc-word__inner {
  display: inline-block;
}
.js .oc-word__inner {
  transform: translate3d(0, 130%, 0);
}
.is-ready .oc-word__inner {
  transform: none;
  transition: transform 1.1s var(--ease-out-quart) calc(.3s + var(--i, 0) * 120ms);
}

/* Fio do subtítulo se desenha a partir do centro */
.js .oc-hero__lead::before {
  transform: scaleX(0);
}
.is-ready .oc-hero__lead::before {
  transform: none;
  transition: transform 1s var(--ease-out-quart) .9s;
}

/* Foto: cortina abre do centro e a imagem assenta (scale 1.06 → 1) */
.js .oc-hero__curtain {
  display: block;
}
.js .oc-hero__img {
  transform: scale(1.06);
  transition: transform 2.4s var(--ease-out-quart) .1s;
}
.oc-hero__media.is-loaded .oc-hero__img {
  transform: none;
}
.oc-hero__media.is-loaded .oc-hero__curtain::before,
.oc-hero__media.is-loaded .oc-hero__curtain::after {
  transform: scaleX(0);
}

/* Revelação no scroll para as próximas seções (padrão AOS do tema: fade-up, uma vez) */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
}
.is-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .8s var(--ease-out-quart) calc(var(--d-base, 1s) + var(--d, 0s)),
    transform .8s var(--ease-out-quart) calc(var(--d-base, 1s) + var(--d, 0s));
}

/* Faixas divididas: a foto não sobe; quem anima é a máscara na cor do painel,
   que recolhe a partir da emenda, enquanto a imagem assenta (1.1 → 1) */
.js .oc-split__media[data-reveal] {
  opacity: 1;
  transform: none;
}
.js .oc-split__cover {
  display: block;
}
.js .oc-split__img {
  transform: scale(1.1);
}
.is-ready .oc-split__media.is-in .oc-split__cover {
  transform: var(--cover-out);
  transition: transform 1.3s var(--ease-curtain) var(--d-base, 1s);
}
.is-ready .oc-split__media.is-in .oc-split__img {
  transform: none;
  transition-delay: var(--d-base, 1s);
}
/* o fio abaixo do título se desenha da esquerda para a direita */
.js .oc-split__rule[data-reveal] {
  transform: scaleX(0);
}
.is-ready .oc-split__rule[data-reveal].is-in {
  transform: none;
}


/* 17. Movimento reduzido --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-intro],
  .js [data-reveal],
  .js .oc-word__inner,
  .js .oc-hero__img,
  .js .oc-hero__lead::before {
    opacity: 1 !important;
    transform: none !important;
  }
  .js .oc-hero__lead::before {
    opacity: .4 !important;
  }
  .oc-hero__curtain {
    display: none !important;
  }
  .js .oc-split__img,
  .js .oc-split__rule[data-reveal],
  .oc-split__layer {
    transform: none !important;
  }
  .oc-split__cover {
    display: none !important;
  }
}