/* ==================================================================
   Fuentes servidas desde el propio hosting, NO desde Google.
   Tres razones:
     1. No depende de que un tercero responda; si Google Fonts va
        lento o está bloqueado, la página igual se ve como debe.
     2. Menos saltos de conexión = carga más rápida en datos móviles,
        que es como entra casi todo el tráfico.
     3. Nada de la visita se le informa a un tercero.
   Solo el subconjunto "latin": cubre áéíóúñü¿¡ y la puntuación
   (— « » · …). 107 KB en total, dentro del presupuesto de 200 KB.
   ================================================================== */
@font-face{font-family:"Unbounded";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/unbounded-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:800;font-display:swap;
  src:url("fonts/unbounded-latin-800-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/sora-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/sora-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/sora-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ==================================================================
   Tienda KRATOZ — hoja de estilos única.

   Lectura del producto: comercio de bienes digitales, público peruano,
   casi todo desde el celular, pagando por adelantado a alguien que no
   conocen. El trabajo nº1 del diseño no es lucirse: es que un extraño se
   anime a pagar primero. De ahí las decisiones:
     · el precio es el héroe de cada tarjeta (mercado que compite por precio)
     · "qué pasa después" siempre visible antes de pagar
     · WhatsApp a un toque en todas las pantallas
     · nada de color solo: los estados llevan punto + texto

   Estilo: comercio oscuro centrado en producto. Ni glass ni degradados
   de malla. Paneles sólidos, un solo acento, objetivos táctiles ≥44px.
   Tema único y deliberado: la marca ya es negra y roja, y las seis
   plataformas que vende son interfaces oscuras.
   ================================================================== */

:root{
  /* ==== C · ARCADE =================================================
     Nace del dato, no del gusto: Crunchyroll es el 85 % de las ventas,
     o sea que quien compra acá ve anime. Neón sobre violeta-negro,
     geométrica ancha, esquinas cortadas en diagonal.
     Tema oscuro único y deliberado: las seis plataformas que se venden
     son interfaces oscuras y la marca ya es roja sobre negro. El fondo
     se pinta explícitamente, nunca se hereda.
     Contrastes medidos sobre --ink:
       --tx 17.9:1 · --tx-2 8.1:1 · --tx-3 4.6:1 · --red 5.2:1
       --cyan 11.2:1 · blanco sobre --red-cta 4.9:1     (todos AA)
     ================================================================ */
  --ink:#07060F;
  --panel:#12101F;
  --panel-2:#191630;
  --line:rgba(160,150,255,.16);
  --line-2:rgba(160,150,255,.34);
  --tx:#F2F0FF;
  --tx-2:#A5A0C0;
  --tx-3:#7A7499;
  --red:#E5484D;        /* acento: texto, bordes, detalles */
  --red-cta:#CE383D;    /* relleno: el único que lleva blanco encima */
  --red-soft:rgba(229,72,77,.16);
  --cyan:#22D3EE;       /* segundo acento, SOLO estado y detalle fino */
  --ok:#22D3EE;
  --wait:#FBBF24;
  --bad:#FF6B6B;
  --wa:#25D366;
  --yape:#B45AE8;       /* aclarado: el morado original se pierde acá */
  --plin:#2DD4BF;
  --r:0px;
  --tap:44px;
  --maxw:1120px;
  /* El corte diagonal. Un solo token: si se cambia, cambia todo junto. */
  --cut:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
  --cut-sm:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--tx);
  font-family:"Sora","Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.disp{font-family:"Unbounded","Sora",system-ui,sans-serif;letter-spacing:-.015em;text-wrap:balance;margin:0}
/* Escala 1.25 */
.h1{font-size:clamp(26px,5.4vw,39px);font-weight:800;line-height:1.06}
.h2{font-size:clamp(21px,3.4vw,25px);font-weight:700}
.h3{font-size:18px;font-weight:700}
.lbl{font-family:"Unbounded",system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-3)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--tx-2)}
.small{font-size:13.5px}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
.wrap.narrow{max-width:640px}
.stack{display:flex;flex-direction:column;gap:14px}
.rowbtns{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- cabecera ---------- */
.top{position:sticky;top:0;z-index:30;background:rgba(11,11,15,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;height:62px}
.buscador{flex:1;max-width:460px;position:relative;margin:0 auto}
.buscador .lupa{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--tx-3);font-size:18px;pointer-events:none}
.buscador input{width:100%;min-height:40px;padding:9px 14px 9px 38px;border-radius:999px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--tx);font-size:14.5px}
.buscador input:focus{border-color:var(--red);outline:none;background:var(--panel)}
.buscador input::placeholder{color:var(--tx-3)}
@media (max-width:760px){
  .top .wrap{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px;row-gap:10px}
  .brand{order:1}
  .top .btn{order:2;margin-left:auto}
  .buscador{order:3;flex:1 0 100%;max-width:none;margin:0}
}
.brand{display:flex;align-items:center;gap:10px;color:var(--tx);text-decoration:none}
.brand:hover{text-decoration:none}
.mark{width:36px;height:36px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--red),#2A0407);font-family:"Unbounded",sans-serif;font-weight:800;color:#fff;
  box-shadow:0 6px 18px rgba(229,72,77,.28)}
.brand{flex:0 0 auto}
.brand b{font-family:"Unbounded",sans-serif;font-weight:800;font-size:18px;line-height:1.05;display:block}
.brand span{font-size:11.5px;color:var(--tx-3)}

/* ---------- botones (todos ≥44px) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:11px 18px;border-radius:11px;border:0;cursor:pointer;
  background:var(--red-cta);color:#fff;
  font-family:"Unbounded",sans-serif;font-weight:700;font-size:15px;letter-spacing:-.01em;
  text-decoration:none;transition:filter .15s ease,transform .15s ease;
}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px);text-decoration:none;color:#fff}
.btn.full{width:100%}
.btn.flat{background:var(--panel-2);color:var(--tx);border:1px solid var(--line)}
.btn.flat:hover{border-color:var(--line-2);color:var(--tx)}
.btn.wa{background:var(--wa);color:#06301A}
.btn.wa:hover{color:#06301A}
.btn.sm{min-height:38px;padding:8px 13px;font-size:13.5px;border-radius:9px}
.btn.danger{background:transparent;border:1px solid rgba(255,107,107,.4);color:var(--bad)}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- banner de portada ---------- */
.banner{border-bottom:1px solid var(--line);
  background:
    radial-gradient(60% 120% at 12% 0%,rgba(229,72,77,.22),transparent 62%),
    radial-gradient(48% 100% at 88% 10%,rgba(116,35,132,.20),transparent 60%),
    var(--ink)}
.banner-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:30px;align-items:center;padding:42px 0 40px}
.banner-in p{margin:12px 0 0;color:var(--tx-2);max-width:50ch;font-size:15.5px}
.banner-in .h1{font-size:clamp(28px,5.6vw,46px);line-height:1.04;margin-top:8px}
.banner-in .h1 em{font-style:normal;color:var(--red)}
.banner-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.banner-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.banner-list li{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.banner-list b{display:block;font-family:"Unbounded",sans-serif;font-weight:700;font-size:14.5px}
.banner-list span{font-size:12.5px;color:var(--tx-3)}
@media (max-width:820px){
  .banner-in{grid-template-columns:1fr;gap:22px;padding:30px 0 28px}
  .banner-list{flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .banner-list li{flex:0 0 auto;min-width:200px}
}

/* ---------- categorías ---------- */
.cats{display:flex;gap:9px;overflow-x:auto;padding:22px 0 14px;scrollbar-width:thin}
.cat{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-height:var(--tap);
  padding:9px 15px;border-radius:12px;border:1px solid var(--line);background:var(--panel);
  color:var(--tx-2);font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;
  transition:border-color .15s ease,color .15s ease,background .15s ease}
.cat:hover{border-color:var(--line-2);color:var(--tx);text-decoration:none}
.cat.on{background:var(--red-cta);border-color:var(--red-cta);color:#fff;font-weight:600}
.cat .ic{font-size:14px;opacity:.9}
.cat .ct{font-family:"Unbounded",sans-serif;font-size:11px;font-weight:700;
  background:rgba(255,255,255,.1);padding:2px 7px;border-radius:999px;font-variant-numeric:tabular-nums}
.cat.on .ct{background:rgba(0,0,0,.26)}

/* ---------- cabecera de listado ---------- */
.listhead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:6px 0 14px}
.segs{display:flex;gap:3px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:3px}
.seg{padding:7px 14px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--tx-2);text-decoration:none;white-space:nowrap}
.seg:hover{color:var(--tx);text-decoration:none}
.seg.on{background:var(--panel-2);color:var(--tx);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.rowlbl{margin:18px 0 10px}

/* ---------- hero ---------- */
.hero{padding:38px 0 26px;position:relative}
.hero::before{content:"";position:absolute;z-index:-1;left:-20%;right:-20%;top:-140px;height:380px;
  background:radial-gradient(50% 60% at 50% 50%,rgba(229,72,77,.16),transparent 70%);pointer-events:none}
.hero .h1 em{font-style:normal;color:var(--red)}
.hero p{margin:12px 0 0;color:var(--tx-2);max-width:54ch;font-size:15.5px}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.trust div{min-width:0}
.trust b{font-family:"Unbounded",sans-serif;font-weight:800;font-size:17px;display:block;line-height:1.2}
.trust span{font-size:12.5px;color:var(--tx-3);line-height:1.35;display:block}
@media (max-width:560px){.trust b{font-size:15px}.trust span{font-size:11.5px}}

/* ---------- tira de entrega automática ---------- */
.auto{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;
  background:linear-gradient(100deg,rgba(61,214,140,.13),rgba(61,214,140,.04));
  border:1px solid rgba(61,214,140,.28);margin:0 0 20px}
.auto .led{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(61,214,140,.55);animation:led 2.4s ease-out infinite}
@keyframes led{70%{box-shadow:0 0 0 9px rgba(61,214,140,0)}100%{box-shadow:0 0 0 0 rgba(61,214,140,0)}}
.auto p{margin:0;font-size:13.5px;color:#BDEBD3;line-height:1.45}
.auto b{color:#fff}

/* pulso de "estamos reconociendo tu pago" */
.pulse{display:flex;gap:7px;justify-content:center;margin-top:6px}
.pulse span{width:9px;height:9px;border-radius:50%;background:var(--red);opacity:.35;animation:bob 1.25s ease-in-out infinite}
.pulse span:nth-child(2){animation-delay:.16s}
.pulse span:nth-child(3){animation-delay:.32s}
@keyframes bob{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}

/* ---------- filtros ---------- */
.tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:thin}
.tab{flex:0 0 auto;min-height:40px;padding:8px 15px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--tx-2);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}
.tab[aria-pressed="true"]{background:var(--red-cta);border-color:var(--red-cta);color:#fff;font-weight:600}

/* ---------- rejilla de productos ---------- */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin:6px 0 40px}
/* En celular entran dos por fila: se escanea el catálogo sin scrollear tanto. */
@media (max-width:560px){
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .prod .body{padding:11px;gap:7px}
  .prod h3{font-size:14.5px}
  .prod .desc{font-size:11.5px}
  /* en dos columnas, "· Renovable" parte la línea y descuadra las tarjetas */
  .prod .desc .ren{display:none}
  .prod .foot .btn{display:none}
  .price .amt{font-size:21px}
}
.prod{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;text-align:left;text-decoration:none;color:var(--tx);
  transition:border-color .16s ease,transform .16s ease;
}
.prod:hover{border-color:var(--red);transform:translateY(-2px);text-decoration:none;color:var(--tx)}
.prod .art{aspect-ratio:16/10}
/* --- Bloque de plataforma: wordmark sobre el degradado de su marca --------
   El nombre escrito con los colores del servicio se reconoce de un vistazo,
   cosa que dos iniciales sobre un cuadrado no logran. Y funciona para
   cualquier plataforma nueva sin configurar nada. --------------------- */
.art,.tile{position:relative;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(150deg,var(--c1,#E5484D),var(--c2,#2A0407))}
.art::after,.tile::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(115% 85% at 18% -10%,rgba(255,255,255,.26),transparent 62%)}
.art img,.tile img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.wm{position:relative;z-index:2;font-family:"Unbounded",sans-serif;font-weight:800;
  color:var(--tint,#fff);text-align:center;line-height:.95;padding:0 14px;
  text-shadow:0 2px 18px rgba(0,0,0,.28);max-width:100%;overflow-wrap:anywhere}
.wm.lg{font-size:clamp(22px,5.6vw,36px)}
.wm.md{font-size:clamp(17px,4.4vw,28px)}
.wm.sm{font-size:clamp(14px,3.6vw,23px)}
.wm.xs{font-size:clamp(11.5px,2.9vw,18px)}
.t-wide{letter-spacing:.15em;text-indent:.15em}
.t-tight{letter-spacing:-.035em}
.t-normal{letter-spacing:0}
.tile .wm{font-size:13px;letter-spacing:-.03em;padding:0;text-shadow:none;line-height:1}
.kind{position:absolute;z-index:3;left:9px;bottom:9px;
  font-family:"Unbounded",sans-serif;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.42);backdrop-filter:blur(4px);
  padding:4px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.16)}
.prod .body{padding:14px;display:flex;flex-direction:column;gap:9px;flex:1}
.prod h3{font-size:16.5px;font-weight:700;line-height:1.25}
.prod .desc{font-size:13px;color:var(--tx-3);line-height:1.45}
.prod .meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px}
.prod .meta .sep{color:var(--tx-3)}
.prod.agot{opacity:.55}
.stars{display:inline-flex;gap:1px;font-size:12.5px;letter-spacing:.5px}
.stars span{color:var(--tx-3)}
.stars span.on{color:var(--wait)}
.off{position:absolute;z-index:3;right:9px;top:9px;
  font-family:"Unbounded",sans-serif;font-size:11.5px;font-weight:800;letter-spacing:-.01em;
  color:#fff;background:var(--red-cta);padding:4px 8px;border-radius:7px;
  box-shadow:0 3px 12px rgba(0,0,0,.35)}
.price s{color:var(--tx-3);font-size:13px;font-weight:500}
.prod .foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:11px;border-top:1px solid var(--line)}
.price{display:flex;align-items:baseline;gap:5px}
.price .amt{font-family:"Unbounded",sans-serif;font-weight:800;font-size:25px;letter-spacing:-.03em;line-height:1}
.price .per{font-size:12px;color:var(--tx-3)}

/* estados: nunca solo color — punto + texto */
.chip{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:4px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.chip.now{color:var(--ok);background:rgba(61,214,140,.12);border-color:rgba(61,214,140,.3)}
.chip.soon{color:var(--wait);background:rgba(245,165,36,.12);border-color:rgba(245,165,36,.3)}
.chip.off{color:var(--tx-2);background:rgba(255,255,255,.05);border-color:var(--line)}
.chip.bad{color:var(--bad);background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.3)}
.chip.ren{color:var(--tx);background:rgba(255,255,255,.07);border-color:var(--line-2)}

/* ---------- cajas / formularios ---------- */
.box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.box + .box{margin-top:14px}
.cols{display:grid;gap:16px;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
@media (max-width:840px){.cols{grid-template-columns:1fr}}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field > label{font-size:13.5px;font-weight:600;color:var(--tx-2)}   /* etiqueta SIEMPRE visible */
.field .help{font-size:12.5px;color:var(--tx-3)}
.input,select,textarea{
  width:100%;min-height:var(--tap);padding:11px 13px;border-radius:11px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--tx);font-size:15.5px;
}
textarea{min-height:80px;resize:vertical}
input[type="file"]{padding:8px 10px;font-size:14px}
input[type="file"]::file-selector-button{
  margin-right:11px;padding:8px 13px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel);color:var(--tx);font-family:"Unbounded",sans-serif;font-weight:700;font-size:13px;cursor:pointer}
input[type="file"]::file-selector-button:hover{border-color:var(--red);color:var(--red)}
input[type="color"]{padding:5px;height:var(--tap);cursor:pointer}
.input:focus,select:focus,textarea:focus{border-color:var(--red);outline:none}
.input[aria-invalid="true"]{border-color:var(--bad)}
.err{color:var(--bad);font-size:13px;display:flex;gap:6px;align-items:center}
.err::before{content:"!";font-family:"Unbounded",sans-serif;font-weight:800;font-size:10px;
  width:16px;height:16px;border-radius:50%;background:rgba(255,107,107,.2);display:grid;place-items:center;flex:0 0 auto}
.grid2{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}

/* opciones tipo radio grande */
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:var(--tap);text-align:left;
  padding:12px 14px;border-radius:11px;border:1px solid var(--line);background:var(--panel-2);cursor:pointer}
.opt[aria-pressed="true"]{border-color:var(--red);background:var(--red-soft)}
.opt .rad{width:18px;height:18px;border-radius:50%;border:2px solid var(--tx-3);flex:0 0 auto;position:relative}
.opt[aria-pressed="true"] .rad{border-color:var(--red)}
.opt[aria-pressed="true"] .rad::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--red)}
.opt .g{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.opt .t{font-weight:600;font-size:14.5px;display:block}
.opt .d{font-size:12.5px;color:var(--tx-3);display:block}
/* El estado marcado no depende de JavaScript: :has() lo resuelve solo, y el
   atributo aria-pressed queda para lectores de pantalla y navegadores viejos. */
.opt:has(input:checked){border-color:var(--red);background:var(--red-soft)}
.opt:has(input:checked) .rad{border-color:var(--red)}
.opt:has(input:checked) .rad::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--red)}

/* ---------- pasos "qué pasa después" ---------- */
.steps3{display:flex;flex-direction:column;gap:12px;counter-reset:s;list-style:none;padding:0;margin:0}
/* El número va absoluto, no como hermano flex: si fuera flex, cada trozo de
   texto del <li> se volvería un ítem aparte y se partiría en columnas. */
.steps3 li{position:relative;padding-left:36px;font-size:14px;color:var(--tx-2);line-height:1.5}
.steps3 li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;
  width:24px;height:24px;border-radius:50%;background:var(--red-soft);color:var(--red);
  font-family:"Unbounded",sans-serif;font-weight:800;font-size:12px;display:grid;place-items:center}
.steps3 b{color:var(--tx)}

/* ---------- pago ---------- */
.amount{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);margin:14px 0}
.amount .big{font-family:"Unbounded",sans-serif;font-weight:800;font-size:31px;letter-spacing:-.03em;line-height:1}
.kv{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--tx-2)}
.kv .v{font-weight:600;text-align:right}
.drop{border:1.5px dashed var(--line-2);border-radius:12px;padding:22px 16px;text-align:center;
  color:var(--tx-2);font-size:14px;background:rgba(255,255,255,.02);cursor:pointer;display:block}
.drop b{display:block;color:var(--tx);font-family:"Unbounded",sans-serif;font-weight:700;font-size:15px;margin-bottom:3px}
.drop:hover{border-color:var(--red);background:var(--red-soft)}
.drop.ok{border-style:solid;border-color:rgba(61,214,140,.45);background:rgba(61,214,140,.07)}

.code{font-family:"Unbounded",sans-serif;font-weight:800;font-size:clamp(32px,8vw,46px);letter-spacing:.04em;color:var(--red);line-height:1}

/* ---------- ficha de producto ---------- */
.migas{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:16px;color:var(--tx-3)}
.migas a{color:var(--tx-2)}
.ficha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:26px;align-items:start}
@media (max-width:840px){.ficha{grid-template-columns:1fr;gap:18px}}
.ficha-art .art.big{aspect-ratio:16/10;border-radius:var(--r);border:1px solid var(--line)}
.ficha-art .art.big .wm{font-size:clamp(30px,6vw,52px)}
.ficha-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0 18px}
.precio-bloque{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px;border-radius:12px;background:var(--panel);border:1px solid var(--line);margin-bottom:16px}
.precio-amt{font-family:"Unbounded",sans-serif;font-weight:800;font-size:34px;letter-spacing:-.03em}
.offtag{display:inline-block;margin-left:7px;font-family:"Unbounded",sans-serif;font-size:12px;font-weight:800;
  color:#fff;background:var(--red-cta);padding:3px 7px;border-radius:6px}

/* ---------- reseñas ---------- */
.resenas{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.resena{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px}
.resena-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.resena-top b{font-family:"Unbounded",sans-serif;font-size:14.5px}
.resena p{margin:0 0 9px;font-size:14px;color:var(--tx-2);line-height:1.5}
.starpick{display:inline-flex;flex-direction:row-reverse;gap:4px}
.starpick input{position:absolute;opacity:0;width:0;height:0}
.starpick label{font-size:30px;line-height:1;color:var(--tx-3);cursor:pointer;transition:color .12s ease}
.starpick label:hover,.starpick label:hover ~ label,
.starpick input:checked ~ label{color:var(--wait)}
.starpick input:focus-visible + label{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}

/* ---------- avisos ---------- */
.note{display:flex;gap:11px;padding:13px 14px;border-radius:11px;font-size:13.5px;line-height:1.5;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--tx-2)}
.note b{color:var(--tx)}
.note.warn{background:rgba(245,165,36,.08);border-color:rgba(245,165,36,.26);color:#F0D9AE}
.note.good{background:rgba(61,214,140,.08);border-color:rgba(61,214,140,.26);color:#BDEBD3}
.note.bad{background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.26);color:#F5C4C6}

/* ---------- vacío ---------- */
.empty{border:1px dashed var(--line-2);border-radius:var(--r);padding:34px 22px;text-align:center;color:var(--tx-2)}
.empty b{display:block;font-family:"Unbounded",sans-serif;font-weight:700;font-size:17px;color:var(--tx);margin-bottom:6px}

/* ---------- tablas del panel ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
th{font-family:"Unbounded",sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-3);text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);background:var(--panel-2)}
td{padding:12px 13px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.02)}

/* ---------- cuentas del portal ---------- */
.acct{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--line)}
.acct:last-child{border-bottom:0}
.tile{width:46px;height:46px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;
  font-family:"Unbounded",sans-serif;font-weight:800;font-size:14px;color:#fff}
.tile img{width:100%;height:100%;object-fit:cover}
.acct .g{flex:1;min-width:0}
.days{text-align:right;flex:0 0 auto}
.days .n{font-family:"Unbounded",sans-serif;font-weight:800;font-size:19px;line-height:1}
.days .u{font-size:11px;color:var(--tx-3)}
.days.warn .n{color:var(--wait)}
.days.bad .n{color:var(--bad)}
.reveal{margin-top:9px;padding:11px 12px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);
  font-size:13.5px;line-height:1.8}
.reveal .k{color:var(--tx-3);display:inline-block;width:88px}
.reveal .v{font-weight:600;font-family:"Unbounded",sans-serif;word-break:break-all}

/* ---------- botón flotante de WhatsApp ---------- */
.wafab{position:fixed;right:16px;bottom:16px;z-index:40;width:54px;height:54px;border-radius:50%;
  background:var(--wa);display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.34)}
.wafab:hover{text-decoration:none;filter:brightness(1.07)}
.wafab svg{width:28px;height:28px;fill:#06301A}

/* ---------- pie ---------- */
footer{border-top:1px solid var(--line);margin-top:44px;padding:28px 0 40px;color:var(--tx-3);font-size:13px}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px;padding-bottom:22px}
@media (max-width:640px){.fcols{grid-template-columns:1fr 1fr;gap:20px}.fcols > div:first-child{grid-column:1/-1}}
.fcols .disp{font-size:16px;color:var(--tx)}
.flist{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.flist a{color:var(--tx-2);font-size:13.5px}
.fbot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line)}

.loglist{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:8px}
.loglist li{padding:11px 13px;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-size:14px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--panel-2);
  padding:2px 6px;border-radius:5px;border:1px solid var(--line)}

/* ==================================================================
   C · ARCADE — forma
   Va al final a propósito: gana la cascada sin tocar las reglas de
   arriba, así se puede quitar este bloque y volver al sistema previo.
   ================================================================== */

/* Retícula tenue de fondo. Fija, desvanecida hacia abajo, y nunca en
   el panel: ahí sería ruido durante ocho horas. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(160,150,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(160,150,255,.055) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 58%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 58%);
}
body.tool::before{display:none}
.top,main,footer,.wafab{position:relative;z-index:1}

/* Unbounded es una geométrica ANCHA: con los tamaños anteriores se
   desborda. Toda la escala display baja ~18 %. */
.h1{font-size:clamp(22px,4.4vw,32px);line-height:1.08}
.h2{font-size:clamp(18px,2.7vw,21px)}
.h3{font-size:16px}
.lbl{font-size:10px;letter-spacing:.16em}
.brand b{font-size:15px;letter-spacing:-.02em}
.banner-in .h1{font-size:clamp(24px,4.6vw,38px);line-height:1.06}
.wm.lg{font-size:clamp(17px,4.2vw,27px)}
.wm.md{font-size:clamp(14px,3.4vw,22px)}
.wm.sm{font-size:clamp(12px,2.8vw,18px)}
.wm.xs{font-size:clamp(10px,2.2vw,15px)}
.t-wide{letter-spacing:.06em;text-indent:.06em}   /* ya es ancha de por sí */
.t-tight{letter-spacing:-.02em}
.price .amt{font-size:21px}
.precio-amt{font-size:28px}
.code{font-size:clamp(26px,6.4vw,38px);letter-spacing:.02em}

/* ---- el corte diagonal, el gesto de la dirección ---- */
.prod,.box,.tr,.resena,.note,.empty,.tablewrap,.phone,.banner-list li{
  clip-path:var(--cut);
  border:0;
  box-shadow:inset 0 0 0 1px var(--line);
}
.prod:hover{box-shadow:inset 0 0 0 1px var(--red);transform:translateY(-3px)}
.art,.tile{clip-path:var(--cut-sm)}
.ficha-art .art.big{clip-path:var(--cut);box-shadow:inset 0 0 0 1px var(--line)}
.btn,.cta,.cat,.chip,.seg,.input,select,textarea,.paybtn,.opt,.drop{
  border-radius:0;
  clip-path:var(--cut-sm);
}
.btn,.cta{padding-right:24px}
.cat{padding-right:22px}
.tabs .tab{border-radius:0;clip-path:var(--cut-sm);padding-right:20px}
.wafab{border-radius:0;clip-path:polygon(0 0,100% 0,100% 74%,74% 100%,0 100%)}
.mark{border-radius:0;clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%)}
.off{border-radius:0;clip-path:var(--cut-sm);padding-right:11px}
.kind{border-radius:0;clip-path:var(--cut-sm);padding-right:11px}
/* El chip lleva el corte solo del lado derecho: con dos cortes se ve sucio */
.chip{padding-right:12px}

/* El foco tiene que verse aunque el elemento esté recortado */
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:0}

/* ---- cian: solo estado y detalle fino, nunca decoración ---- */
.chip.now{color:var(--cyan);background:rgba(34,211,238,.13);box-shadow:inset 0 0 0 1px rgba(34,211,238,.34);border-color:transparent}
.auto{background:linear-gradient(100deg,rgba(34,211,238,.12),rgba(34,211,238,.03));
  clip-path:var(--cut);box-shadow:inset 0 0 0 1px rgba(34,211,238,.3);border:0}
.auto .led{background:var(--cyan);box-shadow:0 0 0 0 rgba(34,211,238,.5)}
@keyframes led{70%{box-shadow:0 0 0 9px rgba(34,211,238,0)}100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}}
.auto p{color:#BEE9F5}
.note.good{background:rgba(34,211,238,.09);border-color:rgba(34,211,238,.28);color:#BEE9F5}
.days .n{color:var(--tx)}

/* el fondo del banner, en clave violeta */
.banner{background:
  radial-gradient(58% 120% at 10% 0%,rgba(229,72,77,.24),transparent 60%),
  radial-gradient(50% 105% at 92% 8%,rgba(34,211,238,.14),transparent 58%),
  var(--ink)}
.hero::before{background:radial-gradient(50% 60% at 50% 50%,rgba(229,72,77,.18),transparent 70%)}

/* métodos de pago, adaptados al fondo violeta */
.opt.pay-yape:has(input:checked){background:rgba(180,90,232,.18);box-shadow:inset 0 0 0 1px var(--yape)}
.opt.pay-yape:has(input:checked) .rad{border-color:var(--yape)}
.opt.pay-yape:has(input:checked) .rad::after{background:var(--yape)}
.opt.pay-plin:has(input:checked){background:rgba(45,212,191,.16);box-shadow:inset 0 0 0 1px var(--plin)}
.opt.pay-plin:has(input:checked) .rad{border-color:var(--plin)}
.opt.pay-plin:has(input:checked) .rad::after{background:var(--plin)}

/* ==================================================================
   Registro HERRAMIENTA (body.tool) — el panel.
   Mismo sistema: mismas fuentes, mismos tokens, mismos contrastes.
   Lo que cambia es la temperatura: sin retícula, cortes mínimos y
   superficies más calmadas. Una pantalla que se mira ocho horas no
   puede estar gritando.
   ================================================================== */
body.tool{--cut:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);
          --cut-sm:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%);
          --panel:#100E1B; --panel-2:#171428}
body.tool .banner,body.tool .hero::before{background:none}
body.tool .h1,body.tool .h2{letter-spacing:-.025em}
body.tool table{font-family:"Sora",system-ui,sans-serif}
body.tool th{font-family:"Unbounded",system-ui,sans-serif;font-size:9.5px;letter-spacing:.12em}

/* ---- ajustes tras ver Unbounded renderizado de verdad ----
   Es una geométrica MUY ancha: lo que con Archivo entraba en una
   línea, acá se parte en dos. Se corrige donde el espacio es escaso,
   no bajando la tipografía entera. */
@media (max-width:560px){
  .prod h3{font-size:12.5px;letter-spacing:-.03em;line-height:1.2}
  .prod .desc{font-size:11px}
  .prod .meta{font-size:11px;gap:5px}
  .prod .meta .sep,
  .prod .meta .num:last-child{display:none}   /* "· 5 vendidos" no cabe en dos columnas */
  .price .amt{font-size:17px;letter-spacing:-.035em}
  .chip{font-size:10.5px;padding:3px 9px 3px 7px}
  .h1{font-size:clamp(20px,5.6vw,26px)}
  .banner-in .h1{font-size:clamp(21px,5.8vw,28px)}
  .cat{font-size:12.5px;padding:8px 16px 8px 12px}
  .seg{font-size:12.5px;padding:7px 11px}
}
/* La tira de confianza en móvil: se ve el borde de la tercera tarjeta
   para que quede claro que se desliza, en vez de parecer cortada. */
@media (max-width:820px){
  .banner-list{scroll-snap-type:x mandatory;padding-right:34px}
  .banner-list li{flex:0 0 78%;scroll-snap-align:start}
}
.tile{width:46px;height:46px}

/* ---- objetivos táctiles, tras medirlos en el navegador ----
   La auditoría encontró tres por debajo de 44px: el logo, el botón
   pequeño y el segmentado. Los enlaces en línea dentro de un párrafo
   quedan como están: WCAG los exceptúa justamente porque partir la
   frase para agrandarlos empeora la lectura. */
.brand{min-height:var(--tap);align-items:center}
.btn.sm{min-height:var(--tap);padding:10px 16px}
.seg{min-height:var(--tap);display:inline-flex;align-items:center}
.segs{padding:2px}

/* ==================================================================
   Pasada de tipografía — correcciones medidas en el navegador,
   no estimadas a ojo. Diagnóstico previo: 7/10.
   ================================================================== */

/* Fila 1 · nada que sea una FRASE baja de 14px.
   El caso que más importa es .help: es el texto que le dice al cliente
   que escriba su nombre completo como sale en su Yape — y de eso
   depende que el pago se cruce solo. A 12.5px se saltea. */
.field .help{font-size:14px;line-height:1.5;color:var(--tx-2)}
.small,.migas,.fcols .small{font-size:14px}
.flist a{font-size:14px}
.prod .desc{font-size:12.5px}
.prod .st,.opt .d,.tr span,.banner-list span{font-size:12.5px}
.kv{font-size:15px}
.lead,.hero p,.banner-in p{font-size:16.5px;line-height:1.6}
@media (max-width:560px){
  .prod .desc{font-size:12px}
  .prod .meta{font-size:11.5px}
}

/* Fila 2 · medida. "Cómo funciona" daba 97ch en escritorio: el ojo
   pierde el salto de retorno pasados los ~75. Las migas quedan largas
   a propósito — son una línea de navegación, no texto para leer. */
.steps3 li,.note div,.box > p,.resena p,.empty{max-width:65ch}
.steps3{max-width:none}

/* Fila 10 · los enlaces dentro de una frase llevan subrayado, no solo
   color. El rojo contra el texto da 3.5:1, suficiente por contraste,
   pero el subrayado es lo que lo hace evidente sin depender del color.
   Las listas de enlaces del pie no lo necesitan: ahí todo es enlace. */
p a,.note a,.kv a,.migas a,li:not(.flist li) a:not(.btn):not(.cat):not(.seg):not(.tab){
  text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:from-font;text-decoration-color:color-mix(in srgb,var(--red) 55%,transparent)}
p a:hover,.note a:hover{text-decoration-color:var(--red)}
.flist a,.footer a{text-decoration:none}

/* Fila 9 · huérfanas también en el texto corrido, no solo en títulos. */
p,.lead,.desc,.help{text-wrap:pretty}

/* ---- campo de estrellas de fondo, en toda la tienda ----
   Va fijo detrás de todo. La retícula de la dirección Arcade se
   queda como segunda capa, más tenue, para que no compitan. */
#cielo{position:fixed;inset:0;z-index:0;pointer-events:none;display:none}
body:not(.tool)::before{opacity:.5}
.top,main,footer{position:relative;z-index:2}
/* el botón de WhatsApp sigue FIJO: ponerle position:relative acá lo
   mandaba al flujo de la página y aparecía a media altura */
.wafab{z-index:40}

/* ==================================================================
   Carrusel de plataformas — NAVEGA, no decora.
   Cada aro es un enlace a la página de esa plataforma, donde están
   sus variantes (completa, perfil, por meses).
   ================================================================== */
.corre{margin:20px 0 6px;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.corre .pista{display:flex;gap:14px;width:max-content;animation:correr 38s linear infinite}
.corre:hover .pista,.corre:focus-within .pista{animation-play-state:paused}
.corre.quieta{-webkit-mask-image:none;mask-image:none}
.corre.quieta .pista{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
@keyframes correr{to{transform:translateX(-50%)}}
@property --giro{syntax:'<angle>';inherits:false;initial-value:0deg}
.aro{width:78px;height:78px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 28%,var(--c1),var(--c2));
  position:relative;isolation:isolate;overflow:hidden;text-decoration:none;
  transition:transform .2s cubic-bezier(.2,.8,.3,1)}
.aro::before{content:"";position:absolute;inset:-3px;border-radius:50%;z-index:-1;
  background:conic-gradient(from var(--giro,0deg),transparent 0 62%,var(--c1) 78%,#fff 84%,var(--c1) 90%,transparent 100%);
  animation:girar 3.6s linear infinite}
@keyframes girar{to{--giro:360deg}}
.aro:hover,.aro:focus-visible{transform:scale(1.09);text-decoration:none}
.aro img{width:100%;height:100%;object-fit:cover}
.aro span{font-family:"Unbounded",sans-serif;font-weight:800;color:#fff;letter-spacing:-.02em;
  text-align:center;line-height:1;padding:0 3px;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.5)}
/* el tamaño baja según lo largo del nombre, para que quepa dentro del aro */
.aro .a1{font-size:13px}
.aro .a2{font-size:10.5px}
.aro .a3{font-size:8px}
.aro .a4{font-size:6.5px}
@media (max-width:560px){.aro{width:66px;height:66px}
  .aro .a1{font-size:11px}.aro .a2{font-size:9px}.aro .a3{font-size:7px}.aro .a4{font-size:5.8px}}
@media (prefers-reduced-motion:reduce){
  .corre .pista{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .aro::before{animation:none}
}

/* ---------- página de una plataforma ---------- */
.marca-cab{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.marca-art{width:min(240px,46vw);flex:0 0 auto}
.marca-art .art{aspect-ratio:16/10;clip-path:var(--cut);box-shadow:inset 0 0 0 1px var(--line)}
.marca-art .art img{width:100%;height:100%;object-fit:cover}
.planes{display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.plan{background:var(--panel);clip-path:var(--cut);box-shadow:inset 0 0 0 1px var(--line);padding:16px}
.plan.agot{opacity:.55}
.plan-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.meses{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.mes{display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;
  min-height:var(--tap);padding:9px 6px;background:var(--panel-2);clip-path:var(--cut-sm);
  box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;color:var(--tx);
  transition:box-shadow .15s ease,background .15s ease}
.mes:hover{box-shadow:inset 0 0 0 1px var(--red);background:var(--red-soft);text-decoration:none;color:var(--tx)}
.mes.off{pointer-events:none;opacity:.5}
.mes-n{font-size:11px;color:var(--tx-3)}
.mes-p{font-family:"Unbounded",sans-serif;font-weight:800;font-size:13.5px;letter-spacing:-.03em}

/* ---------- carrusel dentro del panel (ajustes) ---------- */
.marcas-adm{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.marca-fila{display:flex;gap:11px;align-items:center;background:var(--panel-2);padding:10px;
  clip-path:var(--cut-sm);box-shadow:inset 0 0 0 1px var(--line)}
.marca-fila .aro{width:52px;height:52px;pointer-events:none}
.marca-fila .aro::before{animation:none;background:none}
.marca-fila .g{flex:1;min-width:0}

/* ==================================================================
   PANEL · catálogo agrupado y plegable
   21 formularios abiertos uno debajo del otro eran imposibles de usar.
   Ahora: buscador arriba, un título por plataforma, y cada producto
   se abre solo cuando lo tocas.
   ================================================================== */
.admbar{position:sticky;top:0;z-index:6;background:var(--ink);padding:10px 0 12px;margin:4px 0 6px;
  display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.admbar .input{flex:1;min-width:190px}

.grupoadm{display:flex;align-items:center;gap:10px;margin:22px 0 9px;
  font-family:"Unbounded",sans-serif;font-weight:600;font-size:14.5px;letter-spacing:-.01em;color:var(--tx)}
.grupoadm .n{font-family:"Sora",sans-serif;font-weight:400;font-size:12px;color:var(--tx-3)}
.grupoadm::after{content:"";flex:1;height:1px;background:var(--line)}

details.pa{background:var(--panel);clip-path:var(--cut-sm);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:8px}
details.pa.apagado > summary{opacity:.62}
details.pa > summary{display:flex;gap:12px;align-items:center;padding:10px 14px;cursor:pointer;
  list-style:none;min-height:var(--tap)}
details.pa > summary::-webkit-details-marker{display:none}
details.pa > summary::marker{content:""}
details.pa > summary:hover{background:var(--panel-2)}
details.pa > summary:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
details.pa[open] > summary{box-shadow:inset 0 -1px 0 var(--line)}
details.pa[open] > summary,details.pa[open].apagado > summary{opacity:1}
details.pa > form{padding:16px 14px 14px}
.pa > summary .tile{width:38px;height:38px}
.pa .nom{flex:1;min-width:0}
.pa .nom b{display:block;font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa .nom .sub{display:block;font-size:12px;color:var(--tx-3);line-height:1.4}
.pa .tag{font-size:10px;letter-spacing:.07em;text-transform:uppercase;padding:3px 7px;white-space:nowrap;
  box-shadow:inset 0 0 0 1px var(--line);color:var(--tx-2)}
.pa .tag.perfil{color:#CFC0FF;box-shadow:inset 0 0 0 1px rgba(160,120,255,.45)}
.pa .tag.completa{color:#9FDCFF;box-shadow:inset 0 0 0 1px rgba(60,160,220,.45)}
.pa .pz{font-family:"Unbounded",sans-serif;font-weight:600;font-size:13.5px;white-space:nowrap}
.pa .pz.no{font-family:"Sora",sans-serif;font-weight:400;font-size:11.5px;color:var(--red)}
@media (max-width:620px){
  .pa .nom .sub{display:none}
  .pa .tag{display:none}
  details.pa > summary{gap:10px;padding:9px 11px}
}

/* ---------- datos de la cuenta entregada (gracias.php) ---------- */
.box.datos{box-shadow:inset 0 0 0 1px rgba(34,211,238,.35)}
.dato{display:flex;gap:12px;align-items:center;padding:11px 0;box-shadow:inset 0 -1px 0 var(--line)}
.dato:last-of-type{box-shadow:none}
.dato .k{flex:0 0 96px;font-size:12.5px;color:var(--tx-3)}
.dato .v{flex:1;min-width:0;font-size:15px;word-break:break-all}
.dato .btn{flex:0 0 auto}
@media (max-width:480px){
  .dato{flex-wrap:wrap;gap:4px 12px}
  .dato .k{flex:0 0 100%}
  .dato .v{flex:1 1 auto}
}