/* «Así será tu proceso» · componente reutilizable (v2.0, 25/10/2026)
   Paso a paso compacto: cabecera con resumen de una línea, pestañas, una pantalla cada vez y mandos.
   Todo va dentro de .aproceso para no pisar el tema (Astra, Elementor o web estática).
   Colores y letra: variables --pc-* que pone proceso.js desde el JSON (bloque "marca"). */

.aproceso{--pc-p:#0B2545;--pc-acc:#0E9F6E;--pc-dest:#F5B700;--pc-fondo:#F4F7FB;--pc-tx:#172033;--pc-suave:#5B6B82;
  --pc-linea:#E3E8F0;--pc-wa:#25D366;--pc-wa-osc:#075E54;--pc-sombra:0 10px 30px rgba(16,32,64,.10),0 2px 6px rgba(16,32,64,.06);
  --pc-alto:400px;
  font-family:var(--pc-fuente,inherit);color:var(--pc-tx);background:var(--pc-fondo);
  padding:22px 14px 16px;border-radius:22px;line-height:1.45;-webkit-font-smoothing:antialiased;max-width:1100px;margin:0 auto}
.aproceso-hueco{padding:28px 16px;clear:both}
.aproceso *,.aproceso *::before,.aproceso *::after{box-sizing:border-box}
.aproceso h2,.aproceso h3,.aproceso p,.aproceso ul,.aproceso ol,.aproceso figure{margin:0;padding:0}
.aproceso ul,.aproceso ol{list-style:none}
.aproceso img{max-width:100%;height:auto;display:block}
.aproceso button{font:inherit;cursor:pointer;color:inherit}
.pc-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.aproceso [hidden]{display:none!important}

/* Cabecera + resumen de una línea */
.pc-cab{text-align:center;margin-bottom:14px}
.pc-ante{display:block;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--pc-acc);margin-bottom:4px}
.pc-cab h2{font-size:clamp(1.3rem,4.4vw,2rem);line-height:1.15;color:var(--pc-p);font-weight:800;letter-spacing:-.01em}
.pc-resumen{margin-top:6px;color:var(--pc-suave);font-size:.92rem}
.pc-resumen b{color:var(--pc-p)}

/* Pestañas */
.pc-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding:2px 0 6px;margin:0 -4px}
.pc-tabs::-webkit-scrollbar{display:none}
.pc-tabs [role=tab]{flex:1 0 50px;min-width:50px;background:none;border:0;padding:4px 2px 0;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;border-radius:10px}
.pc-tabs [role=tab]:focus-visible{outline:3px solid var(--pc-acc);outline-offset:-1px}
.pc-bola{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--pc-suave);border:2px solid var(--pc-linea);transition:.25s}
.pc-bola svg{width:19px;height:19px}
.pc-tab-l{font-size:.66rem;font-weight:700;color:var(--pc-suave);line-height:1.15;text-align:center;max-width:76px}
.pc-barra{display:block;width:70%;height:3px;border-radius:3px;background:var(--pc-linea);overflow:hidden;position:relative}
.pc-barra::after{content:"";position:absolute;inset:0;width:0;background:var(--pc-acc)}
.pc-tabs .pc-hecho .pc-bola{background:color-mix(in srgb,var(--pc-acc) 14%,#fff);border-color:transparent;color:var(--pc-acc)}
.pc-tabs .pc-hecho .pc-barra::after{width:100%}
.pc-tabs [aria-selected=true] .pc-bola{background:var(--pc-acc);border-color:var(--pc-acc);color:#fff;transform:scale(1.08)}
.pc-tabs [aria-selected=true] .pc-tab-l{color:var(--pc-p)}
.pc-tabs [aria-selected=true] .pc-barra::after{width:100%}
.pc-tabs .pc-corre .pc-barra::after{width:0;animation:pc-corre var(--pc-dur,9s) linear forwards}
.pc-n{display:none}
@keyframes pc-corre{to{width:100%}}

/* Escenario: una pantalla cada vez */
.pc-escenario{background:#fff;border-radius:18px;box-shadow:var(--pc-sombra);padding:14px 14px 12px;margin-top:6px;touch-action:pan-y}
.pc-panel{display:grid;gap:10px;animation:pc-fundido .35s ease both}
@keyframes pc-fundido{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.pc-num{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pc-acc)}
.pc-txt h3{margin-top:2px;font-size:clamp(1.05rem,3.6vw,1.45rem);line-height:1.2;color:var(--pc-p);font-weight:800}
.pc-txt>p{margin-top:4px;color:var(--pc-suave);font-size:.88rem}
.pc-ticks{display:none}
.pc-vis{height:var(--pc-alto);overflow-y:auto;scrollbar-width:thin;display:flex;justify-content:center;align-items:flex-start;border-radius:14px;
  background:var(--pc-fondo);padding:10px;position:relative}
.pc-panel-whatsapp .pc-vis,.pc-panel-final .pc-vis{background:none;padding:0;overflow:hidden}

/* Mandos */
.pc-mandos{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}
.pc-mandos button{border:0;background:#fff;box-shadow:var(--pc-sombra);border-radius:999px;height:40px;min-width:40px;padding:0 14px;font-weight:800;color:var(--pc-p);font-size:.85rem}
.pc-mandos .pc-ant,.pc-mandos .pc-sig{font-size:1.4rem;line-height:1;padding:0 0 3px}
.pc-mandos button:focus-visible{outline:3px solid var(--pc-acc);outline-offset:2px}
.pc-cont{font-size:.78rem;color:var(--pc-suave);min-width:46px;text-align:center}
.pc-legal{margin-top:10px;text-align:center;font-size:.7rem;color:var(--pc-suave)}

/* Móvil: todo en una pantalla (~750 px) */
@media (max-width:859px){
  .aproceso{padding:14px 10px 10px;--pc-alto:350px}
  .pc-ante{display:none}
  .pc-cab{margin-bottom:8px}
  .pc-cab h2{font-size:1.15rem}
  .pc-resumen{font-size:.78rem;margin-top:4px;line-height:1.35}
  .pc-tab-l{display:none}
  .pc-tabs [role=tab]{flex:1 0 38px;min-width:38px;gap:3px}
  .pc-bola{width:34px;height:34px}
  .pc-escenario{padding:10px 10px 8px}
  .pc-panel{gap:7px}
  .pc-txt>p{display:none}
  .pc-txt h3{font-size:1rem}
  .pc-mandos{margin-top:8px}
  .pc-mandos button{height:36px}
  .pc-legal{font-size:.62rem;margin-top:6px}
}
@media (min-width:860px){
  .aproceso{padding:22px 26px 14px;--pc-alto:440px}
  .pc-cab h2{font-size:1.75rem}
  .pc-cab{margin-bottom:10px}
  .pc-resumen{font-size:1rem}
  .pc-tabs{justify-content:center;gap:6px}
  .pc-tabs [role=tab]{flex:0 1 120px}
  .pc-bola{width:44px;height:44px}.pc-bola svg{width:22px;height:22px}
  .pc-tab-l{font-size:.78rem;max-width:110px}
  .pc-escenario{padding:18px 26px}
  .pc-panel{grid-template-columns:5fr 6fr;gap:36px;align-items:center}
  .pc-txt h3{font-size:1.6rem}
  .pc-txt>p{font-size:1rem;margin-top:8px}
  .pc-ticks{display:grid;gap:8px;margin-top:14px}
  .pc-ticks li{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:.95rem}
  .pc-ticks svg{flex:0 0 22px;width:22px;height:22px;color:var(--pc-acc)}
}

/* Móvil simulado (WhatsApp) */
.pc-movil{width:min(300px,100%);height:100%;background:#111;border-radius:32px;padding:8px;box-shadow:0 16px 36px rgba(10,20,40,.22),inset 0 0 0 2px #333}
.pc-pantalla{border-radius:25px;overflow:hidden;background:#EFEAE2;height:100%;display:flex;flex-direction:column}
.pc-wa-cab{background:var(--pc-wa-osc);color:#fff;display:flex;align-items:center;gap:9px;padding:14px 10px 8px}
.pc-flecha{width:16px;height:16px;opacity:.9}
.pc-ava{width:32px;height:32px;border-radius:50%;background:#fff;color:var(--pc-p);display:grid;place-items:center;font-weight:800;font-size:.72rem;flex:0 0 32px}
.pc-wa-nom{font-weight:700;font-size:.86rem;line-height:1.2}
.pc-wa-est{font-size:.7rem;opacity:.85}
.pc-wa-cuerpo{flex:1;overflow-y:auto;padding:10px 9px 12px;display:flex;flex-direction:column;gap:5px;scrollbar-width:none;
  background-color:#EFEAE2;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:14px 14px}
.pc-wa-cuerpo::-webkit-scrollbar{display:none}
.pc-dia{align-self:center;background:#fff;color:#54656F;font-size:.66rem;padding:3px 10px;border-radius:8px;margin:2px 0 4px;box-shadow:0 1px .5px rgba(0,0,0,.1);text-align:center}
.pc-sep{background:#FFF3C4;color:#6B5500}
.pc-bur{max-width:86%;padding:5px 8px 17px;border-radius:9px;font-size:.8rem;line-height:1.36;position:relative;box-shadow:0 1px .5px rgba(0,0,0,.13);color:#111B21;white-space:pre-line;word-wrap:break-word}
.pc-ellos{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.pc-yo{align-self:flex-end;background:#D9FDD3;border-top-right-radius:2px}
.pc-hora{position:absolute;right:7px;bottom:2px;font-size:.62rem;color:#667781;display:flex;align-items:center;gap:3px}
.pc-hora svg{width:15px;height:11px;color:#53BDEB}
.pc-entra{animation:pc-entra .35s ease-out both}
@keyframes pc-entra{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.pc-escribe{align-self:flex-start;background:#fff;border-radius:9px;border-top-left-radius:2px;padding:9px 11px;display:flex;gap:4px;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.pc-escribe i{width:6px;height:6px;border-radius:50%;background:#8696A0;animation:pc-pto 1.2s infinite}
.pc-escribe i:nth-child(2){animation-delay:.2s}.pc-escribe i:nth-child(3){animation-delay:.4s}
@keyframes pc-pto{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.pc-doc{display:flex;gap:8px;align-items:center;background:rgba(0,0,0,.05);border-radius:7px;padding:7px;margin:-1px -3px 4px;white-space:normal}
.pc-pdf{width:28px;height:34px;border-radius:4px;background:#E5484D;color:#fff;font-size:.58rem;font-weight:800;display:grid;place-items:center;flex:0 0 28px}
.pc-doc b{display:block;font-size:.76rem}.pc-doc small{color:#667781;font-size:.66rem}
.pc-pagobtn{display:block;margin-top:5px;text-align:center;background:var(--pc-acc);color:#fff;border-radius:7px;padding:6px;font-weight:700;font-size:.78rem}
.pc-pagodet{display:block;color:#667781;font-size:.66rem;margin-top:3px}
.pc-wa-pie{background:#F0F2F5;padding:7px 9px;display:flex;gap:7px;align-items:center}
.pc-wa-pie span{flex:1;background:#fff;border-radius:20px;padding:7px 12px;font-size:.76rem;color:#8696A0}
.pc-wa-pie i{width:32px;height:32px;border-radius:50%;background:var(--pc-wa-osc);display:grid;place-items:center;color:#fff;flex:0 0 32px}
.pc-wa-pie i svg{width:16px;height:16px}

/* Factura proforma de ejemplo */
.pc-proforma{width:min(430px,100%);background:#fff;border-radius:6px;box-shadow:var(--pc-sombra);padding:16px 15px 14px;font-size:.76rem;position:relative;overflow:hidden;border-top:5px solid var(--pc-p);flex:0 0 auto}
.pc-marca-ej{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) rotate(-24deg);font-size:3.8rem;font-weight:900;letter-spacing:.12em;color:var(--pc-p);opacity:.055;pointer-events:none;white-space:nowrap}
.pc-pf-cab{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pc-pf-emp b{display:block;font-size:.84rem;color:var(--pc-p)}
.pc-pf-emp span,.pc-pf-tit span{display:block;color:var(--pc-suave);font-size:.68rem}
.pc-pf-tit{text-align:right}
.pc-pf-tit b{display:block;font-size:.84rem;letter-spacing:.04em;color:var(--pc-p)}
.pc-pf-tit .pc-ej-chip{display:inline-block;margin-top:3px;border:1px solid #C9A227;color:#8A6D00;font-size:.6rem;font-weight:800;letter-spacing:.1em;padding:1px 6px;border-radius:4px}
.pc-pf-cli{margin:10px 0 6px;padding:6px 9px;background:var(--pc-fondo);border-radius:6px;font-size:.7rem;color:var(--pc-suave)}
.pc-pf-cli b{color:var(--pc-tx)}
.pc-pf-tab{width:100%;border-collapse:collapse}
.pc-pf-tab th{text-align:left;font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--pc-suave);border-bottom:1px solid var(--pc-linea);padding:5px 0;font-weight:700}
.pc-pf-tab td{padding:6px 0;border-bottom:1px solid var(--pc-linea);vertical-align:top}
.pc-pf-tab td small{display:block;color:var(--pc-suave);font-size:.64rem}
.pc-pf-tab .pc-d{text-align:right;white-space:nowrap;padding-left:10px}
.pc-pf-tot{margin:6px 0 0 auto;width:min(220px,100%);display:grid;gap:2px}
.pc-pf-tot div{display:flex;justify-content:space-between;gap:10px;color:var(--pc-suave)}
.pc-pf-tot .pc-total{color:var(--pc-p);font-weight:800;font-size:1rem;border-top:2px solid var(--pc-p);padding-top:4px;margin-top:3px}
.pc-pf-plazos{margin-top:9px;display:grid;gap:4px}
.pc-pf-plazos div{display:flex;justify-content:space-between;gap:10px;background:var(--pc-fondo);border-radius:6px;padding:5px 8px}
.pc-pf-plazos b{white-space:nowrap}
.pc-pf-plazos div:first-child{background:color-mix(in srgb,var(--pc-acc) 12%,#fff);font-weight:700;color:var(--pc-p)}
.pc-pf-formas{margin-top:9px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.pc-pf-lbl{font-size:.64rem;color:var(--pc-suave);width:100%}
.pc-fp{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--pc-linea);border-radius:6px;padding:3px 7px;font-weight:700;font-size:.7rem;background:#fff;transition:.3s}
.pc-fp.pc-on{border-color:var(--pc-acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--pc-acc) 25%,transparent)}
.pc-fp svg{height:14px;width:auto}
.pc-visa{font-style:italic;font-weight:900;color:#1A1F71;font-size:.78rem}
.pc-pf-nota{margin-top:9px;font-size:.62rem;color:var(--pc-suave);border-top:1px dashed var(--pc-linea);padding-top:7px}

/* Aparición escalonada */
.pc-oculto{opacity:0;transform:translateY(10px)}
.pc-item,.pc-envio,.pc-hito,.pc-obj{transition:opacity .45s ease,transform .45s ease}

/* Qué te pedimos */
.pc-lista{width:100%;max-width:470px;display:grid;gap:7px}
.pc-item{display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:12px;padding:9px 11px;box-shadow:0 2px 8px rgba(16,32,64,.07)}
.pc-ico{flex:0 0 36px;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--pc-acc) 12%,#fff);color:var(--pc-acc)}
.pc-ico svg{width:20px;height:20px}
.pc-item b{display:block;font-size:.86rem;color:var(--pc-p);line-height:1.3}
.pc-item span span{display:block;font-size:.78rem;color:var(--pc-suave);margin-top:1px}
.pc-envio{display:flex;gap:10px;align-items:center;background:var(--pc-p);color:#fff;border-radius:12px;padding:10px 11px;font-weight:600;font-size:.82rem}
.pc-envio .pc-ico{background:rgba(255,255,255,.14);color:#fff}

/* Lo que hacemos y lo que te llega (línea de tiempo) */
.pc-proceso{width:100%;max-width:480px}
.pc-linea{display:grid;gap:0;position:relative}
.pc-hito{display:grid;grid-template-columns:74px 1fr;gap:10px;position:relative;padding-bottom:12px}
.pc-hito::before{content:"";position:absolute;left:79px;top:8px;bottom:-4px;width:2px;background:var(--pc-linea)}
.pc-hito:last-child::before{display:none}
.pc-cuando{font-size:.68rem;font-weight:800;color:var(--pc-p);text-align:right;line-height:1.25;padding-top:2px}
.pc-hito-c{padding-left:12px;position:relative;display:grid;gap:5px}
.pc-hito-c::before{content:"";position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--pc-acc);box-shadow:0 0 0 3px var(--pc-fondo)}
.pc-hacemos{display:flex;gap:6px;align-items:flex-start;font-size:.82rem;color:var(--pc-tx);font-weight:700;line-height:1.3}
.pc-hacemos svg{flex:0 0 16px;width:16px;height:16px;color:var(--pc-acc);margin-top:1px}
.pc-noti{display:flex;gap:8px;align-items:flex-start;background:#fff;border-radius:12px;padding:7px 9px;box-shadow:0 2px 8px rgba(16,32,64,.08);font-size:.76rem;line-height:1.3;color:#222}
.pc-noti .pc-ava{width:24px;height:24px;flex:0 0 24px;border-radius:7px;background:var(--pc-wa);color:#fff}
.pc-noti .pc-ava svg{width:15px;height:15px}
.pc-noti .pc-banco{background:var(--pc-dest);color:#3B2C00}
.pc-noti .pc-mail{background:var(--pc-p)}
.pc-noti small{display:block;font-size:.62rem;color:#666;text-transform:uppercase;letter-spacing:.03em;margin-bottom:1px}
.pc-nota{margin-top:6px;font-size:.7rem;color:var(--pc-suave);text-align:center}

/* Resultado (ilustraciones propias) */
.pc-resultado{width:100%;max-width:470px}
.pc-resultado ul{display:grid;gap:10px}
.pc-obj{display:flex;gap:12px;align-items:center;background:#fff;border-radius:14px;padding:11px;box-shadow:0 2px 10px rgba(16,32,64,.08)}
.pc-obj b{display:block;color:var(--pc-p);font-size:.92rem;line-height:1.25}
.pc-obj>span>span{display:block;font-size:.78rem;color:var(--pc-suave);margin-top:2px}
.pc-dib{flex:0 0 96px;height:62px;border-radius:8px;position:relative;overflow:hidden;display:block}
.pc-dib i{position:absolute;display:block;border-radius:3px;background:rgba(0,0,0,.16)}
.pc-carnet{background:linear-gradient(135deg,#F7C9D6,#E8A9C0 60%,#F3D7E2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.pc-carnet .pc-cara{left:8px;top:14px;width:22px;height:30px;border-radius:4px;background:linear-gradient(#C9B3A6,#A58C7E)}
.pc-carnet .pc-r1{left:36px;top:16px;width:46px;height:5px}.pc-carnet .pc-r2{left:36px;top:26px;width:36px;height:4px}.pc-carnet .pc-r3{left:36px;top:35px;width:42px;height:4px}
.pc-carnet em{position:absolute;left:6px;top:3px;font-style:normal;font-weight:900;font-size:.6rem;color:#fff;background:#1F3C9B;border-radius:2px;padding:0 3px}
.pc-carta{background:#fff;box-shadow:inset 0 0 0 1px var(--pc-linea)}
.pc-carta .pc-r1{left:8px;top:8px;width:38px;height:5px;background:var(--pc-p);opacity:.5}
.pc-carta .pc-r2{left:8px;top:20px;width:76px;height:3px}.pc-carta .pc-r3{left:8px;top:28px;width:60px;height:3px}
.pc-carta i:nth-of-type(4){top:36px}
.pc-carta em{position:absolute;right:5px;bottom:5px;font-style:normal;font-size:.5rem;font-weight:900;letter-spacing:.05em;color:var(--pc-acc);border:1.5px solid var(--pc-acc);border-radius:4px;padding:1px 4px;transform:rotate(-8deg)}
.pc-banco-dib{background:linear-gradient(135deg,var(--pc-p),color-mix(in srgb,var(--pc-p) 60%,var(--pc-acc)));color:#fff;padding:8px}
.pc-banco-dib small{display:block;font-size:.56rem;opacity:.85}
.pc-banco-dib strong{display:block;font-size:.95rem;margin-top:6px;white-space:nowrap}
.pc-doc-dib{background:color-mix(in srgb,var(--pc-acc) 12%,#fff);display:grid;place-items:center;color:var(--pc-acc)}
.pc-doc-dib svg{width:30px;height:30px}

/* ¡Lo conseguimos! */
.pc-final{width:100%;height:100%;display:flex;flex-direction:column;gap:12px;align-items:center}
.pc-final figure{position:relative;width:100%;flex:1;min-height:0;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--pc-acc) 30%,#fff),color-mix(in srgb,var(--pc-p) 25%,#fff))}
.pc-final img{width:100%;height:100%;object-fit:cover}
.pc-final figcaption{position:absolute;left:10px;right:10px;bottom:10px;background:rgba(255,255,255,.94);border-radius:12px;padding:9px 12px;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.pc-final figcaption b{display:block;font-size:1.25rem;color:var(--pc-p);font-weight:900;line-height:1.1}
.pc-final figcaption span{display:block;font-size:.78rem;color:var(--pc-suave);margin-top:2px}
.pc-sinfoto{width:100%;height:100%;display:grid;place-items:center;text-align:center;color:var(--pc-p);padding:20px 20px 80px;font-weight:700;font-size:.85rem}
.pc-sinfoto svg{width:96px;height:96px;margin:0 auto;opacity:.5;color:var(--pc-p)}
.pc-sinfoto small{display:block;font-weight:500;font-size:.72rem;opacity:.75;margin:4px auto 0}

/* Botón final */
.pc-boton{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--pc-wa);color:#fff!important;text-decoration:none;border-radius:999px;padding:12px 20px;font-weight:800;font-size:clamp(.92rem,3.8vw,1.02rem);white-space:nowrap;max-width:100%;box-shadow:0 8px 20px rgba(37,211,102,.35);flex:0 0 auto}
.pc-boton:focus-visible{outline:3px solid var(--pc-p);outline-offset:3px}
.pc-boton svg{width:22px;height:22px}

.pc-lento *,.pc-lento *::before,.pc-lento *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  .aproceso *,.aproceso *::before,.aproceso *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Móvil simulado realista (DEC 832, MK MIX 30/10): proporción de móvil actual, esquinas muy redondeadas,
   marco negro fino, cámara de punto, barra de estado, botones laterales, barra de inicio y sombra suave.
   Solo CSS: el tamaño sale de --pc-tel-alto y el ancho de la proporción del aparato. */
.aproceso{--pc-tel-alto:480px;--pc-iconos:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 12' fill='%23fff'%3E%3Crect x='0' y='8' width='3' height='4' rx='.8'/%3E%3Crect x='4.5' y='6' width='3' height='6' rx='.8'/%3E%3Crect x='9' y='3.5' width='3' height='8.5' rx='.8'/%3E%3Crect x='13.5' y='1' width='3' height='11' rx='.8'/%3E%3Cpath d='M25 3.2a9.6 9.6 0 0 1 6.6 2.6l1.1-1.2a11.3 11.3 0 0 0-15.4 0l1.1 1.2A9.6 9.6 0 0 1 25 3.2Zm0 3.3a6.2 6.2 0 0 1 4.2 1.7l1.1-1.2a7.9 7.9 0 0 0-10.6 0l1.1 1.2A6.2 6.2 0 0 1 25 6.5Zm0 3.3c.8 0 1.5.3 2 .8L25 12.4l-2-1.8c.5-.5 1.2-.8 2-.8Z'/%3E%3Crect x='36.5' y='1.5' width='13' height='9' rx='2.6' fill='none' stroke='%23fff' stroke-opacity='.45'/%3E%3Crect x='38' y='3' width='10' height='6' rx='1.5'/%3E%3Crect x='50.3' y='4.3' width='1.4' height='3.4' rx='.7' fill-opacity='.45'/%3E%3C/svg%3E")}
.aproceso .pc-panel-whatsapp .pc-vis{height:var(--pc-tel-alto);padding:4px 8px 10px;overflow:visible;align-items:center}
.aproceso .pc-movil{position:relative;--pc-tel-h:calc(var(--pc-tel-alto) - 14px);height:var(--pc-tel-h);width:calc(var(--pc-tel-h)*9/18.6);max-width:calc(100% - 12px);min-width:0;flex:none;
  background:#0c0c0e;border-radius:calc(var(--pc-tel-alto)*.088);padding:calc(var(--pc-tel-alto)*.014);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 0 0 1.5px #2c2c30,0 0 0 2.5px #0c0c0e,
    0 26px 48px -18px rgba(10,20,40,.42),0 10px 22px -10px rgba(10,20,40,.22)}
/* Botones: a la izquierda acción + volumen arriba + volumen abajo; a la derecha el lateral */
.aproceso .pc-movil::before,.aproceso .pc-movil::after{content:"";position:absolute;width:3px;border-radius:2px;pointer-events:none}
.aproceso .pc-movil::before{left:-4.5px;top:17%;height:30%;border-radius:2px 0 0 2px;
  background:linear-gradient(#2c2c30 0 14%,transparent 14% 26%,#2c2c30 26% 58%,transparent 58% 68%,#2c2c30 68% 100%)}
.aproceso .pc-movil::after{right:-4.5px;top:27%;height:14%;border-radius:0 2px 2px 0;background:#2c2c30}
.aproceso .pc-pantalla{position:relative;border-radius:calc(var(--pc-tel-alto)*.074)}
/* Cámara de punto centrada arriba y barra de inicio */
.aproceso .pc-pantalla::before{content:"";position:absolute;z-index:3;top:calc(var(--pc-tel-alto)*.024);left:50%;transform:translateX(-50%);
  width:calc(var(--pc-tel-alto)*.026);height:calc(var(--pc-tel-alto)*.026);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 35%,#3a4a66 0 14%,#0b0d12 30% 62%,#000 64%);box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.aproceso .pc-pantalla::after{content:"";position:absolute;z-index:3;bottom:calc(var(--pc-tel-alto)*.011);left:50%;transform:translateX(-50%);
  width:34%;height:4px;background:#111;opacity:.85;border-radius:4px;pointer-events:none}
/* Barra de estado (hora a la izquierda, cobertura, wifi y batería a la derecha) dentro de la cabecera de WhatsApp */
.aproceso .pc-wa-cab{position:relative;padding-top:calc(var(--pc-tel-alto)*.082)}
.aproceso .pc-wa-cab::before{content:var(--pc-hora,"");position:absolute;top:calc(var(--pc-tel-alto)*.024);left:11%;
  font:600 12px/1 system-ui,"Segoe UI",Roboto,sans-serif;letter-spacing:.01em;color:#fff}
.aproceso .pc-wa-cab::after{content:"";position:absolute;top:calc(var(--pc-tel-alto)*.024);right:9%;width:52px;height:12px;
  background:no-repeat center/contain var(--pc-iconos)}
.aproceso .pc-wa-pie{padding-bottom:calc(var(--pc-tel-alto)*.034)}
/* Letra del chat a escala de pantalla de móvil (si no, en un aparato estrecho cada burbuja se hace muy larga) */
.aproceso .pc-movil .pc-bur{font-size:.74rem;line-height:1.33;max-width:88%}
.aproceso .pc-movil .pc-hora{font-size:.58rem}
.aproceso .pc-movil .pc-dia{font-size:.6rem}
.aproceso .pc-movil .pc-doc b{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aproceso .pc-movil .pc-doc>:last-child{min-width:0}
.aproceso .pc-movil .pc-doc small,.aproceso .pc-movil .pc-pagodet{font-size:.6rem}
.aproceso .pc-movil .pc-pagobtn{font-size:.72rem}
.aproceso .pc-movil .pc-wa-cab{gap:7px;padding-left:8px;padding-right:8px}
.aproceso .pc-movil .pc-ava{width:28px;height:28px;flex-basis:28px;font-size:.66rem}
.aproceso .pc-movil .pc-flecha{width:14px;height:14px}
.aproceso .pc-movil .pc-wa-cab>span:last-of-type{flex:1;min-width:0;line-height:1.15}
.aproceso .pc-movil .pc-wa-nom{display:inline-block;max-width:100%;vertical-align:bottom;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.8rem}
.aproceso .pc-movil .pc-wa-est{font-size:.64rem}
.aproceso .pc-movil .pc-wa-pie span{font-size:.7rem;padding:6px 10px}
.aproceso .pc-movil .pc-wa-pie i{width:28px;height:28px;flex-basis:28px}
@media (max-width:859px){
  .aproceso{--pc-tel-alto:440px}
  .aproceso .pc-wa-cab::before{font-size:11px}
  .aproceso .pc-wa-cab::after{width:46px;height:11px}
}

/* ===== Versión PREMIUM (DEC 843, 30/10): se activa con la clase .pc-premium (JSON "estilo": "premium", window.PC_PREMIUM o ?pc_premium=1).
   Pasos numerados unidos por una línea que se llena sola, transiciones suaves, el cliente escribe en la caja del chat,
   avisos que entran en la pantalla de bloqueo, degradado con los colores de la marca y móvil más grande. Solo CSS, sin imágenes. */
.aproceso.pc-premium{background:
  radial-gradient(120% 75% at 0% 0%,color-mix(in srgb,var(--pc-acc) 16%,transparent),transparent 62%),
  radial-gradient(110% 80% at 100% 100%,color-mix(in srgb,var(--pc-p) 13%,transparent),transparent 58%),
  linear-gradient(180deg,#fff,var(--pc-fondo));border:1px solid color-mix(in srgb,var(--pc-acc) 10%,#fff)}
.pc-premium .pc-ante{display:inline-block;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--pc-acc) 12%,#fff)}
.pc-premium .pc-cab h2{letter-spacing:-.02em}
/* Pasos numerados y la línea que los une */
.pc-premium .pc-tabs{position:relative;--pc-bola-c:21px}
.pc-premium .pc-tabs [role=tab]{z-index:1;background:none!important;box-shadow:none!important;border:0!important}
.pc-premium .pc-barra{display:none}
.pc-premium .pc-progreso{position:absolute;z-index:0;left:calc(50% / var(--pc-n));right:calc(50% / var(--pc-n));top:var(--pc-bola-c);
  height:4px;margin-top:-2px;border-radius:4px;background:color-mix(in srgb,var(--pc-p) 10%,#fff)}
.pc-premium .pc-progreso i{display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--pc-acc),color-mix(in srgb,var(--pc-acc) 55%,var(--pc-p)));box-shadow:0 0 10px color-mix(in srgb,var(--pc-acc) 45%,transparent)}
.pc-premium .pc-bola{position:relative;border-width:2px;box-shadow:0 4px 12px -6px rgba(16,32,64,.35)}
.pc-premium .pc-bola svg{display:none}
.pc-premium .pc-n{display:block;font-size:.95rem;font-weight:800;line-height:1;font-style:normal}
.pc-premium .pc-tabs [aria-selected=true] .pc-bola{box-shadow:0 0 0 5px color-mix(in srgb,var(--pc-acc) 20%,transparent),0 8px 18px -8px var(--pc-acc)}
.pc-premium .pc-tabs .pc-corre .pc-bola{animation:pc-latido 2.4s ease-in-out infinite}
@keyframes pc-latido{50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--pc-acc) 8%,transparent),0 8px 18px -8px var(--pc-acc)}}
/* Escenario y transiciones entre pasos */
.pc-premium .pc-escenario{border-radius:22px;border:1px solid color-mix(in srgb,var(--pc-p) 6%,#fff);
  box-shadow:0 30px 60px -34px color-mix(in srgb,var(--pc-p) 55%,transparent),0 2px 8px rgba(16,32,64,.05)}
.pc-premium .pc-panel{animation:none}
.pc-premium .pc-panel.pc-va-sig{animation:pc-desliza-d .6s cubic-bezier(.2,.8,.2,1) both}
.pc-premium .pc-panel.pc-va-ant{animation:pc-desliza-i .6s cubic-bezier(.2,.8,.2,1) both}
.pc-premium .pc-panel .pc-txt>*{animation:pc-sube .6s cubic-bezier(.2,.8,.2,1) both}
.pc-premium .pc-panel .pc-txt>:nth-child(2){animation-delay:.07s}
.pc-premium .pc-panel .pc-txt>:nth-child(3){animation-delay:.14s}
.pc-premium .pc-panel .pc-txt>:nth-child(4){animation-delay:.21s}
.pc-premium .pc-panel .pc-vis{animation:pc-sube .7s .1s cubic-bezier(.2,.8,.2,1) both}
@keyframes pc-desliza-d{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes pc-desliza-i{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
@keyframes pc-sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Halo de color detrás del móvil */
.pc-premium .pc-panel-whatsapp .pc-vis::before,.pc-premium .pc-panel-avisos .pc-vis::before{content:"";position:absolute;left:50%;top:50%;width:min(420px,96%);height:86%;
  transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pc-acc) 26%,transparent),transparent);pointer-events:none}
.pc-premium .pc-movil{z-index:1}
/* Chat: burbujas con rebote suave y el cliente escribiendo en la caja */
.pc-premium .pc-entra{animation:pc-entra-p .5s cubic-bezier(.2,1.25,.4,1) both}
.pc-premium .pc-ellos.pc-entra{transform-origin:0 0}.pc-premium .pc-yo.pc-entra{transform-origin:100% 0}
@keyframes pc-entra-p{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
.aproceso .pc-wa-pie span.pc-tecleo{color:#111B21;white-space:nowrap;overflow:hidden;text-overflow:clip;direction:rtl;text-align:left}
/* Pantalla de bloqueo con los avisos */
.aproceso .pc-panel-avisos .pc-vis{height:var(--pc-tel-alto);padding:4px 8px 10px;overflow:visible;align-items:center;background:none}
.pc-bloqueo{color:#fff;padding:calc(var(--pc-tel-alto)*.075) 8px 8px;gap:0;
  background:radial-gradient(120% 60% at 20% 0%,color-mix(in srgb,var(--pc-acc) 70%,#fff 10%),transparent 70%),
    linear-gradient(170deg,color-mix(in srgb,var(--pc-acc) 60%,var(--pc-p)),var(--pc-p) 70%,color-mix(in srgb,var(--pc-p) 80%,#000))}
.aproceso .pc-bloqueo::after{background:#fff;opacity:.7}
.pc-bloqueo .pc-bl-hora{text-align:center;font-size:calc(var(--pc-tel-alto)*.1);font-weight:300;line-height:1;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
.pc-bloqueo .pc-bl-fecha{text-align:center;font-size:.66rem;font-weight:600;opacity:.85;margin:4px 0 10px}
.pc-bl-pila{display:flex;flex-direction:column;min-width:0;gap:6px;flex:1;min-height:0;overflow:hidden}
.pc-bl-noti{display:flex;min-width:0;max-width:100%;gap:7px;align-items:flex-start;background:rgba(255,255,255,.9);color:#111B21;border-radius:14px;padding:7px 8px;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.5)}
.pc-bl-noti:nth-child(2){opacity:.88}.pc-bl-noti:nth-child(3){opacity:.7}
.pc-bl-entra{animation:pc-noti-entra .55s cubic-bezier(.2,1.2,.4,1) both}
@keyframes pc-noti-entra{from{opacity:0;transform:translateY(-26px) scale(.96)}to{opacity:1;transform:none}}
.pc-bl-app{flex:0 0 22px;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--pc-wa);color:#fff}
.pc-bl-app svg{width:14px;height:14px}
.pc-bl-app.pc-mail{background:#2F6FE0}.pc-bl-app.pc-banco{background:#0B7A53}
.pc-bl-t{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1px}
.pc-bl-cab{display:flex;justify-content:space-between;gap:6px;font-size:.58rem;color:#54656F}
.pc-bl-cab b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-bl-cab em{font-style:normal;white-space:nowrap}
.pc-bl-x{font-size:.66rem;line-height:1.3;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pc-bl-ahora{margin-top:6px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:6px 8px;font-size:.66rem;line-height:1.3}
.pc-bl-ahora small{display:block;font-size:.55rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.8;margin-bottom:1px}
.pc-bl-cambia span{animation:pc-sube .45s ease both}
.pc-bl-nota{font-size:.52rem;line-height:1.25;opacity:.75;margin:5px 2px calc(var(--pc-tel-alto)*.03)!important}
.pc-bloqueo .pc-bl-nota b{font-weight:700}
.aproceso .pc-bloqueo{position:relative}
.aproceso .pc-movil-avisos .pc-pantalla{display:flex;flex-direction:column}
.pc-bloqueo>.pc-bl-hora::before{content:"";position:absolute;top:calc(var(--pc-tel-alto)*.024);right:9%;width:52px;height:12px;background:no-repeat center/contain var(--pc-iconos)}
@media (max-width:859px){
  .aproceso.pc-premium{--pc-tel-alto:480px}
  .pc-premium .pc-ante{display:none}
  .pc-premium .pc-tabs{--pc-bola-c:21px}
  .pc-premium .pc-movil .pc-bur{font-size:.78rem}
}
@media (min-width:860px){
  .aproceso.pc-premium{--pc-tel-alto:520px}
  .pc-premium .pc-tabs{--pc-bola-c:26px}
  .pc-premium .pc-n{font-size:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  .pc-premium *,.pc-premium *::before,.pc-premium *::after{animation:none!important;transition:none!important}
}