/* =========================================================
   ENVY · Capa de animación de la home (variante)
   Todo vive en este archivo: si no convence, se quita el
   <link> y el <script> de la home y la web vuelve a ser la actual.
   ========================================================= */

/* ---------- capas ---------- */
main, .footer { position: relative; z-index: 1; }
.stats { background: transparent; }

/* ---------- 1. HERO: la V que se dibuja ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero > .wrap { position: relative; z-index: 2; }

.hero-v {
  position: absolute; z-index: 1; pointer-events: none;
  left: 50%; top: 50%;
  width: min(86vw, 680px); aspect-ratio: 1;
  transform: translate(-50%, -46%);
  will-change: transform, opacity;
}
.hero-v svg { width: 100%; height: 100%; overflow: visible; display: block; }
.hero-v .v-echo, .hero-v .v-line {
  fill: none; stroke: var(--lime); stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.hero-v .v-line  { stroke-width: 1.6; opacity: .75; }
.hero-v .v-echo  { stroke-width: 1.1; }
.hero-v .v-echo.e1 { opacity: .4; }
.hero-v .v-echo.e2 { opacity: .22; }
.hero-v .v-echo.e3 { opacity: .11; }
[data-theme="dark"] .hero-v svg { opacity: .55; }
.hero-v .v-fill { fill: var(--lime); opacity: 0; transform-origin: 175px 175px; }

.hero-v.go .v-line   { animation: v-draw 2.1s cubic-bezier(.65,0,.35,1) .15s forwards; }
.hero-v.go .v-echo.e1{ animation: v-draw 2.3s cubic-bezier(.65,0,.35,1) .45s forwards; }
.hero-v.go .v-echo.e2{ animation: v-draw 2.5s cubic-bezier(.65,0,.35,1) .7s  forwards; }
.hero-v.go .v-echo.e3{ animation: v-draw 2.7s cubic-bezier(.65,0,.35,1) .95s forwards; }
.hero-v.go .v-fill   { animation: v-fill 1.4s ease 1.9s forwards, v-breathe 7s ease-in-out 3.3s infinite; }

@keyframes v-draw   { to { stroke-dashoffset: 0; } }
@keyframes v-fill   { from { opacity: 0; transform: scale(.94); } to { opacity: .11; transform: scale(1); } }
@keyframes v-breathe{ 0%,100% { opacity: .11; transform: scale(1); } 50% { opacity: .16; transform: scale(1.025); } }

/* el texto del hero gana un poco de cuerpo sobre la V */
.hero .lead, .hero-reviews { position: relative; text-shadow: 0 0 14px var(--bg), 0 0 6px var(--bg), 0 0 2px var(--bg); }

/* entrada escalonada del contenido del hero */
.anim-ready .hero .badge,
.anim-ready .hero .hero-line,
.anim-ready .hero .hero-rot,
.anim-ready .hero .lead,
.anim-ready .hero .hero-actions,
.anim-ready .hero .hero-reviews { opacity: 0; transform: translateY(22px); }
.anim-in .hero .badge,
.anim-in .hero .hero-line,
.anim-in .hero .hero-rot,
.anim-in .hero .lead,
.anim-in .hero .hero-actions,
.anim-in .hero .hero-reviews {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}
.anim-in .hero .badge          { transition-delay: .05s; }
.anim-in .hero .hero-line:nth-child(1) { transition-delay: .15s; }
.anim-in .hero .hero-line:nth-child(2) { transition-delay: .27s; }
.anim-in .hero .hero-rot       { transition-delay: .42s; }
.anim-in .hero .lead           { transition-delay: .55s; }
.anim-in .hero .hero-actions   { transition-delay: .68s; }
.anim-in .hero .hero-reviews   { transition-delay: .8s; }

/* ---------- 2. CAMPO DE FONDO: Vs y escalones que te acompañan ---------- */
.v-field {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.v-field i {
  position: absolute; top: 0; display: block; will-change: transform;
  color: var(--ink);
}
.v-field i svg { display: block; width: 100%; height: 100%; overflow: visible; }
.v-field i.lime { color: var(--lime); }
.v-field .p-v path   { fill: none; stroke: currentColor; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.v-field .p-solid path { fill: currentColor; stroke: none; }
.v-field .p-step rect{ fill: none; stroke: currentColor; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
[data-theme="dark"] .v-field i:not(.lime) { color: #F4F3EE; }

/* ---------- 3. COMPAÑERO DE SCROLL (lateral derecho) ---------- */
.v-rail {
  position: fixed; right: 22px; top: 50%; z-index: 60;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; transition: opacity .5s ease;
  background: none; border: 0; padding: 6px; cursor: pointer; color: var(--ink);
}
.v-rail.show { opacity: 1; }
.v-rail-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); height: 96px; display: flex; align-items: center; justify-content: center;
  transition: opacity .3s ease;
}
.v-rail-label.swap { opacity: 0; }
.v-rail-track { width: 2px; height: 70px; background: var(--line); border-radius: 2px; position: relative; overflow: hidden; }
.v-rail-track b { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--lime); transform-origin: top; transform: scaleY(0); }
.v-rail svg { width: 30px; height: 30px; overflow: visible; display: block; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.v-rail .rail-bg  { fill: none; stroke: var(--ink); stroke-width: 14; opacity: .22; }
.v-rail .rail-fg  { fill: var(--lime); }
.v-rail .rail-out { fill: none; stroke: var(--ink); stroke-width: 12; }
.v-rail:hover svg { transform: scale(1.15); }
.v-rail.done svg { animation: rail-pop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes rail-pop { 40% { transform: scale(1.35) rotate(-6deg); } }
.v-rail-tip {
  position: absolute; right: 44px; bottom: 0; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--dark); color: #fff; padding: 6px 10px; border-radius: 8px;
  opacity: 0; transform: translateX(6px); transition: .25s ease; pointer-events: none;
}
.v-rail:hover .v-rail-tip { opacity: 1; transform: none; }
@media (max-width: 1100px) { .v-rail { display: none; } }

/* ---------- 4. TITULARES palabra a palabra ---------- */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split .w > span { display: inline-block; transform: translateY(105%); transition: transform .85s cubic-bezier(.2,.8,.2,1); }
.split.in .w > span { transform: none; }

/* subrayado lima que se dibuja bajo los títulos de sección */
.section-head .h2.split { position: relative; padding-bottom: 18px; }
.section-head .h2.split::after {
  content: ""; position: absolute; left: 50%; bottom: 0; height: 5px; width: 84px; margin-left: -42px;
  background: var(--lime); border-radius: 6px; transform: scaleX(0);
  transition: transform .9s cubic-bezier(.2,.8,.2,1) .4s;
}
.section-head .h2.split.in::after { transform: scaleX(1); }

/* ---------- 5. SERVICIOS: tarjetas con relieve y foco de luz ---------- */
@media (hover: hover) and (pointer: fine) {
  .services-grid { perspective: 1100px; }
  .svc.tilt { transition: transform .18s ease-out, box-shadow .25s ease; transform-style: preserve-3d; }
  .svc { position: relative; }
  .svc::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(217,252,103,.22), transparent 60%);
    opacity: 0; transition: opacity .3s ease;
  }
  .svc:hover::after { opacity: 1; }
}

/* ---------- 6. BANDA DE CIFRAS: V gigante que cruza ---------- */
.stats { position: relative; overflow: hidden; }
.stats > .wrap { position: relative; z-index: 1; }
.stats-v {
  position: absolute; top: 50%; left: 0; height: 260%; aspect-ratio: 1;
  transform: translate(-30%, -50%); pointer-events: none; will-change: transform; z-index: 0;
}
.stats-v svg { width: 100%; height: 100%; display: block; }
.stats-v .sv-fill { fill: var(--lime); opacity: .1; }
.stats-v .sv-line { fill: none; stroke: var(--ink); stroke-width: 1.3; vector-effect: non-scaling-stroke; opacity: .3; stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-theme="dark"] .stats-v .sv-fill { opacity: .035; }
[data-theme="dark"] .stats-v .sv-line { stroke: #8fb0ff; opacity: .28; }

/* ---------- 7. CTA final: escalones que flotan ---------- */
.cta-lime { position: relative; overflow: hidden; isolation: isolate; }
.cta-lime > * { position: relative; z-index: 1; }
.cta-v {
  position: absolute !important; z-index: 0 !important; right: -40px; top: 50%;
  width: 300px; aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; will-change: transform;
}
.cta-v svg { width: 100%; height: 100%; overflow: visible; display: block; }
.cta-v path { fill: none; stroke: #161616; stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: .2; }
.cta-v path.c2 { opacity: .12; }
.cta-v path.c3 { opacity: .06; }

/* ---------- móvil: menos ruido ---------- */
@media (max-width: 760px) {
  .hero-v { width: 120vw; transform: translate(-50%, -40%); }
  .hero-v .v-echo.e3 { display: none; }
  .hero-v svg { opacity: .55; }
  [data-theme="dark"] .hero-v svg { opacity: .4; }
  .v-field i.desk { display: none; }
  .cta-v { width: 200px; right: -70px; opacity: .7; }
}

/* ---------- accesibilidad: sin movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-v .v-line, .hero-v .v-echo { stroke-dashoffset: 0; animation: none !important; }
  .hero-v .v-fill { opacity: .14; animation: none !important; }
  .anim-ready .hero * { opacity: 1 !important; transform: none !important; }
  .split .w > span { transform: none !important; }
  .v-field, .v-rail { display: none !important; }
}