/* Usa o mesmo fundo da LP (body.favo-lp-page + honey-favo-bg em lp-sales.css) */
.favo-parabens-page {
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.favo-parabens-wrap {
  width: 100%;
  max-width: 760px;
  padding: 2.25rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom));
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.9rem;
}

/* ---------- Hero (mais horizontal, sensação de prêmio) ---------- */
.favo-parabens-card {
  background: var(--favo-surface);
  border: 1px solid var(--favo-border);
  border-radius: 1.25rem;
  padding: 1.85rem 1.75rem;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
}

.favo-parabens-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  background:
    radial-gradient(120% 120% at 18% 0%, rgba(197, 160, 125, 0.16), transparent 55%),
    var(--favo-surface);
  border-color: rgba(197, 160, 125, 0.28);
}

.favo-parabens-hero-media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.favo-parabens-hero-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Troféu premium */
.favo-parabens-trophy {
  position: relative;
  width: 6.5rem;
  height: 6.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(214, 178, 119, 0.30), rgba(197, 160, 125, 0.06) 62%, transparent 72%);
}

.favo-parabens-trophy::before {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(214, 178, 119, 0.42), rgba(214, 178, 119, 0) 68%);
  box-shadow: 0 10px 36px rgba(197, 160, 125, 0.32);
}

/* Raios de prêmio girando atrás do troféu */
.favo-parabens-trophy::after {
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(214, 178, 119, 0) 0deg,
    rgba(214, 178, 119, 0.16) 18deg,
    rgba(214, 178, 119, 0) 36deg,
    rgba(214, 178, 119, 0) 60deg,
    rgba(214, 178, 119, 0.16) 78deg,
    rgba(214, 178, 119, 0) 96deg,
    rgba(214, 178, 119, 0) 120deg,
    rgba(214, 178, 119, 0.16) 138deg,
    rgba(214, 178, 119, 0) 156deg,
    rgba(214, 178, 119, 0) 180deg,
    rgba(214, 178, 119, 0.16) 198deg,
    rgba(214, 178, 119, 0) 216deg,
    rgba(214, 178, 119, 0) 240deg,
    rgba(214, 178, 119, 0.16) 258deg,
    rgba(214, 178, 119, 0) 276deg,
    rgba(214, 178, 119, 0) 300deg,
    rgba(214, 178, 119, 0.16) 318deg,
    rgba(214, 178, 119, 0) 336deg,
    rgba(214, 178, 119, 0) 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 42%, #000 70%, transparent 74%);
  mask: radial-gradient(circle, transparent 38%, #000 42%, #000 70%, transparent 74%);
  opacity: 0.7;
  z-index: -1;
}

.favo-parabens-trophy svg {
  position: relative;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

@media (prefers-reduced-motion: no-preference) {
  .favo-parabens-trophy {
    animation: favoTrophyIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
  }
  .favo-parabens-trophy svg {
    animation: favoTrophyFloat 4.5s ease-in-out 0.6s infinite;
  }
  .favo-parabens-trophy::after {
    animation: favoTrophyRays 12s linear infinite;
  }
}

/* Aparelhos fracos/telas pequenas: sem animações decorativas pesadas (conic-gradient
   girando, float). Mantém o visual estático para não travar celulares antigos. */
@media (max-width: 560px) {
  .favo-parabens-trophy svg,
  .favo-parabens-trophy,
  .favo-parabens-trophy::after {
    animation: none !important;
  }
  .favo-parabens-trophy::after {
    opacity: 0.4;
  }
}

@keyframes favoTrophyRays {
  to {
    transform: rotate(360deg);
  }
}

@keyframes favoTrophyIn {
  from {
    opacity: 0;
    transform: scale(0.82) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes favoTrophyFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.favo-parabens-badge {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-family: var(--favo-font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a1410;
  background: linear-gradient(180deg, #f0d9af, #d6b277);
  box-shadow: 0 4px 14px rgba(197, 160, 125, 0.3);
}

.favo-parabens-badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-18deg);
}

@media (prefers-reduced-motion: no-preference) {
  .favo-parabens-badge::after {
    animation: favoBadgeShine 3.6s ease-in-out 1s infinite;
  }
}

@keyframes favoBadgeShine {
  0% {
    left: -40%;
  }
  28%,
  100% {
    left: 130%;
  }
}

.favo-parabens-wordmark {
  display: block;
  margin: 0 0 0.4rem;
  font-size: clamp(1.4rem, 4vw, 1.75rem);
}

.favo-parabens-motif {
  margin: 0 0 1rem;
}

.favo-parabens-card h1 {
  font-family: var(--favo-font-serif);
  font-size: clamp(1.5rem, 5vw, 2.05rem);
  font-weight: 600;
  line-height: 1.16;
  margin: 0 0 0.85rem;
  max-width: 20ch;
  color: var(--favo-text);
}

.favo-parabens-card h1 .gold {
  color: var(--favo-gold);
  font-style: italic;
}

.favo-parabens-lead {
  margin: 0 0 0.5rem;
  max-width: 46ch;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--favo-muted);
}

.favo-parabens-lead strong {
  color: var(--favo-text);
  font-weight: 600;
}

.favo-parabens-sync {
  margin: 0.75rem 0 0;
  max-width: 40ch;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--favo-muted);
}

.favo-parabens-sync:not([hidden]) {
  display: block;
}

.favo-parabens-sync.ok {
  color: var(--favo-gold);
}

/* Layout horizontal a partir de telas médias */
@media (min-width: 620px) {
  .favo-parabens-hero {
    flex-direction: row;
    align-items: center;
    gap: 1.9rem;
    padding: 2.1rem 2.25rem;
    text-align: left;
  }
  .favo-parabens-hero-body {
    align-items: flex-start;
  }
  .favo-parabens-wordmark,
  .favo-parabens-motif {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ---------- Vídeo plug-and-play (estética Netflix) ---------- */
.favo-parabens-video[hidden] {
  display: none;
}

.favo-parabens-video {
  margin: 0 auto;
  width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .favo-parabens-video:not([hidden]) {
    animation: favoVideoIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes favoVideoIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.favo-parabens-video-stage {
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: var(--pv-aspect, 16 / 9);
  border-radius: 1.1rem;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(197, 160, 125, 0.18);
}

/* Vertical = estética Reels: retrato, mais fechado e fluido */
.favo-parabens-video.is-vertical .favo-parabens-video-stage {
  max-width: min(420px, 100%);
  max-height: 82vh;
  border-radius: 1.35rem;
}

.favo-parabens-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Vinheta cinematográfica */
.favo-parabens-video-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 80% at 50% 0%, transparent 58%, rgba(0, 0, 0, 0.32)),
    linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.55));
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.55);
}

/* Botão de som flutuante (canto inferior direito) */
.favo-parabens-video-sound {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--favo-font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    opacity 0.2s ease;
}

.favo-parabens-video-sound:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: translateY(-1px);
}

.favo-parabens-video-sound .favo-pv-ico {
  flex-shrink: 0;
}

/* Estado mudo (padrão): mostra o risco, esconde a onda */
.favo-parabens-video.is-muted .favo-pv-wave {
  display: none;
}
.favo-parabens-video:not(.is-muted) .favo-pv-slash {
  display: none;
}

/* Reels (vertical): botão de som redondo, só ícone */
.favo-parabens-video.is-vertical .favo-pv-label {
  display: none;
}

.favo-parabens-video.is-vertical .favo-parabens-video-sound {
  padding: 0.62rem;
  border-radius: 50%;
}

/* Pulso sutil para chamar pro som enquanto mudo */
@media (prefers-reduced-motion: no-preference) {
  .favo-parabens-video.is-muted .favo-parabens-video-sound {
    animation: favoSoundPulse 2.6s ease-in-out infinite;
  }
}

@keyframes favoSoundPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(214, 178, 119, 0.45);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(214, 178, 119, 0);
  }
}

/* ---------- Cases (carrossel reaproveitado da LP) ---------- */
.favo-parabens-cases h2 {
  font-family: var(--favo-font-serif);
  font-size: clamp(1.2rem, 4.2vw, 1.55rem);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 auto 1.1rem;
  max-width: 26ch;
  color: var(--favo-text);
}

.favo-parabens-cases h2 .gold {
  color: var(--favo-gold);
  font-style: italic;
}

.favo-parabens-cases-disclaimer {
  margin: 0.85rem auto 0;
  max-width: 44ch;
  font-size: 0.68rem;
  line-height: 1.4;
  opacity: 0.6;
  color: var(--favo-muted);
}

/* ---------- Galeria estatica de cases (leve, swipe nativo, a prova de falha) ---------- */
.favo-tcases {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 12px;
  margin: 0 -2px;
  scrollbar-width: none;
}
.favo-tcases::-webkit-scrollbar {
  display: none;
}
.favo-tcase {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: min(82%, 300px);
  background: var(--favo-surface, #141414);
  border: 1px solid var(--favo-border, rgba(197, 160, 125, 0.2));
  border-radius: 14px;
  padding: 10px 10px 12px;
  text-align: center;
}
.favo-tcase-img {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 10px;
  display: block;
  background: #0b141a;
}
.favo-tcase-head {
  margin: 9px 0 0;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--favo-text, #f5f5f0);
}
.favo-tcase-niche {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--favo-muted, #9ca3af);
}
.favo-tcase-metrics {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 9px;
  flex-wrap: wrap;
}
.favo-tcase-metrics span {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.82rem;
  color: var(--favo-text, #f5f5f0);
  font-weight: 700;
}
.favo-tcase-metrics b {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--favo-muted, #9ca3af);
  opacity: 0.85;
}
.favo-tcase-metrics .favo-tcase-hl {
  color: var(--favo-gold, #c5a07d);
}
.favo-tcases-hint {
  margin: 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--favo-muted, #9ca3af);
  opacity: 0.75;
}

/* ---------- Instagram CTA (alto desejo) ---------- */
.favo-parabens-follow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.favo-parabens-follow-text {
  margin: 0;
  max-width: 40ch;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--favo-text);
}

.favo-parabens-ig {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: visible;
  margin: 0 auto;
}

.favo-parabens-ig::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 135%;
  height: 175%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(212, 180, 138, 0.5) 0%,
    rgba(197, 160, 125, 0.28) 30%,
    rgba(197, 160, 125, 0.08) 48%,
    transparent 58%
  );
  filter: blur(8px);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .favo-parabens-ig::before {
    animation: favoBtnGlowRadial 3.5s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .favo-parabens-trophy,
  .favo-parabens-trophy svg,
  .favo-parabens-trophy::after,
  .favo-parabens-badge::after,
  .favo-parabens-ig::before {
    animation: none;
  }
}

/* Telas pequenas/celulares fracos: corta animações infinitas (box-shadow/blue glow)
   que repintam a cada frame e travam aparelhos antigos. Visual estático permanece. */
@media (max-width: 560px) {
  .favo-parabens-ig::before,
  .favo-parabens-badge::after,
  .favo-parabens-video.is-muted .favo-parabens-video-sound {
    animation: none !important;
  }
}