/* ============================================================
   Carrossel infinito (cross-sell + vídeos YouTube) e
   cards de "outros procedimentos". Reaproveita as variáveis
   de tema definidas inline em cada LP (--gold, --border, etc.).
   ============================================================ */

/* ============================================================
   Barra de rolagem da marca. Mesma regra do css/style.css do site.
   Este arquivo carrega depois do <style> inline da LP, entao vence.
   ============================================================ */
/* So o Firefox: no Chromium essas propriedades desligariam o ::-webkit-scrollbar */
@supports (-moz-appearance: none) {
  html {
    scrollbar-width: thin;
    scrollbar-color: rgba(196,145,86,0.75) transparent;
  }
}

::-webkit-scrollbar {
  width: 22px;
  height: 22px;
  background: transparent;
}

::-webkit-scrollbar-track {
  background: linear-gradient(90deg,
    transparent calc(50% - 0.5px),
    rgba(196,145,86,0.35) calc(50% - 0.5px),
    rgba(196,145,86,0.35) calc(50% + 0.5px),
    transparent calc(50% + 0.5px));
}

::-webkit-scrollbar-track:horizontal {
  background: linear-gradient(180deg,
    transparent calc(50% - 0.5px),
    rgba(196,145,86,0.35) calc(50% - 0.5px),
    rgba(196,145,86,0.35) calc(50% + 0.5px),
    transparent calc(50% + 0.5px));
}

::-webkit-scrollbar-thumb {
  background: #c49156;
  background-clip: padding-box;
  border: 9px solid transparent;
  border-radius: 999px;
  min-height: 48px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a97a43;
  background-clip: padding-box;
  border: 8px solid transparent;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

[data-marquee] {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;        /* mantém o scroll vertical da página */
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
[data-marquee]:active { cursor: grabbing; }
[data-marquee-track] {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: none !important; /* o motor JS assume o controle do movimento */
}
[data-marquee] img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;       /* clique/arrasto vão para o card, não para a imagem */
}

/* ===== Cross-sell: outros procedimentos ===== */
.xsell__track { display: flex; }
.xcard {
  flex: 0 0 230px;
  margin-right: 18px;
  text-decoration: none;
  display: block;
}
.xcard__media {
  position: relative;
  width: 230px;
  height: 290px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #161310;
}
.xcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.xcard:hover .xcard__media img { transform: scale(1.06); }
.xcard__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.12) 52%, transparent 78%);
}
.xcard__info {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
}
.xcard__name {
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
}
.xcard__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gold);
}

@media (max-width: 640px) {
  .xcard { flex: 0 0 172px; margin-right: 14px; }
  .xcard__media { width: 172px; height: 220px; }
  .xcard__name { font-size: 0.95rem; }
}

/* ============================================================
   Celular (Android): letra, toque e largura. Revisão de 14/09/2026,
   medida em 360/320 px e com a fonte do sistema em 85 % e 130 %.
   Vale para as 7 LPs (este arquivo carrega depois do <style> delas).
   ============================================================ */
@media (max-width: 640px) {
  /* Nada abaixo de 13 px: com a fonte do sistema "pequena" (85 %) 11–12 px some */
  .proof__label, .depo-card__meta, .xcard__cta, .yt-card__tag, .fundadora__photo-badge span,
  .form-group label, .header__trust { font-size: 0.85rem; }
  .lp-footer__disclaimer, .lp-footer__copy, .modal__disclaimer { font-size: 0.82rem; }
  .form-consent, .area-pill__info p { font-size: 0.84rem; }
  .before-after__label { font-size: 0.82rem; }

  /* O h1 vinha com white-space:nowrap na linha do meio: em 320 px, ou em 360 com a
     fonte do sistema grande, "com toda segurança da" saía da tela. */
  .t-mid { white-space: normal !important; }
  /* e o título encolhe junto com a tela para essa linha continuar inteira até 300 px */
  .hero__title { font-size: clamp(1rem, calc((100vw - 48px) * 0.079), 1.55rem); }

  /* Área de toque do @ da fundadora */
  .fundadora__insta { padding: 8px 0; margin-top: 4px; }
}

/* Toque não tem "mouse em cima": no Android o :hover gruda depois do toque */
@media (hover: none) {
  .xcard:hover .xcard__media img { transform: none; }
  .btn:hover, .btn-submit:hover { transform: none; }
  a, button { -webkit-tap-highlight-color: rgba(196, 145, 86, 0.18); }
}

/* Erro de validação no modal "Agende sua avaliação" (lp-extras.js, 18/09/2026) */
.form-group.is-erro input { border-color: #e0564f; box-shadow: 0 0 0 3px rgba(224,86,79,0.14); }
.form-group .form-erro { display: block; margin-top: 6px; font-size: 0.8rem; line-height: 1.35; color: #f28b85; }

/* Responsavel tecnico em letra bem pequena (pedido do Igor, 30/09/2026).
   Nunca apagar o nome: o CFM exige. 0.6rem = 9,6px, o minimo legivel. */
.rt-mini { font-size: 0.5rem; opacity: .5; letter-spacing: .01em; }