/* packs.css — estilos de /packs.
 *
 * CSS crudo a propósito: Tailwind compila y PURGA, así que las clases
 * arbitrarias pueden no existir en runtime y dejar el componente deforme.
 *
 * ── REPARTO DE TRABAJO DE LA PÁGINA (para que ninguna zona repita a otra) ──
 * 0. Banner: el ÚNICO bloque de color de la página. Explica qué es un pack y
 *    muestra el destacado como ejemplo. Nada más.
 * 1. Catálogo: TODOS los packs con precio y botón, sobre el fondo del sitio.
 *    Es la vitrina. La rejilla queda CORTADA por el borde del pliegue: ese
 *    corte es lo que invita a bajar, no un cartel de "hay más abajo".
 * 2. Comparador: qué trae cada pack fila por fila, para decidir entre packs
 *    parecidos. Se dejó tal como estaba, no se tocó su estilo.
 * 3. Arma el tuyo: para el que quiere otra combinación. Sin precio ni botón.
 *
 * ── UN ÚNICO FONDO ──
 * El sitio usa un solo fondo por página (body: slate-50 / slate-950). Hubo dos
 * intentos de darle a /packs un fondo propio — papel cálido primero, manchas de
 * luz azules después — y los dos convirtieron la página en una isla que no se
 * parecía al resto del catálogo. El color vive SOLO en el banner; de ahí para
 * abajo no se pinta nada y se ve el fondo del body.
 */

.pk-banner,
.pk-catalogo,
.pk-todos {
  /* La plata es VERDE: convención de dinero en comercio y acento propio del
   * sitio (#00E676 en el hero de la portada). El azul de marca queda para
   * estructura y navegación. */
  --pk-dinero: #0b7a43;
  --pk-dinero-cta-1: #00a152;
  --pk-dinero-cta-2: #00c853;
  --pk-dinero-cta-texto: #ffffff;
  --pk-dinero-sombra: rgba(0, 161, 82, 0.5);
  --pk-dinero-suave-fondo: rgba(0, 161, 82, 0.10);
  --pk-dinero-suave-borde: rgba(0, 161, 82, 0.34);

  /* Paleta del SITIO (slate), no una propia. El papel calido convertia a
   * /packs en una isla que no se parecia al resto del catalogo. */
  --pk-fondo: #f8fafc;
  --pk-superficie: #ffffff;
  --pk-tinta: #0f172a;
  --pk-tinta-suave: #64748b;
  --pk-borde: #e2e8f0;
  --pk-sombra: 0 10px 24px -16px rgba(15, 23, 42, 0.28);
  --pk-precio-color: var(--pk-dinero);
  --pk-destacado-superficie: #ffffff;
  --pk-destacado-tinte: rgba(0, 200, 83, 0.10);
  --pk-destacado-borde: rgba(0, 161, 82, 0.35);
  --pk-destacado-sombra: 0 24px 50px -24px rgba(2, 12, 40, 0.55);

  color: var(--pk-tinta);
}

/* El catálogo NO pinta fondo: se ve el del body. */
.pk-catalogo { padding: 2.5rem 0 2rem; }

/* ── EL CONTENEDOR, IGUAL QUE EL RESTO DEL SITIO ──────────────────────────
 * El resto de las páginas usa `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`, y el
 * ancho máximo INCLUYE el padding. Con 72rem + padding en la sección los bordes
 * no coincidían con el comparador ni con el resto: 16px donde el sitio ponía 24
 * o 32, y 57px donde ponía 32. El padding va acá adentro y no en la sección,
 * porque el fondo del banner tiene que llegar de punta a punta. */
.pk-banner-inner,
.pk-catalogo-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .pk-banner-inner, .pk-catalogo-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .pk-banner-inner, .pk-catalogo-inner { padding-left: 2rem; padding-right: 2rem; }
}

/* Oscuro con tratamiento propio, no el claro invertido. */
html.dark .pk-banner,
html.dark .pk-catalogo,
html.dark .pk-todos {
  --pk-fondo: #020617;
  --pk-superficie: #1e293b;
  --pk-tinta: #f1f5f9;
  --pk-tinta-suave: #94a3b8;
  --pk-borde: #334155;
  --pk-sombra: 0 18px 38px -20px rgba(0, 0, 0, 0.8);
  --pk-precio-color: #00e676;
  /* En oscuro la superficie del destacado sube un escalón respecto de las
   * tarjetas comunes (#1e293b): eso es lo que lo separa del resto. */
  --pk-destacado-superficie: #16253d;
  --pk-destacado-tinte: rgba(0, 230, 118, 0.10);
  --pk-destacado-borde: rgba(0, 230, 118, 0.30);
  --pk-destacado-sombra: 0 24px 50px -26px rgba(0, 0, 0, 0.85);
  --pk-dinero-cta-1: #00c853;
  --pk-dinero-cta-2: #00e676;
  --pk-dinero-cta-texto: #05291a;
  --pk-dinero-sombra: rgba(0, 200, 83, 0.5);
  --pk-dinero-suave-fondo: rgba(0, 230, 118, 0.12);
  --pk-dinero-suave-borde: rgba(0, 230, 118, 0.38);
}



/* ── EL BANNER ────────────────────────────────────────────────────────────
 * Mismo recurso que el hero de la portada: una base degradada de marca y tres
 * luces desenfocadas encima. No es una copia — la portada va celeste→azul con
 * luces blanca/celeste/azul; acá una de las tres luces es el VERDE del dinero
 * y cae debajo del precio, que es de lo que habla esta página.
 *
 * En oscuro la base TERMINA en el color del body (#020617) para que el banner
 * se funda con la página en vez de cortar con una línea. */
.pk-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, #0bc5f3 0%, #2563eb 72%);
  /* Clearance del navbar fijo. Medido, no estimado: 136px con subnav. */
  padding: 5.5rem 0 2.5rem;
}
html.dark .pk-banner {
  background: linear-gradient(160deg, #0d1b3e 0%, #0b1229 55%, #020617 100%);
}
@media (min-width: 768px) {
  .pk-banner { padding: 9.5rem 0 3rem; }
}

.pk-banner-luces { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.pk-luz { position: absolute; border-radius: 50%; }
.pk-luz-a {
  top: -18%; left: -8%; width: 44rem; height: 44rem; filter: blur(70px);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.24) 0%, transparent 65%);
}
.pk-luz-b {
  top: 8%; right: -12%; width: 40rem; height: 40rem; filter: blur(80px);
  background: radial-gradient(circle, rgba(11, 197, 243, 0.38) 0%, transparent 65%);
}
/* La verde: el color del ahorro, puesta bajo el bloque del precio. */
.pk-luz-c {
  bottom: -30%; right: 6%; width: 38rem; height: 38rem; filter: blur(90px);
  background: radial-gradient(circle, rgba(0, 230, 118, 0.30) 0%, transparent 65%);
}
html.dark .pk-luz-a { background: radial-gradient(circle, rgba(79, 70, 229, 0.45) 0%, transparent 65%); }
html.dark .pk-luz-b { background: radial-gradient(circle, rgba(6, 182, 212, 0.34) 0%, transparent 65%); }
html.dark .pk-luz-c { background: radial-gradient(circle, rgba(0, 230, 118, 0.26) 0%, transparent 65%); }

/* El ancho y el padding los pone la regla de contenedor de arriba. Todo el
 * contenido del banner comparte el MISMO eje centrado: chip, h1, bajada,
 * antetítulo y fila de botones. Antes el encabezado iba a la izquierda (x=105)
 * y la grilla de botones centrada (x=201): dos ejes distintos en el mismo
 * banner, se veía desprolijo. */
.pk-banner-inner { position: relative; text-align: center; }

/* ── Encabezado del banner ────────────────────────────────────────────────
 * Dice QUÉ es un pack y cuántos hay. Va sobre color: el texto es blanco en
 * los dos temas, no depende de --pk-tinta. */
.pk-chip {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.pk-titulo {
  margin-top: 0.75rem;
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #ffffff;
}
@media (min-width: 768px) { .pk-titulo { font-size: 2.5rem; } }
.pk-bajada {
  margin: 0.5rem auto 0;
  max-width: 36rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.9375rem;
}

/* ── El destacado: franja compacta y horizontal ───────────────────────────
 * Compacta a propósito: si ocupa media pantalla, la rejilla no llega a asomar
 * y volvemos a la página de un solo pack. */
/* El destacado NO puede usar la misma superficie que las tarjetas comunes de
 * la rejilla: quedaba idéntico a ellas, solo que más ancho, y no se leía como
 * destacado. Lleva superficie propia con relieve y un borde verde tenue — el
 * verde es el color del ahorro, que es justamente por qué está destacado. */
.pk-destacado {
  margin-top: 1.5rem;
  background:
    radial-gradient(120% 180% at 88% 50%, var(--pk-destacado-tinte) 0%, transparent 62%),
    var(--pk-destacado-superficie);
  border: 1px solid var(--pk-destacado-borde);
  box-shadow: var(--pk-destacado-sombra);
  border-radius: 1.25rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 900px) {
  /* Dos columnas con separador. align-items STRETCH y no center: con center el
   * bloque del precio (bajo) quedaba flotando a media altura contra la columna
   * de productos (alta) y no alineaba con nada. */
  .pk-destacado {
    flex-direction: row;
    align-items: stretch;
    padding: 1.5rem 1.75rem;
    gap: 2rem;
  }
  .pk-destacado-info { flex: 1; min-width: 0; }
  .pk-destacado-oferta {
    border-left: 1px solid var(--pk-borde);
    padding-left: 2rem;
    justify-content: center;
  }
}

.pk-destacado-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  background: var(--pk-dinero-suave-fondo);
  border: 1px solid var(--pk-dinero-suave-borde);
  color: var(--pk-dinero);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html.dark .pk-destacado-chip { color: #6ef0a6; }

.pk-destacado-nombre { margin-top: 0.5rem; font-size: 1.25rem; font-weight: 800; color: var(--pk-tinta); }
@media (min-width: 768px) { .pk-destacado-nombre { font-size: 1.5rem; } }

/* ── LA PIEZA DE PRODUCTO ─────────────────────────────────────────────────
 * Una sola pieza para todos lados: imagen grande arriba, nombre y precio
 * suelto abajo. Misma anatomía que las tarjetas flotantes de la portada.
 *
 * Se usa igual en el banner (--pk-prod-img grande) y en las tarjetas de la
 * rejilla (más chica). Antes la rejilla mostraba miniaturas de 36px sin nombre
 * ni precio y no se entendía qué se estaba vendiendo.
 *
 * La fila NO envuelve: es una SUMA, y partida en dos renglones deja de leerse
 * como tal. Los items se encogen para que entren. */
.pk-prods {
  --pk-prod-img: 4rem;
  --pk-prod-ancho: 7rem;
  display: flex;
  /* stretch y no flex-start: así todos los items miden lo mismo de alto y el
   * precio de cada uno cae a la MISMA altura. Con nombres de 1, 2 y 3 líneas
   * los precios quedaban escalonados. */
  align-items: stretch;
  gap: 0.4rem;
  margin-top: 1rem;
}
/* El banner muestra el producto GRANDE: es lo que explica qué se está vendiendo.
 * En escritorio los tres llenan el ancho que antes quedaba vacío entre el
 * último producto y la línea del precio.
 * En el celular el techo es la aritmética, no el gusto: tres items + dos "+"
 * dentro de la tarjeta. A 4.5rem entra con margen; más arriba la imagen (que no
 * se encoge) desborda su item y corre la página de costado. */
.pk-prods-lg { --pk-prod-img: 4.75rem; gap: 0.4rem; }
@media (min-width: 768px) {
  .pk-prods-lg { --pk-prod-img: 9.5rem; --pk-prod-ancho: 15rem; gap: 0.75rem; }
}
/* En la tarjeta el grupo va centrado: un pack de 2 productos dejaba un hueco
 * grande a la derecha y el "+" quedaba lejos de los dos. En el banner va a la
 * izquierda, alineado con el título. */
.pk-card .pk-prods { justify-content: center; }

/* min-width: 0 es obligatorio. Sin eso un nombre largo ("Microsoft Office 2024
 * Ltsc Pro Plus") estira su item más allá del viewport y corre la PÁGINA de
 * costado — pasó, medido: 397px dentro de 390. */
/* No crece (0 en flex-grow): con `1 1 0` los dos productos de un pack de 2 se
 * repartían todo el ancho y quedaban en dos esquinas opuestas, con el "+"
 * flotando en el medio. Deja de leerse como una suma. */
.pk-prod {
  flex: 0 1 var(--pk-prod-ancho);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  text-decoration: none;
}
/* max-width + aspect-ratio: la imagen no se encoge (flex-shrink: 0), así que sin
 * tope podría superar el ancho de su celda y correr la página. A 360px queda
 * justa (71px de 71px): hoy entra, pero un pack de 4 productos la desbordaría.
 * Con el tope se achica y sigue cuadrada en vez de romper el layout. */
.pk-prod-img {
  width: var(--pk-prod-img);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 0.75rem;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--pk-borde);
  padding: 0.25rem;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.pk-prod:hover .pk-prod-img { transform: translateY(-3px); }
.pk-prod-nombre {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pk-tinta);
}
/* margin-top: auto — el precio se va al piso del item, que mide lo mismo en
 * todos. Es lo que los deja alineados sin recortar ningún nombre. */
.pk-prod-precio { margin-top: auto; font-size: 0.6875rem; line-height: 1.2; color: var(--pk-tinta-suave); }

/* El "+" se alinea con el CENTRO DE LAS IMÁGENES, no con el centro del item:
 * los nombres tienen distinta cantidad de líneas y centrar el bloque dejaba el
 * signo bailando de una tarjeta a otra. */
.pk-signo {
  align-self: flex-start;
  padding-top: calc(var(--pk-prod-img) / 2 - 0.7rem);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
  color: var(--pk-tinta-suave);
  user-select: none;
  flex-shrink: 0;
}

/* La oferta es un bloque propio: etiqueta, precio, detalle y boton, todos
 * alineados a la izquierda dentro del bloque y apilados. Antes iban en una
 * fila horizontal larga y el tachado y el ahorro quedaban colgando al lado
 * del precio. */
.pk-destacado-oferta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  flex-shrink: 0;
}
@media (min-width: 900px) { .pk-destacado-oferta { width: 16rem; } }

.pk-oferta-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pk-tinta-suave);
}
.pk-destacado-oferta .pk-cta { width: 100%; margin-top: 0.875rem; }
.pk-precio-grande {
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--pk-precio-color);
}
@media (min-width: 768px) { .pk-precio-grande { font-size: 2.75rem; } }
.pk-precio-detalle { margin-top: 0.35rem; font-size: 0.8125rem; color: var(--pk-tinta-suave); }
.pk-precio-detalle s { margin-right: 0.15rem; }
.pk-precio-detalle s { text-decoration: line-through; }

.pk-ahorro-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: var(--pk-dinero-suave-fondo);
  border: 1px solid var(--pk-dinero-suave-borde);
  color: var(--pk-dinero);
  font-weight: 700;
  font-size: 0.75rem;
}
html.dark .pk-ahorro-badge { color: #6ef0a6; }

.pk-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.8rem 1.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--pk-dinero-cta-1) 0%, var(--pk-dinero-cta-2) 100%);
  color: var(--pk-dinero-cta-texto);
  font-size: 0.9375rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 12px 24px -12px var(--pk-dinero-sombra);
  white-space: nowrap;
  transition: transform 0.15s ease;
}
.pk-cta:hover { transform: translateY(-2px); }

/* ── La rejilla: TODOS los packs ──────────────────────────────────────────
 * Queda cortada por el borde del pliegue a propósito. */
.pk-rejilla-label { margin: 0 0 0.75rem; color: var(--pk-tinta-suave); font-size: 0.8125rem; font-weight: 600; }
/* 20rem y no 15.5: adentro va la fila de productos con nombre y precio, y a
 * 15.5rem cada producto quedaba en 65px — el mismo problema que vinimos a
 * arreglar. */
.pk-rejilla {
  display: grid;
  /* min(20rem, 100%): sin eso, en un viewport angosto la columna mantiene sus
   * 320px, desborda el contenedor y corre la página de costado. */
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: 1rem;
}

.pk-card {
  background: var(--pk-superficie);
  border: 1px solid var(--pk-borde);
  box-shadow: var(--pk-sombra);
  border-radius: 1rem;
  padding: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.pk-card.es-destacado { border-color: var(--pk-dinero-suave-borde); }
.pk-card-chip { align-self: flex-start; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pk-tinta-suave); }
.pk-card-title { font-size: 1rem; font-weight: 800; color: var(--pk-tinta); line-height: 1.2; }
.pk-card-precio-fila { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; }
.pk-card-precio { font-size: 1.5rem; font-weight: 900; color: var(--pk-precio-color); letter-spacing: -0.01em; }
.pk-card-antes { font-size: 0.75rem; color: var(--pk-tinta-suave); text-decoration: line-through; }
.pk-card .pk-cta { padding: 0.625rem 1rem; font-size: 0.8125rem; margin-top: 0.25rem; }

/* Garantías: cierre de la sección, secundario. */
.pk-garantias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--pk-tinta-suave);
}
.pk-garantias span { display: inline-flex; align-items: center; gap: 0.375rem; }

/* ── Sección 2: comparador ──────────────────────────────────────────────── */

/* La tabla tiene min-width para que las columnas no se aplasten. Sin acotar el
 * ancho del contenedor, ese min-width empuja la PÁGINA entera y en el celular
 * aparece scroll horizontal. El scroll tiene que vivir acá adentro. */
.pk-tabla-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pk-tabla {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
/* El min-width arranca recién en tablet. En el celular forzaba 544px y la
 * PÁGINA se corría 119px de costado (verificado: window.scrollX = 119).
 * A 390px la tabla entra apretada pero entera, sin scroll lateral. */
@media (min-width: 640px) {
  .pk-tabla { min-width: 34rem; }
}
.pk-tabla th, .pk-tabla td {
  padding: 0.75rem 0.375rem;
  text-align: center;
  vertical-align: middle;
}
@media (min-width: 640px) {
  .pk-tabla th, .pk-tabla td { padding: 0.875rem 1rem; }
}
.pk-tabla th:first-child, .pk-tabla td:first-child {
  text-align: left;
}
/* En el celular el nombre del producto se partía en cuatro líneas con 123px de
 * ancho. Lo que ensanchaba las columnas de packs no eran los tildes sino el
 * nombre del pack en la cabecera: con table-layout automático el navegador
 * reparte por contenido e ignora los width declarados. Con `fixed` se respetan,
 * la cabecera envuelve y el resto del ancho va al nombre del producto. */
@media (max-width: 639px) {
  .pk-tabla { table-layout: fixed; }
  .pk-tabla th:not(:first-child), .pk-tabla td:not(:first-child) { width: 5rem; }
}
@media (min-width: 640px) {
  .pk-tabla th:first-child, .pk-tabla td:first-child { width: 40%; }
}
.pk-tabla tbody tr + tr td { border-top: 1px solid rgba(148, 163, 184, 0.22); }

/* Columna destacada — la del pack que más ahorra. */
.pk-col-top {
  background: rgba(37, 99, 235, 0.055);
  border-left: 1px solid rgba(37, 99, 235, 0.22);
  border-right: 1px solid rgba(37, 99, 235, 0.22);
}
.pk-tabla thead th.pk-col-top { border-top: 2px solid #2563eb; border-radius: 0.75rem 0.75rem 0 0; }
.pk-tabla tbody tr:last-child td.pk-col-top { border-radius: 0 0 0.75rem 0.75rem; border-bottom: 1px solid rgba(37, 99, 235, 0.22); }

.pk-check { color: #10b981; }
.pk-nope { color: #cbd5e1; }
:root[class~="dark"] .pk-nope, .dark .pk-nope { color: #475569; }

.pk-badge-top {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: #2563eb;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Sección 3: armá el tuyo ────────────────────────────────────────────── */

.pk-paso-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.875rem;
  background: linear-gradient(135deg, #3c52bb, #26a2d0);
  color: #fff;
  font-weight: 800;
  flex-shrink: 0;
}


/* El ancla del comparador no puede quedar debajo del navbar fijo al saltar. */
.pk-comparador { scroll-margin-top: 9rem; }

/* ══ Selector de público — botones-tarjeta que guían por tipo de persona ══
 * Compactos y centrados a propósito: la v1 eran pastillas chicas (no guiaban),
 * la v2 botones de 333x114px que le robaban el protagonismo al contenido (el
 * destacado con su precio), que es lo principal de la página. El punto medio:
 * badge de icono grande + nombre + contador, ~200px de ancho y ~64px de alto,
 * con el MISMO eje centrado que el encabezado. El titular del público vive en
 * el contenido (h2 de contexto / tarjeta de portada), no en el botón. El activo
 * NO cambia de caja (relleno + anillo) para que el H1 no se mueva al filtrar. */

.pk-filtro {
  position: relative;
  z-index: 5;
  margin-top: 1.5rem;
}
.pk-filtro-label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}
html.dark .pk-filtro-label { color: rgba(226, 232, 240, 0.62); }
/* Tracks acotados (180-220px) + justify-content center: los botones quedan
 * compactos y centrados en vez de repartirse todo el ancho del banner (antes
 * 1fr en 1024px -> 333px cada uno). Con auto-fit nunca se estiran de 220px. */
.pk-filtro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  justify-content: center;
  gap: 0.75rem;
  align-items: stretch;
}
.pk-filtro-chip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  border-radius: 1rem;
  min-height: 64px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.pk-filtro-chip:hover { background: rgba(255, 255, 255, 0.24); }
/* Activo: relleno claro + anillo azul. NO cambia padding ni min-height ni
 * border-radius: cualquier cambio de caja mueve el layout y rompe el criterio
 * de "el h1 no se mueve al filtrar" (medido con Playwright). */
.pk-filtro-chip.is-active {
  background: #ffffff;
  color: #0f172a;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
}
.pk-filtro-badge {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #3c52bb, #26a2d0);
  color: #fff;
}
.pk-filtro-badge svg { width: 18px; height: 18px; }
/* "Todos" no es un tipo de persona: es la vuelta a la portada. Misma caja
 * (la grilla lo estira igual que a los demás) pero secundario, sin gradiente. */
.pk-filtro-todos .pk-filtro-badge {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.72);
}
/* Activo: el chip se rellena de blanco, así que el badge translúcido blanco del
 * estado inactivo quedaba invisible (blanco sobre blanco). Mismo criterio que
 * el texto activo (#0f172a): icono y fondo OSCUROS sobre el chip blanco. El
 * chip sigue sin gradiente de marca (es la vuelta a la portada, no una persona),
 * pero visible. El chip activo es blanco en ambos temas, así que no hay
 * variante oscura aparte. */
.pk-filtro-chip.is-active.pk-filtro-todos .pk-filtro-badge {
  background: rgba(15, 23, 42, 0.07);
  color: rgba(15, 23, 42, 0.65);
}
.pk-filtro-chip.is-active .pk-filtro-badge { box-shadow: none; }
.pk-filtro-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.pk-filtro-nombre {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  color: inherit;
}
.pk-filtro-contador {
  margin-top: 0.15rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.7;
}
/* Móvil: 2 columnas, más compacto aún (el banner no puede comerse el pliegue). */
@media (max-width: 639px) {
  .pk-filtro-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
  .pk-filtro-chip {
    min-height: 56px;
    padding: 0.55rem 0.7rem;
    gap: 0.6rem;
  }
  .pk-filtro-badge {
    width: 30px;
    height: 30px;
    border-radius: 0.6rem;
  }
  .pk-filtro-badge svg { width: 16px; height: 16px; }
  .pk-filtro-nombre { font-size: 0.85rem; }
}

/* Banner de cada público */
.pk-grupo-banner {
  text-align: center;
  padding: 3.5rem 1.25rem 2.5rem;
  border-bottom: 1px solid #e2e8f0;
}
html.dark .pk-grupo-banner { border-bottom-color: #1e293b; }
.pk-grupo-banner .pk-chip { margin-bottom: 0.75rem; }
.pk-grupo-titulo {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}
.pk-grupo-bajada {
  max-width: 42rem;
  margin: 0 auto;
  color: #64748b;
  font-size: 1.05rem;
}
html.dark .pk-grupo-bajada { color: #94a3b8; }

/* Entrada suave al cambiar de público sin recargar (navegación incremental).
 * Se anima la LISTA (#kits-lista), la única región que cambia al filtrar. */
@keyframes kits-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
#kits-lista.kits-entra { animation: kits-fade-in 0.22s ease; }

/* ══ Estado "Todos" — el comparador integrado de todos los kits ══
 * La lista de kits ES el selector: cada ficha tiene su casilla de comparar y
 * con 2-3 marcadas se arma la tabla debajo. Agrupado por público (comparar
 * kits de públicos distintos no tiene sentido: no comparten productos). */

/* ══ Contexto de la vista de público (h2 + frase, arriba de #kits-lista) ══ */

.pk-contexto-titulo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pk-tinta);
}
.pk-contexto-frase {
  margin-top: 0.4rem;
  max-width: 40rem;
  color: var(--pk-tinta-suave);
  font-size: 0.9375rem;
}
.pk-contexto-titulo + .pk-destacado { margin-top: 1.5rem; }

/* ── Comparador integrado del estado "Todos" ────────────────────────────────
 * Las fichas son el selector: casilla de comparar + nombre + precio + ahorro +
 * botón. El grupo (público) va encabezado por su nombre, que enlaza a su vista. */

.pk-todos { padding: 2.5rem 0 2rem; }
.pk-todos-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .pk-todos-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .pk-todos-inner { padding-left: 2rem; padding-right: 2rem; }
}
.pk-todos-titulo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pk-tinta);
}
.pk-todos-bajada {
  margin-top: 0.4rem;
  max-width: 40rem;
  color: var(--pk-tinta-suave);
  font-size: 0.9375rem;
}

.kc-grupo { margin-top: 2rem; }
.kc-grupo-titulo {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pk-tinta-suave);
  margin: 0 0 0.75rem;
}
.kc-grupo-titulo a {
  color: inherit;
  text-decoration: none;
}
.kc-grupo-titulo a:hover { color: #2563eb; }

.kc-fichas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
}
.kc-ficha {
  scroll-margin-top: 6rem;
  background: var(--pk-superficie);
  border: 1px solid var(--pk-borde);
  box-shadow: var(--pk-sombra);
  border-radius: 1rem;
  padding: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
}
.kc-ficha.es-estrella { border-color: var(--pk-dinero-suave-borde); }
.kc-ficha-compare {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pk-tinta-suave);
  cursor: pointer;
}
.kc-ficha-compare input { accent-color: #2563eb; width: 1rem; height: 1rem; }
.kc-ficha-nombre {
  font-size: 1rem;
  font-weight: 800;
  color: var(--pk-tinta);
  line-height: 1.2;
  padding-right: 5.5rem;
}
.kc-ficha-chip {
  align-self: flex-start;
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: var(--pk-dinero-suave-fondo);
  border: 1px solid var(--pk-dinero-suave-borde);
  color: var(--pk-dinero);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html.dark .kc-ficha-chip { color: #6ef0a6; }
.kc-ficha-precio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.5rem;
  margin-top: auto;
}
.kc-ficha-precio-grande {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--pk-precio-color);
  letter-spacing: -0.01em;
}
.kc-ficha-antes { font-size: 0.75rem; color: var(--pk-tinta-suave); text-decoration: line-through; }
.kc-ficha .pk-cta { padding: 0.625rem 1rem; font-size: 0.8125rem; }
.kc-ficha-bloq { opacity: 0.45; }
.kc-ficha-bloq .kc-ficha-compare { cursor: not-allowed; }
.kc-ficha-bloq .kc-ficha-compare input { cursor: not-allowed; }

/* Aviso del límite (3) y zona de salida de la tabla. */
.kc-limit {
  margin: 1.5rem 0 0;
  text-align: center;
  color: #d97706;
  font-size: 0.8125rem;
  font-weight: 600;
}
.kc-out { margin-top: 2.5rem; }
.kc-empty {
  text-align: center;
  color: #64748b;
  padding: 3rem 1rem;
  border: 2px dashed #cbd5e1;
  border-radius: 1rem;
}
html.dark .kc-empty { color: #94a3b8; border-color: #334155; }