/* ==========================================================================
   VK Clinic — template "Fachada": hero em vídeo + painéis de vidro em 3D
   Usa os mesmos tokens de cor e tipografia de style.css.
   ========================================================================== */

/* ---------------------------------------------------------------- hero ---- */
.hero-v{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-top:calc(var(--header-h) + clamp(2rem,6vh,4rem));
  padding-bottom:clamp(2rem,5vh,3.5rem);
  color:var(--cream);
  overflow:hidden;
  isolation:isolate;
  background:var(--navy-deep);
}

.hero-v__media{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero-v__media video,
.hero-v__media img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:saturate(.72) contrast(1.04);
  transform:scale(1.06);
}

/* o filtro que empurra o vídeo para segundo plano */
.hero-v__tint{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(72% 58% at 26% 14%,rgba(120,48,83,.62) 0%,rgba(120,48,83,0) 68%),
    radial-gradient(60% 50% at 88% 88%,rgba(192,152,56,.16) 0%,rgba(192,152,56,0) 70%),
    linear-gradient(100deg,rgba(14,27,37,.9) 0%,rgba(14,27,37,.62) 52%,rgba(14,27,37,.5) 100%),
    linear-gradient(180deg,rgba(14,27,37,.78) 0%,rgba(14,27,37,.5) 30%,rgba(14,27,37,.9) 78%,rgba(14,27,37,.99) 100%);
}
.hero-v__grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(246,244,241,.055) 1px,transparent 1px);
  background-size:3px 3px;
}

.hero-v .eyebrow{color:var(--gold-light)}
.hero-v .eyebrow::before{opacity:1}

.hero-v__intro{max-width:52ch}
/* O título e o subtítulo do hero passaram a ser geridos pelo rotador de
   mensagens — ver assets/css/hero-slides.css */

/* ------------------------------------------------------- palco em 3D ---- */
.stage3d{
  margin-top:clamp(1.75rem,4.5vh,3rem);
  perspective:1500px;
  perspective-origin:50% 42%;
}

.rig{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(.85rem,1.8vw,1.5rem);
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .6s cubic-bezier(.22,.7,.3,1);
  will-change:transform;
}

.pane{
  --base:0deg;
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:clamp(190px,23vh,244px);
  padding:clamp(1.35rem,2.4vw,1.85rem);
  border-radius:16px;
  text-decoration:none;color:inherit;
  background:linear-gradient(150deg,rgba(30,54,70,.62) 0%,rgba(14,27,37,.72) 100%);
  border:1px solid rgba(192,152,56,.3);
  box-shadow:0 18px 46px rgba(6,14,20,.42);
  backdrop-filter:blur(9px) saturate(1.1);
  -webkit-backdrop-filter:blur(9px) saturate(1.1);
  transform-style:preserve-3d;
  transform:rotateY(var(--base)) translateZ(0);
  transition:transform .55s cubic-bezier(.22,.7,.3,1),border-color .45s ease,box-shadow .45s ease;
  overflow:hidden;
  isolation:isolate;
}

.pane:nth-child(1){--base:9deg}
.pane:nth-child(2){--base:0deg}
.pane:nth-child(3){--base:-9deg}

/* reflexo diagonal — o vidro espelhado da fachada */
.pane__glass{
  position:absolute;inset:-30%;pointer-events:none;
  background:linear-gradient(112deg,
    transparent 26%,
    rgba(246,244,241,.16) 40%,
    rgba(246,244,241,.03) 49%,
    transparent 56%,
    rgba(241,226,166,.09) 66%,
    transparent 74%);
  transform:translate3d(calc(var(--mx,0) * 26px),calc(var(--my,0) * 20px),42px);
  transition:transform .5s cubic-bezier(.22,.7,.3,1),opacity .45s ease;
  opacity:.85;
}

/* brilho especular que segue o ponteiro */
.pane__sheen{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(280px circle at var(--px,50%) var(--py,50%),rgba(241,226,166,.22),transparent 62%);
  transition:opacity .4s ease;
}

.pane__fan{
  display:block;flex:none;
  width:32px;height:32px;margin-bottom:.95rem;
  background:conic-gradient(from 225deg,var(--gold) 0deg,var(--gold) 90deg,transparent 90deg);
  border-radius:50%;opacity:.92;
  transform:translateZ(30px);
}

.pane__inner{position:relative;display:block;transform-style:preserve-3d}

.pane__label{
  position:relative;display:block;
  font-size:.63rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(241,226,166,.82);
  transform:translateZ(18px);
}
.pane__title{
  position:relative;display:block;
  font-family:var(--display);
  font-size:clamp(1.3rem,2.5vw,1.62rem);
  line-height:1.18;margin-top:.55rem;
  transform:translateZ(34px);
}
.pane__text{
  position:relative;display:block;
  margin-top:.6rem;font-size:.9rem;line-height:1.6;
  color:rgba(246,244,241,.7);
  transform:translateZ(16px);
}
.pane__go{
  position:relative;
  margin-top:1.1rem;
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.82rem;letter-spacing:.06em;color:var(--gold-light);
  transform:translateZ(24px);
}
.pane__go svg{width:15px;height:15px;fill:currentColor;transition:transform .35s ease}

.pane:hover,.pane:focus-visible{
  transform:rotateY(calc(var(--base) * .45)) translateZ(46px);
  border-color:rgba(241,226,166,.72);
  box-shadow:0 26px 60px rgba(6,14,20,.55);
}
.pane:hover .pane__sheen,.pane:focus-visible .pane__sheen{opacity:1}
.pane:hover .pane__glass,.pane:focus-visible .pane__glass{opacity:1}
.pane:hover .pane__go svg,.pane:focus-visible .pane__go svg{transform:translateX(4px)}

/* entrada */
.pane{opacity:0;transform:rotateY(var(--base)) rotateX(-26deg) translateY(38px)}
.stage3d.is-ready .pane{
  opacity:1;
  transform:rotateY(var(--base)) translateZ(0);
  transition:opacity .8s ease,transform .9s cubic-bezier(.22,.7,.3,1),border-color .45s ease,box-shadow .45s ease;
}
.stage3d.is-ready .pane:nth-child(2){transition-delay:.11s}
.stage3d.is-ready .pane:nth-child(3){transition-delay:.22s}

/* seta de scroll */
.hero-v__scroll{
  margin-top:clamp(1.1rem,2.5vh,1.75rem);
  display:flex;align-items:center;gap:.7rem;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(246,244,241,.45);
}
.hero-v__scroll i{
  display:block;width:1px;height:30px;
  background:linear-gradient(180deg,rgba(192,152,56,.9),transparent);
  animation:drop 2.6s ease-in-out infinite;
}
@keyframes drop{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ---------------------------------------------------------- responsivo -- */
@media (max-width:900px){
  .rig{grid-template-columns:1fr;gap:.75rem}
  .pane{
    --base:0deg;
    min-height:auto;
    flex-direction:row;align-items:center;gap:1rem;
    padding:1.1rem 1.2rem;
  }
  .pane__fan{width:28px;height:28px;margin-bottom:0;transform:none}
  .pane__inner{flex:1}
  .pane__title{font-size:1.14rem;margin-top:.3rem;transform:none}
  .pane__label,.pane__text,.pane__go{transform:none}
  .pane__text{display:none}
  .pane__go{margin-top:.45rem}
  .hero-v{min-height:auto;padding-bottom:clamp(2.5rem,8vh,4rem)}
  .hero-v__scroll{display:none}
}

@media (prefers-reduced-motion:reduce){
  .rig,.pane,.pane__glass,.pane__sheen{transition:none!important}
  .rig{transform:none!important}
  .pane{opacity:1;transform:rotateY(var(--base))!important}
  .hero-v__scroll i{animation:none}
  .hero-v__media video{display:none}
}

/* ---------------------------------------------- faixa de credibilidade -- */
.marquee{
  border-top:1px solid rgba(192,152,56,.22);
  border-bottom:1px solid rgba(192,152,56,.22);
  background:var(--navy-deep);
  overflow:hidden;
  padding-block:1.1rem;
}
.marquee__track{
  display:flex;gap:clamp(2rem,5vw,4rem);
  width:max-content;
  animation:slide 34s linear infinite;
}
.marquee span{
  display:inline-flex;align-items:center;gap:.75rem;
  font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(246,244,241,.55);white-space:nowrap;
}
.marquee span::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none;
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}
.marquee:hover .marquee__track{animation-play-state:paused}