/* Web ANLOK 2026 · precios-ticket.css — #precios de ANLOK TickScan: los tres planes como tres tickets (.tk-tickets-uno queda para un plan suelto).
   Sin JS se ven impresos. precios-ticket.js pone .tk-armado (solo si la sección aún no se ve) y .tk-impreso
   en cada ticket al entrar en pantalla: el papel sale de la ranura. Prefijo .tk- */

.tk-tickets{
  --tk-papel:#FBF8F1;
  --tk-papel-sombra:#EFE9DA;
  --tk-tinta:#24232D;
  --tk-tinta-2:#4B4A56;
  --tk-gris:#66656F;
  --tk-raya:rgba(36,35,45,.32);
  --tk-lila:#6C63FF;
  --tk-lila-o:#4A40D9;
  --tk-boton:#5B51F0;
  --tk-ambar:#FAAA2F;
  --tk-zz:conic-gradient(from 135deg at top,#0000 90deg,#000 0) 0 100%/14px 7px repeat-x;
  --tk-solido:linear-gradient(#000 0 0) 0 0/100% calc(100% - 7px) no-repeat;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,2.8vw,44px);
  max-width:1080px;margin:0 auto;align-items:stretch;
}
/* un solo plan (desde el 27/10): el ticket centrado, del ancho que tenía en la fila de tres */
.tk-tickets-uno{grid-template-columns:minmax(0,360px);justify-content:center}

/* ---------- El ticket: ranura de la impresora + papel ---------- */
.tk-ticket{
  position:relative;display:flex;flex-direction:column;min-width:0;padding-top:12px;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.55));
}
.tk-ranura{
  position:absolute;top:0;left:-12px;right:-12px;z-index:2;height:24px;border-radius:12px;
  display:flex;align-items:flex-start;justify-content:center;
  background:linear-gradient(180deg,#34343E,#101014);
  box-shadow:inset 0 -5px 0 #000,inset 0 1px 0 rgba(255,255,255,.12);
}
.tk-ranura__texto{
  padding-top:5px;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#FFFFFF;white-space:nowrap;
}
.tk-papel{
  position:relative;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:34px 26px 30px;color:var(--tk-tinta);
  background:linear-gradient(180deg,var(--tk-papel-sombra),var(--tk-papel) 54px);
  -webkit-mask:var(--tk-solido),var(--tk-zz);mask:var(--tk-solido),var(--tk-zz);
}

.tk-marca{font:500 11px/1.2 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--tk-gris)}
.tk-papel .tk-plan{margin-top:8px;font:750 28px/1.1 var(--sans);letter-spacing:-.025em;color:var(--tk-tinta)}
.tk-sello{
  display:inline-flex;align-items:center;margin-top:12px;padding:5px 10px 4px;border-radius:4px;
  font:500 12px/1.1 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  color:var(--tk-tinta-2);box-shadow:inset 0 0 0 1.5px var(--tk-raya);
}
.tk-ticket-trimestral .tk-sello{background:var(--tk-ambar);color:#1B1C22;box-shadow:none}
.tk-ticket-anual .tk-sello{background:var(--tk-lila);color:#FFFFFF;box-shadow:none}

.tk-mes{
  align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:4px;
  margin-top:20px;padding:18px 0 20px;border-top:1.5px dashed var(--tk-raya);border-bottom:1.5px dashed var(--tk-raya);
}
.tk-mes__pre,.tk-mes__pie{font:500 11.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tk-gris)}
.tk-mes__cifra{
  font:750 clamp(46px,4vw,58px)/1 var(--sans);letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--tk-tinta);
}
.tk-ticket-anual .tk-mes__cifra{color:var(--tk-lila-o)}

.tk-lineas{
  align-self:stretch;display:grid;gap:9px;margin:16px 0 0;padding-bottom:16px;border-bottom:4px double rgba(36,35,45,.5);
  text-align:left;
}
.tk-linea{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.tk-linea dt{font:500 13px/1.35 var(--mono);color:var(--tk-tinta-2)}
.tk-linea dd{display:inline-flex;align-items:baseline;gap:8px;margin:0 0 0 auto;white-space:nowrap;font:500 13px/1.35 var(--mono);color:var(--tk-gris)}
.tk-linea dd b{font:700 16.5px/1.2 var(--sans);font-variant-numeric:tabular-nums;color:var(--tk-tinta)}
.tk-linea dd s{text-decoration-thickness:1.5px;color:var(--tk-gris)}
.tk-linea dd > span[aria-hidden]{font:700 16.5px/1.2 var(--sans);color:var(--tk-gris)}

.tk-papel .tk-comprar{
  align-self:stretch;margin-top:20px;min-height:52px;border-radius:10px;font-size:16.5px;
  background:var(--tk-tinta);color:#FFFFFF;
}
.tk-papel .tk-comprar svg{stroke-width:2.2;transition:transform .25s var(--suave)}
.tk-papel .tk-comprar:hover{background:#000000}
.tk-papel .tk-comprar:hover svg{transform:translateX(4px)}
.tk-papel .tk-comprar:focus-visible{outline:3px solid var(--tk-lila-o);outline-offset:3px;border-radius:10px}
.tk-ticket-anual .tk-comprar{background:var(--tk-boton);box-shadow:0 14px 26px -12px rgba(91,81,240,.8)}
.tk-ticket-anual .tk-comprar:hover{background:var(--tk-lila-o)}

.tk-codigo{
  display:block;width:min(170px,70%);height:26px;margin-top:20px;opacity:.82;
  background:repeating-linear-gradient(90deg,var(--tk-tinta) 0 2px,#0000 2px 3px,var(--tk-tinta) 3px 4px,#0000 4px 7px,var(--tk-tinta) 7px 10px,#0000 10px 11px,var(--tk-tinta) 11px 12px,#0000 12px 15px,var(--tk-tinta) 15px 16px,#0000 16px 19px);
}

/* ---------- El anual, destacado ---------- */
.tk-ticket-anual{filter:drop-shadow(0 26px 30px rgba(0,0,0,.55)) drop-shadow(0 0 34px rgba(108,99,255,.38))}
.tk-ticket-anual .tk-ranura{
  background:linear-gradient(180deg,#7C74FF,#4A40D9);
  box-shadow:inset 0 -5px 0 #241C8C,inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(140,133,255,.5);
}

/* ---------- Lo que incluyen los tres ---------- */
.tk-incluye{
  display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:clamp(40px,5vw,80px);
  max-width:1080px;margin:clamp(44px,4.6vw,68px) auto 0;padding-top:clamp(28px,3vw,40px);border-top:1.5px dashed rgba(255,255,255,.16);
}
.tk-incluye .tk-incluye__titulo{font:500 12px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-oscuro-sec)}
.tk-incluye__lista{display:grid;grid-template-columns:repeat(2,auto);gap:14px 44px;margin:0;padding:0;list-style:none}
.tk-incluye__lista li{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500;line-height:1.35;color:var(--texto-oscuro);text-align:left}
.tk-incluye__lista svg{
  flex:none;width:24px;height:24px;padding:4px;border-radius:50%;background:rgba(108,99,255,.24);
  fill:none;stroke:#BBAEFF;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- Impresión al entrar en pantalla ----------
   El papel baja desde la ranura y a la vez se recorta por arriba en la misma proporción: solo se ve lo que ya ha salido. */
.tk-armado .tk-papel{transform:translateY(-100%);clip-path:inset(100% 0 0 0)}
.tk-armado .tk-ranura__texto{opacity:0}
.tk-armado .tk-impreso .tk-papel{
  transform:none;clip-path:inset(0 0 0 0);
  transition:transform 1.35s steps(32,end) var(--tk-retraso,0s),clip-path 1.35s steps(32,end) var(--tk-retraso,0s);
}
.tk-armado .tk-impreso .tk-ranura__texto{opacity:1;transition:opacity .45s ease calc(var(--tk-retraso,0s) + 1.3s)}

/* ---------- Portátil pequeño: la misma fila, más justa ---------- */
@media (min-width:1024px) and (max-width:1199px){
  .tk-tickets{gap:20px}
  .tk-papel{padding-left:20px;padding-right:20px}
  .tk-linea dt,.tk-linea dd{font-size:12.5px}
}

/* ---------- Tableta y móvil: apilados y compactos ---------- */
@media (max-width:1023px){
  .tk-tickets{grid-template-columns:minmax(0,1fr);gap:30px;max-width:560px}
  .tk-papel{
    display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:start;text-align:left;
    grid-template-areas:"marca mes" "plan mes" "sello mes" "lineas lineas" "comprar comprar";
    padding:32px 22px 26px;
  }
  .tk-marca{grid-area:marca}
  .tk-papel .tk-plan{grid-area:plan;margin-top:6px;font-size:clamp(22px,6.6vw,26px)}
  .tk-sello{grid-area:sello;justify-self:start;margin-top:10px}
  .tk-mes{grid-area:mes;align-self:center;align-items:flex-end;gap:3px;margin:0;padding:0;border:0;text-align:right}
  .tk-mes__cifra{font-size:clamp(30px,10.5vw,46px)}
  .tk-mes__pre,.tk-mes__pie{font-size:11px;letter-spacing:.1em}
  .tk-lineas{grid-area:lineas;margin-top:18px;padding-top:14px;border-top:1.5px dashed var(--tk-raya);border-bottom:0;padding-bottom:0}
  .tk-papel .tk-comprar{grid-area:comprar;margin-top:18px}
  .tk-codigo{display:none}
  .tk-ticket-anual{filter:drop-shadow(0 20px 24px rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(108,99,255,.3))}
  .tk-incluye{grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:20px;max-width:560px}
  .tk-incluye .tk-incluye__titulo{text-align:center}
  .tk-incluye__lista{grid-template-columns:minmax(0,1fr);gap:12px}
}
@media (max-width:374px){
  .tk-papel{padding-left:18px;padding-right:18px;column-gap:12px}
}
@media (min-width:640px) and (max-width:1023px){
  .tk-incluye{max-width:680px}
  .tk-incluye__lista{grid-template-columns:repeat(2,auto);column-gap:32px}
}

@media (prefers-reduced-motion:reduce){
  .tk-armado .tk-papel{transform:none;clip-path:none;transition:none}
  .tk-armado .tk-ranura__texto{opacity:1;transition:none}
}