/* Componente comparador con vistas (24-oct-2026).
   La marca entra por las variables --pl-g, --pl-f, --pl-h y --pl-ink.
   Dos usos: .pl--cmp (deslizador «hoy | con nosotros» + pestañas 01–04) y .pl--phone (un celular grande que rota).
   Sin JS todo se ve apilado; con JS (.js) se activan el deslizador, las pestañas y la barra de progreso. */
.pl{--pl-g:linear-gradient(135deg,#CE32FF,#FF3E89);--pl-f:linear-gradient(90deg,#CE32FF,#FF3E89);--pl-h:#CE32FF;--pl-ink:#060610;--pl-dur:6s;--x:50;position:relative;margin-top:22px}
.pl--prl{--pl-g:linear-gradient(135deg,#CE32FF,#FF3E89);--pl-f:linear-gradient(90deg,#CE32FF,#FF3E89);--pl-h:#CE32FF;--pl-ink:#060610}
.pl--go{--pl-g:#fd8700;--pl-f:linear-gradient(90deg,#fd8700,#16c1fd);--pl-h:#fd8700;--pl-ink:#0B1020}
.pl--dyn{--pl-g:linear-gradient(155deg,#14215D,#1E7BFF);--pl-f:linear-gradient(90deg,#1E7BFF,#84B7FF);--pl-h:#1E7BFF;--pl-ink:#fff}

/* ---------- escenario ---------- */
.pl__stage{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--go-bg)}
.pl__view{position:relative}
.pl__side{position:relative;overflow:hidden;isolation:isolate;padding:24px 22px;display:flex;flex-direction:column;gap:12px}
.pl__side::before,.pl__side::after{content:"";position:absolute;inset:0;pointer-events:none}
.pl__side::before{z-index:-2;background-size:cover;background-position:center}
.pl__side::after{z-index:-1}
.pl__hoy{background:var(--trad-bg);color:var(--trad-fg)}
.pl__con{background:var(--go-bg);color:var(--go-fg);border-top:1px solid var(--line)}
.pl__hoy::after{background:var(--tv-a)}
.pl__con::after{background:linear-gradient(180deg,var(--gv-a) 0%,var(--gv-a) 70%,var(--gv-b) 100%)}
.pl__chip{align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;border-radius:999px;line-height:1.2}
.pl__hoy .pl__chip{background:var(--trad-ico);color:var(--trad-fg)}
.pl__con .pl__chip{background:var(--pl-g);color:var(--pl-ink)}
.pl__hoy ul{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.pl__hoy li{font-size:clamp(17px,2vw,21px);line-height:1.3;font-weight:700;color:var(--trad-fg)}
.pl__con p{margin:0;font-size:clamp(22px,2.7vw,30px);line-height:1.15;font-weight:800;letter-spacing:-.01em;color:var(--go-fg);text-wrap:balance}
.pl__hoy li{text-wrap:pretty}
/* fotos del comparador (25-oct-2026): izquierda = el PROBLEMA que dice el texto (queda en gris); derecha = la mejor imagen de nuestros sitios que apoya la solución */
.pl__hoy::before{filter:grayscale(1) contrast(.92)}
.pl--prl [data-v="0"] .pl__hoy::before{background-image:url('../img/academia-reto2.jpg');background-position:50% 72%}
.pl--prl [data-v="0"] .pl__con::before{background-image:url('../img/dynbel-web-dashboard.webp');background-position:100% 30%}
.pl--prl [data-v="1"] .pl__hoy::before{background-image:url('../img/prl-hoy-capacitacion.jpg');background-position:50% 45%}
.pl--prl [data-v="1"] .pl__con::before{background-image:url('../img/academia-curso-brigadas.jpg');background-position:50% 50%}
.pl--prl [data-v="2"] .pl__hoy::before{background-image:url('../img/prl-hoy-monitores.jpg');background-size:160% auto;background-position:100% 40%}
.pl--prl [data-v="2"] .pl__con::before{background-image:url('../img/glymdo-vision.jpg');background-position:50% 55%}
/* velo más ligero para que la foto se lea sin perder el contraste del texto */
.pl--cmp .pl__hoy::after{opacity:.72}
.pl--cmp .pl__con::after{opacity:.88}
.pl__handle,.pl__range,.pl__hint{display:none}

/* ---------- pestañas ---------- */
.pl__tabs{display:none}
.pl__tab{position:relative;display:flex;flex-direction:column;gap:5px;text-align:left;font:inherit;color:var(--fg);background:none;border:0;padding:16px 0 4px;cursor:pointer;min-height:44px}
.pl__prog{position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.pl__prog i{display:block;height:100%;width:0;background:var(--pl-f);border-radius:3px}
.pl__num{font-size:13px;font-weight:800;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--muted)}
.pl__not{font-size:14px;line-height:1.3;font-weight:600;color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.pl__is{font-size:16px;line-height:1.3;font-weight:800;color:var(--muted)}
.pl__sub{font-size:13.5px;line-height:1.35;font-weight:600;color:var(--muted)}
.pl__tab[aria-selected="true"] .pl__num{color:var(--ac)}
.pl__tab[aria-selected="true"] .pl__is{color:var(--fg)}
.pl__tab[aria-selected="true"] .pl__not,.pl__tab[aria-selected="true"] .pl__sub{color:var(--fg);opacity:.78}
.pl__tab:hover .pl__is{color:var(--fg)}
.pl__tab:focus-visible{outline:3px solid var(--pl-h);outline-offset:4px;border-radius:6px}

/* ---------- con JS ---------- */
.js .pl__tabs{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:20px;margin-top:16px}
.js .pl--cmp .pl__stage{height:clamp(320px,44vh,400px);touch-action:pan-y}
.js .pl--cmp .pl__view{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.js .pl--cmp .pl__view[data-on]{opacity:1;visibility:visible;transition:opacity .35s ease .2s}
.js .pl--cmp .pl__side{position:absolute;inset:0;justify-content:center;border-top:0;padding:28px 30px}
.js .pl--cmp .pl__hoy{padding-right:59%}
.js .pl--cmp .pl__con{padding-left:59%;clip-path:inset(0 0 0 calc(var(--x) * 1%))}
.js .pl--cmp .pl__hoy::after{background:linear-gradient(90deg,var(--tv-a) 0%,var(--tv-a) 30%,transparent 92%)}
.js .pl--cmp .pl__con::after{background:linear-gradient(270deg,var(--gv-a) 0%,var(--gv-a) 30%,transparent 92%)}
.js .pl--cmp .pl__hoy .pl__chip{position:absolute;left:18px;top:16px}
.js .pl--cmp .pl__con .pl__chip{position:absolute;right:18px;top:16px}
.js .pl--cmp .pl__handle{display:block;position:absolute;top:0;bottom:0;left:calc(var(--x) * 1%);width:3px;margin-left:-1.5px;background:var(--pl-h);z-index:3;pointer-events:none}
.js .pl--cmp .pl__handle i{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;border:9px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--pl-g) border-box;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(0,0,0,.35)}
.js .pl--cmp .pl__handle svg{width:36px;height:36px;fill:none;stroke:var(--pl-h);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.js .pl--cmp .pl__stage:focus-within .pl__handle i{outline:3px solid var(--fg);outline-offset:3px}
.js .pl--cmp .pl__range{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:4;cursor:ew-resize}
.js .pl--cmp .pl__hint{display:block;text-align:center;font-size:13px;font-weight:600;color:var(--muted);margin-top:10px}
.js .pl--cmp .pl__tab{padding-top:18px}
.js .pl--go .pl__tabs{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.75fr);gap:28px}
.js .pl--go .pl__not{font-size:13px}.js .pl--go .pl__is{font-size:15px}

/* barra de progreso: avanza sola a la siguiente vista; se pausa con el cursor o el foco del teclado */
.js .pl.is-run .pl__tab[aria-selected="true"] .pl__prog i{animation:pl-prog var(--pl-dur) linear forwards}
.js .pl.is-paused .pl__tab[aria-selected="true"] .pl__prog i{animation-play-state:paused}
@keyframes pl-prog{from{width:0}to{width:100%}}

/* ---------- celular grande que rota ---------- */
.js .pl--phone .pl__stage{display:grid;border:0;box-shadow:none;background:none;overflow:visible;border-radius:0}
.js .pl--phone .pl__view{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s;display:flex;justify-content:center}
.js .pl--phone .pl__view[data-on]{opacity:1;visibility:visible;transition:opacity .35s ease .2s}
.pl--phone .bm-phone{--bm-phone-w:min(360px,86vw,calc((100svh - 130px) * .4562));margin:0}
.pl--phone .bm-screen .bms-demo{font-size:max(10.5px,3.3cqw)}
.js .pl--phone{display:grid;grid-template-columns:minmax(0,380px) minmax(0,420px);gap:56px;align-items:center;justify-content:center}
.js .pl--phone .pl__tabs{display:flex;flex-direction:column;gap:18px;margin-top:0}
.js .pl--phone .pl__tab{padding:18px 0 6px}
.js .pl--phone .pl__is{font-size:20px}
.js .pl--phone .pl__sub{font-size:14.5px}

/* ---------- botón visible de pausar / reanudar (WCAG 2.2.2) ---------- */
.pl__pp{display:none;align-items:center;gap:8px;margin:14px 0 0;padding:8px 16px 8px 12px;min-height:44px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--fg);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.js .pl__pp{display:inline-flex}
.js .pl__pp[hidden]{display:none}
.pl__pp svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pl__pp .pp-play{display:none;fill:currentColor;stroke-width:1.5}
.pl__pp[aria-pressed="true"] .pp-pause{display:none}.pl__pp[aria-pressed="true"] .pp-play{display:inline}
.pl__pp:hover{border-color:var(--pl-h)}
.pl__pp:focus-visible{outline:3px solid var(--pl-h);outline-offset:3px}
.js .pl--cmp .pl__pp{margin-left:auto;display:flex;width:max-content}
.js .pl--cmp .pl__pp[hidden]{display:none}
.js .pl--phone{grid-template-rows:1fr auto auto 1fr}
.js .pl--phone .pl__stage{grid-column:1;grid-row:1/span 4}
.js .pl--phone .pl__tabs{grid-column:2;grid-row:2}
.js .pl--phone .pl__pp{grid-column:2;grid-row:3;justify-self:start;margin-top:8px}

/* ---------- celular (≤700 px) ---------- */
@media (max-width:700px){
  /* decisión de Julián: el comparador se queda apilado, sin deslizador ni pestañas */
  .js .pl--cmp .pl__stage{height:auto}
  .js .pl--cmp .pl__view{position:static;opacity:1;visibility:visible;transition:none;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
  .js .pl--cmp .pl__view + .pl__view{margin-top:14px}
  .js .pl--cmp .pl__side{position:relative;inset:auto;padding:22px 20px;justify-content:flex-start;clip-path:none}
  .js .pl--cmp .pl__hoy{padding-right:20px}
  .js .pl--cmp .pl__con{padding-left:20px;border-top:1px solid var(--line)}
  .js .pl--cmp .pl__hoy::after{background:var(--tv-a)}
  .js .pl--cmp .pl__con::after{background:linear-gradient(180deg,var(--gv-a) 0%,var(--gv-a) 90%,var(--gv-b) 100%)}
  .js .pl--cmp .pl__hoy .pl__chip,.js .pl--cmp .pl__con .pl__chip{position:static}
  .js .pl--cmp .pl__handle,.js .pl--cmp .pl__range,.js .pl--cmp .pl__hint,.js .pl--cmp .pl__tabs{display:none}
  .js .pl--cmp .pl__stage{border:0;box-shadow:none;background:none;overflow:visible;border-radius:0}
  /* celular grande: ocupa el ancho disponible y las pestañas van arriba, fáciles de tocar */
  .js .pl--phone{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:14px}
  .js .pl--phone .pl__stage,.js .pl--phone .pl__tabs,.js .pl--phone .pl__pp{grid-column:1;grid-row:auto}
  .js .pl--phone .pl__tabs{order:-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .js .pl--phone .pl__tab{padding:14px 2px 6px;min-height:64px}
  .js .pl--phone .pl__pp{justify-self:center;margin:0;order:-1}
  .js .pl--phone .pl__is{font-size:14px}
  .js .pl--phone .pl__sub{display:none}
  .pl--phone .bm-phone{--bm-phone-w:min(100%,430px);width:min(100%,430px)}
}
@media (prefers-reduced-motion:reduce){
  .js .pl__view,.js .pl__view[data-on]{transition:none !important}
  .js .pl .pl__prog i{animation:none !important}
}