/* ==========================================================================
   IC Store - Centro Avancado em Reparos
   Landing page / design system
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* superficies */
  --bg:          #050505;
  --bg-2:        #0a0a0a;
  --bg-3:        #0e0e10;
  --surface:     #111113;
  --surface-2:   #16161a;
  --line:        rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);

  /* texto */
  --text:    #f5f5f5;
  --text-2:  #c4c4c8;
  --muted:   #9a9aa2;
  --muted-2: #84848e;

  /* marca - turquesa extraido da logo oficial (#158F9F).
     --brand-cta e um tom mais fechado da mesma familia (tambem presente na
     logo) usado nos botoes: garante 4.85:1 com texto branco (WCAG AA). */
  --brand:        #158f9f;
  --brand-cta:    #0f7d8b;
  --brand-bright: #34c6d9;
  --brand-deep:   #0d5f6b;
  --brand-glow:   rgba(21, 143, 159, .38);

  /* madeira clara da loja real, usada com parcimonia */
  --wood: #d9be97;

  /* raios */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;

  /* sombras */
  --shadow:    0 1px 2px rgba(0, 0, 0, .6), 0 12px 32px rgba(0, 0, 0, .45);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .6), 0 32px 64px rgba(0, 0, 0, .55);

  /* layout */
  --gutter: 20px;
  --maxw:   1200px;
  --header-h: 68px;

  /* tipografia */
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* movimento */
  --ease:      cubic-bezier(.22, .68, .28, 1);
  --ease-soft: cubic-bezier(.16, .84, .34, 1);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

/* toque: sem atraso de duplo-toque e sem flash cinza do Android */
a, button, summary, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--brand); color: #fff; }

/* --- Utilitarios -------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: 16px;
  z-index: 200;
  background: var(--brand-cta);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  font-weight: 600;
}
.skip-link:focus { top: 12px; }

.section { padding-block: clamp(64px, 9vw, 116px); position: relative; }
.section--tint { background: var(--bg-2); }
.section--line { border-top: 1px solid var(--line); }

/* Cabecalho de secao ------------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-bright);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .6;
}
.eyebrow__idx { color: var(--muted-2); letter-spacing: .1em; }

.section__head { max-width: 62ch; margin-bottom: clamp(36px, 5vw, 56px); }
.section__title { font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.85rem); }
.section__lead {
  margin-top: 18px;
  color: var(--muted);
  font-size: clamp(1rem, .96rem + .2vw, 1.09rem);
  max-width: 58ch;
}

/* --- Botoes ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  min-height: 50px;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: .975rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 20px; height: 20px; flex: none; }

.btn--primary {
  background: var(--brand-cta);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 10px 26px -12px var(--brand-glow);
}
.btn--primary:hover {
  background: var(--brand);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 14px 34px -12px var(--brand-glow);
}

.btn--ghost {
  background: rgba(255, 255, 255, .04);
  border-color: var(--line-strong);
  color: var(--text);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .26); }

/* Verde padrão do WhatsApp (#25D366) com texto branco, como a marca usa. */
.btn--zap {
  background: #25d366;
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset,
              0 10px 26px -12px rgba(37, 211, 102, .55);
}
.btn--zap:hover {
  background: #2ee673;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .34) inset,
              0 14px 34px -12px rgba(37, 211, 102, .65);
}

.btn--lg { padding: 17px 30px; min-height: 58px; font-size: 1.04rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-bright);
  font-weight: 600;
  font-size: .95rem;
}
.link-arrow .icon { width: 17px; height: 17px; transition: transform .2s ease; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* --- Header ------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(5, 5, 5, .78);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.header__logo { display: flex; align-items: center; flex: none; }
.header__logo img { width: 128px; height: 48px; object-fit: contain; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 9px 14px;
  border-radius: var(--r-sm);
  font-size: .925rem;
  color: var(--text-2);
  transition: color .18s ease, background-color .18s ease;
}
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }

.header__cta { flex: none; }
.header__cta .btn { padding: 11px 18px; min-height: 42px; font-size: .9rem; }

.burger {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.burger .icon { width: 22px; height: 22px; }

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: 99;
  background: rgba(8, 8, 8, .97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding: 12px var(--gutter) 22px;
  display: none;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
  display: block;
  padding: 15px 4px;
  font-size: 1.05rem;
  font-family: var(--font-display);
  border-bottom: 1px solid var(--line);
}
.mobile-nav .btn { margin-top: 18px; width: 100%; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(36px, 7vw, 78px));
  padding-bottom: clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -24%; right: -14%;
  width: min(760px, 92vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--brand-glow) 0%, transparent 66%);
  filter: blur(18px);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 30% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 30% 40%, #000 20%, transparent 78%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* imagem maior: ela passou a ser a foto real da loja e merece espaço */
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(36px, 4vw, 52px);
  align-items: center;
}
.hero__title {
  /* sem quebra forçada: text-wrap balance distribui as linhas por igual,
     em qualquer largura de tela */
  font-size: clamp(1.95rem, 1.2rem + 2.4vw, 2.55rem);
  letter-spacing: -.028em;
}
.hero__title em { font-style: normal; color: var(--brand-bright); }
.hero__lead {
  margin-top: 22px;
  font-size: clamp(1.02rem, .98rem + .34vw, 1.18rem);
  color: var(--text-2);
  max-width: 50ch;
}
.hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__meta {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: .9rem;
  color: var(--muted);
}
.hero__meta li { display: flex; align-items: center; gap: 9px; }
.hero__meta .icon { width: 17px; height: 17px; color: var(--brand-bright); flex: none; }
/* o selo ao vivo e a linha fixa de horario nunca aparecem juntos */
.hero__status { display: none; }
.hero__status:has(.is-ready) { display: flex; }
.hero__meta:has(.is-ready) .hero__horario { display: none; }

/* wrapper que flutua devagar; a moldura de dentro cuida da entrada */
.hero__media { position: relative; }
.hero__media::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  background: radial-gradient(circle, var(--brand-glow) 0%, transparent 62%);
  filter: blur(26px);
  opacity: .55;
  animation: pulsar 6s ease-in-out infinite;
}
@keyframes pulsar {
  0%, 100% { opacity: .42; transform: scale(1); }
  50%      { opacity: .7;  transform: scale(1.05); }
}

.hero__figure {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
}
.hero__figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 5, 5, .42), transparent 46%);
  pointer-events: none;
}

/* --- Barra de confianca -------------------------------------------------- */
.trustbar {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent);
}
.trustbar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
.trustbar__item {
  background: var(--bg);
  padding: 26px 22px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.trustbar__item .icon { width: 21px; height: 21px; color: var(--brand-bright); flex: none; margin-top: 2px; }
.trustbar__item b {
  display: block;
  font-family: var(--font-display);
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.trustbar__item span { display: block; font-size: .84rem; color: var(--muted); margin-top: 3px; }

/* --- Bento de serviços ---------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(196px, auto);
  gap: 14px;
}

.tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  transition: border-color .35s var(--ease), transform .35s var(--ease),
              box-shadow .35s var(--ease);
}
.tile:hover {
  transform: translateY(-4px);
  border-color: rgba(52, 198, 217, .34);
  box-shadow: 0 22px 46px -26px rgba(0, 0, 0, .95);
}

.tile img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-soft);
}
/* escurecimento mais forte na base, para o texto nunca disputar com a foto */
.tile--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(3, 3, 3, .97) 0%, rgba(3, 3, 3, .9) 26%,
                    rgba(3, 3, 3, .58) 52%, rgba(3, 3, 3, .22) 78%, rgba(3, 3, 3, .1));
  transition: opacity .42s var(--ease);
}
.tile--foto:hover img { transform: scale(1.07); }
.tile--foto:hover::after { opacity: .88; }
.tile--foto h3 { text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.tile--foto p { text-shadow: 0 1px 8px rgba(0, 0, 0, .65); }

/* Na faixa larga o texto fica à esquerda, então o escurecimento vem do lado,
   e não de baixo: as ferramentas da foto continuam aparecendo à direita. */
.tile--larga.tile--foto { min-height: 190px; padding: 26px 28px; }
.tile--larga.tile--foto::after {
  background: linear-gradient(100deg,
    rgba(3, 3, 3, .96) 0%, rgba(3, 3, 3, .92) 34%,
    rgba(3, 3, 3, .68) 56%, rgba(3, 3, 3, .42) 78%, rgba(3, 3, 3, .34));
}
.tile--larga.tile--foto img { object-position: center 42%; }

.tile__icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: rgba(21, 143, 159, .14);
  border: 1px solid rgba(52, 198, 217, .24);
  color: var(--brand-bright);
  margin-bottom: auto;
}
.tile__icon .icon { width: 21px; height: 21px; }

/* sobre a foto, o selo precisa de fundo proprio para continuar legivel */
.tile--foto .tile__icon {
  background: rgba(8, 8, 8, .58);
  border-color: rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
  color: #fff;
}

.tile h3 { font-size: 1.1rem; }
.tile--grande h3 { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.7rem); }
.tile p { color: var(--muted); font-size: .93rem; max-width: 46ch; }
.tile--foto p { color: var(--text-2); }

/* posições no grid */
.tile--grande { grid-column: span 2; grid-row: span 2; }
.tile--larga  { grid-column: span 4; flex-direction: row; align-items: center;
                justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.tile--larga .tile__texto { display: grid; gap: 6px; }
.tile--larga .tile__icon { margin-bottom: 0; }
.tile--larga .btn { flex: none; }

/* --- Linha do tempo do processo ------------------------------------------- */
.fluxo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.fluxo__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
}
.fluxo__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.trilha { position: relative; padding-left: 58px; }
.trilha::before {
  content: "";
  position: absolute;
  left: 21px; top: 14px; bottom: 14px;
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(52, 198, 217, .5), rgba(52, 198, 217, .16) 60%, transparent);
}
.marco {
  position: relative;
  padding: 4px 20px 26px 0;
  border-radius: var(--r);
  transition: background-color .32s var(--ease), transform .32s var(--ease);
}
.marco:last-child { padding-bottom: 4px; }
.marco:hover { transform: translateX(4px); }

.marco__n {
  position: absolute;
  left: -58px; top: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid rgba(52, 198, 217, .34);
  color: var(--brand-bright);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color .32s var(--ease), color .32s var(--ease),
              border-color .32s var(--ease), box-shadow .32s var(--ease);
}
.marco:hover .marco__n {
  background: var(--brand-cta);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(21, 143, 159, .16);
}

.marco h3 {
  font-size: 1.14rem;
  margin-bottom: 8px;
  transition: color .32s var(--ease);
}
.marco:hover h3 { color: var(--brand-bright); }
.marco p { color: var(--muted); font-size: .95rem; max-width: 46ch; }

/* --- Split (imagem + lista) ---------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.split__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }

.feature-list { display: grid; gap: 2px; margin-top: 34px; }
.feature {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.feature:last-child { border-bottom: 1px solid var(--line); }
.feature .icon { width: 21px; height: 21px; color: var(--brand-bright); flex: none; margin-top: 3px; }
.feature b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 5px;
}
.feature p { color: var(--muted); font-size: .935rem; }

/* --- Prova social -------------------------------------------------------- */
.reviews__panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(30px, 4.4vw, 50px);
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
.reviews__div { background: var(--line); align-self: stretch; }

/* --- Nota ---------------------------------------------------------------- */
.nota { text-align: center; }
.nota__num {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 2.2rem + 4.6vw, 5.2rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  display: block;
}
.nota__de {
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
}
.nota__total {
  display: block;
  margin-top: 12px;
  font-size: .9rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* estrelas: camada cinza por baixo, camada dourada recortada por cima.
   O recorte usa clip-path (e não width) para animar sem provocar reflow. */
.estrelas {
  position: relative;
  display: inline-block;
  margin-top: 16px;
  line-height: 0;
}
.estrelas__base, .estrelas__fill { display: flex; gap: 4px; }
.estrelas__base { color: rgba(255, 255, 255, .16); }
.estrelas__fill {
  position: absolute;
  inset: 0;
  color: #fbbf24;
  clip-path: inset(0 calc(100% - var(--nota, 94%)) 0 0);
}
.estrelas .icon { width: 22px; height: 22px; flex: none; }

/* as estrelas se preenchem quando a seção entra na tela */
.reviews__panel .estrelas__fill {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.5s .3s var(--ease-soft);
}
.reviews__panel.is-in .estrelas__fill {
  clip-path: inset(0 calc(100% - var(--nota, 94%)) 0 0);
}

/* brilho suave atrás do número, que acende junto */
.nota { position: relative; }
.nota::before {
  content: "";
  position: absolute;
  left: 50%; top: 18%;
  width: 240px; aspect-ratio: 1;
  translate: -50% -30%;
  background: radial-gradient(circle, rgba(251, 191, 36, .16), transparent 66%);
  filter: blur(14px);
  opacity: 0;
  transition: opacity 1.1s .35s ease;
  pointer-events: none;
}
.reviews__panel.is-in .nota::before { opacity: 1; }

.reviews__texto b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.015em;
  margin-bottom: 10px;
}
.reviews__texto p { color: var(--muted); max-width: 52ch; }
.reviews__texto .btn { margin-top: 24px; }

/* nota compacta, para o topo da página */
.nota-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.nota-mini .icon { width: 16px; height: 16px; color: #fbbf24; flex: none; }
.nota-mini b { color: var(--text); font-weight: 600; }

/* --- Galeria ------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 168px;
  gap: 12px;
}
.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: zoom-in;
  padding: 0;
  display: block;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease),
              transform .4s var(--ease);
}
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-soft), filter .45s var(--ease);
}
.gallery__item:hover,
.gallery__item:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(52, 198, 217, .34);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9),
              0 0 0 1px rgba(52, 198, 217, .12);
}
.gallery__item:hover img,
.gallery__item:focus-visible img { transform: scale(1.07); }

.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 5, 5, .62), transparent 54%);
  opacity: .8;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.gallery__item:hover::after { opacity: .42; }

/* lupa que aparece no hover */
.gallery__zoom {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(8, 8, 8, .62);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px);
  color: #fff;
  opacity: 0;
  transform: scale(.82);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
  pointer-events: none;
}
.gallery__zoom .icon { width: 16px; height: 16px; }
.gallery__item:hover .gallery__zoom,
.gallery__item:focus-visible .gallery__zoom { opacity: 1; transform: scale(1); }

.g-tall { grid-row: span 2; }
.g-wide { grid-column: span 2; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(3, 3, 3, .94);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity .28s var(--ease);
}
.lightbox.is-open { display: flex; }
.lightbox.is-shown { opacity: 1; }
.lightbox img {
  max-width: min(94vw, 900px);
  max-height: 86vh;
  width: auto;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  transform: scale(.94);
  transition: transform .34s var(--ease-soft);
}
.lightbox.is-shown img { transform: scale(1); }
.lightbox__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
}
.lightbox__close .icon { width: 20px; height: 20px; }

/* --- Acessorios ---------------------------------------------------------- */
.acc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
/* Só a foto: nenhum texto sobre a imagem nem abaixo dela. */
.acc {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform .42s var(--ease), border-color .42s var(--ease),
              box-shadow .42s var(--ease);
}
.acc__foto {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.acc__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-soft);
}
.acc:hover {
  transform: translateY(-5px);
  border-color: rgba(52, 198, 217, .34);
  box-shadow: 0 26px 52px -28px rgba(0, 0, 0, .95);
}
.acc:hover .acc__foto img { transform: scale(1.08); }
.acc:hover .fx-shine { animation: varrer-hover 1.05s var(--ease-soft) 1; }


/* --- Localizacao --------------------------------------------------------- */
.local {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(30px, 4.5vw, 56px);
}
.local__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.local__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 34%; }

/* A coluna da direita virou um cartão: agrupa a informação e acaba com a
   sensação de texto solto no meio do vazio. */
.local__painel {
  align-self: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
}

.info-list { display: grid; }
.info {
  display: flex;
  gap: 15px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.info:first-child { padding-top: 0; border-top: 0; }
.info:last-child { padding-bottom: 0; }

.local__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.local__acoes .btn { flex: 1 1 auto; }
.info .icon { width: 20px; height: 20px; color: var(--brand-bright); flex: none; margin-top: 3px; }
.info b { display: block; font-family: var(--font-display); font-weight: 600; font-size: .97rem; margin-bottom: 4px; }
.info p { color: var(--muted); font-size: .935rem; }
/* --- Selo aberto / fechado ------------------------------------------------
   Preenchido pelo JS com o horário real de Santarém (America/Santarem).
   Nasce escondido: sem JS ou sem suporte a fuso, nada é afirmado. */
.status {
  display: none;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  border: 1px solid;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.status.is-ready { display: inline-flex; }

.status__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
  position: relative;
}
.status__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
}

.status--aberto {
  color: #4ade80;
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .32);
}
.status--aberto .status__dot::after { animation: pulso 2.2s ease-out infinite; }

.status--fechado {
  color: #f87171;
  background: rgba(239, 68, 68, .1);
  border-color: rgba(239, 68, 68, .3);
}

@keyframes pulso {
  0%   { opacity: .9; transform: scale(.7); }
  70%  { opacity: 0;  transform: scale(1.7); }
  100% { opacity: 0;  transform: scale(1.7); }
}

.status__extra {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--muted);
  font-size: .84rem;
}

.info__horario {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.info dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 16px;
  font-size: .935rem;
  font-variant-numeric: tabular-nums;
}
.info dt { color: var(--muted); }
.info dd { margin: 0; color: var(--text-2); }
.info a { color: var(--brand-bright); }
.info a:hover { text-decoration: underline; text-underline-offset: 3px; }
.info__num {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text) !important;
}
.info__num:hover { color: var(--brand-bright) !important; }

/* --- Mapa ---------------------------------------------------------------- */
.mapwrap {
  margin-top: clamp(28px, 4vw, 46px);
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.mapwrap iframe {
  width: 100%;
  aspect-ratio: 21 / 8;
  border: 0;
  display: block;
  /* o mapa do Google e claro; suavizamos para nao brigar com a pagina escura */
  filter: saturate(.82) contrast(1.04) brightness(.92);
}

/* faixa com o endereco sobre o mapa */
.mapwrap__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px 22px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: linear-gradient(to top, rgba(5, 5, 5, .96), rgba(5, 5, 5, .74) 62%, transparent);
  pointer-events: none;
}
.mapwrap__bar > * { pointer-events: auto; }
.mapwrap__addr {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .92rem;
  color: var(--text-2);
}
.mapwrap__addr .icon { width: 19px; height: 19px; color: var(--brand-bright); flex: none; }
.mapwrap__bar .btn { margin-left: auto; padding: 11px 20px; min-height: 44px; font-size: .9rem; }

/* --- CTA final ----------------------------------------------------------- */
.final {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  isolation: isolate;
  padding: clamp(44px, 7vw, 88px) clamp(26px, 5vw, 64px);
}
.final img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.final::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, rgba(4, 4, 4, .95) 34%, rgba(4, 4, 4, .72) 62%, rgba(4, 4, 4, .5));
}
/* especificidade acima de ".final img", que posiciona a foto de fundo */
.final img.final__logo {
  position: static;
  z-index: 1;
  width: 150px; height: 57px;
  object-fit: contain;
  margin-bottom: 26px;
}
.final h2 { font-size: clamp(1.75rem, 1.2rem + 2.3vw, 2.7rem); max-width: 18ch; }
.final p { margin-top: 18px; color: var(--text-2); max-width: 46ch; }
.final__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Footer -------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding-block: clamp(48px, 6vw, 72px) 28px;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, 1fr);
  gap: 44px 36px;
}
.footer__logo img { width: 136px; height: 51px; object-fit: contain; }
.footer__tagline { margin-top: 16px; color: var(--muted); font-size: .92rem; max-width: 36ch; }
.footer h4 {
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 18px;
  font-weight: 600;
}
.footer li { margin-bottom: 9px; font-size: .93rem; color: var(--text-2); line-height: 1.5; }
.footer li:last-child { margin-bottom: 0; }
.footer li a:hover { color: var(--brand-bright); }

/* links do rodapé ganham seta, para se distinguirem do texto corrido */
.footer__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  color: var(--brand-bright);
  font-weight: 500;
}
.footer__link .icon { width: 15px; height: 15px; transition: transform .2s ease; }
.footer__link:hover .icon { transform: translateX(3px); }

.footer__zap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.footer__zap .icon { width: 19px; height: 19px; color: #4ade80; flex: none; }

/* --- Botão flutuante do WhatsApp (desktop) -------------------------------- */
.zap {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 92;
  width: 60px; height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 28px -8px rgba(37, 211, 102, .5), 0 4px 12px rgba(0, 0, 0, .5);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease);
}
.zap .icon { width: 32px; height: 32px; }
.zap:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 16px 36px -8px rgba(37, 211, 102, .62), 0 6px 16px rgba(0, 0, 0, .55);
}
.zap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: anel 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes anel {
  0%   { opacity: .75; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.55); }
  100% { opacity: 0;   transform: scale(1.55); }
}

/* sobe quando o aviso de privacidade está na tela, para não ficar atrás dele */
body:has(.notice.is-visible) .zap { bottom: 92px; }
.footer__bottom {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: .84rem;
  color: var(--muted-2);
}
.footer__bottom a:hover { color: var(--text-2); }

/* --- Barra fixa (mobile) ------------------------------------------------- */
.dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(7, 7, 7, .93);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.dock .btn { flex: 1; min-height: 52px; }
.dock .btn--ghost { flex: 0 0 auto; padding-inline: 18px; }

/* --- Aviso LGPD ---------------------------------------------------------- */
.notice {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 95;
  display: none;
  align-items: center;
  gap: 14px 18px;
  flex-wrap: wrap;
  padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background: rgba(10, 10, 10, .97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  font-size: .86rem;
  color: var(--muted);
}
.notice.is-visible { display: flex; }
.notice p { max-width: 74ch; }
.notice a { color: var(--brand-bright); text-decoration: underline; text-underline-offset: 3px; }
.notice button {
  margin-left: auto;
  padding: 9px 20px;
  min-height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .06);
  font-weight: 600;
  font-size: .86rem;
  cursor: pointer;
}
.notice button:hover { background: rgba(255, 255, 255, .11); }

/* --- Revelacao ao rolar -------------------------------------------------- */
/* So transform e opacity: tudo roda no compositor, sem reflow. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity .72s var(--ease), transform .72s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Entrada escalonada dos filhos de uma grade (cards, galeria, acessorios).
   Usa animation (e nao transition) de proposito: assim nao sequestra a
   transition de hover dos proprios filhos, como a da galeria. O fill-mode
   "backwards" segura o estado inicial durante o atraso e devolve o controle
   ao CSS normal quando termina. */
.stagger > * { opacity: 0; }
.stagger.is-in > * {
  opacity: 1;
  animation: surgir .66s var(--ease) var(--d, 0ms) backwards;
}

@keyframes surgir {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* O container com .stagger serve so de gatilho: quem anima sao os filhos. */
.reveal.stagger { opacity: 1; transform: none; transition: none; }

/* --- Entrada das fotos ---------------------------------------------------
   Cortina que retrai + zoom-out da imagem. So transform, roda no compositor. */
.fx-photo { position: relative; overflow: hidden; }
.fx-photo::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  background: var(--bg);
  transform-origin: center bottom;
  transform: scaleY(1);
  transition: transform .92s var(--ease-soft);
}
.fx-photo.is-in::before { transform: scaleY(0); }

/* No hero, a cortina sai de cena: a imagem e o elemento de LCP e precisa
   estar pintada desde o primeiro quadro. Sobram o zoom, o brilho e a
   flutuacao, que ja dao o movimento sem atrasar a metrica. */
.fx-photo--sem-veu::before { content: none; }

.fx-photo img {
  transform: scale(1.14);
  transition: transform 1.5s var(--ease-soft);
}
.fx-photo.is-in img { transform: scale(1); }

/* Respiro continuo: a peca nunca fica totalmente parada */
@keyframes flutuar {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -12px, 0); }
}
.fx-float { animation: flutuar 7.5s ease-in-out infinite; }

/* Zoom lentissimo e continuo (Ken Burns) nas fotos de destaque */
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}
/* espera a entrada terminar antes de comecar o vaivem.
   So entra em pecas sem hover (hero e CTA final): animation sobrescreve
   transform, entao conviver com o zoom de hover daria conflito. */
.fx-ken.is-in img {
  animation: kenburns 18s 1.7s ease-in-out infinite alternate;
}

/* --- Hover nas fotos ------------------------------------------------------
   Vale para toda moldura .fx-photo que nao tenha movimento continuo. */
.fx-photo:not(.fx-ken) {
  transition: transform .45s var(--ease), box-shadow .45s var(--ease),
              border-color .45s var(--ease);
}
.fx-photo:not(.fx-ken):hover {
  transform: translateY(-6px);
  border-color: rgba(52, 198, 217, .38);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .95),
              0 0 0 1px rgba(52, 198, 217, .14);
}
.fx-photo:not(.fx-ken):hover img { transform: scale(1.075); }

/* o brilho volta a passar no hover (nome de keyframe proprio para reiniciar) */
.fx-photo:not(.fx-ken):hover > .fx-shine {
  animation: varrer-hover 1.05s var(--ease-soft) 1;
}
@keyframes varrer-hover {
  from { transform: translate3d(-130%, 0, 0); }
  to   { transform: translate3d(130%, 0, 0); }
}

/* Brilho que atravessa a moldura uma vez, logo apos a cortina abrir.
   Elemento proprio (e nao ::after) para nao brigar com os overlays
   que algumas molduras ja usam. */
.fx-shine {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(104deg,
    transparent 38%, rgba(255, 255, 255, .14) 48%, transparent 58%);
  transform: translate3d(-130%, 0, 0);
}
.is-in > .fx-shine { animation: varrer 1.5s .6s var(--ease-soft) 1; }

@keyframes varrer {
  from { transform: translate3d(-130%, 0, 0); }
  to   { transform: translate3d(130%, 0, 0); }
}

/* --- Responsivo ---------------------------------------------------------- */
@media (max-width: 1040px) {
  .trustbar__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
}

@media (max-width: 900px) {
  .nav, .header__cta { display: none; }
  .burger { display: flex; }

  .hero { padding-top: calc(var(--header-h) + 34px); }
  .hero__inner { grid-template-columns: 1fr; gap: 34px; }
  .hero__media { order: 2; }
  .hero__copy { order: 1; }
  .hero__actions .btn { flex: 1 1 100%; }

  .split, .local { grid-template-columns: 1fr; }
  .split__media img, .local__media img { aspect-ratio: 16 / 11; }

  .reviews__panel { grid-template-columns: 1fr; gap: 26px; }
  .reviews__div { height: 1px; align-self: auto; }
  .nota { text-align: left; }
  .nota .estrelas { margin-top: 14px; }

  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .g-wide { grid-column: span 1; }

  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(176px, auto); }
  .tile--grande { grid-column: span 2; grid-row: span 1; min-height: 260px; }
  .tile--larga { grid-column: span 2; }
  .tile--larga .btn { width: 100%; }
  /* sem espaço lateral no celular, o escurecimento volta a vir de baixo */
  .tile--larga.tile--foto { min-height: 240px; }
  .tile--larga.tile--foto::after {
    background: linear-gradient(to top,
      rgba(3, 3, 3, .97) 0%, rgba(3, 3, 3, .9) 40%, rgba(3, 3, 3, .55) 72%, rgba(3, 3, 3, .3));
  }

  .fluxo { grid-template-columns: 1fr; }
  .fluxo__media img { aspect-ratio: 16 / 11; }

  .mapwrap iframe { aspect-ratio: 4 / 3; }
  .mapwrap__bar { padding: 14px 16px; }
  .mapwrap__bar .btn { margin-left: 0; width: 100%; }

  .dock { display: flex; }
  body { padding-bottom: 76px; }
  .zap { display: none; }   /* a barra fixa já cobre esse papel no celular */

  .local__painel { padding: 24px 22px; }
  .local__acoes .btn { flex: 1 1 100%; }

  /* o aviso de privacidade fica ACIMA da barra fixa, sem cobrir o CTA */
  .notice {
    bottom: calc(72px + env(safe-area-inset-bottom));
    padding-bottom: 14px;
  }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }
  .trustbar__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .bento { grid-template-columns: 1fr; }
  .tile--grande, .tile--larga { grid-column: span 1; }
  .trilha { padding-left: 50px; }
  .marco__n { left: -50px; width: 38px; height: 38px; font-size: .86rem; }
  .trilha::before { left: 18px; }
  .gallery { grid-auto-rows: 128px; }
  .hero__meta { gap: 9px 18px; font-size: .85rem; }
  .notice { font-size: .82rem; }
  .notice button { margin-left: 0; width: 100%; }
}

/* --- Preferencias do usuario --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .stagger > * { opacity: 1; animation: none !important; }
  .fx-photo::before { display: none; }
  .fx-float, .fx-ken.is-in img, .is-in > .fx-shine { animation: none !important; }
  .fx-shine { display: none; }
  .fx-photo img,
  .lightbox img { transform: none; }
  .lightbox { opacity: 1; }
  .gallery__item:hover,
  .fx-photo:not(.fx-ken):hover,
  .acc:hover,
  .tile:hover,
  .marco:hover { transform: none; }

  .gallery__item:hover img,
  .acc:hover .acc__foto img,
  .tile--foto:hover img,
  .fx-photo:not(.fx-ken):hover img { transform: none; }

  .fx-photo:not(.fx-ken):hover > .fx-shine,
  .acc:hover .fx-shine,
  .nota::before,
  .status__dot::after,
  .zap::after { animation: none !important; }
  .hero__media::before { animation: none !important; }
  /* estrelas ja preenchidas, sem o efeito de enchimento */
  .reviews__panel .estrelas__fill { transition: none; clip-path: inset(0 6% 0 0); }
  .nota::before { transition: none; opacity: 1; }
}

@media print {
  .header, .dock, .notice, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
}