/* PersalOne · kit para Business v1 (30/10/2026)
   Pantallas en anillo 3D + tabla comparativa + revelado al scroll. Sin dependencias ni estilos en línea.
   Todo cuelga de clases pk-* o del atributo [data-reveal]: no toca ningún elemento que ya exista en la home.
   Los colores leen los --ps-* de Business con respaldo (así el alto contraste de PersalSens los sigue).
   Paleta cerrada: verde, ocre, off-white y blanco. Animaciones solo con transform y opacity. */

:root{
  --pk-green:var(--ps-green,#285633);
  --pk-ocre:var(--ps-ocre,#C9993A);
  --pk-white:var(--ps-white,#FFFFFF);
  --pk-off:var(--ps-off-white,#F8F7F4);
  --pk-line:rgba(40,86,51,.16);
  --pk-ease:cubic-bezier(.22,1,.36,1);
  --pk-sh1:0 1px 2px rgba(40,86,51,.08),0 4px 12px rgba(40,86,51,.06);
  --pk-sh2:0 12px 32px rgba(40,86,51,.14),0 2px 6px rgba(40,86,51,.08);
}

/* 1 · Base de las secciones del kit */
.pk-sec{position:relative;color:var(--pk-green)}
.pk-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pk-head{max-width:760px;margin:0 auto 48px;text-align:center}
.pk-head .section-sub{margin:0 auto}

/* 2 · Revelado al scroll. El estado oculto solo existe con html.pk-on, que pone el JS del kit al cargar:
   sin JS, con el fichero bloqueado o caído, no se oculta nada. */
.pk-on [data-reveal]{opacity:0;transform:translate3d(0,28px,0);transition:opacity .6s var(--pk-ease) var(--d,0ms),transform .6s var(--pk-ease) var(--d,0ms)}
.pk-on [data-reveal=zoom]{transform:scale(.94)}
.pk-on [data-reveal=group]{opacity:1;transform:none;transition:none}
.pk-on [data-reveal].is-in{opacity:1;transform:none}

/* 3 · Pantallas en anillo 3D: gira al teléfono de la función que se está leyendo */
.pk-show__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:start}
.pk-steps{list-style:none;margin:0;padding:0}
.pk-step{min-height:60vh;display:flex;flex-direction:column;justify-content:center;gap:12px;padding-block:24px;opacity:.8;transition:opacity .6s var(--pk-ease)}
.pk-step.is-active{opacity:1}
.pk-step__n{font-weight:800;font-size:.875rem;letter-spacing:.1em}
.pk-step.is-active .pk-step__n::before{content:"";display:inline-block;width:1.6rem;height:4px;border-radius:2px;background:var(--pk-ocre);margin-right:.6rem;vertical-align:middle}
.pk-step h3{margin:0;font-size:clamp(1.5rem,1.1rem + 1.4vw,2rem);line-height:1.15;letter-spacing:-.02em;font-weight:800}
.pk-step p{margin:0;max-width:30rem;font-size:1.0625rem;line-height:1.6}
.pk-stage{position:sticky;top:80px;height:78vh;height:min(78vh,calc(100svh - 96px - var(--ps-banner-offset,0px)));perspective:1700px;overflow:clip;border-radius:34px;--pw:clamp(150px,16.4vw,246px);--R:calc(var(--pw)*1.42)}
.pk-stage__card{position:absolute;inset:0;background:var(--pk-white);border:1px solid var(--pk-line);border-radius:34px;overflow:hidden;box-shadow:var(--pk-sh1)}
.pk-stage__card::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--pk-ocre)}
.pk-stage__card::after{content:"";position:absolute;left:24%;right:24%;bottom:7%;height:5%;border-radius:50%;background:rgba(40,86,51,.2);filter:blur(16px)}
.pk-ring{position:absolute;left:50%;top:52%;width:var(--pw);height:calc(var(--pw)*2.2222);margin:calc(var(--pw)*-1.1111) 0 0 calc(var(--pw)*-.5);
  transform-style:preserve-3d;transform:translateZ(calc(var(--R)*-1)) rotateY(calc(var(--k,0)*-360deg/var(--n,8)));transition:transform 1s var(--pk-ease)}
.pk-ring__phone{position:absolute;inset:0;margin:0;transform:rotateY(calc(var(--i,0)*360deg/var(--n,8))) translateZ(var(--R));backface-visibility:hidden;-webkit-backface-visibility:hidden;opacity:0;transition:opacity .8s var(--pk-ease)}
.pk-ring__phone[data-d="0"]{opacity:1}
.pk-ring__phone[data-d="1"]{opacity:.82}
.pk-ring__phone[data-d="2"]{opacity:.45}
.pk-phone{position:relative;width:100%;aspect-ratio:1080/2400;border-radius:13%/5.85%;padding:3.4%;background:var(--pk-green);box-shadow:0 0 0 2px rgba(255,255,255,.22),0 12px 20px -10px rgba(40,86,51,.45)}
.pk-phone::before{content:"";position:absolute;top:2.2%;left:50%;width:27%;height:1.7%;transform:translateX(-50%);border-radius:999px;background:var(--pk-green);z-index:3}
.pk-phone__screen{position:relative;width:100%;height:100%;border-radius:10.2%/4.5%;overflow:hidden;background:var(--pk-off)}
.pk-phone__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.pk-seal{position:absolute;top:22px;right:22px;z-index:4;height:84px;width:auto}
.pk-render{position:absolute;top:22px;left:22px;z-index:4;margin:0;padding:.3rem .75rem;border-radius:999px;background:var(--pk-white);border:1px solid var(--pk-line);font-size:.8125rem;font-weight:700;line-height:1.2}
.pk-stage__cap{position:absolute;bottom:16px;left:0;right:0;margin:0;text-align:center;font-weight:700;font-size:.875rem;z-index:4}
/* sin JS: solo el primer teléfono, de frente, y todos los pasos legibles */
.pk-show:not(.is-ready) .pk-ring__phone{opacity:0}
.pk-show:not(.is-ready) .pk-ring__phone:first-child{opacity:1}
.pk-show:not(.is-ready) .pk-step{opacity:1}
@media (max-width:900px){
  .pk-show__grid{grid-template-columns:1fr;gap:0}
  .pk-stage{top:64px;height:42vh;height:42svh;z-index:5;order:-1;perspective:900px;border-radius:24px;--pw:min(34vw,138px);--R:calc(var(--pw)*1.45)}
  .pk-stage__card{border-radius:24px}
  .pk-ring{top:54%}
  .pk-step{min-height:34vh;min-height:34svh}
  .pk-stage__cap{display:none}
  .pk-seal{top:14px;right:14px;height:44px}
  .pk-render{top:14px;left:14px}
}
/* Reflow (WCAG 1.4.10): con poca altura (zoom 400 % o móvil apaisado) el escenario deja de ser pegajoso para no tapar el texto de los pasos */
@media (max-height:500px){
  .pk-stage{position:relative;top:auto;height:min(70svh,260px)}
}

/* 4 · Tabla comparativa: columna destacada en verde y marcas que se dibujan (PLANTILLA VACÍA: no publicar sin validación legal) */
.pk-compare-card{overflow:hidden;border:1px solid var(--pk-line);border-radius:24px;background:var(--pk-white);box-shadow:var(--pk-sh1)}
.pk-compare__nota{margin:0;padding:12px 16px;font-size:.875rem;font-weight:600}
.pk-compare{position:relative;overflow-x:auto}
.pk-compare:focus-visible{outline:3px solid var(--pk-green);outline-offset:-3px}
.pk-compare table{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;text-align:center}
.pk-compare th,.pk-compare td{padding:16px 12px;border-top:1px solid var(--pk-line)}
.pk-compare thead th{font-weight:800}
.pk-compare tbody th{text-align:left;font-weight:600}
.pk-compare .pk-hl-col{position:relative;background:var(--pk-green);color:var(--pk-white);border-top-color:rgba(255,255,255,.22)}
.pk-compare thead .pk-hl-col{border-top-color:var(--pk-green)}
.pk-compare thead .pk-hl-col::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--pk-ocre)}
.pk-check{display:inline-grid;place-items:center;width:28px;height:28px;vertical-align:middle}
.pk-check svg{display:block;width:100%;height:100%}
.pk-check line{stroke:currentColor;stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke;transform-box:fill-box}
.pk-check .a{transform-origin:0 0}
.pk-check .b{transform-origin:0 100%}
@keyframes pk-draw{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
.pk-on .pk-compare:not(.is-in) .pk-check line{opacity:0}
.pk-compare.is-in .pk-check line{animation:pk-draw .3s var(--pk-ease) calc(.2s + var(--r,0)*.14s) both}
.pk-compare.is-in .pk-check .b{animation-delay:calc(.36s + var(--r,0)*.14s)}
.pk-compare tr:nth-child(2){--r:1}
.pk-compare tr:nth-child(3){--r:2}
.pk-compare tr:nth-child(4){--r:3}
.pk-compare tr:nth-child(5){--r:4}
.pk-compare tr:nth-child(6){--r:5}
.pk-compare tr:nth-child(7){--r:6}
.pk-compare tr:nth-child(8){--r:7}
@media (max-width:560px){.pk-compare table{min-width:0;font-size:.86rem}.pk-compare th,.pk-compare td{padding:12px 6px}.pk-compare tbody th{padding-left:12px}}

/* 5 · Movimiento reducido = todo estático: preferencia del sistema, clase que pone el kit y el interruptor de PersalSens (html.ps-reduce-motion) */
@media (prefers-reduced-motion:reduce){
  .pk-on [data-reveal]{opacity:1!important;transform:none!important}
  .pk-sec,.pk-sec *,.pk-sec ::before,.pk-sec ::after,[data-reveal]{animation:none!important;transition:none!important}
}
:is(.pk-static,.ps-reduce-motion) :is([data-reveal],.pk-check line){opacity:1!important;transform:none!important}
:is(.pk-static,.ps-reduce-motion) :is(.pk-sec,.pk-sec *,.pk-sec ::before,.pk-sec ::after,[data-reveal]){animation:none!important;transition:none!important}

/* 6 · Arreglo de desborde de la home: html,body{overflow-x:hidden} (home.css) anula position:sticky en todo el documento.
   clip recorta igual sin crear contenedor de scroll. Solo actúa en páginas que llevan el anillo. */
body:has(.pk-show){overflow-x:clip}