/* Vie Belle — motion / dynamism */

/* ─── reveal on scroll ─────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  will-change: transform, opacity;
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.96); }

/* Use keyframe animation (not transition) — animations have a fixed
   end state and don't get stuck if the property re-flows mid-flight. */
[data-reveal][data-visible="true"] {
  animation: vb-reveal-up .9s cubic-bezier(.2,.6,.2,1) var(--delay, 0ms) forwards;
}
[data-reveal="fade"][data-visible="true"]  { animation-name: vb-reveal-fade; }
[data-reveal="left"][data-visible="true"]  { animation-name: vb-reveal-left; }
[data-reveal="right"][data-visible="true"] { animation-name: vb-reveal-right; }
[data-reveal="scale"][data-visible="true"] { animation-name: vb-reveal-scale; }

@keyframes vb-reveal-up    { to { opacity: 1; transform: none; } }
@keyframes vb-reveal-fade  { to { opacity: 1; } }
@keyframes vb-reveal-left  { to { opacity: 1; transform: none; } }
@keyframes vb-reveal-right { to { opacity: 1; transform: none; } }
@keyframes vb-reveal-scale { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ─── values strip (estático, reemplazo del marquee) ───────────────── */
.vb-values-strip {
  background: var(--vb-navy);
  color: var(--vb-bone);
  border-block: 1px solid rgba(245,239,231,0.08);
  padding: clamp(36px, 5vw, 64px) 0;
}
.vb-values-strip-inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: clamp(20px, 4vw, 48px);
  text-align: center;
}
.vb-values-strip-item {
  font-size: clamp(24px, 3.4vw, 44px);
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 1;
}
.vb-values-strip-sep {
  color: var(--vb-gold);
  font-size: 14px;
  opacity: 0.85;
}

/* ─── marquee (legacy, kept para uso futuro) ───────────────────────── */
.vb-marquee {
  overflow: hidden;
  border-block: 1px solid var(--vb-line);
  background: var(--vb-navy);
  color: var(--vb-bone);
  padding: 22px 0;
}
.vb-marquee-track {
  display: flex; gap: var(--gap, 60px); align-items: center;
  width: max-content;
  animation: vb-marquee 38s linear infinite;
}
.vb-marquee-item {
  font-family: var(--ff-display);
  font-size: clamp(28px, 4vw, 56px);
  font-style: italic;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--gap, 60px);
}
.vb-marquee-item::after {
  content: "✻";
  color: var(--vb-gold);
  font-style: normal;
  font-size: 0.55em;
  margin-left: var(--gap, 60px);
}
@keyframes vb-marquee {
  to { transform: translateX(calc(-100% / 3)); }
}
.vb-marquee:hover .vb-marquee-track { animation-play-state: paused; }

/* ─── hero kinetic glow / float ────────────────────────────────────── */
.vb-hero-art-tag {
  animation: vb-float 6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes vb-float {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(-1deg) translateY(-8px); }
}

/* Slow zoom for hero placeholder */
.vb-hero-img-1, .vb-hero-img-2 {
  overflow: hidden; position: relative;
}
.vb-hero-img-1::before, .vb-hero-img-2::before {
  content: ""; position: absolute; inset: -10%;
  background: inherit;
  animation: vb-slow-zoom 16s ease-in-out infinite alternate;
}
@keyframes vb-slow-zoom {
  from { transform: scale(1.02); }
  to   { transform: scale(1.10); }
}

/* ─── hover micro-interactions ─────────────────────────────────────── */
.vb-svc-card-img,
.vb-product-img,
.vb-team-avatar {
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.vb-svc-card:hover .vb-svc-card-img,
.vb-product:hover .vb-product-img {
  transform: scale(1.04);
}

.vb-svc-card-link svg,
.btn svg {
  transition: transform .3s ease;
}
.vb-svc-card:hover .vb-svc-card-link svg,
.btn:hover svg {
  transform: translateX(4px);
}

/* ─── testimonios stagger ──────────────────────────────────────────── */
.vb-testi { transition: transform .5s ease, box-shadow .5s ease; }
.vb-testi:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(13, 27, 42,0.12);
}

/* ─── animated underline for serif em words ────────────────────────── */
.vb-hero-text h1 em,
.vb-nosotros-copy h2 em,
.vb-doctor-quote p em {
  position: relative;
  display: inline-block;
}
.vb-hero-text h1 em::after,
.vb-nosotros-copy h2 em::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0.05em;
  height: 2px;
  background: currentColor;
  opacity: 0.4;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1) .4s;
}
[data-visible="true"] .vb-hero-text h1 em::after,
[data-visible="true"] .vb-nosotros-copy h2 em::after {
  transform: scaleX(1);
}

/* ─── animated counters wrap ───────────────────────────────────────── */
.vb-counter { display: inline-block; font-variant-numeric: tabular-nums; }

/* ─── nav link underline already exists; enhance logo hover ─────── */
.vb-nav-logo { transition: opacity .25s; }
.vb-nav-logo:hover { opacity: 0.7; }

/* ─── doctor strip parallax-ish ──────────────────────────────────── */
.vb-doctor-photo {
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.vb-doctor-photo:hover { transform: translateY(-6px); }

/* ─── ba slider handle pulse ─────────────────────────────────────── */
.vb-ba-tab[data-active="true"] {
  animation: vb-tab-shimmer 5s ease-in-out infinite;
}
@keyframes vb-tab-shimmer {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168, 146, 114,0); }
  50%      { box-shadow: 0 0 0 4px rgba(168, 146, 114,0.15); }
}

/* ─── product hover lift ─────────────────────────────────────────── */
.vb-product { transition: transform .35s ease, box-shadow .35s ease; }
.vb-product:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(13, 27, 42,0.08);
}

/* ─── floating WhatsApp gentle bob ───────────────────────────────── */
.vb-wa-float {
  animation: vb-bob 3.5s ease-in-out infinite;
}
@keyframes vb-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.vb-wa-float:hover { animation-play-state: paused; }

/* ─── kinetic dot for values ─────────────────────────────────────── */
.vb-value {
  position: relative;
  padding-left: 18px;
}
.vb-value::before {
  content: ""; position: absolute; top: 12px; left: 0;
  width: 6px; height: 6px; border-radius: 999px; background: var(--vb-gold);
}
[data-visible="true"] .vb-value::before {
  animation: vb-dot-in .6s cubic-bezier(.2,1.4,.4,1) backwards;
}
.vb-value:nth-child(1)::before { animation-delay: .1s; }
.vb-value:nth-child(2)::before { animation-delay: .2s; }
.vb-value:nth-child(3)::before { animation-delay: .3s; }
.vb-value:nth-child(4)::before { animation-delay: .4s; }
@keyframes vb-dot-in {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}