/* Etiquetas de precio colgadas (public_portal/price_tags.py).
   Sin un solo color escrito a mano: todo sale de las variables del centro
   (--w-* del widget, --brand-color del portal) con un respaldo neutro.
     --pt-paper   cartón de la etiqueta        --pt-ink     tinta
     --pt-accent  acento del centro            --pt-on-accent texto sobre acento
     --pt-rail    la barra de la que cuelgan   --pt-muted   texto secundario */
.pt {
  --pt-paper: var(--card, var(--w-card, white));
  --pt-ink: var(--ink, var(--w-text, currentColor));
  --pt-muted: var(--ink-soft, var(--w-muted, currentColor));
  --pt-accent: var(--brand-color, var(--w-accent, currentColor));
  --pt-on-accent: var(--on-brand, white);
  --pt-rail: var(--pt-ink);
  --pt-radius: var(--w-radius, 14px);
  --pt-w: 190px;
  position: relative;
  padding: 28px 0 18px;
}
.pt + .pt { margin-top: 10px; }
.pt-title {
  text-align: center; font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--pt-muted); margin-bottom: 18px;
}
.pt-rail {
  height: 6px; border-radius: 999px; background: var(--pt-rail); opacity: .9;
  margin: 0 8px;
}
.pt-row {
  display: flex; justify-content: center; gap: 34px;
  padding: 0 8px 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.pt-row::-webkit-scrollbar { display: none; }
.pt-tag {
  flex: 0 0 var(--pt-w); width: var(--pt-w); scroll-snap-align: center;
  position: relative; padding-top: 40px;
  transform-origin: 50% 0; /* el hilo: la etiqueta gira desde la barra */
  perspective: 900px;
  animation: pt-swing 2.2s cubic-bezier(.3,.8,.4,1) both;
  animation-delay: calc(var(--i, 0) * 120ms);
}
.pt-tag:hover, .pt-tag:focus-within { animation: pt-swing 1.8s cubic-bezier(.3,.8,.4,1); }
/* El hilo */
.pt-tag::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 40px;
  background: var(--pt-rail); transform: translateX(-50%); opacity: .7;
}
.pt-card {
  position: relative; transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4,.2,.2,1);
  min-height: 230px;
}
.pt-tag.is-flipped .pt-card { transform: rotateY(180deg); }
.pt-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 34px 14px 16px;
  background: var(--pt-paper); color: var(--pt-ink);
  border-radius: 6px 6px var(--pt-radius) var(--pt-radius);
  clip-path: polygon(14% 0, 86% 0, 100% 11%, 100% 100%, 0 100%, 0 11%);
  box-shadow: 0 10px 24px rgb(0 0 0 / .12);
}
.pt-face.pt-back { transform: rotateY(180deg); }
/* El ojal */
.pt-face::before {
  content: ""; position: absolute; top: 12px; left: 50%; width: 12px; height: 12px;
  border-radius: 50%; transform: translateX(-50%);
  background: var(--pt-ink); opacity: .85;
}
/* La destacada va en el acento del centro (nunca negro fijo) y su dorso en cartón */
.pt-tag.is-featured .pt-front { background: var(--pt-accent); color: var(--pt-on-accent); }
.pt-tag.is-featured .pt-front::before { background: var(--pt-on-accent); }
.pt-tag:not(.is-featured) .pt-back { background: var(--pt-accent); color: var(--pt-on-accent); }
.pt-tag:not(.is-featured) .pt-back::before { background: var(--pt-on-accent); }
.pt-tag.is-featured .pt-back { background: var(--pt-paper); color: var(--pt-ink); }

.pt-name { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; opacity: .85; margin-bottom: 10px; }
.pt-price { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
/* Precio escrito como texto («49 € / mes», web de Webynd): más corto para que no se parta */
.pt-price--text { font-size: 24px; line-height: 1.15; }
.pt-period { font-size: 12px; opacity: .75; margin-top: 6px; }
.pt-featured { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; margin-top: 12px; opacity: .9; }
.pt-note { font-size: 11px; opacity: .7; margin-top: 10px; }
.pt-flip {
  margin-top: auto; padding-top: 12px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; text-decoration: underline; color: inherit; opacity: .85;
}
.pt-flip:hover { opacity: 1; }
.pt-includes { list-style: none; margin: 0; padding: 0; font-size: 12px; line-height: 1.45; text-align: left; width: 100%; }
.pt-includes li { padding-left: 14px; position: relative; margin-bottom: 5px; }
.pt-includes li::before { content: "✓"; position: absolute; left: 0; top: 0; }
.pt-actions { margin-top: auto; display: grid; gap: 6px; width: 100%; padding-top: 10px; }
.pt-btn {
  display: block; text-align: center; text-decoration: none; cursor: pointer;
  font: 600 12px/1 inherit; font-family: inherit; padding: 9px 10px;
  border-radius: calc(var(--pt-radius) * .7); border: 1px solid currentColor; color: inherit; background: none;
}
.pt-btn-buy { background: var(--pt-paper); color: var(--pt-ink); border-color: var(--pt-paper); }
.pt-tag.is-featured .pt-btn-buy { background: var(--pt-accent); color: var(--pt-on-accent); border-color: var(--pt-accent); }
.pt-btn:hover { filter: brightness(1.06); }

@keyframes pt-swing {
  0% { transform: rotate(0); }
  18% { transform: rotate(-7deg); }
  42% { transform: rotate(5deg); }
  66% { transform: rotate(-2.5deg); }
  84% { transform: rotate(1deg); }
  100% { transform: rotate(0); }
}
@media (max-width: 640px) {
  .pt-row { justify-content: flex-start; gap: 22px; }
  .pt { --pt-w: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-tag, .pt-tag:hover, .pt-tag:focus-within { animation: none; }
  .pt-card { transition: none; }
}