/* p-web.css · /web/ · solo tokens (sin hex sueltos, sin sombras, sin degradados, sin rebotes) · prefijo wb- */

/* ---- ventana de navegador que enmarca la web viva ---- */
/* en pantallas chicas el dedo no queda atrapado dentro del marco: para recorrerla, hay un enlace a pantalla completa */
@media (max-width:900px){.wb-win .scaled.live iframe,.wb-tel-s .scaled.live iframe{pointer-events:none}}
.wb-win{border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-tarjeta);overflow:hidden;background:var(--blanco)}
.wb-bar{height:40px;display:flex;align-items:center;gap:8px;padding:0 16px;background:var(--superficie);border-bottom:var(--borde-ancho) solid var(--borde)}
.wb-bar i{width:11px;height:11px;border-radius:50%;background:var(--borde);flex:none}
.wb-bar span{margin:0 auto;min-width:min(340px,70%);height:26px;border-radius:var(--r-campo);background:var(--fondo);border:var(--borde-ancho) solid var(--borde);display:grid;place-items:center;font-size:var(--t-12);color:var(--texto-2)}
.wb-win .scaled{border:0;border-radius:0}
.wb-stage{position:relative}

/* mapa de la página: saltos y la duda de cada sección */
.wb-mapa{margin-top:var(--s-24)}
.wb-mapa .filtros{margin-bottom:var(--s-16);gap:6px}
.wb-mapa .filtros button{padding:6px 12px}
.wb-duda{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-24);margin:0;padding-top:var(--s-16);border-top:var(--borde-ancho) solid var(--borde)}
.wb-duda dt{font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2);margin-bottom:var(--s-4)}
.wb-duda dd{margin:0;font-size:var(--t-19);font-weight:var(--bold);letter-spacing:var(--trk-19);color:var(--texto);min-height:2.5em}
@media (max-width:700px){.wb-duda{grid-template-columns:minmax(0,1fr);gap:var(--s-12)}.wb-duda dd{min-height:0}}

/* anatomía del inicio: marcas numeradas sobre la pieza (siempre clara: blanco y tinta fijos) */
.wb-anat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-48);align-items:center}
@media (max-width:1000px){.wb-anat{grid-template-columns:minmax(0,1fr);gap:var(--s-32)}}
.wb-mk{position:absolute;z-index:3;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--blanco);border:var(--borde-encendido) solid var(--tinta);color:var(--tinta);font-size:var(--t-12);font-weight:var(--bold);font-style:normal;display:grid;place-items:center;font-variant-numeric:tabular-nums;transition:background var(--dur-micro) var(--mov-micro),color var(--dur-micro) var(--mov-micro)}
.wb-mk.hl{background:var(--tinta);color:var(--blanco)}

/* lista de reglas: número, regla y su motivo en la misma frase */
.wb-reglas{list-style:none;margin:0;padding:0}
.wb-reglas li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--s-12);padding:var(--s-16) 0;border-top:var(--borde-ancho) solid var(--borde);font-size:var(--t-17);line-height:var(--lh-cuerpo);max-width:none;color:var(--texto-2);transition:background var(--dur-micro) var(--mov-micro)}
.wb-reglas li:last-child{border-bottom:var(--borde-ancho) solid var(--borde)}
.wb-reglas .n{font-variant-numeric:tabular-nums;font-weight:var(--bold);color:var(--texto-2)}
.wb-reglas b{color:var(--texto)}
.wb-reglas li.hl{background:var(--superficie)}
.wb-reglas-s{margin-top:var(--s-32)}
.wb-h3{margin:var(--s-48) 0 var(--s-24)}

/* interruptor que enciende lo que muestra (la misma cápsula del logo) */
.wb-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-16) var(--s-32);margin-bottom:var(--s-24)}
.wb-tog{display:inline-flex;align-items:center;gap:var(--s-12);min-height:var(--tocable);padding:0;border:0;background:transparent;font:inherit;font-size:var(--t-15);font-weight:var(--bold);color:var(--texto);cursor:pointer;text-align:left}
.wb-tog-sw{position:relative;display:block;width:24px;height:42px;border:var(--borde-encendido) solid var(--control-apagado);border-radius:var(--r-pill);flex:none;transition:border-color var(--dur-estado) var(--mov-estado)}
.wb-tog-sw b{position:absolute;left:50%;bottom:3px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--control-apagado);transition:transform var(--dur-estado) var(--mov-estado),background var(--dur-estado) var(--mov-estado)}
.wb-tog[aria-checked="true"] .wb-tog-sw{border-color:var(--acento)}
.wb-tog[aria-checked="true"] .wb-tog-sw b{transform:translateY(-19px);background:var(--acento)}
.wb-tog small{display:block;font-size:var(--t-12);font-weight:var(--regular);color:var(--texto-2)}

/* retícula: 12 columnas sobre la web real */
.wb-cols{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:2;transition:opacity var(--dur-estado) var(--mov-estado)}
.wb-win.on .wb-cols{opacity:1}
.wb-cols-in{position:absolute;top:0;bottom:0;left:8.3333%;right:8.3333%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2%}
.wb-cols-in i{background:color-mix(in srgb,var(--encendido) 12%,transparent);border-left:var(--borde-ancho) solid color-mix(in srgb,var(--encendido) 45%,transparent);border-right:var(--borde-ancho) solid color-mix(in srgb,var(--encendido) 45%,transparent)}
.wb-dim{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-style:normal;font-size:var(--t-12);font-weight:var(--bold);padding:5px 10px;border-radius:var(--r-pill);background:var(--blanco);color:var(--tinta);border:var(--borde-ancho) solid var(--linea);white-space:nowrap}

/* tres anchos, una retícula */
.wb-bps{display:flex;flex-wrap:wrap;gap:var(--s-32) var(--s-32);align-items:flex-start;margin:var(--s-48) 0}
.wb-bp{--k:.3;margin:0;width:max(calc(var(--w) * var(--k) * 1px),176px);min-width:0}
.wb-bp-v{position:relative;width:calc(var(--w) * var(--k) * 1px);height:calc(var(--h) * var(--k) * 1px);border:var(--borde-ancho) solid var(--borde-control);border-radius:var(--r-campo);background:var(--fondo)}
.wb-bp-g{position:absolute;top:0;bottom:0;left:calc(var(--m) * var(--k) * 1px);right:calc(var(--m) * var(--k) * 1px);display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));column-gap:calc(var(--g) * var(--k) * 1px)}
.wb-bp-g i{background:color-mix(in srgb,var(--encendido) 14%,transparent)}
.wb-bp-m{position:absolute;top:50%;left:0;width:calc(var(--m) * var(--k) * 1px);transform:translateY(-50%);text-align:center;font-style:normal;font-size:var(--t-12);font-weight:var(--bold);color:var(--texto-2);font-variant-numeric:tabular-nums}
.wb-bp figcaption{margin-top:var(--s-12);font-size:var(--t-15);color:var(--texto)}
.wb-bp figcaption b{font-weight:var(--bold)}
.wb-bp figcaption span{display:block;color:var(--texto-2);margin-top:2px}
@media (max-width:620px){.wb-bp{--k:.2}}

/* medidas de espacio: barras a escala */
.wb-medidas h3{margin-bottom:var(--s-8)}
.wb-bars{margin:var(--s-24) 0 var(--s-16);display:grid}
.wb-bars-h,.wb-barra{display:grid;grid-template-columns:minmax(160px,1.1fr) minmax(0,2fr) minmax(0,1.2fr);gap:var(--s-16);align-items:center}
.wb-bars-h{padding-bottom:var(--s-8)}
.wb-bars-h span{font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2)}
.wb-barra{padding:var(--s-12) 0;border-top:var(--borde-ancho) solid var(--borde)}
.wb-barra:last-child{border-bottom:var(--borde-ancho) solid var(--borde)}
.wb-barra b{font-size:var(--t-15)}
.wb-barra b small{display:block;font-weight:var(--regular);font-size:var(--t-12);color:var(--texto-2)}
.wb-barra span{display:flex;align-items:center;gap:var(--s-12)}
.wb-barra i{display:block;height:12px;border-radius:var(--r-pill);flex:none}
.wb-barra .d i{width:calc(var(--d) * 2.2px);background:var(--control-hecho)}
.wb-barra .m i{width:calc(var(--m) * 2.2px);background:var(--control-apagado)}
.wb-barra em{font-style:normal;font-variant-numeric:tabular-nums;font-size:var(--t-15);color:var(--texto)}
@media (max-width:700px){.wb-bars-h,.wb-barra{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.wb-bars-h span:first-child{display:none}.wb-barra b{grid-column:1/-1}.wb-barra .d i{width:calc(var(--d) * 0.9px)}.wb-barra .m i{width:calc(var(--m) * 0.9px)}}

/* papeles de letra: el mismo texto con sus dos tamaños (siempre en claro, como la web) */
.wb-vista{margin-bottom:var(--s-16)}
.wb-pap{--web-h1:var(--t-80);--web-h1-trk:var(--trk-80);--lh-h1:var(--lh-titular);
  --web-h2:var(--t-58);--web-h2-trk:var(--trk-58);--lh-h2:var(--lh-titular);
  --web-h3:var(--t-24);--web-h3-trk:var(--trk-24);--web-bajada:var(--t-24);--web-bajada-trk:var(--trk-24);
  --web-cifra:var(--t-58);--web-cifra-trk:var(--trk-58);
  border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-tarjeta);padding:0 var(--s-32)}
.wb-pap[data-v="m"]{--web-h1:var(--t-42);--web-h1-trk:var(--trk-42);--lh-h1:var(--lh-titulo-42);
  --web-h2:var(--t-30);--web-h2-trk:var(--trk-30);--lh-h2:var(--lh-titulo-30);
  --web-h3:var(--t-19);--web-h3-trk:var(--trk-19);--web-bajada:var(--t-19);--web-bajada-trk:var(--trk-19);
  --web-cifra:var(--t-42);--web-cifra-trk:var(--trk-42)}
.wb-fila{display:grid;grid-template-columns:210px minmax(0,1fr);gap:var(--s-32);padding:var(--s-24) 0;border-top:var(--borde-ancho) solid var(--borde);align-items:center}
.wb-fila:first-child{border-top:0}
.wb-rol b{display:block;font-size:var(--t-15)}
.wb-rol>span{display:block;font-size:var(--t-12);color:var(--texto-2)}
.wb-rol .copy{margin-top:var(--s-8);font-size:var(--t-12)}
.wb-rol .copy .m,.wb-pap[data-v="m"] .wb-rol .copy .d{display:none}
.wb-pap[data-v="m"] .wb-rol .copy .m{display:inline}
.wb-esp{margin:0;max-width:none;color:var(--texto);transition:font-size var(--dur-estado) var(--mov-estado)}
.wb-pap[data-v="m"] .wb-esp{max-width:342px}
.t-h1{font-size:var(--web-h1);letter-spacing:var(--web-h1-trk);line-height:var(--lh-h1);font-weight:var(--bold);text-wrap:balance}
.t-h2{font-size:var(--web-h2);letter-spacing:var(--web-h2-trk);line-height:var(--lh-h2);font-weight:var(--bold)}
.t-h3{font-size:var(--web-h3);letter-spacing:var(--web-h3-trk);line-height:var(--lh-titulo-24);font-weight:var(--bold)}
.t-baj{font-size:var(--web-bajada);letter-spacing:var(--web-bajada-trk);line-height:var(--lh-bajada);color:var(--texto-2)}
.t-cue{font-size:var(--web-cuerpo);line-height:var(--lh-cuerpo)}
.t-chi{font-size:var(--web-chico);line-height:var(--lh-cuerpo);color:var(--texto-2)}
.t-eye{font-size:var(--web-eyebrow);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;font-weight:var(--bold);color:var(--texto-2)}
.t-cif{font-size:var(--web-cifra);letter-spacing:var(--web-cifra-trk);line-height:var(--lh-cifra);font-weight:var(--bold);font-variant-numeric:proportional-nums}
.t-pie{font-size:var(--web-pie);line-height:var(--lh-pieza);color:var(--texto-2)}
@media (max-width:760px){.wb-pap{padding:0 var(--s-16)}.wb-fila{grid-template-columns:minmax(0,1fr);gap:var(--s-12)}}

/* botones, campos y pasos: los estados, uno por uno (siempre en claro) */
.wb-estados,.wb-campos{display:grid;border-top:var(--borde-ancho) solid var(--borde);border-left:var(--borde-ancho) solid var(--borde);margin-top:var(--s-32);background:var(--fondo)}
.wb-estados{grid-template-columns:repeat(3,minmax(0,1fr))}
.wb-campos{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0;border-top:0}
.wb-cel{padding:var(--s-24);border-bottom:var(--borde-ancho) solid var(--borde);border-right:var(--borde-ancho) solid var(--borde);min-width:0}
.wb-cel b{display:block;font-size:var(--t-15);margin-top:var(--s-12);color:var(--texto)}
.wb-cel p{margin:var(--s-4) 0 0;font-size:var(--t-15);color:var(--texto-2);max-width:none}
.wb-demo{min-height:96px;display:flex;align-items:center}
.wb-demo-c{align-items:flex-start;min-height:132px}
@media (max-width:1000px){.wb-campos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.wb-estados{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.wb-estados,.wb-campos{grid-template-columns:minmax(0,1fr)}}

.wb-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-8);min-height:var(--boton-alto);padding:0 var(--s-24);border:0;border-radius:var(--r-pill);background:var(--acento);color:var(--sobre-acento);font:var(--bold) var(--web-boton)/1 var(--fuente);letter-spacing:var(--trk-19);cursor:pointer;text-decoration:none;white-space:nowrap;transition:filter var(--dur-micro) var(--mov-micro)}
.wb-btn:hover,.wb-btn.is-hover{filter:brightness(.92)}
.wb-btn:focus-visible,.wb-btn.is-foco{outline:var(--foco-ancho) solid var(--acento);outline-offset:2px}
.wb-btn[disabled]{background:var(--borde);color:var(--texto-3);cursor:not-allowed;filter:none}
.wb-btn-f{background:var(--fondo);color:var(--texto);border:var(--borde-ancho) solid var(--borde-control)}
.wb-btn-s{min-height:40px;padding:0 var(--s-16);font-size:var(--t-15)}
.wb-btn-xs{min-height:26px;padding:0 10px;font-size:11px;letter-spacing:0}
.wb-sec{display:inline-flex;align-items:center;gap:var(--s-8);min-height:var(--tocable);padding:0;border:0;background:transparent;color:var(--texto);font:var(--bold) var(--t-17)/1 var(--fuente);cursor:pointer;transition:opacity var(--dur-micro) var(--mov-micro)}
.wb-sec:hover{opacity:.7}
.wb-sec:focus-visible{outline:var(--foco-ancho) solid var(--acento);outline-offset:2px;border-radius:var(--r-campo)}

.wb-campo{width:100%}
.wb-campo label{display:block;font-size:var(--t-15);color:var(--texto);margin-bottom:var(--s-8)}
.wb-campo .in{width:100%;height:var(--boton-alto);border:var(--borde-ancho) solid var(--borde-control);border-radius:var(--r-campo);padding:0 var(--s-16);display:flex;align-items:center;font:var(--regular) var(--t-17)/1 var(--fuente);background:var(--elevado);color:var(--texto);transition:border-color var(--dur-micro) var(--mov-micro)}
.wb-campo .in i{font-style:normal;color:var(--texto-2);padding-right:var(--s-12);margin-right:var(--s-12);border-right:var(--borde-ancho) solid var(--borde)}
input.in:focus,.wb-campo.foco .in{outline:0;border:var(--foco-ancho) solid var(--acento);padding:0 calc(var(--s-16) - 1px)}
.wb-campo.error .in{border:var(--borde-encendido) solid var(--error)}
.wb-campo small{display:block;margin-top:var(--s-8);font-size:var(--t-15);line-height:1.4;color:var(--error)}
.wb-chips{display:flex;flex-wrap:wrap;gap:var(--s-8)}
.wb-chips button{height:var(--tocable);padding:0 var(--s-16);border-radius:var(--r-pill);border:var(--borde-ancho) solid var(--borde-control);background:var(--fondo);font:var(--regular) var(--t-15)/1 var(--fuente);color:var(--texto);cursor:pointer;transition:background var(--dur-micro) var(--mov-micro),border-color var(--dur-micro) var(--mov-micro)}
.wb-chips button[aria-checked="true"]{background:var(--acento-suave);border:var(--borde-encendido) solid var(--acento);padding:0 calc(var(--s-16) - .5px)}
.wb-chips button:focus-visible{outline:var(--foco-ancho) solid var(--acento);outline-offset:2px}
.wb-pasos{display:flex;align-items:center;gap:var(--s-24);padding:var(--s-24);border:var(--borde-ancho) solid var(--borde);border-top:0;background:var(--fondo)}
.wb-pasos p{margin:0;font-size:var(--t-15);color:var(--texto-2);max-width:none}
.wb-pasos b{color:var(--texto)}
.wb-paso{display:flex;gap:var(--s-8);flex:none}
.wb-pi{position:relative;display:block;width:16px;height:calc(16px * var(--sw-alto));border-radius:var(--r-pill);border:var(--borde-encendido) solid var(--control-apagado)}
.wb-pi::after{content:"";position:absolute;left:50%;bottom:2px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--control-apagado)}
.wb-pi.hecho{background:var(--control-hecho);border-color:var(--control-hecho)}
.wb-pi.hecho::after{bottom:auto;top:2px;background:var(--fondo)}

/* movimiento: cuatro escenarios con «Repetir» (el estado de reposo es el final; .is-playing hace la entrada) */
.wb-mov{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--medianil);margin:var(--s-24) 0 var(--s-32)}
@media (max-width:760px){.wb-mov{grid-template-columns:minmax(0,1fr)}}
.wb-mov .stage>div:not(.stage-bar){padding:var(--s-24) var(--s-24) 56px;width:100%}
@keyframes wb-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes wb-fade{from{opacity:0}to{opacity:1}}
.wb-m1-e{margin:0 0 var(--s-12);font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2)}
.wb-m1-t{font-size:var(--t-30);letter-spacing:var(--trk-30);line-height:var(--lh-titulo-30);margin-bottom:var(--s-24)}
.wb-m1-t .b{color:var(--acento-texto)}
.wb-m1 .wb-btn{pointer-events:none}
.is-playing .wb-m1 .a{animation:wb-in var(--dur-entrada) var(--mov-entrada) backwards}
.is-playing .wb-m1 .wb-m1-t .a{animation-delay:90ms}
.is-playing .wb-m1 .wb-m1-t .b{animation:wb-in var(--dur-entrada) var(--mov-entrada) 190ms backwards}
.is-playing .wb-m1 .c{animation:wb-in var(--dur-entrada) var(--mov-entrada) 420ms backwards}
.wb-m1-t .a,.wb-m1-t .b{display:inline-block}
.wb-mov.on .is-playing .wb-m1 .a,.wb-mov.on .is-playing .wb-m1 .wb-m1-t .b,.wb-mov.on .is-playing .wb-m1 .c{animation-name:wb-fade;animation-duration:var(--dur-fundido);animation-timing-function:linear}
@media (prefers-reduced-motion:reduce){.is-playing .wb-m1 .a,.is-playing .wb-m1 .wb-m1-t .b,.is-playing .wb-m1 .c{animation-name:wb-fade;animation-duration:var(--dur-fundido);animation-timing-function:linear}}

.wb-m2{display:flex;align-items:center;gap:var(--s-24);justify-content:center}
.wb-cap{--w:28px;position:relative;display:block;flex:none;width:var(--w);height:calc(var(--w) * var(--sw-alto));border-radius:var(--r-pill);border:var(--borde-encendido) solid var(--control-hecho);background:var(--control-hecho)}
.wb-cap b{position:absolute;left:50%;top:2px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--fondo)}
.wb-m2 p{margin:0;font-size:var(--t-15);color:var(--texto-2);max-width:200px}
.wb-m2 p b{display:block;font-size:var(--t-17);color:var(--texto);margin-bottom:2px}
.wb-m2 p span{display:block}
@keyframes wb-cap{from{background:transparent;border-color:var(--control-apagado)}to{background:var(--control-hecho);border-color:var(--control-hecho)}}
@keyframes wb-perilla{from{transform:translateY(calc(var(--w) * var(--sw-recorrido) - 4px));background:var(--control-apagado)}to{transform:none;background:var(--fondo)}}
.is-playing .wb-cap{animation:wb-cap var(--dur-estado) var(--mov-estado) 350ms backwards}
.is-playing .wb-cap b{animation:wb-perilla var(--dur-estado) var(--mov-estado) 350ms backwards}
@media (prefers-reduced-motion:reduce){.is-playing .wb-cap b{animation:none}}

.wb-m3{text-align:center}
.wb-m3 .wb-btn{pointer-events:none}
.wb-m3 p{margin:var(--s-16) auto 0;font-size:var(--t-15);color:var(--texto-2);max-width:240px}

.wb-m4-t{margin:0 0 var(--s-16);font-size:var(--t-15);color:var(--texto-2);max-width:none}
.wb-m4-t b{color:var(--texto)}
.wb-m4-b{display:flex;height:16px;border-radius:var(--r-pill);overflow:hidden}
.wb-m4-b i{display:block;height:100%}
.wb-m4-b .s1{width:47.37%;background:var(--control-apagado)}
.wb-m4-b .s2{flex:1;background:var(--control-hecho)}
.wb-m4-l{display:flex;justify-content:space-between;gap:var(--s-12);margin:var(--s-8) 0 0;font-size:var(--t-12);color:var(--texto-2);max-width:none}
@keyframes wb-barra{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.is-playing .wb-m4-b{animation:wb-barra var(--dur-dato) var(--mov-estado) 150ms backwards}
@media (prefers-reduced-motion:reduce){.is-playing .wb-m4-b{animation-name:wb-fade;animation-duration:var(--dur-fundido)}}
.wb-curvas td,.wb-curvas th{white-space:nowrap}.wb-curvas td:last-child,.wb-curvas th:last-child{white-space:normal}

/* teléfono con la web viva (el teléfono del sistema, a escala de su ancho) */
.wb-cel-split{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start;gap:var(--s-48)}
@media (max-width:900px){.wb-cel-split{grid-template-columns:minmax(0,1fr)}}
.wb-tel-w{display:flex;justify-content:center;position:sticky;top:calc(var(--cabecera) + 24px)}
@media (max-width:900px){.wb-tel-w{position:static}}
.wb-tel{container-type:inline-size;width:100%;max-width:var(--tw,260px);margin:0 auto}
.wb-tel-m{background:var(--telefono-marco);border-radius:16cqw;padding:3.906cqw}
.wb-tel-s{border-radius:12.1cqw;overflow:hidden;background:var(--telefono-pantalla);color:var(--texto)}
.wb-tel-e{height:13.28cqw;display:flex;align-items:center;justify-content:space-between;padding:1.56cqw 9.4cqw 0;background:var(--fondo);font-size:5.08cqw;font-weight:var(--bold);font-variant-numeric:tabular-nums}
.wb-tel-e i{display:block;width:7.8cqw;height:3.9cqw;border:.6cqw solid var(--texto);border-radius:1.2cqw;position:relative}
.wb-tel-e i::after{content:"";position:absolute;left:.6cqw;top:.6cqw;bottom:.6cqw;width:4.3cqw;border-radius:.4cqw;background:var(--texto)}
.wb-tel-s .scaled{border:0;border-radius:0}
.wb-car .fig figcaption{margin-top:var(--s-16)}
.wb-car .fig figcaption b{display:block;margin-bottom:2px}
.wb-car .car-track{align-items:flex-start}

/* compartir: vista previa, pestaña y avatar */
.wb-comp{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-48);align-items:start}
@media (max-width:900px){.wb-comp{grid-template-columns:minmax(0,1fr);gap:var(--s-32)}}
.wb-og p{margin:var(--s-8) 0 0}
.wb-chat{background:var(--superficie);border-radius:var(--r-tarjeta);padding:var(--s-24)}
.wb-chat>p{margin:var(--s-16) 0 0;max-width:none}
.wb-bub{background:var(--elevado);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-tarjeta) var(--r-tarjeta) 4px var(--r-tarjeta);max-width:320px;margin-left:auto;padding:6px 6px 4px}
.wb-lk{display:block;text-decoration:none;color:inherit}
.wb-lk img{width:100%;height:auto;border-radius:10px 10px 4px 4px;aspect-ratio:1200/630;object-fit:cover}
.wb-lk-t{display:block;padding:var(--s-8) var(--s-8) var(--s-4)}
.wb-lk-t b{display:block;font-size:var(--t-15);line-height:1.3;color:var(--texto)}
.wb-lk-t em{display:block;font-style:normal;font-size:var(--t-12);color:var(--texto-2);margin-top:2px}
.wb-bub small{display:block;text-align:right;font-size:var(--t-12);color:var(--texto-2);padding:2px 6px 0}
.wb-fav{display:flex;flex-wrap:wrap;gap:var(--s-32) var(--s-48);align-items:flex-end;margin:var(--s-48) 0 var(--s-24)}
.wb-fav-t{background:var(--superficie);border-radius:var(--r-captura);padding:var(--s-12) var(--s-12) var(--s-16)}
.wb-fav-t p{margin:var(--s-12) 0 0}
.wb-tab{display:flex;align-items:center;gap:var(--s-8);height:36px;padding:0 14px;border-radius:var(--r-captura) var(--r-captura) 0 0;background:var(--fondo);font-size:var(--t-12);color:var(--texto);width:min(100%,340px)}
.wb-tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-tab img{flex:none}
.wb-fav-s,.wb-av{display:flex;align-items:flex-end;gap:var(--s-24)}
.wb-fav-s figure,.wb-av figure{margin:0;text-align:center}
.wb-fav-s figcaption,.wb-av figcaption{margin-top:var(--s-8);font-size:var(--t-12);color:var(--texto-2);font-variant-numeric:tabular-nums}
.wb-fav-s img{border-radius:0;display:block;margin:0 auto;background:var(--superficie)}
.wb-fav-s img.px{image-rendering:pixelated}
.wb-av img{border-radius:50%;border:var(--borde-ancho) solid var(--borde);display:block;margin:0 auto}

/* lo que no se hace: piezas pequeñas dibujadas con los tokens */
.wb-nos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-48) var(--medianil)}
@media (max-width:1000px){.wb-nos{grid-template-columns:minmax(0,1fr)}}
.wb-par{min-width:0}
.wb-par-t{margin:0 0 var(--s-12);font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2)}
.wb-par .pair{gap:var(--s-16)}
@media (max-width:700px){.wb-par .pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.wb-par .pair{grid-template-columns:minmax(0,1fr)}}
.wb-mini{min-height:168px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-8);padding:var(--s-16);background:var(--fondo);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-tarjeta);overflow:hidden;text-align:center;color:var(--texto)}
.dont .wb-mini{border-color:var(--texto-3)}
.wb-mini-osc{border-color:var(--texto-3)}
.wb-m-h{margin:0;font-size:var(--t-19);font-weight:var(--bold);line-height:1.2;letter-spacing:var(--trk-19);color:var(--texto);max-width:none}
.wb-m-h b{color:var(--acento-texto)}
.wb-m-izq{text-align:left}
.wb-m-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);border:var(--borde-ancho) solid var(--borde);background:var(--fondo);font-size:var(--t-12);color:var(--texto-2)}
.wb-m-pill i{width:6px;height:6px;border-radius:50%;background:var(--texto-3)}
.wb-m-chat{width:100%;max-width:210px;text-align:left;background:var(--superficie);border-radius:var(--r-captura);padding:10px;display:flex;flex-direction:column;gap:6px;font-size:var(--t-12);color:var(--texto)}
.wb-m-chat span{background:var(--elevado);border:var(--borde-ancho) solid var(--borde);border-radius:8px;padding:6px 8px;line-height:1.3}
.wb-m-chat em{align-self:flex-start;font-style:normal;border:var(--borde-encendido) solid var(--acento);border-radius:var(--r-pill);padding:2px 8px;color:var(--texto)}
.wb-m-pj{display:flex;align-items:center;gap:10px}
.wb-m-pj img{height:72px;width:auto;flex:none}
.wb-m-b{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:var(--r-pill);font-size:var(--t-12);font-weight:var(--bold);border:var(--borde-encendido) solid var(--texto);color:var(--texto);background:var(--fondo);white-space:nowrap}
.wb-mini-fila{flex-direction:row;flex-wrap:wrap}
.wb-mini-cab{justify-content:flex-start;align-items:stretch;padding:0}
.wb-m-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;height:48px;width:100%;padding:0 var(--s-12);border-bottom:var(--borde-ancho) solid var(--borde)}
.wb-m-cab img{height:12px;width:auto;flex:none}
.wb-m-hb{display:flex;flex-direction:column;gap:5px}
.wb-m-hb b{display:block;width:22px;height:3px;border-radius:2px;background:var(--texto)}
.wb-m-card{background:var(--fondo);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-captura);padding:14px 16px;text-align:left}
.wb-m-e{display:block;font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2)}
.wb-m-t{margin:6px 0 0;font-size:var(--t-19);font-weight:var(--bold);line-height:1.2;color:var(--texto);max-width:none}
.wb-m-s{font-size:var(--t-12);color:var(--texto-2)}
.wb-m-l{margin:0;font-size:var(--t-17);color:var(--texto);max-width:none}
.wb-m-l b{font-size:var(--t-24);letter-spacing:var(--trk-24)}
.wb-m-l s{color:var(--texto-3)}
.wb-m-urg{border:var(--borde-encendido) solid var(--texto);border-radius:var(--r-captura);padding:12px 16px;text-align:center}
.wb-m-urg b{display:block;font-size:var(--t-15)}
.wb-m-urg span{display:block;font-size:var(--t-12);color:var(--texto-2);margin-top:4px;font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){.wb-cols,.wb-tog-sw,.wb-tog-sw b{transition:opacity var(--dur-fundido) linear}}

/* tabla de descargas: nombres y botones en una línea */
#descargas .tabla td:first-child,#descargas .tabla td:last-child{white-space:nowrap}
/* las referencias son <figure>: sin el margen que el navegador les pone */
figure.ref{margin:0}

/* celular: las tablas de curvas y de archivos pasan a lista (nada queda cortado a la derecha) */
@media (max-width:700px){
  .wb-curvas thead,#descargas .tabla thead{display:none}
  .wb-curvas,.wb-curvas tbody,.wb-curvas tr,.wb-curvas td,#descargas .tabla,#descargas .tabla tbody,#descargas .tabla tr,#descargas .tabla td{display:block;width:100%}
  .wb-curvas tr,#descargas .tabla tr{padding:var(--s-12) 0;border-bottom:var(--borde-ancho) solid var(--borde)}
  .wb-curvas td,#descargas .tabla td{border:0;padding:2px 0;white-space:normal!important}
  .wb-curvas td:first-child,#descargas .tabla td:first-child{font-size:var(--t-17);overflow-wrap:anywhere}
  .wb-curvas td:nth-child(2)::before{content:"Dura "}
  .wb-curvas td:nth-child(4),#descargas .tabla td:nth-child(2){color:var(--texto-2)}
  #descargas .tabla td:last-child{padding-top:var(--s-8)}
}
/* celular: marcas numeradas más chicas (wb-mk) */
@media (max-width:620px){.wb-mk{width:18px;height:18px;margin:-9px 0 0 -9px;font-size:10px}}

/* ================= página compacta (.wb-p): menos aire, dos columnas, lo accesorio en <details> ================= */
.wb-p .hero{padding:var(--s-32) 0 var(--s-24)}
.wb-p .sec{padding:var(--s-32) 0 var(--s-48)}
.wb-p .sec-head{max-width:none;margin-bottom:var(--s-24)}
.wb-p .sec-head .lede{margin-top:var(--s-8)}
.wb-p .eyebrow{margin-bottom:var(--s-12)}
.wb-p details.mas{margin-top:var(--s-24);padding:var(--s-12) 0}
.wb-p details.mas.mt-24{margin-top:var(--s-24)}
.wb-p details.mas>div{padding-top:var(--s-24)}
/* encabezado con un control a la derecha (interruptor o vista) */
.wb-cab{position:relative;margin-bottom:var(--s-24)}
.wb-cab .sec-head{margin-bottom:0}
.wb-cab .filtros{margin:var(--s-16) 0 0}
.wb-cab .wb-tog{margin-top:var(--s-16)}
@media (min-width:901px){.wb-cab .filtros,.wb-cab .wb-tog{position:absolute;top:-8px;right:0;margin:0}.wb-cab .wb-tog{top:-18px}}
/* dos columnas: pieza grande y lo que la acompaña */
.wb-2{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--s-32);align-items:start}
@media (max-width:900px){.wb-2{grid-template-columns:minmax(0,1fr)}}
.wb-2r{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width:900px){.wb-2r{grid-template-columns:minmax(0,1fr)}}
.wb-2 .wb-mapa{margin-top:0}
.wb-2 .wb-duda{grid-template-columns:minmax(0,1fr);gap:var(--s-12);margin-bottom:var(--s-16)}
.wb-2 .wb-duda dd{font-size:var(--t-17);letter-spacing:var(--trk-19);min-height:2.6em}
.wb-2 .wb-mapa .acciones{margin-top:0}
.wb-mapa>.tiny{margin:var(--s-12) 0 0}
.wb-side{display:flex;flex-direction:column;gap:var(--s-24)}
.wb-side .wb-tog{align-self:flex-start}
.wb-side .acciones{margin-top:0}
@media (max-width:900px){.wb-side .wb-bps{justify-content:flex-start}}
/* reglas: una columna ajustada, o dos y tres columnas sin numerar */
.wb-reglas-c1 li{font-size:var(--t-15);padding:var(--s-12) 0;gap:var(--s-8);grid-template-columns:24px minmax(0,1fr)}
.wb-reglas-c{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s-32);margin-top:0}
.wb-reglas-c.wb-c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wb-reglas-c li{display:block;font-size:var(--t-15);padding:var(--s-12) 0;border-bottom:var(--borde-ancho) solid var(--borde)}
.wb-reglas-c li:last-child{border-bottom:var(--borde-ancho) solid var(--borde)}
.wb-reglas-c .n{display:none}
.wb-p>section>.wb-reglas-c,.wb-p .wb-pap+.wb-reglas-c{margin-top:var(--s-24)}
.wb-reglas-c.wb-reglas-s{margin-top:var(--s-24)}
@media (max-width:900px){.wb-reglas-c,.wb-reglas-c.wb-c2{grid-template-columns:minmax(0,1fr)}}
/* tres anchos de retícula, en miniatura, a un lado de la web */
.wb-side .wb-bps{margin:0;gap:var(--s-16);flex-wrap:nowrap;align-items:flex-end}
.wb-side .wb-bp{--k:.085;width:auto;flex:none;min-width:84px}
.wb-side .wb-bp-v{margin:0 auto 0 0}
.wb-side .wb-bp figcaption{font-size:var(--t-12);margin-top:var(--s-8)}
.wb-side .wb-bp figcaption b{display:block;font-size:var(--t-15)}
@media (max-width:620px){.wb-side .wb-bp{--k:.085}}
/* anatomía: reglas más apretadas */
.wb-anat{gap:var(--s-32);align-items:start}
/* letra: filas más bajas */
.wb-p .wb-pap{padding:0 var(--s-24)}
.wb-p .wb-fila{padding:var(--s-12) 0;grid-template-columns:190px minmax(0,1fr);gap:var(--s-24)}
.wb-p .wb-pap details.mas{border-top:var(--borde-ancho) solid var(--borde);margin-top:0;padding:var(--s-12) 0}
.wb-p .wb-pap details.mas>div{padding-top:var(--s-8)}
.wb-p .wb-pap .wb-reglas-s{margin-top:var(--s-16)}
@media (max-width:760px){.wb-p .wb-fila{grid-template-columns:minmax(0,1fr);gap:var(--s-8)}.wb-p .wb-pap{padding:0 var(--s-16)}}
/* botones y campos: celdas más bajas, y los campos solos dentro del <details> */
.wb-p .wb-estados{margin-top:0}
.wb-p .wb-cel{padding:var(--s-16) var(--s-24) var(--s-24)}
.wb-p .wb-demo{min-height:72px}
.wb-p .wb-demo-c{min-height:112px}
.wb-campos.wb-solo{margin-top:0;border-top:var(--borde-ancho) solid var(--borde)}
.wb-p .wb-pasos{border-top:0}
/* movimiento: escenarios más bajos */
.wb-p .wb-mov{margin:0}
.wb-p .wb-mov .stage>div:not(.stage-bar){padding:var(--s-16) var(--s-24) 48px}
.wb-p .wb-m1-t{font-size:var(--t-24);letter-spacing:var(--trk-24);line-height:var(--lh-titulo-24);margin-bottom:var(--s-16)}
.wb-p .wb-m1-e{margin-bottom:var(--s-8)}
.wb-p .wb-cab .wb-tog{flex:none}
/* celular: texto a la izquierda, teléfono a la derecha */
.wb-cel-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);grid-template-areas:"h t" "r t" "a t";grid-template-rows:auto auto 1fr;column-gap:var(--s-48)}
.wb-cel-g>.sec-head{grid-area:h}
.wb-cel-g>.wb-reglas{grid-area:r;align-self:start}
.wb-cel-g>.acciones{grid-area:a;align-self:start;margin-top:var(--s-24)}
.wb-cel-g>.wb-tel-w{grid-area:t}
@media (max-width:900px){.wb-cel-g{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "t" "r" "a"}.wb-cel-g>.wb-tel-w{margin-bottom:var(--s-24)}}
/* compartir: tira de favicon y avatar más baja */
.wb-p .wb-fav{margin:var(--s-32) 0 var(--s-24);gap:var(--s-24) var(--s-32)}
.wb-p .wb-fav-s,.wb-p .wb-av{gap:var(--s-16)}
.wb-p .wb-comp{gap:var(--s-32)}
/* lo que no se hace: piezas más bajas */
.wb-p .wb-nos{gap:var(--s-32) var(--medianil)}
.wb-p .wb-mini{min-height:112px}
.wb-p .wb-par-t{margin-bottom:var(--s-8)}
.wb-p details.mas .wb-nos{margin-top:0}
.wb-p .acciones.mt-0{margin-top:0}

/* referencias: miniatura a la izquierda, crédito y qué tomamos a la derecha (la captura completa se ve al ampliar) */
.wb-refs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-24) var(--s-32)}
.wb-refs .ref{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:var(--s-16);row-gap:var(--s-4);align-items:start}
.wb-refs .ref img{grid-row:1/3;grid-column:1}
.wb-refs .ref .ref-credit{grid-column:2;align-self:end}
.wb-refs .ref .ref-take{grid-column:2;margin:0;align-self:start}
@media (max-width:900px){.wb-refs{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.wb-refs .ref{grid-template-columns:minmax(0,1fr)}.wb-refs .ref img,.wb-refs .ref .ref-credit,.wb-refs .ref .ref-take{grid-column:1;grid-row:auto}}

.wb-p .wb-medidas{margin-top:var(--s-32)}
/* celular: menos aire entre bloques */
@media (max-width:700px){
  .wb-p .hero{padding:var(--s-24) 0 var(--s-16)}
  .wb-p .sec{padding:var(--s-24) 0 var(--s-32)}
  .wb-p .sec-head{margin-bottom:var(--s-16)}
  .wb-p .wb-cel{padding:var(--s-12) var(--s-16) var(--s-16)}
  .wb-p .wb-demo{min-height:56px}
  .wb-p .wb-demo-c{min-height:96px}
  .wb-p .wb-reglas li{padding:var(--s-12) 0}
  .wb-p .wb-fav{margin:var(--s-24) 0 var(--s-16)}
  .wb-p .wb-nos{gap:var(--s-24)}
}