/* ════ PORTADA v3 · «lo que otros cobran, aquí es gratis» (plan 1.3; antes 16.1) ═
   Papel cálido, tinta casi negra, azul de bolígrafo SOLO para anotaciones y
   rojo de sello para el acuerdo. Objetos que parecen de verdad (grano, sombras
   suaves, giros pequeños y distintos) y trazos a mano irregulares. Movimiento
   nativo (scroll-driven, @supports) y quieto con movimiento reducido. */
body:has(.px){background:#f6f2e8}
.px{--px-papel:#f6f2e8;--px-hoja:#fffdf8;--px-tinta:#16161b;--px-gris:#45454e;--px-linea:#d8d0bf;
  --px-pluma:#2336c4;--px-sello:#9b1c17;--px-postit:#fff0a3;
  --px-serif:"Iowan Old Style","Charter","Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
  --px-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  background:var(--px-papel);color:var(--px-tinta);overflow-x:clip}
.px-defs{position:absolute;width:0;height:0;overflow:hidden}
.px-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem)}
.px-kicker{font-size:.8rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--px-gris);margin:0 0 1.1rem}

/* ── héroe ── */
.px-hero{max-width:1240px;margin:0 auto;padding:clamp(2rem,6vw,5rem) clamp(1.1rem,4vw,2.5rem) clamp(3rem,7vw,6rem);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.px-h1{font-family:var(--f-d);font-weight:800;font-size:clamp(3rem,7.3vw,6.5rem);line-height:.93;letter-spacing:-.035em;margin:0 0 1.5rem}
.px-l1,.px-l2{display:block}
.px-hero .px-h1{font-size:clamp(2.75rem,6.4vw,5.6rem);margin-bottom:1.3rem}
.px-hero .px-l1{font-size:clamp(1.5rem,4.2vw,3.35rem);line-height:1.08;letter-spacing:-.022em;margin:0 0 .14em}
.px-cero{position:relative;display:inline-block;color:var(--px-pluma)}
.px-trazo{position:absolute;left:-3%;bottom:-.16em;width:106%;height:.22em;overflow:visible}
.px-trazo path{fill:none;stroke:var(--px-pluma);stroke-width:3.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.px-lede{font-size:1.2rem;line-height:1.58;max-width:33rem;color:var(--px-gris);margin:0 0 2rem;text-wrap:pretty}
.px-lede b{color:var(--px-tinta);font-weight:700}
.px-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.6rem}
.px-btn{display:inline-flex;align-items:center;gap:.55rem;min-height:52px;padding:.9rem 1.45rem;border-radius:12px;
  background:var(--px-tinta);color:#fff;font-weight:700;font-size:1rem;text-decoration:none;
  box-shadow:0 1px 0 #000,0 12px 26px -14px rgba(22,22,27,.6);transition:transform .15s ease,box-shadow .15s ease}
.px-btn:hover{transform:translateY(-1px);box-shadow:0 1px 0 #000,0 16px 30px -14px rgba(22,22,27,.65)}
.px-btn:active{transform:translateY(1px)}
.px-btn:focus-visible,.px-link:focus-visible,.px-fin-links a:focus-visible{outline:3px solid var(--px-pluma);outline-offset:3px}
.px-link{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;color:var(--px-tinta);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.28em}
.px-riesgo{margin:1.1rem 0 0;font-size:.9rem;color:var(--px-gris)}

.px-hero-arte{position:relative;min-height:520px}
/* el ticket: papel térmico con los bordes dentados, lo que cobran otros tachado y «0 €» rodeado */
.px-tk-arte{min-height:0;display:flex;justify-content:center;align-items:center;padding:.6rem 0}
.px-ticket{position:relative;width:min(100%,412px);padding:1.35rem 1.35rem 1.5rem;background:var(--px-hoja);color:var(--px-tinta);
  font-family:var(--px-mono);font-size:.9rem;line-height:1.35;transform:rotate(1.8deg);filter:drop-shadow(0 22px 22px rgba(50,35,10,.26))}
.px-ticket::before,.px-ticket::after{content:"";position:absolute;left:0;right:0;height:7px;
  background:linear-gradient(135deg,var(--px-hoja) 25%,transparent 25%) -7px 0/14px 14px repeat-x,
             linear-gradient(225deg,var(--px-hoja) 25%,transparent 25%) -7px 0/14px 14px repeat-x}
.px-ticket::after{bottom:-7px}
.px-ticket::before{top:-7px;transform:scaleY(-1)}
.px-tk-cab{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center;margin:0 0 .7rem;padding:0 0 .8rem;border-bottom:1.5px dashed #b9af9b}
.px-tk-t{font-weight:700;letter-spacing:.32em;text-transform:uppercase}
.px-tk-sub{font-size:.75rem;color:var(--px-gris)}
.px-tk-l{list-style:none;margin:0;padding:0}
.px-tk-l li{display:flex;justify-content:space-between;align-items:baseline;gap:.9rem;padding:.4rem 0}
.px-tk-cap{min-width:0}
.px-tk-cap small{display:block;font-size:.75rem;color:var(--px-gris);margin-top:.05rem}
.px-tk-p{white-space:nowrap;color:var(--px-gris);font-variant-numeric:tabular-nums}
.px-tk-total{position:relative;display:flex;justify-content:space-between;align-items:center;margin:.75rem 0 0;padding:.8rem 0 0;border-top:1.5px solid var(--px-tinta);
  font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.px-tk-total .px-rodeo{padding:.05rem .45rem}
.px-tk-total b{font-family:var(--f-d);font-size:2rem;font-weight:800;letter-spacing:-.02em;text-transform:none}
.px-tk-pie{margin:.95rem 0 0;font-size:.75rem;color:var(--px-gris);text-align:center}
/* el sello, entre «total» y la cifra rodeada */
.px-ticket .px-tk-sello{top:calc(50% - 21px);right:auto;left:calc(50% - 46px);width:116px}
.px-chat{position:absolute;left:0;top:0;width:min(76%,350px);background:#e8e2d4;border-radius:24px;padding:1rem .95rem 1.25rem;
  transform:rotate(-3.5deg);box-shadow:0 34px 60px -34px rgba(50,35,10,.45)}
.px-chat-cab{display:flex;align-items:center;gap:.55rem;margin:0 0 .85rem;font-size:.9rem;font-weight:700}
.px-chat-av{width:28px;height:28px;border-radius:50%;background:#c6bda8;flex:none}
.px-chat-n{margin-left:auto;background:var(--px-sello);color:#fff;font-size:.8rem;padding:.1rem .5rem;border-radius:999px}
.px-burbuja{margin:.42rem 0;padding:.5rem .75rem .55rem;border-radius:15px 15px 15px 4px;background:#fff;font-size:.9rem;line-height:1.35;
  max-width:88%;width:fit-content;box-shadow:0 1px 0 rgba(0,0,0,.07)}
.px-burbuja b{display:block;font-size:.8rem;color:#6a4516}
.px-burbuja.b2,.px-burbuja.b5{margin-left:auto;border-radius:15px 15px 4px 15px;background:#dcefd3}
.px-burbuja.b1{transform:rotate(.8deg)}.px-burbuja.b3{transform:rotate(-1.6deg) translateX(8px)}
.px-burbuja.b4{transform:rotate(1.2deg)}.px-burbuja.b6{transform:rotate(-.9deg)}

.px-doc{position:relative;background:var(--px-hoja) url(/static/grano.png);border:1px solid var(--px-linea);border-radius:3px;
  padding:1.35rem 1.5rem 1.3rem;font-family:var(--px-serif);color:var(--px-tinta);
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 26px 50px -26px rgba(50,35,10,.42)}
.px-acta-hero{position:absolute;right:0;bottom:0;width:min(82%,390px);transform:rotate(2.2deg)}
.px-doc-cab{display:flex;flex-direction:column;gap:.15rem;border-bottom:1.5px solid var(--px-tinta);padding:0 0 .6rem;margin:0 0 .9rem}
.px-doc-t{font-family:var(--f-d);font-weight:800;letter-spacing:.22em;text-transform:uppercase;font-size:.8rem}
.px-doc-sub{font-size:1.125rem;font-style:italic}
.px-doc-punto{font-weight:700;margin:0 0 .2rem}
.px-doc-res{margin:0 0 1rem;font-variant-numeric:tabular-nums}
.px-doc-part{margin:0 0 .4rem}
.px-rodeo{position:relative;display:inline-block;padding:.1rem .25rem}
.px-circulo{position:absolute;left:-9%;top:-42%;width:118%;height:184%;overflow:visible;pointer-events:none}
.px-circulo path,.px-flecha path,.px-check path,.px-tacha path{fill:none;stroke:var(--px-pluma);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.px-nota{position:absolute;right:1rem;top:9.55rem;margin:0;color:var(--px-pluma);font-family:var(--f-d);font-weight:700;font-style:italic;
  font-size:1.125rem;transform:rotate(-7deg)}
.px-flecha{position:absolute;left:-3.3rem;top:.35rem;width:50px;height:30px;overflow:visible;transform:rotate(8deg) scaleX(-1)}
.px-doc-huella{font-size:.8rem;color:var(--px-gris);margin:1rem 0 0}
.px-doc-huella code,.px-pap-codigo code{font-family:var(--px-mono)}
.px-sello{position:absolute;right:.4rem;top:.7rem;width:138px;height:auto;color:var(--px-sello);transform:rotate(-11deg);
  opacity:.9;mix-blend-mode:multiply;font-family:var(--f-d);pointer-events:none}

/* ── la insignia: decidir en grupo (y cómo funciona, en tres pasos) ── */
.px-ins-cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;margin:0 0 clamp(3.4rem,7vw,6rem)}
.px-h2.px-ins-h{margin-bottom:1.3rem}
.px-ins-arte{min-height:500px}
.px-como-h{font-family:var(--f-d);font-weight:800;font-size:2rem;line-height:1.15;letter-spacing:-.02em;margin:0 0 clamp(2.2rem,4.5vw,3.6rem)}
/* ── cómo funciona ── */
.px-como{padding:clamp(4rem,9vw,7.5rem) 0;border-top:1px solid var(--px-linea)}
.px-h2{font-family:var(--f-d);font-weight:800;font-size:clamp(2rem,4.2vw,3.35rem);line-height:1.03;letter-spacing:-.028em;margin:0 0 clamp(2.4rem,5vw,4.2rem);max-width:19ch;text-wrap:balance}
.px-pasos{list-style:none;margin:0;padding:0;display:grid;gap:clamp(3.8rem,8vw,6.5rem)}
.px-paso{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,5.5rem);align-items:center}
.px-paso:nth-child(even) .px-paso-txt{order:2}
.px-paso-n{display:block;font-family:var(--f-d);font-weight:800;font-size:clamp(2rem,4.2vw,3.35rem);line-height:1;color:var(--px-pluma);margin:0 0 .5rem;letter-spacing:-.04em}
.px-paso-txt h3{font-family:var(--f-d);font-weight:800;font-size:2rem;letter-spacing:-.02em;margin:0 0 .6rem}
.px-paso-txt p{font-size:1.125rem;line-height:1.62;color:var(--px-gris);max-width:30rem;margin:0}
.px-paso-arte{position:relative;display:flex;justify-content:center;padding:1.2rem 0}
.px-conv{width:min(100%,420px);transform:rotate(-1.4deg)}
.px-doc-cuando{font-style:italic;margin:0 0 .9rem}
.px-doc-orden{font-family:var(--f-d);font-weight:700;font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;margin:0 0 .3rem}
.px-doc-lista{margin:0 0 .9rem;padding-left:1.3rem;line-height:1.65}
.px-doc-pie{font-size:.9rem;color:var(--px-gris);margin:0;border-top:1px dashed var(--px-linea);padding-top:.6rem}
.px-postit{position:absolute;right:-1.3rem;top:-1.7rem;width:188px;margin:0;padding:.85rem .9rem 1rem;background:var(--px-postit);
  font-family:var(--f-d);font-size:.9rem;line-height:1.35;transform:rotate(5deg);box-shadow:0 16px 22px -14px rgba(70,55,0,.5)}
.px-postit-etq{display:block;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#574c00;margin-bottom:.3rem}
.px-papeleta{position:relative;display:flex;align-items:center;gap:1.4rem;width:min(100%,440px);padding:1.4rem 1.5rem 1.4rem 2.3rem;
  background:var(--px-hoja) url(/static/grano.png);border:1px solid var(--px-linea);border-radius:10px;transform:rotate(1.6deg);
  box-shadow:0 26px 48px -28px rgba(50,35,10,.45)}
.px-papeleta::before{content:"";position:absolute;left:1.05rem;top:.9rem;bottom:.9rem;border-left:2px dashed #c8bfad}
.px-pap-cuerpo{flex:1;min-width:0}
.px-pap-t{font-family:var(--f-d);font-weight:800;letter-spacing:.22em;text-transform:uppercase;font-size:.8rem;margin:0}
.px-pap-sub{font-family:var(--px-serif);font-style:italic;margin:.15rem 0 .8rem}
.px-pap-vale{font-size:.9rem;margin:0 0 .25rem;color:var(--px-gris)}
.px-pap-codigo{margin:0}
.px-pap-codigo code{font-size:1.6rem;font-weight:700;letter-spacing:.14em}
.px-pap-pie{font-size:.8rem;color:var(--px-gris);margin:.55rem 0 0}
.px-qr{width:100px;height:100px;flex:none;fill:var(--px-tinta)}
.px-acta-fin{width:min(100%,460px);transform:rotate(-.8deg)}
.px-doc-tabla{width:100%;border-collapse:collapse;margin:0 0 .9rem;font-size:1rem}
.px-doc-tabla th{font-weight:600;text-align:left;padding:.45rem .4rem .45rem 0;border-bottom:1px solid var(--px-linea)}
.px-doc-tabla td{padding:.45rem 0 .45rem .5rem;border-bottom:1px solid var(--px-linea);white-space:nowrap}
.px-num{text-align:right;font-variant-numeric:tabular-nums;color:var(--px-gris)}
.px-doc-verif{font-size:.8rem;margin:.35rem 0 0;color:var(--px-gris)}
.px-sello-fin{top:auto;right:1rem;bottom:3.4rem;width:128px;transform:rotate(-9deg)}

/* ── garantías (sección oscura: cambio de ritmo) ── */
.px-gar{padding:clamp(4rem,9vw,7rem) 0;background:var(--px-tinta);color:#f4f1ea}
.px-gar .px-kicker{color:#c2bbac}
.px-gar .px-h2{color:#fff}
.px-gar-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:2.4rem 3rem}
.px-gar-lista li{position:relative;padding-top:2.7rem;border-top:1px solid rgba(255,255,255,.2)}
.px-check{position:absolute;left:0;top:.7rem;width:34px;height:28px;overflow:visible}
.px-gar .px-check path{stroke:#a9b8ff;stroke-width:2.8}
.px-gar h3{font-family:var(--f-d);font-weight:800;font-size:1.3rem;margin:0 0 .45rem}
.px-gar p{margin:0;line-height:1.58;color:#ddd8cc}

/* ── precio anclado ── */
.px-precio{padding:clamp(4rem,9vw,7rem) 0}
.px-precio-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.px-coste .px-h2{margin-bottom:1.4rem}
.px-otros-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--px-linea)}
.px-otro{padding:.62rem 0 .66rem;border-bottom:1px solid var(--px-linea)}
.px-otro-cap{display:block;font-weight:700;font-size:1.125rem;line-height:1.35}
.px-otro-uno{display:block;margin-top:.1rem;color:var(--px-gris);line-height:1.6}
.px-otro-uno a{display:inline-block;padding:.15rem 0;color:var(--px-tinta);font-weight:600;text-decoration-thickness:1px;text-underline-offset:.2em}
.px-otro-uno a:focus-visible,.px-otros-nota a:focus-visible{outline:3px solid var(--px-pluma);outline-offset:2px}
.px-otros-nota{margin:1rem 0 0;font-size:.9rem;line-height:1.55;color:var(--px-gris);max-width:38rem}
.px-otros-nota a{color:var(--px-tinta);font-weight:600}
.px-tachable{position:relative;display:inline-block}
.px-tacha{position:absolute;left:-3%;top:50%;width:106%;height:14px;transform:translateY(-45%);overflow:visible}
.px-con{background:var(--px-hoja) url(/static/grano.png);border:1px solid var(--px-linea);border-radius:18px;padding:2rem 2rem 1.7rem;
  box-shadow:0 32px 60px -36px rgba(50,35,10,.5)}
.px-con-t{font-weight:700;margin:0 0 .5rem;color:var(--px-gris)}
.px-con-precio{margin:0;font-size:1.125rem}
.px-cifra{font-family:var(--f-d);font-weight:800;font-size:clamp(2rem,4.2vw,3.35rem);letter-spacing:-.035em;line-height:1}
.px-con-lanz{display:inline-block;margin:1rem 0 .35rem;padding:.3rem .7rem;border:2px solid var(--px-sello);color:var(--px-sello);border-radius:6px;
  font-weight:800;letter-spacing:.07em;text-transform:uppercase;font-size:.8rem;transform:rotate(-2deg)}
.px-con-siempre{margin:.25rem 0 1.4rem;color:var(--px-gris)}
.px-con .px-btn{width:100%;justify-content:center}
.px-con .px-link{display:flex;justify-content:center;margin-top:.5rem}

/* ── cierre ── */
.px-fin{padding:clamp(5rem,11vw,8.5rem) 0;text-align:center;border-top:1px solid var(--px-linea)}
.px-fin-h{font-family:var(--f-d);font-weight:800;font-size:clamp(2.1rem,4.6vw,3.7rem);line-height:1.05;letter-spacing:-.03em;max-width:21ch;margin:0 auto 2.1rem;text-wrap:balance}
.px-fin .px-cta{justify-content:center}
.px-fin-links{margin:1.1rem 0 0;font-size:.9rem}
.px-fin-links a{color:var(--px-tinta);display:inline-block;min-height:24px;padding:.2rem 0}

/* ── barra fija en móvil ── */
.px-barra{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:.9rem;
  padding:.65rem 1rem calc(.65rem + env(safe-area-inset-bottom));background:rgba(246,242,232,.97);
  border-top:1px solid var(--px-linea);box-shadow:0 -12px 30px -20px rgba(0,0,0,.4)}
.px-barra .px-btn{flex:1;justify-content:center;min-height:48px}
.px-barra-sub{font-size:.8rem;color:var(--px-gris);white-space:nowrap}
@media (min-width:821px){.px-barra{display:none!important}}

/* ── movimiento: solo si se quiere y si el navegador lo sabe hacer ── */
@media (prefers-reduced-motion:no-preference){
  .px-acta-hero .px-sello{animation:px-golpe .42s cubic-bezier(.25,1.6,.45,1) 1.05s both}
  .px-trazo path,.px-circulo path,.px-flecha path{stroke-dasharray:1;stroke-dashoffset:1;animation:px-dibuja .8s cubic-bezier(.6,.1,.3,1) forwards}
  .px-trazo path{animation-delay:.45s}.px-circulo path{animation-delay:1.55s}.px-flecha path{animation-delay:2.05s}
  .px-nota{animation:px-nota .4s ease-out 2.25s both}
  /* el ticket, al cargar: cada precio se tacha, «0 €» se rodea y cae el sello */
  .px-ticket .px-tacha path{stroke-dasharray:1;stroke-dashoffset:1;animation:px-dibuja .4s cubic-bezier(.6,.1,.3,1) .7s forwards}
  .px-tk-l li:nth-child(2) .px-tacha path{animation-delay:.88s}.px-tk-l li:nth-child(3) .px-tacha path{animation-delay:1.06s}
  .px-tk-l li:nth-child(4) .px-tacha path{animation-delay:1.24s}.px-tk-l li:nth-child(5) .px-tacha path{animation-delay:1.42s}
  .px-ticket .px-circulo path{animation-delay:1.7s}
  .px-ticket .px-sello{animation:px-golpe .42s cubic-bezier(.25,1.6,.45,1) 2.2s both}
  @supports (animation-timeline:view()){
    .px-rev{animation:px-sube linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .px-sello-fin{animation:px-golpe-fin linear both;animation-timeline:view();animation-range:entry 35% cover 42%}
    .px-check path{stroke-dasharray:1;stroke-dashoffset:1;animation:px-dibuja linear both;animation-timeline:view();animation-range:entry 55% cover 38%}
    /* la insignia está a media página: su chat se aparta, el acta se endereza y se anota al pasar por la pantalla */
    .px-insignia .px-burbuja{animation:px-disipa linear both;animation-timeline:view();animation-range:entry 60% cover 55%}
    .px-insignia .px-chat{animation:px-aparta linear both;animation-timeline:view();animation-range:entry 60% cover 55%}
    .px-insignia .px-acta-hero{animation:px-endereza linear both;animation-timeline:view();animation-range:entry 60% cover 55%}
    .px-insignia .px-trazo path,.px-insignia .px-circulo path,.px-insignia .px-flecha path{animation:px-dibuja linear both;animation-timeline:view();animation-range:entry 80% cover 45%}
    .px-insignia .px-nota{animation:px-nota linear both;animation-timeline:view();animation-range:entry 100% cover 50%}
    .px-insignia .px-acta-hero .px-sello{animation:px-golpe linear both;animation-timeline:view();animation-range:entry 100% cover 50%}
  }
}
@keyframes px-golpe{0%{opacity:0;transform:rotate(-11deg) scale(1.9)}60%{opacity:1;transform:rotate(-11deg) scale(.94)}100%{opacity:.9;transform:rotate(-11deg) scale(1)}}
@keyframes px-golpe-fin{0%{opacity:0;transform:rotate(-9deg) scale(1.8)}70%{opacity:1;transform:rotate(-9deg) scale(.95)}100%{opacity:.9;transform:rotate(-9deg) scale(1)}}
@keyframes px-dibuja{to{stroke-dashoffset:0}}
@keyframes px-nota{from{opacity:0;transform:rotate(-7deg) translateY(5px)}to{opacity:1;transform:rotate(-7deg)}}
@keyframes px-disipa{to{opacity:.3;filter:blur(1.5px)}}
@keyframes px-aparta{to{transform:rotate(-7deg) translate(-7%,5%) scale(.94)}}
@keyframes px-endereza{to{transform:rotate(0deg) translateY(-7%) scale(1.03)}}
@keyframes px-sube{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ── móvil ── */
@media (max-width:820px){
  .px-hero{grid-template-columns:1fr;padding-top:1.4rem;gap:1.4rem}
  .px-hero-arte{min-height:440px}
  .px-hero .px-lede{font-size:1.125rem;margin-bottom:1.6rem}
  .px-como-h{font-size:1.5rem}
  .px-tk-arte{min-height:0;padding:.4rem 0}
  .px-ticket{width:100%;max-width:360px;padding:1.05rem .95rem 1.2rem;font-size:.75rem}
  .px-tk-l li{gap:.6rem;padding:.34rem 0}
  .px-tk-total b{font-size:1.5rem}
  .px-ticket .px-tk-sello{top:calc(50% - 18px);left:calc(50% - 40px);width:100px}
  /* la insignia en el móvil: su texto; el acta y la papeleta ya salen en los pasos (la portada no crece) */
  .px-ins-cab{grid-template-columns:1fr;gap:1.6rem;margin-bottom:2.4rem}
  .px-ins-arte{display:none}
  .px-pasos{gap:2.6rem}
  .px-paso-txt{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.6rem;align-items:baseline}
  .px-paso-n{font-size:2rem;margin:0}
  .px-paso-txt h3{margin:0 0 .45rem}
  .px-paso-txt p{grid-column:1/-1}
  .px-paso-arte{padding:.5rem 0}
  .px-paso-arte>*{zoom:.86}
  .px-paso-arte .px-postit{top:-1.2rem;right:-.4rem;width:150px}
  .px-gar-lista{gap:1.6rem}
  .px-gar-lista li{padding-top:1rem}
  .px-gar h3{padding-left:2.4rem}
  .px-check{top:.95rem;width:28px;height:24px}
  .px-otros{padding:3rem 0}
  .px-otro{padding:.5rem 0 .55rem}
  .px-con{padding:1.5rem 1.35rem 1.3rem}
  .px-fin{padding:3.6rem 0}
  .px-chat{width:76%}
  .px-acta-hero{width:84%}
  .px-paso{grid-template-columns:1fr;gap:1.4rem}
  .px-paso:nth-child(even) .px-paso-txt{order:0}
  .px-postit{right:-.3rem;top:-2.9rem;width:158px}
  .px-precio-in{grid-template-columns:1fr}
  .px-papeleta{gap:1rem;padding-right:1.1rem}
  .px-qr{width:76px;height:76px}
  .px-pap-codigo code{font-size:1.3rem}
  .px-acta-hero .px-sello{top:auto;bottom:.7rem;right:.5rem;width:108px}
  .px-nota{top:9.3rem;right:.7rem;font-size:1rem}
}
/* una sola llamada dominante por pantalla: en la portada, el botón de la barra de
   navegación pasa a contorno discreto y no compite con el del héroe */
body:has(.px) a.btn.btn-boli[href="/registro"]{background:transparent;color:var(--px-tinta,#16161b);
  box-shadow:inset 0 0 0 1.5px #16161b;border-color:transparent}
body:has(.px) a.btn.btn-boli[href="/registro"]:hover{background:rgba(22,22,27,.06)}
/* 1.5 · la puerta: «¿Qué necesitas?» en la portada */
.px-usos{padding:2.4rem 0 1rem}
.px-usos-h{font:800 1.125rem var(--f-d);margin:0 0 .8rem;color:var(--tinta)}
.px-usos-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.px-uso{display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1px solid var(--linea-2);border-radius:999px;
  background:var(--hoja);color:var(--tinta);font:600 .9rem var(--f-d);text-decoration:none;transition:border-color .12s,box-shadow .12s}
.px-uso:hover{border-color:var(--boli);box-shadow:0 0 0 3px var(--boli-suave)}
.px-uso:focus-visible{outline:2px solid var(--boli);outline-offset:2px}
@media (max-width:820px){
  /* en el móvil, una fila que se desliza: la portada no crece (menos de 7,5 pantallas) */
  .px-usos{padding:1.6rem 0 .4rem}
  .px-usos-l{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:.4rem;margin:0 calc(-1*clamp(1.1rem,4vw,2.5rem));padding-left:clamp(1.1rem,4vw,2.5rem);padding-right:clamp(1.1rem,4vw,2.5rem);scroll-padding-left:clamp(1.1rem,4vw,2.5rem);scrollbar-width:thin}
  .px-usos-l li{flex:none;scroll-snap-align:start}
}