.elementor-7 .elementor-element.elementor-element-b23ae59{--display:flex;}/* Start custom CSS for html, class: .elementor-element-a4f1a3a *//* ====== GALERIA ====== */
.gallery-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  will-change: transform;
}
a:hover .gallery-img,
a:focus-visible .gallery-img {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Acessibilidade: anel de foco no link da imagem */
a:focus-visible {
  outline: 2px solid #0d6efd; /* azul Bootstrap */
  outline-offset: 4px;
  border-radius: 14px;
}

/* Respeita preferência do usuário */
@media (prefers-reduced-motion: reduce) {
  .gallery-img { transition: none; }
  a:hover .gallery-img,
  a:focus-visible .gallery-img { transform: none; }
}

/* ====== EXPERIÊNCIA GERAL ====== */

/* 1) Rolagem suave + compensação da navbar fixa */
:root { --nav-h: 64px; }
@media (min-width: 992px){ :root { --nav-h: 72px; } }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

/* 2) Estados de foco visíveis */
a:focus-visible, button:focus-visible, .btn:focus-visible, .accordion-button:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 3px;
  border-radius: 10px;
}

/* 3) Tipografia fluida para hero e texto introdutório */
h1.display-5 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.8rem);
}
.lead {
  font-size: clamp(1rem, 0.95rem + 0.6vw, 1.25rem);
  color: #343a40;
}

/* 4) Botões com micro-interação */
.btn {
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
@media (max-width: 576px){
  .btn-lg { width: 100%; } /* tap target cheio em mobile */
}

/* 5) Cartões com “lift” */
.card {
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}
.card:focus-within {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
  border-radius: 14px;
}

/* 6) Accordion mais legível */
.accordion-button {
  transition: background-color .2s ease, box-shadow .2s ease;
}
.accordion-button:not(.collapsed) {
  background-color: #f5f9ff;
}

/* 7) Respeitar “reduzir movimento” globalmente */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 8) Toque em mobile com highlight discreto */
a, button { -webkit-tap-highlight-color: rgba(13,110,253,.15); }

/* 9) Performance progressiva: seções fora da tela */
section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1000px; /* reserva para evitar layout shift */
}

/* 10) Imagem/badge do rodapé */
.footer-image {
  display: grid;
  place-items: center;
  padding: 16px 0 32px;
  background: #fff;
}
.footer-image img {
  width: min(90vw, 640px);
  height: auto;
  display: block;
}

/* Utilitário para justificar texto (Bootstrap 5 não possui classe nativa) */
.text-justify {
  text-align: justify;
  text-justify: inter-word;
}

/* Ajustes visuais diversos */
.guarantee-badge { max-width: 360px; }
.review-img {
  max-width: 160px;
  height: auto;
  border-radius: 50% / 35%;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Navbar arroxeada (seu tom atual) */
.bg-purple {
  background-color: #0d1d2f !important;
}

/* ====== PLYR: bloquear clique no iframe sem quebrar controles ====== */
.plyr__video-embed iframe { pointer-events: none; }
.plyr__controls { pointer-events: auto; z-index: 10; }/* End custom CSS */