/* pk-shell.css — el design system compartido de PinKempire.
   Ronda 8, 11 set 2026.

   ⚠️ CAMBIO DE DECISION (11 set 2026, Kenneth, explicito):
   Hasta la Ronda 7 este archivo era SOLO el cascaron (encabezado, nav y pie)
   con prefijo --pkn-, y el sitio entero corria con la paleta crema editorial
   (#F2EBE0, Big Shoulders / Ms Madi / Cabin, hang tags). Esa paleta se elegia
   a proposito y el canvas de diseno se descartaba — asi estaba escrito en
   store.html y en clases.html.

   Esa decision queda REEMPLAZADA. Kendolly vio y aprobo la vista previa, y
   Kenneth confirmo que manda esa: papel blanco + rosa/dorado, Anton /
   Yesteryear / Nunito Sans / Space Mono, tarjetas redondeadas, chips, price
   tags y micro-animaciones. Este archivo es la fuente de verdad de todo eso
   para las 4 pantallas (Inicio, Catalogo, Clases, Mi Historia).

   Lo unico que NO migro son Bolsa y Cierre: siguen con el recibo crema, y sus
   tokens viven ACOTADOS dentro de store.html (#screen-cart, #screen-confirm)
   para que las dos paletas no se pisen. Los nombres --ink / --pink / --gold /
   --line existen en las dos, por eso una va en :root y la otra scopeada.

   Nota de portabilidad: la vista previa definia @keyframes pkShimmer DOS veces
   (el brillo del boton y el de la barra de cupos). La segunda anulaba a la
   primera. Aca la de la barra se llama pkShimmerBar y las dos funcionan. */

:root {
  --paper: #FFFFFF;
  --paper-2: #FDEAF1;
  --ink: #181113;
  --pink: #E0218A;
  --pink-deep: #9E0068;
  --gold: #9E0068;
  --gold-light: #FBCDE7;
  --blush: #FCE1F0;
  --line: #F2D3E6;
  --muted: #6b5866;
  --muted2: #8f7d87;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Nunito Sans', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: var(--pink-deep); }
[hidden] { display: none !important; }
::selection { background: var(--blush); }

/* ── tipografia ──────────────────────────────────────────────────────────── */
.pk-display { font-family: 'Anton', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0.01em; text-wrap: balance; color: var(--pink-deep); }
.pk-script { font-family: 'Yesteryear', cursive; line-height: 1; }
.pk-foil { color: var(--pink); }
.pk-mono { font-family: 'Space Mono', monospace; font-variant-numeric: tabular-nums; }
.pk-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink-deep); }

/* ── piezas base ─────────────────────────────────────────────────────────── */
.pk-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; background: var(--pink); color: #fff; font-weight: 800; font-size: 14.5px; border-radius: 999px; border: none; cursor: pointer; text-decoration: none; font-family: inherit; }
.pk-btn::after { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0)); pointer-events: none; }
.pk-btn:hover { background: var(--pink-deep); color: #fff; }
.pk-btn.ghost { background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }
.pk-btn.dark { background: var(--ink); }
.pk-btn[disabled] { opacity: 0.75; cursor: default; }
.pk-chip { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; background: var(--blush); color: var(--pink-deep); font-weight: 700; font-size: 12.5px; border: none; font-family: inherit; cursor: pointer; }
.pk-chip.pending { background: var(--paper-2); color: var(--muted); cursor: default; }
.pk-chip.active { background: var(--pink); color: #fff; }
/* El precio es lo que más importa para decidir -- necesita ganarle al
   botón "Elegí la talla" de al lado, no quedar del mismo peso. El borde
   dorado real (antes no tenía ninguno) es el acento "foil" que pide la
   identidad; clip-path recorta el borde con la misma muesca del tag. */
.pk-price-tag { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px 10px 16px; background: var(--gold-light); color: var(--ink); font-family: 'Space Mono', monospace; font-weight: 800; font-size: 15px; border: 1.5px solid var(--gold); clip-path: polygon(0 50%, 14px 0, 100% 0, 100% 100%, 14px 100%); }
.pk-price-tag.pending { background: var(--paper-2); color: var(--muted); font-style: italic; font-size: 12px; clip-path: none; padding: 9px 16px; }
.pk-price-tag .hole { width: 4px; height: 4px; border-radius: 50%; background: rgba(43,32,22,0.35); flex: none; }
.pk-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.pk-marble { background: linear-gradient(115deg, var(--pink-deep) 0%, var(--pink) 22%, #ffffff 42%, var(--pink) 58%, var(--pink-deep) 78%, var(--pink) 100%); }
.pk-seal { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1.5px dashed var(--gold); background: #fff; color: var(--gold); font-weight: 800; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.pk-dots { background-image: radial-gradient(circle, rgba(224,68,125,0.35) 1.5px, transparent 1.6px); background-size: 18px 18px; }
.pk-wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.pk-section { padding-block: 56px; }

/* ── cascaron: aviso, encabezado, nav, pie ───────────────────────────────── */
.pk-announce { background: var(--ink); color: var(--paper); text-align: center; padding: 10px 16px; font-size: 12.5px; font-weight: 700; }
.pk-header { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
.pk-header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 20px; }
/* ── Marca del encabezado ──────────────────────────────────────────────────
   RONDA 10 (12 set 2026, decision de Kenneth): la barra superior pasa a usar
   el LOGO REAL de la marca y ya no el lockup tipografico en Anton.

   Hasta la Ronda 9 aca habia un comentario que decia exactamente lo contrario
   y explicaba por que NO se usaba una imagen: el logo de entonces
   (assets/logo-transparente.png, 360x260, rosa-oro sobre transparente y
   pensado para el fondo crema viejo) quedaba ilegible sobre el papel blanco.
   Ese archivo queda HUERFANO — sin ninguna referencia, igual que ya estaba
   antes de esta ronda — y por eso no se borro.

   El logo nuevo es assets/logo-pinkempire.jpg: el sello circular completo,
   recortado a su elipse real (861x841 del original) y centrado en un cuadrado
   con 5% de aire PAREJO. Va en JPG sobre BLANCO PURO y no en PNG con alfa a
   proposito: los dos unicos lugares donde aparece (.pk-header y
   .pk-hero-tag-frame) tienen fondo #FFFFFF exacto, y el PNG con transparencia
   del mismo tamano pesaba 391 KB contra 62.
   ⚠️ Si alguna vez va sobre un fondo que NO sea blanco, hay que regenerarlo
   con alfa: sobre crema o rosa se le nota el cuadrado.

   A 44px el circulo NO deja leer "PinkEmpire": el texto de la marca vive
   DENTRO del sello y es letra manuscrita. Asi que el encabezado NO es solo el
   sello — es un LOCKUP de tres partes, que es como se arma una marca de
   verdad y no una imagen sola haciendo de todo:

       [sello]  PINKEMPIRE
                Store · San José, CR

   El sello es la MARCA (grafico, se reconoce de lejos, no se lee), el wordmark
   en Anton es el NOMBRE (se lee), y la bajada es el contexto. Ninguno de los
   tres repite el trabajo de otro. Agrandar el sello hasta que su manuscrita se
   lea pedia ~200px de ancho en la barra: eso ya no es un encabezado.

   El sello lleva alt="" a proposito, y NO es un olvido: el <a> tiene su propio
   aria-label ("PinKempire, inicio"), que para un lector de pantalla PISA todo
   el contenido de adentro. Ponerle un alt descriptivo ademas del wordmark que
   esta al lado solo lograria que se dijera el nombre dos veces.

   .pk-wordmark ademas es la marca del PIE en las 3 paginas — nunca fue codigo
   muerto. */
.pk-brand { flex: none; text-decoration: none; display: flex; align-items: center; gap: 11px; }
.pk-logo { height: 44px; width: 44px; flex: none; border-radius: 50%; }
/* La linea fina separa la marca del nombre. Es lo que hace que se lean como un
   lockup y no como dos cosas apoyadas una al lado de la otra. */
.pk-brand-sep { flex: none; width: 1px; align-self: stretch; margin-block: 3px; background: var(--line); }
.pk-brand-text { display: block; }
.pk-wordmark { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 27px; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; color: var(--ink); }
.pk-wordmark .k { color: var(--pink); }
.pk-brand-tag { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted2); white-space: nowrap; margin-top: 4px; }
@media (max-width: 640px) {
  .pk-brand { gap: 8px; }
  .pk-brand-sep { margin-block: 2px; }
  .pk-logo { height: 38px; width: 38px; }
  .pk-wordmark { font-size: 22px; }
  .pk-brand-tag { font-size: 8px; letter-spacing: 0.16em; }
}
.pk-navlinks { display: flex; align-items: center; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex: 1; padding: 0 6px; order: 2; }
.pk-navlinks::-webkit-scrollbar { display: none; }
.pk-navlink { flex: none; font-weight: 700; font-size: 13.5px; padding: 9px 14px; border-radius: 999px; background: transparent; border: none; color: var(--ink); cursor: pointer; font-family: inherit; white-space: nowrap; text-decoration: none; }
.pk-navlink:hover { color: var(--ink); }
.pk-navlink.active { background: var(--pink); color: #fff; }
.pk-bag-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; border: none; border-radius: 999px; padding: 11px 16px; font-weight: 800; font-size: 13px; cursor: pointer; font-family: inherit; order: 3; text-decoration: none; }
.pk-bag-btn:hover { color: #fff; }
.pk-bag-count { background: var(--pink); border-radius: 999px; min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.pk-header-strip { height: 3px; }
@media (max-width: 640px) {
  .pk-navlinks { order: 4; flex-basis: 100%; overflow-x: visible; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; padding: 0; }
  .pk-navlink { padding: 9px 4px; font-size: 11.5px; text-align: center; border: 1px solid var(--line); }
  .pk-navlink.active { border-color: var(--pink); }
}

.pk-footer-main { background: var(--paper-2); border-top: 1px solid var(--line); padding: 44px 20px 0; }
.pk-footer-top { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 36px; padding-bottom: 34px; }
.pk-footer-brand { max-width: 280px; }
.pk-footer-brand p { font-size: 13px; color: var(--muted2); line-height: 1.6; margin-top: 12px; }
.pk-footer-cols { display: flex; flex-wrap: wrap; gap: 44px; }
.pk-footer-col-title { font-weight: 800; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pink-deep); margin-bottom: 10px; }
.pk-footer-link { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #4a3d42; text-decoration: none; padding: 3px 0; }
a.pk-footer-link:hover { color: var(--pink-deep); }
.pk-footer-link-static { color: var(--muted2); }
.pk-footer-link svg { flex-shrink: 0; color: var(--pink); }
.pk-footer-bottom { max-width: 1120px; margin: 0 auto; border-top: 1px solid var(--line); padding: 18px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 11.5px; color: #a692a0; }
.pk-footer-note { font-style: italic; }
@media (max-width: 600px) { .pk-footer-top { flex-direction: column; } .pk-footer-bottom { flex-direction: column; gap: 6px; } }

/* ── hero ────────────────────────────────────────────────────────────────── */
/* 16 oct 2026 · portada con la foto de Kendolly (kendolly-portada-*.jpg/webp,
   recorte 775x596 del original de 990x656 con ella entera adentro).
   Antes era la foto de la tienda a pantalla completa, con overlay oscuro y
   texto blanco encima (Ronda 10). Esta foto tiene fondo blanco y solo 990 px:
   a pantalla completa en 1920 se pixelaba y el texto blanco no se leia. Ahora:
     · ESCRITORIO (>860px): dos columnas sobre rosa plano, texto a la izquierda
       y la foto a la derecha, tope de 600px de ancho (menos que los 775 del
       archivo: nunca se estira).
     · CELULAR: foto arriba a todo el ancho util y el texto abajo.
   La foto va con `height: auto`, sin object-fit ni recorte: Kendolly nunca
   queda cortada. Se fueron el parallax (#heroImgWrap ya no existe, el JS de
   store.html sale solo con su `if (!heroImgWrap) return`) y el zoom lento
   pkHeroZoom: los dos desplazaban/agrandaban la foto y le cortaban los bordes.
   El sello de la marca (.pk-hero-tag) va sobre la esquina de arriba a la
   derecha de la foto, que en este encuadre es pared blanca vacia. */
.pk-hero { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.pk-hero-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,600px); gap: clamp(28px,4vw,64px); align-items: center; padding-top: 48px; padding-bottom: 48px; }
.pk-hero-foto { position: relative; grid-column: 2; grid-row: 1; margin: 0; }
.pk-hero-foto picture img { width: 100%; height: auto; border-radius: 18px; border: 1.5px solid var(--line); background: #fff; }
.pk-hero-content { grid-column: 1; grid-row: 1; }
.pk-hero-title { font-size: clamp(34px,6vw,72px); line-height: 0.98; color: var(--ink); margin-top: 14px; }
.pk-hero-sub { font-size: clamp(22px,3.2vw,34px); margin-top: 10px; }
.pk-hero-cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .pk-hero-inner { grid-template-columns: minmax(0,1fr); gap: 22px; padding-top: 18px; padding-bottom: 34px; }
  .pk-hero-foto, .pk-hero-content { grid-column: 1; }
  .pk-hero-content { grid-row: 2; }
  .pk-hero-title { font-size: clamp(34px,10vw,52px); }
}
/* Sello de la marca. Historia: Ronda 7 era una etiqueta colgante con la foto
   de Kendolly; Ronda 10 paso al logo (aspect-ratio 1/1 + contain para que no
   se aplane); Ronda 13 se quito el marco blanco y paso a WebP con alfa, con
   drop-shadow que sigue el contorno del logo. Va scopeado a .pk-hero-tag img
   para que las reglas de la foto no lo alcancen. */
.pk-hero-tag { position: absolute; right: clamp(10px,2vw,20px); top: clamp(10px,2vw,20px); z-index: 2; margin: 0; width: clamp(88px,9vw,130px); transform: rotate(3deg); }
.pk-hero-tag-frame { background: transparent; padding: 0; border-radius: 0; filter: drop-shadow(0 6px 12px rgba(43,32,22,0.22)); }
.pk-hero-tag-frame img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
@media (max-width: 860px) { .pk-hero-tag { width: 84px; } }

/* ── grillas de contenido ────────────────────────────────────────────────── */
.pk-photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
@media (max-width: 760px) { .pk-photo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.pk-photo-item { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 18px rgba(43,32,22,0.12); }
.pk-photo-item img { width: 100%; height: 230px; object-fit: cover; }
/* ── Ronda 12 · el premio de la maquina ─────────────────────────────────── */
.jg-vence { margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--pink-deep); }
/* Las reglas de canje. Van A LA VISTA junto al premio y no detras de un "ver
   condiciones": una regla que la clienta descubre al ir a canjear es una
   discusion en el mostrador. */
.jg-reglas {
  margin: 14px auto 0; padding: 14px 18px 14px 34px; max-width: 380px; text-align: left;
  list-style: disc; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 8px; font-size: 12px; line-height: 1.7; color: var(--muted);
}
.jg-reglas:empty { display: none; }

/* ── Ronda 12 · compartir un producto ────────────────────────────────────
   El boton vive en el pie de la tarjeta, al lado de "Anadir". Es secundario a
   proposito: cuadrado, sin relleno y en el rosa de la marca — competir con el
   boton de anadir seria cambiarle la prioridad a la tarjeta. */
.pk-prod-share {
  flex: none; width: 34px; height: 34px; display: inline-flex;
  align-items: center; justify-content: center; margin-left: 8px;
  background: transparent; color: var(--pink-deep);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.pk-prod-share:hover { background: var(--blush); border-color: var(--pink); }
/* Confirmacion de "link copiado" sin depender de un toast: esta pagina no
   tiene uno. El texto va en ::after para no tocar el DOM desde el JS. */
.pk-prod-share.copiado { background: var(--pink); color: #fff; border-color: var(--pink); position: relative; }
.pk-prod-share.copiado::after {
  content: "Link copiado"; position: absolute; bottom: calc(100% + 6px); right: 0;
  background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 5px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none;
}

/* La tarjeta a la que apunta un link compartido (?p=<id>). El anillo dura unos
   segundos: es para que la clienta ENCUENTRE la prenda entre las demas, no una
   marca permanente. */
.pk-prod-card.pk-destacada {
  outline: 2px solid var(--pink); outline-offset: 3px;
  animation: pkDestacar 2.6s ease forwards;
}
@keyframes pkDestacar { 0%, 70% { outline-color: var(--pink); } 100% { outline-color: transparent; } }


.pk-trust-belt { background: var(--ink); padding: 36px 20px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
@media (max-width: 760px) { .pk-trust-belt { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.pk-trust-item { display: flex; flex-direction: column; gap: 10px; }
.pk-trust-item div.t { color: #fff; font-weight: 700; font-size: 13.5px; line-height: 1.4; }

.pk-steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; max-width: 900px; margin: 0 auto; }
@media (max-width: 640px) { .pk-steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.pk-step-num { width: 36px; height: 36px; margin: 0 auto; border-radius: 50%; background: var(--pink); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Anton', sans-serif; font-size: 15px; }
.pk-step-label { font-weight: 700; font-size: 13.5px; margin-top: 12px; text-align: center; }

.pk-faq-row { background: #fff; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--line); }
.pk-faq-q { font-weight: 800; font-size: 14px; }
.pk-faq-a { font-size: 13px; color: var(--muted2); font-style: italic; }

.pk-ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
@media (min-width: 640px) { .pk-ig-grid { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.pk-ig-cell { aspect-ratio: 1; background: var(--blush); border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pk-ig-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pk-disclaimer { border: 1.5px dashed var(--gold); border-radius: 8px; padding: 16px 18px; background: rgba(224,68,125,0.08); font-size: 12px; color: #382b30; line-height: 1.6; margin-top: 20px; }

/* ── Catalogo ────────────────────────────────────────────────────────────── */
.pk-search-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 12px 18px; margin-bottom: 18px; max-width: 460px; transition: border-color .2s ease, box-shadow .2s ease; }
.pk-search-row:focus-within { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(224,33,138,0.14); }
.pk-search-row svg { flex-shrink: 0; }
.pk-search-input { border: none; outline: none; font-family: inherit; font-size: 14px; width: 100%; background: transparent; color: #2a2124; }
.pk-search-input::placeholder { color: #b7a3ac; }
.pk-no-results { text-align: center; padding: 48px 20px; }
.pk-filters { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.pk-prod-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
@media (max-width: 960px) { .pk-prod-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 640px) { .pk-prod-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } }
.pk-prod-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
/* La tarjeta de "También te puede interesar" (ficha de producto, 16 set
   2026) es un <a> entero, no un <div> -- sin controles anidados adentro
   (a diferencia de la tarjeta del catálogo), envolverla completa es seguro.
   Sin este reset hereda el subrayado y el color de link por defecto. */
a.pk-prod-card { text-decoration: none; color: inherit; }
a.pk-prod-card:hover { text-decoration: none; }
/* Tarjeta del catálogo general (tarjetaCatalogo, sí tiene controles adentro):
   solo la foto y el nombre linkean a la ficha, no la tarjeta entera. */
.pk-prod-img-wrap > a { display: block; width: 100%; height: 100%; }
.pk-prod-name-link { color: inherit; text-decoration: none; }
.pk-prod-name-link:hover { text-decoration: underline; }
.pk-prod-img-wrap { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--blush); }
.pk-prod-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.pk-prod-nophoto { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pink-deep); padding: 10px; }
.pk-badge { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 800; padding: 5px 9px; border-radius: 999px; letter-spacing: 0.02em; }
.pk-badge.real { background: var(--pink-deep); color: #fff; }
.pk-badge.ref { background: rgba(43,32,22,0.78); color: #fff; }
.pk-badge.urgency { left: auto; right: 8px; top: auto; bottom: 8px; background: var(--pink); color: #fff; }
.pk-badge.agotado { left: auto; right: 8px; top: auto; bottom: 8px; background: var(--ink); color: #fff; }
.pk-prod-card.agotado .pk-prod-img-wrap img { opacity: 0.55; filter: grayscale(0.3); }

/* ── Catálogo por secciones (16 set 2026) ──────────────────────────────────
   Antes era una sola grilla plana; ahora #catalogSections tiene un bloque
   por categoría real (ver agruparPorCategoria() en store.html), cada uno
   con su propia .pk-prod-grid adentro — misma tarjeta de siempre. */
.pk-catalog-section { margin-bottom: 40px; }
.pk-catalog-section:last-child { margin-bottom: 0; }
/* Título con el motivo de marca en vez de texto plano subrayado: un
   rombo dorado (rivet de etiqueta) antes del nombre y el borde de abajo
   pasa a dorado — mismo acento "foil" que ya usa el hang tag del banner
   de Inicio, no un <h2> pelado. */
.pk-catalog-section-title { display: flex; align-items: center; gap: 10px; font-family: 'Anton', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.2; font-size: clamp(17px,2.6vw,22px); color: var(--pink-deep); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--gold-light); }
.pk-catalog-section-title::before { content: ""; width: 8px; height: 8px; background: var(--gold); border-radius: 1.5px; transform: rotate(45deg); flex: none; }
/* En mobile el clamp() cae en su mínimo (17px) y 'Anton' sin line-height
   explícito usa el "normal" del navegador, que para esta fuente condensada
   queda muy pegado — las letras se leen apretadas contra el borde y la fila
   de fotos de abajo. Mismo criterio que .pk-eyebrow (letter-spacing más
   ancho en texto chico en mayúsculas), sin tocar el tamaño desktop. */
@media (max-width: 640px) {
  .pk-catalog-section-title { font-size: 19px; letter-spacing: 0.05em; margin-bottom: 16px; padding-bottom: 10px; }
}

/* ── Banner de Prendas destacadas (16 set 2026) ────────────────────────────
   Hero grande (foto amplia + etiqueta colgante) más una fila chica al
   costado/abajo con el resto de los destacados. Rosa plano + dorado foil,
   sin gradiente ni glow — ver renderPrendasDestacadas() en store.html. */
.pk-destacado-hero { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; background: var(--paper-2); border: 1px solid var(--line); border-radius: 18px; padding: 30px; }
@media (max-width: 720px) { .pk-destacado-hero { grid-template-columns: 1fr; padding: 22px; } }
.pk-destacado-hero-img { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/5; background: var(--blush); }
.pk-destacado-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-destacado-hero-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pk-destacado-hero-body .pk-prod-desc { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

/* La etiqueta colgante del hero: agujero + cordón, motivo de marca — no
   decoración genérica. Rotada como si colgara de la esquina de la foto. */
.pk-hang-tag { position: relative; display: inline-flex; align-items: center; background: #fff; border: 1.5px solid var(--gold); color: var(--pink-deep); font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 14px 8px 22px; border-radius: 3px; transform: rotate(-5deg); box-shadow: 0 6px 14px rgba(24,17,19,0.14); margin-left: 6px; }
.pk-hang-tag::before { content: ""; position: absolute; top: -9px; left: 15px; width: 1.5px; height: 11px; background: var(--gold); transform: rotate(20deg); }
.pk-hang-tag-hole { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--gold-light); background: #fff; }

.pk-destacado-rail { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px; margin-top: 22px; -webkit-overflow-scrolling: touch; }
.pk-destacado-rail .pk-prod-card { flex: 0 0 152px; }
@media (max-width: 640px) { .pk-destacado-rail .pk-prod-card { flex: 0 0 132px; } }

/* Carrusel del dress code (16 set 2026) — a diferencia del rail de arriba
   (que se arrastra a mano), este se mueve solo. `overflow:hidden` en vez de
   `auto`: acá no hay que scrollear, la animación hace el trabajo. El
   degradado en los bordes (mask-image) disimula el corte de las tarjetas
   que entran/salen, en vez de que aparezcan de golpe.
   La duración de la animación (--pk-marquee-dur) la fija el JS según cuántas
   tarjetas hay, para que la velocidad en px/seg se sienta igual sea cual
   sea el catálogo del día — ver renderDressCode(). El track dibuja la
   lista DOS veces seguidas y anima de 0% a -50%: como las dos mitades son
   idénticas, el salto de vuelta a 0% es invisible, o sea que el loop no
   "traba" ni se nota la costura. */
/* Tarjetas más chicas que las de Prendas Destacadas (16 set 2026, ajuste de
   tamaño): allá el rail de 152px se ve "chico" al lado del hero gigante de
   arriba, pero acá no hay hero — todas las tarjetas son de este tamaño, así
   que a 152px la sección entera se sentía pesada. 114px/96px, mismo criterio
   de siempre (desktop/mobile). */
/* 27 set 2026: el carrusel de prendas ya NO usa la animación CSS (quedaba en
   blanco en celulares reales y no se podía deslizar). Es scroll nativo que
   avanza solo desde JS — ver marqueeInfinito() en store.html. La franja de
   texto de arriba (.pk-marquee-wrap) sí sigue con pkMarquee. Separación con
   margin y no con gap: así las dos mitades miden exacto lo mismo. */
.pk-marquee { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; margin-top: 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.pk-marquee-track { display: flex; gap: 10px; width: max-content; animation: pkMarquee var(--pk-marquee-dur, 24s) linear infinite; }
.pk-marquee::-webkit-scrollbar { display: none; }
.pk-marquee .pk-marquee-track { animation: none; gap: 0; }
.pk-marquee .pk-marquee-track > * { margin-right: 10px; }
.pk-marquee-track .pk-prod-card { flex: 0 0 114px; }
.pk-marquee-track .pk-prod-name { font-size: 12.5px; }
@media (max-width: 640px) { .pk-marquee-track .pk-prod-card { flex: 0 0 96px; } }
@keyframes pkMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Quien pidió menos movimiento en su sistema no debería recibir un carrusel
   que no puede parar de moverse: se apaga la animación y queda como el rail
   de arriba, arrastrable a mano. */
@media (prefers-reduced-motion: reduce) {
  .pk-marquee-track { animation: none; }
  .pk-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* Dos etiquetas colgantes conviviendo (Destacado + Descuento) en el hero:
   la segunda rota para el otro lado, como si colgaran de ganchos distintos
   -- no una al lado de la otra en línea recta, que se lee como una sola
   etiqueta larga. */
.pk-hang-tag-row { display: flex; flex-wrap: wrap; gap: 14px; }
.pk-hang-tag-descuento { transform: rotate(4deg); }

/* ── Precio con descuento (16 set 2026) ─────────────────────────────────────
   Comparten .pk-price-block los tres lugares que pintan precio (catálogo,
   fila de destacados, hero) -- ver bloquePrecio() en store.html. Sin
   descuento es un único .pk-price-tag, igual que siempre. */
.pk-price-block { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pk-price-original { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--muted2); text-decoration: line-through; }

/* Etiqueta de descuento a escala de tarjeta -- mismo motivo que .pk-hang-tag
   (agujero + cordón) pero clavada en la esquina de la foto, igual que ya hace
   .pk-badge con "Agotado"/"Foto de referencia". Va arriba-derecha a
   propósito: esos dos badges usan arriba-izq/abajo-der.

   16 set 2026: se veía chica y se perdía contra fotos claras -- fondo blanco
   con borde fino dorado tenía muy poco contraste ahí arriba de una foto de
   producto (a diferencia del precio, que descansa sobre la ficha blanca de
   abajo, no sobre la foto). Pasa a fondo ROSA PLANO (el "rosa fuerte" de la
   identidad, no un tono nuevo) con texto blanco -- el dorado queda en el
   borde y el agujero, como detalle, no como el color que tiene que cargar
   todo el contraste. Fuente y padding más grandes, mismo giro de -mini. */
.pk-hang-tag-mini { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 4px; background: var(--pink); border: 1.5px solid var(--gold); color: #fff; font-family: 'Space Mono', monospace; font-weight: 800; font-size: 13px; padding: 6px 11px 6px 18px; border-radius: 4px; transform: rotate(4deg); box-shadow: 0 4px 10px rgba(24,17,19,0.22); }
.pk-hang-tag-mini .pk-hang-tag-hole { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--gold); background: #fff; }

/* ── Urgencia por poco stock (16 set 2026) ──────────────────────────────────
   Mismo motivo de etiqueta colgante que Destacado/Descuento, pero con SU
   PROPIO acento -- pidió Kenneth explícitamente no reusar el dorado, para
   que no se confunda con "es un plus" (destacado/descuento) cuando en
   realidad avisa "se puede acabar". Rosa oscuro plano (--pink-deep, ya es
   color de marca, no uno nuevo) de punta a punta, sin dorado en ningún lado
   -- así se distingue de un vistazo aunque las tres etiquetas convivan en el
   mismo producto (pasa de verdad: hay productos reales destacados, con
   descuento Y con 1 sola unidad). */
.pk-hang-tag-stock { background: var(--pink-deep); border-color: var(--pink-deep); color: #fff; }
.pk-hang-tag-stock .pk-hang-tag-hole { border-color: #fff; }
/* Va abajo-izquierda en la tarjeta: el único corner libre -- arriba-izq es
   "Foto de referencia", arriba-der es el descuento, abajo-der es "Agotado"
   (nunca coincide: agotado es stock 0, esto es 1-2). */
.pk-hang-tag-mini.pk-hang-tag-stock { top: auto; right: auto; bottom: 8px; left: 8px; padding-left: 18px; }

/* ── Botón flotante de WhatsApp (16 set 2026) ───────────────────────────────
   Fijo en las 4 páginas públicas (store.html, clases.html, mi-historia.html).
   Esquina inferior derecha, redondo, rosa plano -- nada de gradiente ni glow.
   z-index por debajo del modal (200) y del confeti (150) a propósito: si se
   abre un modal, el flotante tiene que quedar tapado, no por encima. No
   choca con "Tu Bolsa": ese botón vive arriba, en el header, este abajo. */
.pk-wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: var(--pink); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(24,17,19,0.28); text-decoration: none; }
.pk-wa-float:hover { background: var(--pink-deep); }
@media (max-width: 640px) { .pk-wa-float { right: 14px; bottom: 14px; width: 50px; height: 50px; } .pk-wa-float svg { width: 25px; height: 25px; } }

.pk-prod-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pk-prod-name { font-weight: 800; font-size: 13.5px; line-height: 1.3; }
/* El codigo de la prenda (PK-01 / EN-NUD). La vista previa no lo dibujaba,
   pero el catalogo real lo venia mostrando desde el mockup y es por donde una
   clienta pide "el EN-NUD" por WhatsApp. Se conserva, discreto. */
.pk-prod-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pk-prod-code { font-size: 10px; color: var(--muted2); white-space: nowrap; letter-spacing: 0.04em; }
.pk-prod-desc { font-size: 12px; line-height: 1.5; color: var(--muted); }
.pk-catalog-note { border: 1.5px dashed var(--gold); border-radius: 8px; padding: 20px; background: rgba(224,68,125,0.06); font-size: 13px; color: #382b30; line-height: 1.7; margin-top: 28px; }

/* Selector de talla + "Anadir". No viene de la vista previa (ahi las tarjetas
   no vendian nada): es la funcionalidad REAL del carrito, vestida con esta
   paleta. Elegir talla sigue siendo un paso aparte de anadir, a proposito. */
.pk-prod-swatch-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); }
.pk-prod-swatch { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--line); flex: none; }
.pk-tallas { display: flex; gap: 6px; flex-wrap: wrap; }
.pk-talla-chip { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.06em; padding: 6px 11px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); min-width: 38px; }
.pk-talla-chip:hover:not(:disabled) { border-color: var(--pink); color: var(--pink-deep); }
.pk-talla-chip.elegida { background: var(--pink); border-color: var(--pink); color: #fff; }
.pk-talla-chip.agotada, .pk-talla-chip:disabled { text-decoration: line-through; color: #c9b7c2; border-color: var(--line); cursor: not-allowed; background: var(--paper-2); }
.pk-prod-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pk-prod-add { padding: 9px 16px; border-radius: 999px; border: 1.5px solid transparent; background: var(--ink); color: #fff; font-weight: 800; font-size: 12px; font-family: inherit; }
.pk-prod-add:hover:not(:disabled) { background: var(--pink); }
.pk-prod-add:disabled { opacity: 0.45; cursor: default; }
/* "Elegí la talla" NO es lo mismo que "Agotado": sigue deshabilitado
   hasta que la clienta toca una talla, pero no tiene que VERSE roto o
   apagado -- antes compartía el mismo opacity:0.45 que un producto sin
   stock, y era justo el estado que se ve en la mayoría de las tarjetas
   por default. Selector de atributo, no clase: lo pone data-pide-talla
   en store.html, no hace falta tocar el JS. */
.pk-prod-add[data-pide-talla="1"] { opacity: 1; background: #fff; color: var(--pink-deep); border-color: var(--pink); }

/* ── Arma tu conjunto ────────────────────────────────────────────────────── */
/* El hueco lateral es `calc(50% - 46px)` y no el `44%` de la vista previa:
   46px es media pieza (92/2), asi que la pieza centrada cae EXACTO en el centro
   del carril a cualquier ancho. Con 44% quedaba ~24px corrida a la derecha en
   movil de 390 y en escritorio, que es justo lo que la funcion promete no hacer. */
.pk-reel-label { font-weight: 800; font-size: 13.5px; margin-bottom: 10px; color: var(--pink-deep); }
.pk-builder-reel-group { margin-bottom: 32px; }
.pk-reel-row { max-width: 480px; margin: 0 auto 26px; text-align: center; }
.pk-reel-row:last-child { margin-bottom: 0; }
.pk-reel-track { position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px calc(50% - 46px) 14px; scroll-padding-inline: calc(50% - 46px); -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.pk-reel-track::-webkit-scrollbar { height: 5px; }
.pk-reel-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.pk-reel-item { flex: 0 0 auto; width: 92px; scroll-snap-align: center; text-align: center; cursor: pointer; opacity: .5; transform: scale(.86); transition: opacity .25s ease, transform .25s ease; }
.pk-reel-item.pk-reel-active { opacity: 1; transform: scale(1); }
.pk-reel-item img { width: 92px; height: 114px; object-fit: cover; border-radius: 8px; box-shadow: 0 6px 14px rgba(24,17,19,0.14); display: block; }
.pk-reel-none-box { width: 92px; height: 114px; border-radius: 8px; border: 2px dashed var(--line); display: flex; align-items: center; justify-content: center; font-size: 10.5px; color: var(--muted2); padding: 6px; text-align: center; line-height: 1.3; }
.pk-reel-name { font-size: 10px; margin-top: 6px; color: var(--muted); line-height: 1.3; }
.pk-reel-item.pk-reel-active .pk-reel-name { color: #2a2124; font-weight: 700; }
.pk-builder-preview { background: var(--blush); border-radius: 14px; padding: 30px 20px; text-align: center; }
.pk-builder-preview-imgs { display: flex; justify-content: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; min-height: 104px; }
.pk-builder-preview-imgs img { width: 82px; height: 102px; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 16px rgba(24,17,19,0.16); }
.pk-builder-preview-imgs .pk-reel-none-box { width: 82px; height: 102px; }
.pk-builder-total { font-size: 13.5px; margin-bottom: 16px; color: var(--muted); }
.pk-builder-total strong { display: block; font-family: 'Anton', sans-serif; font-size: 30px; color: var(--pink-deep); margin-top: 4px; letter-spacing: 0.02em; }

/* ── Modal de confirmacion del conjunto ──────────────────────────────────── */
.pk-modal-overlay { position: fixed; inset: 0; background: rgba(24,17,19,0.55); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pk-modal-overlay[hidden] { display: none; }
.pk-modal { background: #fff; border-radius: 16px; padding: 28px 24px; max-width: 440px; width: 100%; max-height: 88vh; overflow-y: auto; position: relative; box-shadow: 0 24px 60px rgba(24,17,19,0.35); animation: pkModalPop .25s ease; }
@keyframes pkModalPop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.pk-modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--blush); color: var(--pink-deep); font-size: 20px; line-height: 1; cursor: pointer; }
.pk-modal-close:hover { background: var(--line); }
.pk-modal-pieces { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.pk-modal-piece-row { display: flex; align-items: center; gap: 12px; }
.pk-modal-piece-row img, .pk-modal-piece-row .pk-reel-none-box { width: 52px; height: 64px; object-fit: cover; border-radius: 7px; flex: none; }
.pk-modal-piece-row .pk-reel-none-box { width: 52px; height: 64px; font-size: 9px; }
.pk-modal-piece-name { font-weight: 700; font-size: 13.5px; flex: 1; }
.pk-modal-piece-price { font-size: 12.5px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.pk-modal-total { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--muted); margin-bottom: 4px; }
.pk-modal-total strong { font-family: 'Anton', sans-serif; font-size: 24px; color: var(--pink-deep); letter-spacing: 0.02em; }

/* ── Clases ──────────────────────────────────────────────────────────────── */
/* minmax(0, ...) en las DOS reglas (16 set 2026): sin el 0 explícito, el
   mínimo automático de una columna `fr` es el min-content de lo que tenga
   adentro. La fila de "Opciones para el dress code" (rail flex con tarjetas
   `flex:0 0 152px`, no encogen) empuja ese min-content a ~1318px, la columna
   crece a eso en vez de a su fracción real, y todo lo de la OTRA columna
   (cupos, cuenta regresiva, el formulario de apartar cupo entero) queda
   renderizado fuera del área visible -- `overflow:hidden` de acá arriba lo
   recorta en silencio, sin error, sin scroll. Mismo bug en mobile (una sola
   columna `1fr`: sin el freno, esa columna también crece al ancho del rail
   y estira todo lo de adentro). `minmax(0, Xfr)` no cambia nada cuando NO
   hay overflow -- es un piso, no un techo. */
.pk-class-banner { background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: clamp(20px,5vw,44px); position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 36px; }
@media (max-width: 860px) { .pk-class-banner { grid-template-columns: minmax(0, 1fr); } }
.pk-class-strip { position: absolute; top: 0; left: 0; right: 0; height: 5px; }
/* La fila de chips de la tarjeta de Inicio. Era un `style=` en linea; pasa aca
   porque ahora el JS la muestra y la oculta, y un display en linea le gana a
   [hidden] y dejaba la fila visible con los chips vacios adentro. */
.pk-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
/* La frase de "todavia no hay clase". Misma tipografia que el resto del cuerpo,
   sin el aire de un chip: no es un dato, es la ausencia de uno. */
.pk-sin-clase { margin: 0 0 18px; font-size: 14px; line-height: 1.65; color: var(--muted); }
/* La foto real de la clase, en el lugar del recuadro punteado y vacio que
   habia hasta hoy. Mismo radio que .pk-class-banner (10px) para que no se lea
   como una tarjeta pegada encima de otra.

   El tope de 420px no es decorativo: sin el la imagen crecia mucho mas alto
   que la columna de texto de al lado, que quedaba con un hueco muerto debajo
   del boton.

   14 set 2026: la foto paso de 860x917 (casi cuadrada) a 1200x1600 (retrato),
   asi que este tope ahora SI recorta en desktop — conserva el 67% central del
   alto, del 16,5% al 83,5%. El grupo vive entre el 34% y el 69%, o sea que
   entra entero con aire de sobra y por eso no lleva object-position: el centro
   por defecto ya encuadra bien. Verificado con el recorte real, no a ojo. En
   celular la altura natural queda al ras del tope, asi que ahi casi no
   recorta. */
.pk-class-foto { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); min-height: 180px; }
.pk-class-foto img { display: block; width: 100%; height: 100%; min-height: 180px; max-height: 420px; object-fit: cover; }
/* La tarjeta de reserva (con countdown+cupos+formulario al lado) dejaba un
   hueco muerto de ~273px en desktop debajo de la frase "No solo entrenamos":
   la columna de al lado (cl-side) es mucho mas alta y el grid estira ambas
   columnas por igual. Esta foto va DESPUES de la frase, dentro de la misma
   columna de texto, asi que no reemplaza nada — solo llena lo que sobraba.
   270px de alto: a los 539px de ancho tipicos de esta columna en 1440px, una
   foto horizontal de esa altura empuja la columna de texto a superar el alto
   de cl-side por un margen chico en vez de quedar corta, asi que el hueco
   practicamente desaparece en lugar de solo achicarse. En mobile las columnas
   se apilan (no hay hueco que llenar ahi), asi que la foto solo suma como
   contenido, igual que ya pasa con .pk-class-foto en Inicio. */
.cl-quote-foto { margin: 16px 0 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); }
.cl-quote-foto img { display: block; width: 100%; height: 270px; object-fit: cover; }
/* Cartel de respaldo cuando la clase todavia no tiene foto (6 oct 2026,
   Reto Glow Up): mismo cuadro de 270px, sin inventar una imagen que Kendolly
   no cargo. Ella la cambia por la foto real desde el panel, sin tocar código. */
.cl-quote-placeholder { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; height: 270px; background: linear-gradient(135deg, var(--paper-2), #f3dce6); text-align: center; padding: 0 24px; }
.cl-quote-placeholder-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255,29,147,0.25); border-top-color: var(--pink-deep); animation: cl-spin 0.9s linear infinite; }
.cl-quote-placeholder span { font-size: 13px; font-weight: 700; color: var(--pink-deep); letter-spacing: 0.02em; }
@keyframes cl-spin { to { transform: rotate(360deg); } }
.pk-includes { margin: 0 0 18px; padding-left: 20px; font-size: 14px; line-height: 1.75; columns: 2; column-gap: 20px; }
@media (max-width: 480px) { .pk-includes { columns: 1; } }
.pk-countdown-box { background: var(--ink); border-radius: 8px; padding: 20px 16px; display: flex; gap: 10px; }
.pk-countdown-unit { flex: 1; background: rgba(255,255,255,0.06); border-radius: 6px; padding: 12px 4px; text-align: center; }
.pk-countdown-num { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 26px; color: #fff; }
.pk-countdown-label { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #e7b3c9; font-weight: 700; margin-top: 4px; }
.pk-cupos-track { height: 14px; border-radius: 999px; background: var(--paper-2); overflow: hidden; border: 1px solid var(--line); }
.pk-cupos-fill { height: 100%; background: linear-gradient(90deg, var(--pink) 0%, var(--pink-deep) 100%); border-radius: 999px; transition: width 0.4s ease; }
.pk-note-box { padding: 16px 20px; background: #fff; border: 1px dashed var(--line); border-radius: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.pk-side-label { font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pink-deep); margin-bottom: 12px; }
.pk-ejemplo { font-size: 10.5px; color: var(--muted2); margin-top: 8px; font-style: italic; line-height: 1.5; }
.pk-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
@media (max-width: 760px) { .pk-plan-grid { grid-template-columns: 1fr; } }
.pk-plan { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.pk-plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pk-plan-name { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 21px; color: var(--pink-deep); letter-spacing: 0.01em; }
.pk-plan ul { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.75; color: #382b30; }
/* EL FLYER VA COMPLETO. Hasta hoy era `height: 260px; object-fit: cover`, o
   sea se veia solo la franja del medio: en Premium se cortaba el bloque
   "Acompanamiento" y en los dos se perdian el encabezado y el pie. El flyer ES
   el material de venta de Kendolly — recortarlo es tirar la mitad del mensaje.

   `height: auto` en vez de `object-fit: contain` a proposito: los dos archivos
   son 2:3 (1024x1536 y 853x1280), asi que con alto automatico la proporcion
   real se respeta EXACTA y no queda ni una franja vacia. El fondo rosa claro
   queda igual como red de seguridad, por si manana entra un flyer de otra
   forma: la franja se ve del color del pie de foto, nunca blanca ni negra.

   `margin-top: auto` empuja la figura al fondo de la tarjeta. Las dos tarjetas
   ya quedaban del mismo alto (el grid las estira), pero Premium tiene una
   vinieta mas que Personalizado; sin esto los flyers arrancaban a distinta
   altura y el de arriba dejaba un hueco abajo. */
.pk-plan-foto { margin: auto 0 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); }
.pk-plan-foto img { display: block; width: 100%; height: auto; }
.pk-plan-foto figcaption { font-size: 11px; color: var(--muted2); padding: 8px 10px; background: var(--paper-2); }

/* ── Mi Historia ─────────────────────────────────────────────────────────── */
.pk-story-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-block: 44px; }
@media (max-width: 860px) { .pk-story-hero { grid-template-columns: 1fr; } }
.pk-tilt-frame { background: #fff; padding: 10px 10px 26px; border-radius: 6px; box-shadow: 0 10px 24px rgba(43,32,22,0.16); transform: rotate(-2.2deg); transition: transform .35s ease, box-shadow .35s ease; }
.pk-tilt-frame:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 16px 30px rgba(43,32,22,0.22); }
/* 16 oct 2026: el retrato trae width/height (682x852) para reservar el lugar
   y que no salte al cargar; height:auto evita que ese alto lo estire. */
.pk-tilt-frame img { width: 100%; height: auto; }
.pk-story-p { font-size: 15px; line-height: 1.85; color: #2a2124; max-width: 640px; margin: 0 0 18px; }
.pk-story-p:last-of-type { margin-bottom: 0; }
/* Capitular. `p:first-of-type`, NUNCA `p:first-child`: el marco de la foto o
   cualquier otro elemento puede quedar de primer hijo y el estilo se iria al
   elemento equivocado sin dar un solo error visible. 56px es el valor que ya
   usaba la version anterior de esta pagina y se conserva. */
.pk-story-body p:first-of-type::first-letter {
  font-family: 'Anton', sans-serif; font-size: 56px; line-height: 0.8;
  float: left; margin: 6px 10px 0 0; color: var(--pink);
}
.pk-story-firma { font-family: 'Yesteryear', cursive; font-size: 34px; color: var(--pink-deep); margin-top: 26px; }
.pk-timeline-row { display: grid; grid-template-columns: 22px 1fr; gap: 20px; }
.pk-timeline-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--pink); flex: none; }
.pk-timeline-line { width: 2px; flex: 1; background: var(--line); min-height: 44px; margin: 4px auto 0; }
.pk-visit-grid { padding: clamp(24px,6vw,48px); border-radius: 10px; background-color: var(--blush); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
@media (max-width: 700px) { .pk-visit-grid { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
  .pk-section { padding-block: 40px; }
  .pk-wrap { padding-left: 16px; padding-right: 16px; }
}

/* ── Micro-gestos y animaciones ──────────────────────────────────────────── */
.pk-btn, .pk-navlink, .pk-chip, .pk-filter-chip, .pk-photo-item, .pk-ig-cell, .pk-prod-card, .pk-card, .pk-bag-count, .pk-countdown-num, .pk-talla-chip, .pk-prod-add {
  transition: transform .18s ease, box-shadow .22s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease;
}
.pk-btn:not([disabled]) { will-change: transform; }
.pk-btn:not([disabled]):hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(224,68,125,0.32); }
.pk-btn:not([disabled]):active { transform: translateY(0) scale(0.96); box-shadow: none; }
.pk-navlink:hover { background: var(--blush); }
.pk-navlink.active:hover { background: var(--pink); }
.pk-chip:not(.pending):hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(169,32,78,0.18); }

.pk-photo-item, .pk-ig-cell, .pk-prod-card { overflow: hidden; }
.pk-photo-item img, .pk-ig-cell img, .pk-prod-img-wrap img { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.pk-photo-item:hover img, .pk-ig-cell:hover img, .pk-prod-img-wrap:hover img { transform: scale(1.07); }
.pk-prod-card:hover, .pk-photo-item:hover, .pk-ig-cell:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(24,17,19,0.16); }
.pk-card:hover { box-shadow: 0 10px 22px rgba(24,17,19,0.08); }

.pk-screen { display: none; }
.pk-screen.active { display: block; animation: pkFadeIn .4s ease; }
@keyframes pkFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── ENTRADA DE LAS SECCIONES — 14 set 2026 ────────────────────────────────
   ANIMACION, NO ESTADO. Es un @keyframes con `both`: el ultimo fotograma es
   opacity:1, asi que el estado final del elemento es VISIBLE pase lo que pase.
   No depende de JS, ni de un scroll, ni de un timer, ni de un observer.

   Lo que habia antes: JS le ponia .pk-armed (opacity:0) a cada elemento y
   recien lo revelaba con .pk-visible cuando el scroll lo cruzaba, con una "red
   de seguridad" de 1.5 s. Eso dejaba Consultoria, Como funciona y las fotos de
   la tienda EN BLANCO durante ~1.5 s en cada carga, y de forma indefinida en
   cualquier contexto donde el timer se atrasa (pestaña en segundo plano,
   captura de pantalla automatizada, navegador que pausa los timers). El texto
   estaba en el DOM y el visitante no lo veia. Por eso el estado oculto se
   elimino: ya no existe una clase que pueda dejar contenido invisible.

   El @media de prefers-reduced-motion de mas abajo ya recorta la duracion a
   .01ms, asi que quien pidio menos movimiento ve el contenido de una. */
.pk-fade-up { animation: pkFadeUp .55s ease both; }
.pk-fade-up.pk-scale { animation-name: pkFadeUpScale; }
@keyframes pkFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes pkFadeUpScale { from { opacity: 0; transform: scale(0.92) translateY(14px); } to { opacity: 1; transform: none; } }

.pk-bag-count.pk-bump { animation: pkBump .35s ease; }
@keyframes pkBump { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } }

.pk-countdown-num.pk-tick { animation: pkTick .3s ease; }
@keyframes pkTick { 0% { transform: scale(1); } 50% { transform: scale(1.14); color: var(--pink); } 100% { transform: scale(1); } }

.pk-pulse { animation: pkPulse .4s ease; }
@keyframes pkPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

.pk-filter-chip:active { transform: scale(0.94); }
.pk-filter-chip.active { animation: pkChipPop .25s ease; }
@keyframes pkChipPop { 0% { transform: scale(0.9); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }

.pk-faq-row { transition: background-color .2s ease, transform .2s ease; }
.pk-faq-row:hover { background: var(--blush); transform: translateX(2px); }

.pk-badge { transition: transform .2s ease; }
.pk-prod-card:hover .pk-badge { transform: scale(1.05); }

.pk-price-tag { transition: transform .2s ease, color .2s ease; }
.pk-prod-card:hover .pk-price-tag { transform: scale(1.04); color: var(--pink-deep); }

.pk-btn-shimmer { position: relative; overflow: hidden; }
.pk-btn-shimmer::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: pkShimmer 3.2s ease-in-out infinite; pointer-events: none;
}
@keyframes pkShimmer { 0% { left: -60%; } 35% { left: 130%; } 100% { left: 130%; } }

/* (16 oct 2026: aca vivia el zoom lento pkHeroZoom del hero; se fue con la foto nueva, ver ── hero ──.) */

.pk-cupos-fill { position: relative; }
.pk-cupos-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%; animation: pkShimmerBar 2.4s linear infinite;
}
@keyframes pkShimmerBar { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.pk-bag-btn { will-change: transform; }
.pk-bag-btn:hover { transform: translateY(-1px); }

.pk-marquee-wrap { overflow: hidden; background: var(--ink); padding: 13px 0; }
.pk-marquee-track { display: flex; width: max-content; animation: pkMarquee 24s linear infinite; }
.pk-marquee-wrap:hover .pk-marquee-track { animation-play-state: paused; }
.pk-marquee-item { color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; padding: 0 22px; position: relative; }
.pk-marquee-item::after { content: "\2726"; color: var(--pink); position: absolute; right: -3px; top: 50%; transform: translateY(-50%); font-size: 10px; }
@keyframes pkMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Accesibilidad: si la persona pidio menos movimiento en su sistema, se apaga
   TODO. No se toca ni se recorta — es requisito, no decoracion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Evento (7 oct 2026, Fase B1, decoración opción A) ─────────────────────
   Solo en tarjetas de clases con tipo "evento" (Reto Glow Up), en Inicio y en
   Clases. Las grupales no cambian: todo cuelga de .pk-evento.
   · Borde doble rosa y blanco, como marco de invitación: un `double` rosa
     sobre un fondo blanco que se ve SOLO en el hueco entre las dos líneas
     (background-clip por capas).
   · Corona chica de Wellness arriba del rótulo.
   · 6 brillos quietos en las esquinas, rosa y blanco.
   Nada dorado, sin box-shadow ni drop-shadow, sin animación. */
.pk-class-banner.pk-evento {
  border: 6px double var(--pink);
  background: linear-gradient(var(--paper-2), var(--paper-2)) padding-box, #fff border-box;
}
.pk-class-banner { scroll-margin-top: 96px; }
.pk-ev-corona { display: block; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 2px solid var(--pink); background: #fff; margin-bottom: 6px; }
.pk-ev-corona img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pk-ev-brillos { position: absolute; inset: 0; pointer-events: none; }
.pk-ev-brillos i { position: absolute; width: 14px; height: 14px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11 6 14 9 20 10C14 11 11 14 10 20C9 14 6 11 0 10C6 9 9 6 10 0Z' fill='%23E0218A'/%3E%3C/svg%3E"); }
.pk-ev-brillos i.b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1C11 6.5 13.5 9 19 10C13.5 11 11 13.5 10 19C9 13.5 6.5 11 1 10C6.5 9 9 6.5 10 1Z' fill='%23fff' stroke='%23E0218A' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pk-ev-brillos i:nth-child(1) { top: 14px; left: 14px; width: 16px; height: 16px; }
.pk-ev-brillos i:nth-child(2) { top: 34px; left: 34px; width: 9px; height: 9px; }
.pk-ev-brillos i:nth-child(3) { top: 16px; right: 16px; width: 13px; height: 13px; }
.pk-ev-brillos i:nth-child(4) { top: 38px; right: 40px; width: 10px; height: 10px; }
.pk-ev-brillos i:nth-child(5) { bottom: 16px; left: 18px; width: 12px; height: 12px; }
.pk-ev-brillos i:nth-child(6) { bottom: 18px; right: 18px; width: 16px; height: 16px; }
/* Los datos propios del evento: duración, frase, regalías y notas. Mismo
   cuerpo de texto que la descripción; cada uno se oculta si viene vacío. */
.pk-ev-dato { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--pink-deep); }
.pk-ev-frase { margin: 0 0 16px; font-family: 'Anton', 'Arial Narrow', sans-serif; text-transform: uppercase; font-size: clamp(17px, 3.4vw, 22px); line-height: 1.2; color: var(--pink); text-wrap: balance; }
.pk-ev-bloque { margin: 0 0 16px; padding: 12px 14px; border: 1.5px solid var(--pink); border-radius: 10px; background: #fff; }
.pk-ev-bloque-tit { font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink-deep); margin-bottom: 6px; }
.pk-ev-bloque p { margin: 0; font-size: 14px; line-height: 1.65; color: #382b30; white-space: pre-line; }
.pk-ev-nota { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: #382b30; white-space: pre-line; }
.pk-ev-nota b { color: var(--pink-deep); }

/* B1.1 (7 oct 2026), solo evento. Las viñetas de "Qué incluye" son la misma
   corona de Wellness de la tarjeta, en chico, en vez del punto negro. */
.pk-evento .pk-includes { list-style: none; padding-left: 0; }
.pk-evento .pk-includes li { position: relative; padding-left: 26px; break-inside: avoid; }
.pk-evento .pk-includes li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--pink); background: #fff url("wellness-corona.webp?v=20260929") center / cover no-repeat; }
/* "¡Quedan X cupos!" con 5 o menos. Rosa fuerte, sin brillo ni sombra. */
.pk-evento .pk-ev-urgencia { font-size: 15px; font-weight: 800; color: var(--pink); margin-top: 8px; }

/* ── B1.2 (7 oct 2026): el evento destacado, no un cuadro más ──────────────
   Solo .pk-evento. Dos variantes (html[data-ev-var="a"|"b"], la elige una
   línea de pk-proxima-clase.js). Rosa PLANO, sin gradientes, sin sombras,
   sin glow, nada dorado. La cabecera (.pk-ev-cab) y el póster los arma el JS.

   Común a las dos variantes ─────────────────────────────────────────────── */
.pk-evento .pk-class-strip { display: none; }          /* era un gradiente */
.pk-evento .pk-ev-corona { display: none; }            /* la reemplaza la corona plana de la cabecera */
.pk-evento .pk-btn::after { content: none; }           /* sin el brillo en degradé del botón */
.pk-evento .pk-cupos-fill { background: var(--pink); } /* barra de cupos plana */
.pk-evento .pk-cupos-fill::after { content: none; }       /* ni el brillo que la recorre */
.pk-ev-svg-corona { display: block; width: 40px; height: 40px; flex: none; }

.pk-ev-cab { grid-column: 1 / -1; position: relative; color: #fff; }
.pk-ev-cab-fila { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pk-ev-cab .pk-script { font-size: clamp(30px, 6vw, 44px); color: #fff; }
.pk-ev-cab .pk-display { margin: 4px 0 0; color: #fff; font-size: clamp(36px, 8.4vw, 72px); line-height: 0.98; }
.pk-ev-cinta { display: none; }
/* Contador del reto (7 oct 2026): debajo del título, en la cabecera rosa. Lo pone ponerContador(). */
.pk-ev-contador { margin: 10px 0 0; font-weight: 800; font-size: clamp(16px, 3.6vw, 20px); line-height: 1.3; color: #fff; text-wrap: balance; }

/* La promo como etiqueta colgante: cuerpo rosa con muesca, agujero de papel
   y cordón que sube del agujero. El cordón va en el contenedor porque el
   clip-path del cuerpo lo cortaría. */
.pk-ev-tag { position: relative; display: block; margin: 30px 0 16px 6px; transform: rotate(-2deg); }
.pk-ev-tag::before { content: ""; position: absolute; left: 22px; top: -26px; width: 2px; height: 32px; background: var(--ink); transform: rotate(-24deg); transform-origin: bottom center; }
.pk-ev-tag-cuerpo { position: relative; display: block; padding: 13px 16px 13px 44px; background: var(--pink); color: #fff; font-weight: 800; font-size: 15px; line-height: 1.35; border-radius: 0 8px 8px 0; clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%); }
.pk-ev-tag-hoyo { position: absolute; left: 18px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); z-index: 1; }
.pk-evento .cl-form .pk-ev-tag { margin-bottom: 4px; }

/* Póster tipográfico (sin foto). Papel con borde rosa. */
.pk-ev-con-poster { border: 0 !important; background: transparent !important; }
.pk-ev-con-poster > :not(.pk-ev-poster) { display: none !important; }
.pk-ev-poster { position: relative; height: 270px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 16px; background: var(--paper); border: 3px solid var(--pink); border-radius: 10px; color: var(--pink); text-align: center; }
.pk-ev-poster .pk-ev-svg-corona { width: 44px; height: 44px; margin-bottom: 2px; }
.pk-ev-poster-num { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 112px; line-height: 0.92; color: var(--pink); }
.pk-ev-poster-dias { font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 30px; letter-spacing: 0.24em; padding-left: 0.24em; line-height: 1.1; color: var(--ink); }
.pk-ev-poster-inicia { margin-top: 10px; padding: 6px 14px; border-radius: 999px; background: var(--pink); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 0.12em; }
.pk-ev-poster-tit { margin-top: 10px; font-family: 'Anton', 'Arial Narrow', sans-serif; text-transform: uppercase; font-size: clamp(26px, 6vw, 36px); line-height: 1.05; color: var(--pink); text-wrap: balance; }
/* En Inicio la foto ocupa la altura de la tarjeta. */
.pk-class-foto.pk-ev-con-poster .pk-ev-poster { height: 100%; min-height: 260px; }

/* Variante A · Franja ────────────────────────────────────────────────────
   La tarjeta sale de la columna (margen negativo hasta el borde de la
   pantalla) y el rosa plano ocupa todo el ancho. El contenido se vuelve a
   centrar con el padding, al mismo ancho que el resto de la página. */
html[data-ev-var="a"] body:has(.pk-class-banner.pk-evento) { overflow-x: clip; }
html[data-ev-var="a"] .pk-class-banner.pk-evento {
  margin-inline: calc(50% - 50vw);
  border: 0; border-radius: 0;
  background: var(--pink);
  padding: clamp(36px, 6vw, 64px) max(16px, calc(50vw - 576px));
  row-gap: 24px;
}
html[data-ev-var="a"] .pk-evento .pk-ev-datos { background: var(--paper); border-radius: 10px; padding: clamp(18px, 4vw, 32px); }
html[data-ev-var="a"] .pk-evento .pk-card { border-color: var(--paper); }
html[data-ev-var="a"] .pk-evento .pk-ev-brillos i,
html[data-ev-var="a"] .pk-evento .pk-ev-brillos i.b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11 6 14 9 20 10C14 11 11 14 10 20C9 14 6 11 0 10C6 9 9 6 10 0Z' fill='%23fff'/%3E%3C/svg%3E"); }
html[data-ev-var="a"] .pk-evento .pk-ev-brillos i:nth-child(1) { top: 20px; left: auto; right: 64px; width: 22px; height: 22px; }
html[data-ev-var="a"] .pk-evento .pk-ev-brillos i:nth-child(2) { top: 58px; left: auto; right: 34px; width: 10px; height: 10px; }
html[data-ev-var="a"] .pk-evento .pk-ev-brillos i:nth-child(3) { top: 26px; right: 24px; width: 18px; height: 18px; }
html[data-ev-var="a"] .pk-evento .pk-ev-brillos i:nth-child(6) { bottom: 20px; right: 22px; width: 20px; height: 20px; }
html[data-ev-var="a"] [data-in="clase"].pk-evento .pk-ev-cab .pk-display { font-size: clamp(32px, 6.4vw, 54px); }

/* Variante B · Póster ────────────────────────────────────────────────────
   Misma columna. Cabecera rosa plana y alta de borde a borde de la tarjeta,
   con la cinta "Nuevo reto"; borde rosa de un solo color, más grueso; más
   aire entre bloques. */
html[data-ev-var="b"] .pk-class-banner.pk-evento {
  --pad: clamp(20px, 5vw, 44px);
  border: 5px solid var(--pink);
  border-radius: 14px;
  background: var(--paper-2);
  padding: 0 var(--pad) var(--pad);
  column-gap: 44px; row-gap: 30px;
}
html[data-ev-var="b"] .pk-evento .pk-ev-cab { margin: 0 calc(-1 * var(--pad)); padding: clamp(34px, 7vw, 60px) var(--pad) clamp(28px, 5vw, 44px); background: var(--pink); }
html[data-ev-var="b"] .pk-evento .pk-ev-cinta { display: inline-block; padding: 7px 16px 7px 12px; background: var(--paper); color: var(--pink); font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); }
html[data-ev-var="b"] .pk-evento .pk-ev-datos > :not([hidden]):not(:last-child) { margin-bottom: 24px; }
html[data-ev-var="b"] .pk-evento .cl-side { gap: 20px; }
html[data-ev-var="b"] .pk-evento .pk-ev-brillos i:nth-child(-n+4),
html[data-ev-var="b"] .pk-evento .pk-ev-brillos i.b:nth-child(-n+4) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11 6 14 9 20 10C14 11 11 14 10 20C9 14 6 11 0 10C6 9 9 6 10 0Z' fill='%23fff'/%3E%3C/svg%3E"); }
html[data-ev-var="b"] [data-in="clase"].pk-evento .pk-ev-cab .pk-display { font-size: clamp(30px, 6vw, 50px); }

/* ── Planes y evaluación (7 oct 2026), clases.html ─────────────────────────
   Escalera de 3 tarjetas + franja de mantenimiento. Papel, rosa PLANO, sin
   gradientes, sin sombras, sin glow, nada dorado. Precios en hang tag con
   Anton. La estrella usa #DB1F87 y no var(--pink): blanco sobre #E0218A da
   4,42:1 y no pasa AA en texto normal; #DB1F87 da 4,61:1 y se ve igual. */
.pk-wl .pk-btn::after { content: none; }
.pk-wl-sub { margin: 0 0 6px; max-width: 56ch; font-size: 16px; line-height: 1.6; color: var(--ink); font-weight: 600; }
.pk-wl-inbody { margin: 0 0 30px; max-width: 60ch; font-size: 14.5px; line-height: 1.6; color: #4a3a42; }

.pk-wl-escalera { display: grid; grid-template-columns: 1fr 1fr 1.18fr; gap: 18px; align-items: end; }
.pk-wl-plan { min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 22px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; }
.pk-wl-plan .pk-btn { width: 100%; margin-top: auto; }
.pk-wl-plan .pk-btn.ghost,
.pk-wl-queen .pk-btn.ghost { border-color: var(--pink-deep); color: var(--pink-deep); }
/* Escalón: cada tarjeta un poco más alta que la anterior. */
.pk-wl-plan[data-paq="inbody"] { min-height: 300px; }
.pk-wl-plan[data-paq="inbody_nutricion"] { min-height: 340px; }
.pk-wl-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-wl-etiquetas:not(:has(.pk-wl-pill:not([hidden]))) { display: none; }
.pk-wl-pill { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--gold-light); color: var(--pink-deep); }
.pk-wl-nombre { font-family: 'Anton', 'Arial Narrow', sans-serif; text-transform: uppercase; font-size: 23px; line-height: 1.1; letter-spacing: 0.01em; color: var(--pink-deep); }

/* Hang tag: cuerpo con muesca, agujero de papel y cordón. El cordón va en el
   contenedor porque el clip-path del cuerpo lo cortaría (como .pk-ev-tag). */
.pk-wl-tag { position: relative; align-self: flex-start; margin: 18px 0 2px 6px; transform: rotate(-2deg); }
.pk-wl-tag::before { content: ""; position: absolute; left: 22px; top: -20px; width: 2px; height: 26px; background: var(--ink); transform: rotate(-24deg); transform-origin: bottom center; }
.pk-wl-tag-cuerpo { position: relative; display: block; padding: 8px 18px 8px 40px; background: var(--paper-2); color: var(--pink-deep); border: 1.5px solid var(--pink-deep); font-family: 'Anton', 'Arial Narrow', sans-serif; font-size: 26px; line-height: 1.1; letter-spacing: 0.02em; border-radius: 0 8px 8px 0; clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); }
.pk-wl-tag-hoyo { position: absolute; left: 17px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); z-index: 1; }

/* Detalles: más grandes y oscuros, viñeta = la coronita del evento. */
.pk-wl-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; line-height: 1.5; color: #2b2026; }
.pk-wl-lista li { position: relative; padding-left: 28px; }
.pk-wl-lista li::before { content: ""; position: absolute; left: 0; top: 0.12em; width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--pink); background: #fff url("wellness-corona.webp?v=20260929") center / cover no-repeat; }

/* La estrella: rosa plano, texto blanco, más ancha y más alta. */
.pk-wl-estrella { position: relative; min-height: 420px; padding: 26px 24px 24px; background: #DB1F87; border-color: #DB1F87; color: #fff; }
.pk-wl-corona { display: block; width: 46px; height: 46px; color: #fff; }
.pk-wl-estrella .pk-wl-pill { background: #fff; color: var(--pink-deep); }
.pk-wl-estrella .pk-wl-nombre { color: #fff; font-size: clamp(28px, 3.2vw, 34px); }
.pk-wl-estrella .pk-wl-lista { color: #fff; font-weight: 600; }
.pk-wl-estrella .pk-wl-lista li::before { border-color: #fff; }
.pk-wl-estrella .pk-wl-tag::before { background: #fff; }
.pk-wl-estrella .pk-wl-tag-cuerpo { background: #fff; border-color: #fff; color: var(--pink-deep); }
.pk-wl-estrella .pk-wl-tag-hoyo { background: #DB1F87; border-color: #fff; }
.pk-wl-tag-grande .pk-wl-tag-cuerpo { font-size: 44px; padding: 10px 24px 10px 48px; clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%); }
.pk-wl-tag-grande .pk-wl-tag-hoyo { left: 21px; width: 13px; height: 13px; margin-top: -6.5px; }
.pk-wl-estrella .pk-btn { background: #fff; color: var(--pink-deep); }

/* Franja angosta de mantenimiento. */
.pk-wl-queen { display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; margin-top: 22px; padding: 16px 20px; background: var(--paper-2); border: 1.5px solid var(--line); border-radius: 12px; }
.pk-wl-queen-txt { flex: 1 1 280px; display: flex; flex-direction: column; gap: 2px; }
.pk-wl-queen-pre { font-size: 26px; color: var(--pink); }
.pk-wl-queen-nombre { font-family: 'Anton', 'Arial Narrow', sans-serif; text-transform: uppercase; font-size: 19px; line-height: 1.15; color: var(--pink-deep); }
.pk-wl-queen-det { font-size: 14.5px; line-height: 1.5; color: #2b2026; }
.pk-wl-queen .pk-wl-pill { align-self: flex-start; margin-top: 4px; }
.pk-wl-queen .pk-wl-tag { align-self: center; margin-top: 14px; }
.pk-wl-queen .pk-wl-tag-cuerpo { font-size: 22px; background: var(--paper); }
.pk-wl-queen .pk-btn { flex: none; }

.pk-wl-reto { margin: 22px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.pk-wl-reto a { color: var(--pink-deep); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) {
  .pk-wl-escalera { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .pk-wl-plan[data-paq] { min-height: 0; }
  .pk-wl-estrella { order: -1; }
  .pk-wl-queen .pk-btn { width: 100%; }
}

/* 7 oct 2026 · En escritorio la columna de datos del evento se estira al alto
   de la columna de la derecha (contador, cupos, formulario) y debajo de la
   foto quedaba un hueco blanco. La foto ahora crece y llena ese alto. En
   celular la columna no se estira y la foto queda en sus 270px de siempre. */
.pk-evento .pk-ev-datos { display: flex; flex-direction: column; }
.pk-evento .pk-ev-datos > .cl-quote-foto { flex: 1 0 auto; display: flex; margin-top: 0; }
.pk-evento .pk-ev-datos > .cl-quote-foto img { flex: 1; height: auto; min-height: 270px; }

/* ── Modal chico de la tienda (.pk-modal-t) ──────────────────────────────
   Hasta el 16 oct vivía en store.html; ahora lo usan store.html y
   clases.html (modal «Avisame del próximo evento», assets/pk-reto-cerrado.js). */
.pk-modal-t { position: fixed; inset: 0; z-index: 900; background: rgba(24,17,19,.45); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.pk-modal-t[hidden] { display: none; }
.pk-modal-t .pk-modal-caja { background: #fff; width: 100%; max-width: 460px; border-radius: 18px 18px 0 0; padding: 20px 18px 24px; max-height: 88vh; overflow-y: auto; }
@media (min-width: 641px) { .pk-modal-t { align-items: center; } .pk-modal-t .pk-modal-caja { border-radius: 18px; } }
.pk-modal-caja h3 { margin: 0 0 6px; font-size: 18px; }
.pk-modal-caja p { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.pk-modal-caja label { display: block; font-size: 12.5px; font-weight: 700; margin: 10px 0 4px; }
.pk-modal-caja input, .pk-modal-caja select { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 12px; font: inherit; font-size: 15px; }
.pk-modal-caja .pk-modal-acc { display: flex; gap: 8px; margin-top: 16px; }
.pk-modal-caja .pk-modal-acc .pk-btn { flex: 1; text-align: center; }
.pk-modal-caja .pk-modal-error { margin: 10px 0 0; color: var(--pink-deep); font-weight: 700; }

/* ── Reto en curso, inscripciones cerradas (16 oct 2026) ─────────────────
   Va en el lugar de la foto del evento (Inicio .pk-class-foto y Entrená
   .cl-quote-foto) cuando el reto ya empezó y no hay próximo evento. Papel
   crema, rosa plano, cordón dorado y etiqueta colgante. Sin degradados ni
   brillos. Lo arma assets/pk-reto-cerrado.js. */
.pk-ev-con-cerrado { border: 0 !important; background: transparent !important; min-height: 0 !important; }
.pk-ev-con-cerrado > :not(.pk-ev-cerrado) { display: none !important; }
.pk-ev-cerrado { --crema: #FFFCF6; --dorado: #B08A3E; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 30px clamp(18px, 4vw, 30px) 24px; background: var(--crema); border: 3px solid var(--pink); border-radius: 10px; color: var(--ink); }
.pk-ev-cerrado-tag { position: relative; display: inline-flex; align-items: center; margin: 4px 0 2px 4px; padding: 9px 16px 9px 28px; background: var(--pink); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; border-radius: 0 6px 6px 0; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); transform: rotate(-3deg); }
.pk-ev-cerrado-tag-wrap { position: relative; }
.pk-ev-cerrado-tag-wrap::before { content: ""; position: absolute; left: 20px; top: -18px; width: 2px; height: 24px; background: var(--dorado); transform: rotate(-24deg); transform-origin: bottom center; }
.pk-ev-cerrado-hoyo { position: absolute; left: 13px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--crema); border: 2px solid var(--dorado); }
.pk-ev-cerrado-dia { font-family: 'Anton', 'Arial Narrow', sans-serif; text-transform: uppercase; font-size: clamp(34px, 8vw, 46px); line-height: 1; color: var(--pink); margin: 0; }
.pk-ev-cerrado-queens { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px; border: 1.5px solid var(--dorado); border-radius: 999px; background: #fff; font-weight: 800; font-size: 14px; color: var(--pink-deep); }
.pk-ev-cerrado-queens svg { width: 18px; height: 18px; color: var(--dorado); flex: none; }
.pk-ev-cerrado-txt { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 40ch; }
.pk-ev-cerrado-btns { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: auto; padding-top: 6px; }
.pk-ev-cerrado-btns .pk-btn { width: 100%; justify-content: center; text-align: center; }
.pk-ev-cerrado .pk-btn::after, #evAvisameModal .pk-btn::after { content: none; }
.pk-ev-cerrado .pk-btn:not([disabled]):hover, #evAvisameModal .pk-btn:not([disabled]):hover { box-shadow: none; }
.pk-ev-cerrado-ok { margin: 0; font-weight: 800; font-size: 14px; color: var(--pink-deep); }
.cl-quote-foto.pk-ev-con-cerrado { overflow: visible; }
.pk-evento .pk-ev-datos > .cl-quote-foto.pk-ev-con-cerrado .pk-ev-cerrado { flex: 1; }