/* Página Pro — página de venta, formulario del pedido, estado y pago.
   Familia visual de fernandojimenezperez.com (Sora, degradado esmeralda-azul, cristal), con acento cobalto propio. */
:root{
  --tinta:#0B1220; --tinta-2:#4A5165; --gris:#8A90A3; --linea:rgba(11,18,32,.09);
  --fondo:#F3F6FB; --blanco:#fff; --verde:#0B7A2A; --azul:#0052CC; --cobalto:#1B3FD6; --hondo:#0A1A3F;
  --a:#19C37D; --b:#2F8CFF; --chispa:#FFC93C; --coral:#FF6B5B;
  --grad:linear-gradient(110deg,#0B7A2A,#00A0A0 40%,#1B3FD6 85%);
  --grad-vivo:linear-gradient(120deg,#19C37D,#2F8CFF);
  --sombra:0 30px 70px -36px rgba(11,18,32,.38),0 2px 8px rgba(11,18,32,.05);
  --display:"Sora",system-ui,sans-serif; --cuerpo:"Inter",system-ui,sans-serif;
  --r:18px; --r-g:30px; --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;font-family:var(--cuerpo);font-size:17px;line-height:1.6;color:var(--tinta);background:var(--fondo);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.035em;line-height:1.05;margin:0;text-wrap:balance}
p{margin:0 0 1rem;text-wrap:pretty}
:focus-visible{outline:3px solid var(--b);outline-offset:3px;border-radius:8px}
.pp-env{width:min(100% - 2.4rem,1180px);margin-inline:auto;position:relative}
.pp-centro{text-align:center;margin-inline:auto}
.pp-fondo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.pp-fondo i{position:absolute;border-radius:50%;filter:blur(110px)}
.pp-fondo .a{width:640px;height:640px;background:rgba(47,140,255,.24);top:-300px;right:-220px}
.pp-fondo .b{width:540px;height:540px;background:rgba(25,195,125,.2);bottom:-260px;left:-240px}
.pp-fondo .c{width:380px;height:380px;background:rgba(255,201,60,.16);top:40%;left:45%}

.pp-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:.55rem;padding:1rem 1.6rem;border-radius:999px;border:0;cursor:pointer;font:700 1rem var(--display);letter-spacing:-.01em;text-decoration:none;color:#fff;background:var(--tinta);box-shadow:0 18px 40px -18px rgba(11,18,32,.6);transition:transform .25s var(--ease),box-shadow .25s}
.pp-btn:hover{transform:translateY(-2px);box-shadow:0 24px 50px -18px rgba(11,18,32,.75)}
.pp-btn.vivo{background:var(--grad-vivo);color:#06231A;box-shadow:0 18px 44px -16px rgba(47,140,255,.7)}
.pp-btn.claro{background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 1.5px var(--linea)}
.pp-btn.chico{padding:.62rem 1.05rem;font-size:.86rem}
.pp-btn svg{width:18px;height:18px}
.pp-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.pp-etq{display:inline-flex;align-items:center;gap:.5rem;font:700 .76rem var(--display);letter-spacing:.09em;text-transform:uppercase;color:var(--cobalto)}
.pp-etq i{width:8px;height:8px;border-radius:50%;background:var(--b);box-shadow:0 0 0 4px rgba(47,140,255,.2)}
.pp-etq.claro{color:#9CC4FF}
.pp-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pp-h2{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:800;margin:.8rem 0}
.pp-bajada{color:var(--tinta-2);font-size:1.1rem;max-width:42rem}
.pp-nota{font-size:.9rem;color:var(--tinta-2);margin-top:1rem}
.pp-sec{padding:5.5rem 0}

.pp-barra{position:sticky;top:0;z-index:40;background:rgba(243,246,251,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--linea)}
.pp-barra-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.pp-marca{white-space:nowrap;display:inline-flex;align-items:center;gap:.6rem;font:800 1.08rem var(--display);letter-spacing:-.03em;text-decoration:none}
.pp-marca b{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#1B3FD6,#00A0A0);color:#fff;box-shadow:0 8px 18px -8px rgba(27,63,214,.8)}
.pp-marca svg{width:19px;height:19px}
.pp-barra nav{display:flex;align-items:center;gap:1.2rem;font-size:.92rem}
.pp-barra nav a{text-decoration:none;color:var(--tinta-2);white-space:nowrap}
.pp-barra nav a:hover{color:var(--tinta)}
.pp-barra nav .pp-btn{color:#06231A}

/* ── Portada ── */
.pp-portada{padding:3.6rem 0 2.6rem;display:grid;grid-template-columns:1.08fr .92fr;gap:2.6rem;align-items:center}
.pp-portada h1{font-size:clamp(2.5rem,5.8vw,4.7rem);font-weight:800;letter-spacing:-.05em;margin:1rem 0 1.2rem}
.pp-portada .pp-bajada{font-size:1.16rem;margin-bottom:1.6rem}
.pp-acciones{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.pp-sellos{list-style:none;padding:0;margin:1.6rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.pp-sellos li{padding:.5rem .9rem;border-radius:999px;background:rgba(255,255,255,.8);border:1px solid var(--linea);font-size:.86rem;color:var(--tinta-2)}
.pp-sellos b{color:var(--tinta);font-family:var(--display)}
.pp-escena{position:relative;min-height:600px;display:grid;place-items:center}
.pp-cels{position:relative;width:300px;height:600px}
.pp-cel{position:absolute;inset:0;border-radius:44px;background:#0B1220;padding:11px;box-shadow:0 60px 100px -40px rgba(11,18,32,.6),inset 0 0 0 2px #2a3242;transition:transform 1s var(--ease),opacity 1s,filter 1s}
.pp-cel::before{content:"";position:absolute;top:20px;left:50%;translate:-50% 0;width:86px;height:22px;border-radius:20px;background:#0B1220;z-index:3}
.pp-pant{height:100%;border-radius:34px;overflow:hidden;background:#fff}
.pp-pant img{width:100%;height:100%;object-fit:cover;object-position:top}
.pp-cel.p0{z-index:3;transform:none}
.pp-cel.p1{z-index:2;transform:translateX(-46%) scale(.84) rotate(-8deg);filter:brightness(.92)}
.pp-cel.p2{z-index:1;transform:translateX(46%) scale(.84) rotate(8deg);filter:brightness(.92)}
.pp-chip{position:absolute;display:flex;align-items:center;gap:.6rem;padding:.65rem .95rem;border-radius:16px;background:#fff;box-shadow:0 20px 40px -20px rgba(11,18,32,.45);font:700 .88rem var(--display);white-space:nowrap;z-index:5;opacity:0;animation:pp-entra .8s var(--ease) forwards}
.pp-chip i{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;font-style:normal;background:#E4ECF9}
.pp-chip small{display:block;font:600 .68rem var(--cuerpo);color:var(--gris);letter-spacing:0}
.pp-chip.k1{left:-12px;top:70px;animation-delay:.9s}
.pp-chip.k2{right:-18px;top:250px;animation-delay:1.3s}.pp-chip.k2 i{background:#E3F6EC}
.pp-chip.k3{left:6px;bottom:80px;animation-delay:1.7s}.pp-chip.k3 i{background:#FFF1D1}
@keyframes pp-entra{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}

/* ── Ejemplos en cinta ── */
.pp-ejemplos{padding-bottom:1rem}
.pp-ejemplos+.pp-sec{padding-top:3rem}
.pp-cinta{overflow:hidden;padding:1rem 0;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pp-cinta-in{display:flex;gap:1.4rem;width:max-content;animation:pp-cinta 60s linear infinite}
.pp-cinta.reversa .pp-cinta-in{animation-direction:reverse;animation-duration:70s}
.pp-cinta:hover .pp-cinta-in{animation-play-state:paused}
@keyframes pp-cinta{to{transform:translateX(calc(-50% - .7rem))}}
.pp-nav{display:block;width:clamp(280px,32vw,420px);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--sombra);text-decoration:none;transition:transform .35s var(--ease)}
.pp-nav:hover{transform:translateY(-6px) rotate(-.6deg)}
.pp-nav-barra{display:flex;align-items:center;gap:5px;padding:.55rem .8rem;background:#EEF1F6;border-bottom:1px solid var(--linea)}
.pp-nav-barra i{width:9px;height:9px;border-radius:50%;background:#D4D9E3}
.pp-nav-barra i:first-child{background:#FF6B5B}.pp-nav-barra i:nth-child(2){background:#FFC93C}.pp-nav-barra i:nth-child(3){background:#19C37D}
.pp-nav-barra em{margin-left:.6rem;font:600 .74rem var(--cuerpo);font-style:normal;color:var(--tinta-2);background:#fff;padding:.15rem .7rem;border-radius:999px}
.pp-nav img{aspect-ratio:1000/625;width:100%;object-fit:cover;object-position:top}
.pp-nav-pie{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .9rem;font-size:.82rem;color:var(--tinta-2)}
.pp-nav-pie b{font-family:var(--display);color:var(--tinta)}

/* ── Sistema (panel ilustrado) ── */
.pp-sistema{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:center}
.pp-panel{position:relative;padding:1.4rem;border-radius:var(--r-g);background:linear-gradient(160deg,#0A1A3F,#0B1220 70%);color:#fff;box-shadow:0 50px 90px -40px rgba(10,26,63,.75);rotate:-1.5deg}
.pp-panel-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.pp-panel-cab b{font:800 1.1rem var(--display)}
.pp-panel-cab span{font-size:.8rem;padding:.25rem .7rem;border-radius:999px;background:rgba(255,255,255,.1)}
.pp-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.pp-kpis div{padding:.9rem;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
.pp-kpis small{display:block;font-size:.74rem;color:rgba(255,255,255,.6)}
.pp-kpis b{display:block;font:800 1.55rem var(--display);letter-spacing:-.03em;margin:.15rem 0}
.pp-kpis em{font-style:normal;font-size:.74rem;color:#7CF29A}
.pp-barras{display:flex;align-items:flex-end;gap:6px;height:110px;margin:1.1rem 0;padding:0 .2rem}
.pp-barras i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#2F8CFF,#19C37D);transform-origin:bottom;animation:pp-crece 1.2s var(--ease) both;animation-delay:var(--d)}
@keyframes pp-crece{from{transform:scaleY(0)}}
.pp-panel-lista{display:grid;gap:.45rem}
.pp-panel-lista span{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border-radius:12px;background:rgba(255,255,255,.05);font-size:.85rem}
.pp-panel-lista i{width:9px;height:9px;border-radius:50%}
.pp-panel-lista b{margin-left:auto;font-size:.8rem;color:rgba(255,255,255,.7);font-weight:600}
.pp-panel-nota{position:absolute;right:1.2rem;bottom:-1.8rem;margin:0;font-size:.74rem;color:var(--gris)}
.pp-checks{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.85rem}
.pp-checks li{position:relative;padding-left:2.1rem;color:var(--tinta-2)}
.pp-checks li::before{content:"";position:absolute;left:0;top:.2rem;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--grad-vivo) center/62% no-repeat}
.pp-checks li::after{content:"";position:absolute;left:.42rem;top:.47rem;width:.5rem;height:.28rem;border:2.4px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg)}
.pp-checks b{color:var(--tinta)}

/* ── Qué incluye ── */
.pp-incluye{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:2.4rem}
.pp-it{padding:1.5rem;border-radius:var(--r-g);background:rgba(255,255,255,.82);border:1px solid #fff;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:.45rem}
.pp-it.grande{grid-column:span 2}
.pp-it .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;font-size:1.5rem;margin-bottom:.4rem;background:var(--t,#E3F6EC)}
.pp-it h3{font-size:1.2rem;font-weight:800}
.pp-it p{color:var(--tinta-2);font-size:.95rem;margin:0}
.pp-it.oscuro{background:linear-gradient(140deg,#0A1A3F,#1B3FD6);color:#fff;border:0}
.pp-it.oscuro p{color:rgba(255,255,255,.8)}
.pp-it.oscuro .ic{background:rgba(255,255,255,.14)}

/* ── Pasos y comparación ── */
.pp-pasos{list-style:none;padding:0;margin:2.4rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pp-pasos li{position:relative;padding:1.8rem 1.6rem;border-radius:var(--r-g);background:rgba(255,255,255,.82);border:1px solid #fff;box-shadow:var(--sombra)}
.pp-pasos .dia{position:absolute;top:1.2rem;right:1.2rem;font:700 .72rem var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--cobalto);background:#E4ECF9;padding:.3rem .65rem;border-radius:999px}
.pp-pasos b{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--grad-vivo);color:#06231A;font:800 1.2rem var(--display);margin-bottom:1rem}
.pp-pasos h3{font-size:1.2rem;margin-bottom:.5rem}
.pp-pasos p{color:var(--tinta-2);font-size:.95rem;margin:0}
.pp-compara{width:100%;margin-top:2.4rem;border-collapse:separate;border-spacing:0;background:rgba(255,255,255,.85);border-radius:var(--r-g);overflow:hidden;box-shadow:var(--sombra);font-size:.95rem}
.pp-compara th,.pp-compara td{padding:1rem 1.1rem;text-align:left;border-bottom:1px solid var(--linea)}
.pp-compara thead th{font:700 .9rem var(--display)}
.pp-compara tbody th{font-weight:600;color:var(--tinta-2)}
.pp-compara tr:last-child th,.pp-compara tr:last-child td{border-bottom:0}
.pp-compara .pp-col{background:linear-gradient(180deg,rgba(47,140,255,.1),rgba(25,195,125,.1));font-weight:700}

/* ── Precio ── */
.pp-precio{display:grid;grid-template-columns:1fr 1fr;border-radius:34px;overflow:hidden;box-shadow:0 50px 100px -40px rgba(10,26,63,.6)}
.pp-precio .pp-lado:first-child{padding:2.6rem;background:linear-gradient(150deg,#0A1A3F,#1B3FD6 70%,#0060C8);color:#fff}
.pp-precio h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:.8rem 0 1.2rem}
.pp-precio .cifra{font:800 clamp(3rem,7vw,4.6rem)/1 var(--display);letter-spacing:-.05em;margin-bottom:1rem}
.pp-precio .cifra small{display:block;font:600 .95rem var(--cuerpo);letter-spacing:0;color:rgba(255,255,255,.7);margin-top:.5rem}
.pp-precio .pp-lado:first-child p{color:rgba(255,255,255,.82);font-size:.95rem;margin-bottom:1.6rem}
.pp-precio ul.pp-lado{list-style:none;margin:0;padding:2.6rem;background:#fff;display:grid;gap:.9rem;align-content:center}
.pp-precio ul li{position:relative;padding-left:2rem;font-weight:500}
.pp-precio ul li small{color:var(--gris);font-weight:400}
.pp-precio ul li::before{content:"✓";position:absolute;left:0;top:-.05rem;display:grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:#E3F6EC;color:var(--verde);font-weight:800;font-size:.8rem}

.pp-quien{display:grid;grid-template-columns:200px 1fr;gap:2.4rem;align-items:center;max-width:920px;padding:2rem;border-radius:var(--r-g);background:rgba(255,255,255,.82);box-shadow:var(--sombra)}
.pp-quien img{width:200px;height:200px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 6px #fff,0 0 0 8px rgba(47,140,255,.35)}
.pp-quien h2{font-size:clamp(1.4rem,2.6vw,2rem);margin:.6rem 0 .9rem}
.pp-quien p{color:var(--tinta-2);margin:0}

.pp-faq{display:grid;gap:.7rem;max-width:820px;margin:2rem auto 0}
.pp-faq details{padding:1.1rem 1.4rem;border-radius:var(--r);background:rgba(255,255,255,.85);border:1px solid #fff;box-shadow:0 10px 30px -22px rgba(11,18,32,.4)}
.pp-faq summary{cursor:pointer;font:700 1.02rem var(--display);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.pp-faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--cobalto);transition:transform .3s}
.pp-faq details[open] summary::after{transform:rotate(45deg)}
.pp-faq p{margin:.8rem 0 0;color:var(--tinta-2)}
.pp-final{padding:5rem 0 6rem;text-align:center}
.pp-final h2{font-size:clamp(2.1rem,5vw,3.6rem);margin-bottom:1.6rem}
.pp-pie{text-align:center;font-size:.85rem;color:var(--gris);padding:2rem 1rem 3rem;margin:0}

/* ── Formulario del pedido ── */
.pp-pedido{padding:2rem 0 4rem;display:grid;grid-template-columns:260px 1fr;gap:2rem;align-items:start}
.pp-riel{position:sticky;top:88px;display:grid;gap:.4rem;list-style:none;padding:0;margin:0}
.pp-riel li{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border-radius:14px;font:600 .92rem var(--display);color:var(--gris);cursor:pointer}
.pp-riel li b{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#E8ECF3;font-size:.85rem;color:var(--tinta-2);flex:none}
.pp-riel li.hecho b{background:#E3F6EC;color:var(--verde)}
.pp-riel li.activo{background:#fff;color:var(--tinta);box-shadow:var(--sombra)}
.pp-riel li.activo b{background:var(--grad-vivo);color:#06231A}
.pp-form{padding:2.2rem;border-radius:var(--r-g);background:rgba(255,255,255,.88);border:1px solid #fff;box-shadow:var(--sombra)}
.pp-form fieldset{border:0;margin:0;padding:0;display:grid;gap:1.1rem}
.pp-form legend{font:800 clamp(1.6rem,3vw,2.2rem) var(--display);letter-spacing:-.035em;margin-bottom:.3rem;padding:0}
.pp-form .ayuda{color:var(--tinta-2);margin:-.4rem 0 .4rem}
.pp-form label{display:grid;gap:.4rem;font:600 .92rem var(--display)}
.pp-form label small{font:400 .82rem var(--cuerpo);color:var(--gris)}
.pp-form input[type=text],.pp-form input[type=email],.pp-form input[type=tel],.pp-form input:not([type]),.pp-form textarea,.pp-form select{width:100%;padding:.85rem 1rem;border-radius:14px;border:1.5px solid #DCE2EC;background:#fff;font:400 1rem var(--cuerpo);color:var(--tinta);transition:border-color .2s,box-shadow .2s}
.pp-form textarea{min-height:110px;resize:vertical}
.pp-form input:focus,.pp-form textarea:focus,.pp-form select:focus{outline:0;border-color:var(--b);box-shadow:0 0 0 4px rgba(47,140,255,.15)}
.pp-form [aria-invalid=true]{border-color:var(--coral)!important}
.pp-dos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.pp-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.pp-chips label{display:block;cursor:pointer}
.pp-chips input{position:absolute;opacity:0;pointer-events:none}
.pp-chips span{display:block;padding:.6rem 1rem;border-radius:999px;border:1.5px solid #DCE2EC;background:#fff;font:600 .9rem var(--display);transition:.2s}
.pp-chips input:checked+span{border-color:transparent;background:var(--tinta);color:#fff}
.pp-chips input:focus-visible+span{outline:3px solid var(--b);outline-offset:2px}
.pp-estilos{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.pp-estilos label{position:relative;cursor:pointer;display:block}
.pp-estilos input{position:absolute;opacity:0}
.pp-estilos .tar{display:block;border-radius:18px;overflow:hidden;border:2px solid #DCE2EC;background:#fff;transition:.25s}
.pp-estilos .tar img,.pp-estilos .tar .sin{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top}
.pp-estilos .tar .sin{display:grid;place-items:center;font-size:2.2rem;background:linear-gradient(135deg,#E4ECF9,#E3F6EC)}
.pp-estilos .tar span{display:block;padding:.6rem .75rem;font:700 .85rem var(--display)}
.pp-estilos .tar small{display:block;font:400 .76rem var(--cuerpo);color:var(--tinta-2);margin-top:.15rem}
.pp-estilos input:checked+.tar{border-color:var(--b);box-shadow:0 0 0 4px rgba(47,140,255,.18)}
.pp-estilos input:focus-visible+.tar{outline:3px solid var(--b);outline-offset:2px}
.pp-subir{display:flex;align-items:center;gap:1rem;padding:1rem;border-radius:16px;border:2px dashed #C9D2E2;background:#F8FAFD;cursor:pointer}
.pp-subir input{position:absolute;opacity:0;width:1px;height:1px}
.pp-subir .vista{width:72px;height:72px;border-radius:14px;flex:none;display:grid;place-items:center;background:#fff;border:1px solid var(--linea);overflow:hidden;font-size:1.6rem}
.pp-subir .vista img{width:100%;height:100%;object-fit:contain}
.pp-subir b{display:block;font:700 .95rem var(--display)}
.pp-subir small{color:var(--gris);font-weight:400}
.pp-colores{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.pp-colores label{display:flex;align-items:center;gap:.6rem}
.pp-colores input[type=color]{width:52px;height:52px;padding:0;border:0;border-radius:14px;background:none;cursor:pointer}
.pp-casilla{display:flex!important;grid-template-columns:none!important;align-items:flex-start;gap:.6rem;font:500 .92rem var(--cuerpo)!important}
.pp-casilla input{margin-top:.25rem;width:18px;height:18px;accent-color:var(--cobalto)}
.pp-prods{display:grid;gap:1rem}
.pp-prod{display:grid;grid-template-columns:96px 1fr;gap:1rem;padding:1rem;border-radius:18px;border:1.5px solid #E3E8F0;background:#fff;position:relative}
.pp-prod .foto{width:96px;height:96px;border-radius:14px;border:2px dashed #C9D2E2;display:grid;place-items:center;text-align:center;font-size:.72rem;color:var(--gris);cursor:pointer;overflow:hidden;background:#F8FAFD;position:relative}
.pp-prod .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pp-prod .foto input{position:absolute;opacity:0;width:1px;height:1px}
.pp-prod .campos{display:grid;gap:.6rem}
.pp-prod .fila{display:grid;grid-template-columns:1fr 150px;gap:.6rem}
.pp-prod textarea{min-height:70px}
.pp-quitar{position:absolute;top:.6rem;right:.6rem;width:30px;height:30px;border-radius:50%;border:0;background:#F1F3F8;cursor:pointer;font-size:1rem;color:var(--tinta-2)}
.pp-agregar{justify-self:start;padding:.7rem 1.1rem;border-radius:999px;border:1.5px dashed var(--b);background:#fff;color:var(--cobalto);font:700 .9rem var(--display);cursor:pointer}
.pp-dominios{display:grid;gap:.6rem}
.pp-dom{display:flex;align-items:center;border:1.5px solid #DCE2EC;border-radius:14px;background:#fff;overflow:hidden}
.pp-dom span{padding:0 .3rem 0 1rem;color:var(--gris);font-size:.95rem}
.pp-dom input{border:0!important;box-shadow:none!important;padding-left:0!important;border-radius:0!important}
.pp-dom em{font-style:normal;padding:0 1rem;color:var(--tinta-2);font-weight:600;white-space:nowrap}
.pp-total{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;border-radius:16px;background:#F3F6FB;font:700 1.05rem var(--display)}
.pp-total b{font-size:1.4rem}
.pp-nav-form{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--linea)}
.pp-error{color:#C0352C;font-size:.86rem;margin:-.5rem 0 0}
.pp-aviso{padding:1rem 1.2rem;border-radius:14px;background:#FFF1EE;color:#8A2A1F;font-weight:600;margin-bottom:1.2rem}
.pp-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pp-subiendo{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(243,246,251,.92);backdrop-filter:blur(8px)}
.pp-subiendo div{text-align:center;max-width:320px}
.pp-subiendo .barra{height:10px;border-radius:999px;background:#E3E8F0;overflow:hidden;margin:1.2rem 0 .6rem}
.pp-subiendo .barra i{display:block;height:100%;width:0;background:var(--grad-vivo);transition:width .3s}

/* ── Estado del pedido y pago ── */
.pp-caja{max-width:760px;margin:2.4rem auto 4rem;padding:2.4rem;border-radius:var(--r-g);background:rgba(255,255,255,.9);border:1px solid #fff;box-shadow:var(--sombra)}
.pp-caja h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:.6rem 0 .8rem}
.pp-linea-t{list-style:none;padding:0;margin:1.8rem 0;display:grid;gap:0}
.pp-linea-t li{position:relative;display:grid;grid-template-columns:34px 1fr;gap:1rem;padding-bottom:1.3rem}
.pp-linea-t li::before{content:"";position:absolute;left:16px;top:34px;bottom:0;width:2px;background:#E3E8F0}
.pp-linea-t li:last-child::before{display:none}
.pp-linea-t li i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#E8ECF3;color:var(--gris);font-style:normal;font:800 .85rem var(--display)}
.pp-linea-t li.hecho i{background:#E3F6EC;color:var(--verde)}
.pp-linea-t li.ahora i{background:var(--grad-vivo);color:#06231A;box-shadow:0 0 0 6px rgba(47,140,255,.15)}
.pp-linea-t li b{display:block;font:700 1rem var(--display)}
.pp-linea-t li span{color:var(--tinta-2);font-size:.92rem}
.pp-linea-t li.espera b{color:var(--gris)}
.pp-resumen{display:grid;gap:.5rem;padding:1.2rem;border-radius:18px;background:#F6F8FC;font-size:.95rem}
.pp-resumen div{display:flex;justify-content:space-between;gap:1rem}
.pp-resumen span{color:var(--tinta-2)}
.pp-resumen b{text-align:right}
.pp-ok{padding:1rem 1.2rem;border-radius:14px;background:#E3F6EC;color:#0B5A26;font-weight:600;margin-bottom:1.2rem}

@media (max-width:980px){
  .pp-portada{grid-template-columns:1fr;padding-top:2.4rem}
  .pp-escena{min-height:560px}
  .pp-sistema{grid-template-columns:1fr}
  .pp-incluye{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-pasos{grid-template-columns:1fr}
  .pp-precio{grid-template-columns:1fr}
  .pp-pedido{grid-template-columns:1fr}
  .pp-riel{position:static;display:flex;overflow-x:auto;gap:.3rem;padding-bottom:.3rem}
  .pp-riel li{flex:none;padding:.5rem .7rem}
  .pp-riel li span{display:none}
  .pp-riel li.activo span{display:inline}
}
@media (max-width:640px){
  body{font-size:16px}
  .pp-barra nav .oculta{display:none}
  .pp-barra nav a[href$="estado.php"]{display:none}
  .pp-marca{font-size:1rem}
  .pp-barra nav{gap:.8rem}
  .pp-sec{padding:4rem 0}
  .pp-escena{min-height:500px}
  .pp-cels{width:240px;height:490px}
  .pp-cel{border-radius:36px;padding:9px}.pp-pant{border-radius:28px}
  .pp-chip{font-size:.78rem;padding:.5rem .7rem}
  .pp-chip i{width:26px;height:26px}
  .pp-chip.k1{left:0;top:30px}.pp-chip.k2{right:0;top:220px}.pp-chip.k3{left:0;bottom:40px}
  .pp-incluye{grid-template-columns:1fr}
  .pp-it.grande{grid-column:auto}
  .pp-compara{font-size:.82rem}
  .pp-compara th,.pp-compara td{padding:.7rem .55rem}
  .pp-compara thead th:nth-child(2),.pp-compara tbody td:nth-child(2){display:none}
  .pp-precio .pp-lado:first-child,.pp-precio ul.pp-lado{padding:1.8rem}
  .pp-quien{grid-template-columns:1fr;text-align:center;padding:1.6rem}
  .pp-quien img{width:150px;height:150px;margin:0 auto}
  .pp-form{padding:1.4rem}
  .pp-dos{grid-template-columns:1fr}
  .pp-estilos{grid-template-columns:repeat(2,1fr)}
  .pp-prod{grid-template-columns:1fr}
  .pp-prod .foto{width:100%;height:150px}
  .pp-prod .fila{grid-template-columns:1fr}
  .pp-caja{padding:1.5rem;margin-top:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pp-chip{opacity:1}
  .pp-cinta-in{flex-wrap:wrap;width:auto;justify-content:center}
  .pp-cinta .pp-nav[aria-hidden]{display:none}
}

/* ── Alcance: qué es y qué no es ── */
.pp-alcance{display:grid;grid-template-columns:1.25fr 1fr;gap:1rem;margin-top:2.4rem}
.pp-alcance>div{padding:2rem;border-radius:var(--r-g);box-shadow:var(--sombra)}
.pp-alcance .si{background:rgba(255,255,255,.88);border:1px solid #fff}
.pp-alcance .no{background:#F7F1EE;border:1px solid #F0E2DC}
.pp-alcance h3{font-size:1.3rem;margin-bottom:1.1rem}
.pp-alcance ul{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.pp-alcance li{position:relative;padding-left:2rem;color:var(--tinta-2);font-size:.97rem}
.pp-alcance li b{color:var(--tinta)}
.pp-alcance li::before{position:absolute;left:0;top:.05rem;display:grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;font-weight:800;font-size:.75rem}
.pp-alcance .si li::before{content:"✓";background:#E3F6EC;color:var(--verde)}
.pp-alcance .no li::before{content:"✕";background:#FBE1DC;color:#B4402F}
.pp-alcance .no p{margin:1.2rem 0 0;font-size:.95rem;color:var(--tinta-2)}
.pp-alcance .no a{color:var(--cobalto);font-weight:600}
@media (max-width:860px){.pp-alcance{grid-template-columns:1fr}.pp-alcance>div{padding:1.5rem}}