/* kjv-svc3.css · 10-nov (Motor 1) · Servicios (dueño):
   1) portada: el avatar EN EL MEDIO, «como levitando», con los 6 servicios orbitando a su alrededor y el título a sus lados
      (en teléfono: título → órbita con el avatar → texto → botones);
   2) «¿Qué necesitas lograr primero?» → 3) seis servicios (3 con precio + 3 por cotización). Fluido 320–2560 px, tema claro y oscuro. */

/* ---------- 1 · portada ---------- */
.svc-hero .x-hav.svc{z-index:15}
.svc-hero .x-hav.svc .x-hav-hint{display:none!important}
.svc-hero .x-hav.svc .x-av3{animation:svFloat 6.5s ease-in-out infinite}
@keyframes svFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.svc-hero .svc-nodes{z-index:auto!important}
.svc-hero .svc-hero-in{z-index:auto!important}
.sv-split > [lang-en],.sv-split > [lang-es]{display:block}
.sv-split .s-l,.sv-split .l2{display:block}

@media (min-width:900px){
  .svc-hero{min-height:100svh;padding:clamp(88px,11vh,116px) 0 clamp(30px,5vh,56px)!important;align-items:stretch!important}
  .svc-hero .svc-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,28vw) minmax(0,1fr);grid-template-rows:auto 1fr auto;
    column-gap:clamp(18px,2vw,36px);width:min(1380px,calc(100% - 48px));padding:0!important;height:calc(100svh - clamp(118px,16vh,172px));min-height:560px;position:relative}
  .svc-hero{height:auto!important;min-height:0!important}
  .svc-hero .svc-hero-in > .x-kick{grid-column:1/-1;grid-row:1;justify-self:center;margin:0}
  .svc-hero .sv-split{grid-column:1/-1;grid-row:2;align-self:center;margin:0!important;position:relative;z-index:16;pointer-events:none;
    font-size:clamp(38px,min(4.6vw,8.6vh),84px)!important;line-height:.98!important}
  .sv-split > [lang-en],.sv-split > [lang-es]{display:flex;justify-content:space-between;align-items:center;gap:calc(28vw + 40px)}
  .sv-split .s-l{flex:1 1 0;min-width:0;text-align:right}
  .sv-split .l2{flex:1 1 0;min-width:0;text-align:left}
  .svc-hero .svc-lead{grid-column:1;grid-row:3;align-self:end;justify-self:end;text-align:right;margin:0!important;max-width:42ch;position:relative;z-index:16}
  .svc-hero .svc-cta{grid-column:3;grid-row:3;align-self:end;justify-self:start;display:flex;flex-wrap:wrap;gap:10px;margin:0!important;position:relative;z-index:16}
  .svc-hero .x-hav.svc{position:absolute!important;left:50%!important;top:clamp(30px,4.5vh,56px)!important;bottom:auto!important;right:auto!important;
    width:min(28vw,400px)!important;height:min(calc(100svh - clamp(150px,20vh,210px)),720px)!important;transform:translateX(-50%)!important;margin:0!important}
}
/* tableta y teléfono: título → órbita con el avatar → texto → botones */
@media (max-width:899px){
  .svc-hero{display:block!important;min-height:0!important;padding:76px 0 30px!important}
  .svc-hero .svc-hero-in{display:flex!important;flex-direction:column;align-items:center;text-align:center;width:calc(100% - 32px)!important;padding:0!important;margin:0 auto}
  .svc-hero .svc-hero-in > .x-kick{order:1;margin:0}
  .svc-hero .sv-split{order:2;margin:8px 0 0!important;text-align:center;font-size:clamp(32px,9.4vw,52px)!important;line-height:1!important}
  .sv-split .s-l,.sv-split .l2{text-align:center}
  .svc-hero .x-hav.svc{order:3;position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;transform:none!important;
    flex:none!important;width:min(62vw,300px)!important;height:min(40svh,370px)!important;margin:12px auto 4px!important}
  .svc-hero .svc-lead{order:4;margin:8px 0 0!important;font-size:15px!important;line-height:1.45!important;max-width:40ch}
  .svc-hero .svc-cta{order:5;display:flex!important;flex-wrap:wrap;justify-content:center;gap:10px;margin:16px 0 0!important;width:100%}
  .svc-hero .svc-cta .x-btn{flex:1 1 150px;justify-content:center;text-align:center}
  /* los 6 servicios orbitan alrededor del avatar también en teléfono (kjv-svc.js los mueve) */
  .svc-hero .svc-nodes{position:absolute!important;inset:0!important;display:block!important;width:auto!important;margin:0!important;pointer-events:none}
  .svc-hero .svc-nodes button{position:absolute!important;left:0;top:0;transform:var(--nt,none)!important;white-space:normal;max-width:108px;line-height:1.1;text-align:left;
    font-size:10.5px!important;padding:6px 9px 6px 6px!important;gap:6px!important}
  .svc-hero .svc-nodes button i{width:20px!important;height:20px!important;font-size:11px!important;flex:none}
}

/* ---------- 2 · ¿qué necesitas lograr primero? ---------- */
.svc-studio{--g:#D4AF37;--ink:#F7F1E6;--mute:rgba(247,241,230,.74);--line:rgba(212,175,55,.32);--card:rgba(255,255,255,.035);--on:rgba(212,175,55,.1)}
:root[data-theme="light"] .svc-studio{--g:#7A5B0C;--ink:#0B3D2E;--mute:rgba(11,61,46,.76);--line:rgba(15,107,69,.26);--card:rgba(255,255,255,.78);--on:rgba(212,175,55,.14)}
.sv3-k{margin:0 0 12px;font:700 12px/1.3 var(--body,system-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--g)}
.sv3-k2{margin-top:clamp(30px,4vw,56px)}
.sv3-goal{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(14px,2.4vw,34px);margin-top:clamp(22px,3vw,40px);padding:clamp(18px,2.4vw,34px);border:1px solid var(--line);border-radius:24px;background:var(--card);color:var(--ink)}
.sv3-cs{display:flex;flex-direction:column;gap:8px}
.sv3-c{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 16px;border-radius:14px;border:1px solid var(--line);background:transparent;color:var(--ink);font:600 15px/1.25 var(--body,system-ui);text-align:left;cursor:pointer;transition:background .25s,border-color .25s}
.sv3-c i{font-style:normal;width:22px;text-align:center;color:var(--g)}
.sv3-c:hover{border-color:var(--g)}
.sv3-c.on{background:var(--on);border-color:var(--g)}
.sv3-c:focus-visible,.sv6-go:focus-visible{outline:2px solid var(--g);outline-offset:3px}
.sv3-rec{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:clamp(16px,2vw,26px);border-radius:18px;border:1px solid var(--g);background:var(--on)}
.sv3-rt{margin:0;font:700 11px/1.3 var(--body,system-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--g)}
.sv3-rh{margin:0;font-size:clamp(21px,2vw,28px);line-height:1.15;color:var(--ink)}
.sv3-rp{margin:0;color:var(--mute);line-height:1.5}
.sv3-ra{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sv3-ra .x-btn{flex:1 1 170px;justify-content:center;text-align:center}
.sv3-rec.swap .sv3-rh,.sv3-rec.swap .sv3-rp{animation:sv3In .45s ease both}
@keyframes sv3In{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- 3 · seis servicios ---------- */
.sv6{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.sv6-c{display:flex;flex-direction:column;gap:8px;padding:clamp(16px,1.8vw,24px);border:1px solid var(--line);border-radius:20px;background:var(--card);color:var(--ink);
  transition:border-color .3s,background .3s,transform .3s,opacity .3s;scroll-margin-top:110px}
.sv6-c.on{border-color:var(--g);background:var(--on);transform:translateY(-3px)}
.sv6-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0}
.sv6-n{font:600 13px/1 var(--body,system-ui);letter-spacing:.14em;color:var(--g)}
.sv6-tag{font:700 10.5px/1.2 var(--body,system-ui);letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:99px;border:1px solid var(--line);color:var(--g)}
.sv6-c.paid .sv6-tag{background:var(--g);border-color:var(--g);color:#061A13}
:root[data-theme="light"] .sv6-c.paid .sv6-tag{color:#FFFDF7}
.sv6-c h3{margin:2px 0 0;font-size:clamp(20px,1.7vw,26px);line-height:1.15;color:var(--ink)}
.sv6-p{margin:0;color:var(--mute);font-size:15px;line-height:1.5}
.sv6-inc{margin:0;font:600 12px/1.45 var(--body,system-ui);color:var(--g)}
.sv6-pr{margin:auto 0 0!important;padding-top:10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;border-top:1px solid var(--line)}
.sv6-pr b{font-size:clamp(22px,2vw,30px);color:var(--ink)}
.sv6-pr span{font-size:13px;color:var(--mute)}
.sv6-go{color:var(--g);font-weight:700;text-decoration:none}
.sv6-go:hover{text-decoration:underline}
.sv6-note{margin:14px 0 0;color:var(--mute);font-size:13.5px;line-height:1.5}
.sv6-note a{color:var(--g);font-weight:700;text-decoration:none}

@media (min-width:1700px){.svc-studio .sv3-goal,.svc-studio .sv6{max-width:1480px;margin-left:auto;margin-right:auto}}
@media (max-width:1100px){.sv6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:819px){
  .sv3-goal{grid-template-columns:1fr;padding:14px}
  .sv3-c{min-height:44px;padding:9px 12px;font-size:14px}
  .sv6{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;gap:12px;padding:4px 7vw 10px;margin:0 -18px;scrollbar-width:none}
  .sv6::-webkit-scrollbar{display:none}
  .sv6-c{flex:0 0 84%;max-width:340px;scroll-snap-align:center;transform:none!important}
  .sv6-note{text-align:center;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.svc-hero .x-hav.svc .x-av3,.sv3-rec.swap .sv3-rh,.sv3-rec.swap .sv3-rp{animation:none}.sv6-c,.sv3-c{transition:none}}