/* ══════════════════════════════════════════════════════════════════════════
   DISEÑO ÚNICO · ZONA PAGOS, PLANES Y CURSOS (Guille, 09/11/2026)

   Las piezas comunes están en pbc-kit.css (pbc-k-*); aquí solo lo propio de
   esta zona, con las mismas reglas:
   · Solo se carga con el interruptor DISENO_UNICO y TODO va dentro de `.pbc-du`
     (la clase que la plantilla pone en <body>): apagado, nada de aquí existe.
   · Ni un color escrito a mano: todo sale de pbc-design-tokens.css (lo vigila
     mainmodule/tests/test_diseno_unico_pagos.py).
   · Fondo blanco, tarjetas blancas con línea fina, letra PBC Sans 400/700,
     texto 17, títulos 24-30, iconos de línea. Amarillo = pagar.
   · Mismas pantallas, mismo orden, mismos botones: solo cambia el aspecto.

   Índice
     1. Planes del móvil (mplanes.html) y sus desplegables (plan_offer_banner).
     2. Planes de la web (payment/plans.html). Esa página trae su propio
        <style> DENTRO del cuerpo (gana por ir después), así que aquí todo va
        con `.pbc-du .plans-v2` delante para pesar más sin `!important`; solo
        la ventanita de la clase suelta, que va con estilos en línea, lo usa.
     3. Por qué has cancelado (plan-cancel-feedback.html).
     4. Pago dentro de PBC (payment/pay.html).
     5. Gracias tras pagar (payment/thanks.html) y su regalo.
     6. Tus créditos (payment/credit_balance.html).
     7. Tarjeta regalo (gift_card/*).
     8. Página del curso (courses/landing.html).
     9. Cursos en Clases, Planes y la lista (courses/_block, _card, list).
    10. Pasos del curso: teléfono, espera, opinión y cuaderno (y el teléfono
        antes de la clase de 10 €).
    11. Tras la clase de 10 €: regalo y recuperar la clase.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1 · PLANES DEL MÓVIL (mplanes.html) ─────────────────────────────────── */

/* Fondo blanco y la letra de la casa. La cabecera azul con curva no se toca.
   El fondo de <body> solo en ESTA página (:has): la hoja también la trae el
   bloque de cursos dentro de Clases, que tiene su propio fondo. */
body.pbc-du:has(.pbc-planes-phone) { background: hsl(var(--pbc-surface)); }
.pbc-du .pbc-planes-phone {
  background: hsl(var(--pbc-surface));
  box-shadow: none;
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
}
.pbc-du .pbc-planes-phone button,
.pbc-du .pbc-planes-phone input,
.pbc-du .pbc-planes-phone summary { font-family: inherit; }
/* Sin mascotas en pantallas de alumnos (Guille, 08/11/2026). */
.pbc-du .pbc-planes-mascot { display: none !important; }
.pbc-du .pbc-planes-main { gap: 18px; padding: 18px 16px 42px; }

/* El botón grande de arriba (la clase de 10 € o "Ver clases"): margen propio. */
.pbc-du .pbc-planes-main > .pbc-planes-seeclasses { margin: 0; }

/* "Planes de clases": una fila blanca como la maqueta (cuadrito de icono,
   título, subtítulo y flecha), igual que en Clases. */
.pbc-du .pbc-planes-fold {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
.pbc-du .pbc-planes-fold > summary {
  min-height: 76px;
  gap: 14px;
  padding: 0 16px;
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-planes-fold > summary:focus-visible { outline: 3px solid hsl(var(--pbc-blue) / .45); outline-offset: -3px; }
.pbc-du .pbc-planes-foldicon {
  width: 44px;
  height: 44px;
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue));
}
.pbc-du .pbc-planes-foldicon svg { width: 22px; height: 22px; }
.pbc-du .pbc-planes-foldlabel { font-size: var(--pbc-size-body); letter-spacing: -.2px; }
.pbc-du .pbc-planes-foldlabel small {
  margin-top: 2px;
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
}
.pbc-du .pbc-planes-foldchev { color: hsl(var(--pbc-muted)); }
.pbc-du .pbc-planes-fold[open] > summary { border-bottom: 1px solid hsl(var(--pbc-line-soft)); }
.pbc-du .pbc-planes-foldbody { gap: 14px; padding: 16px 14px; }

/* Cada plan: tarjeta blanca con línea fina. El recomendado con el borde azul;
   el que ya tienes, en verde suave. */
.pbc-du .pbc-planes-card {
  padding: 18px;
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
.pbc-du .pbc-planes-card--recommended {
  margin-top: 0;
  padding-top: 18px;
  border: 2px solid hsl(var(--pbc-blue));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .1);
}
.pbc-du .pbc-planes-card--current {
  border: 2px solid hsl(var(--pbc-green) / .45);
  background: hsl(var(--pbc-green-soft));
}
/* "Recomendado" y "Tu plan actual": píldoras dentro de la tarjeta (no flotando
   encima del borde), como las etiquetas de estado del kit. */
.pbc-du .pbc-planes-ribbon {
  position: static;
  display: inline-flex;
  min-height: 0;
  margin: 0 0 12px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: 0;
  text-transform: none;
  transform: none;
}
.pbc-du .pbc-planes-current-tag {
  margin-bottom: 12px;
  padding: 6px 12px;
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-green));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-planes-current-dot { background: hsl(var(--pbc-green)); box-shadow: none; }
.pbc-du .pbc-planes-card-title {
  font-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.5px;
}
.pbc-du .pbc-planes-classes {
  margin-top: 6px;
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
  line-height: 1.35;
}
.pbc-du .pbc-planes-price { color: hsl(var(--pbc-ink)); }
.pbc-du .pbc-planes-price-number {
  font-size: var(--pbc-size-title-l);
  font-weight: var(--pbc-weight-bold);
  line-height: 1;
  letter-spacing: -.8px;
}
.pbc-du .pbc-planes-price-period {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-regular);
}
.pbc-du .pbc-planes-card .pbc-precio-antes {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
}
/* "x € por clase" y "Pagas 10 meses, tienes 12": píldoras suaves. */
.pbc-du .pbc-planes-card .pbc-perclass-chip,
.pbc-du .pbc-planes-card .pbc-anual-chip {
  margin: 12px 6px 0 0;
  padding: 5px 11px;
  border-radius: 999px;
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-planes-card .pbc-anual-chip { background: hsl(var(--pbc-gold-soft)); color: hsl(var(--pbc-gold-ink)); }
.pbc-du .pbc-planes-pending {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}

/* Botones de cada plan: el que se hunde. Comprar, subir y volver a comprar
   son PAGAR (amarillo); bajar y deshacer la bajada no cobran (blanco con
   borde); el plan activo en la app de Apple, gris. */
.pbc-du .pbc-planes-button {
  --k-bg: hsl(var(--pbc-gold));
  --k-ink: hsl(var(--pbc-ink));
  --k-edge: hsl(var(--pbc-gold-dark));
  --k-line: hsl(var(--pbc-gold));
  --k-drop: 4px;
  position: relative;
  min-height: 54px;
  margin-top: 16px;
  padding: 10px 18px;
  border: 2px solid var(--k-line);
  border-radius: var(--pbc-radius-button);
  background: var(--k-bg);
  color: var(--k-ink);
  box-shadow: 0 var(--k-drop) 0 var(--k-edge);
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.2;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, box-shadow .08s ease;
}
.pbc-du .pbc-planes-button:hover,
.pbc-du .pbc-planes-button:focus { background: var(--k-bg); color: var(--k-ink); text-decoration: none; }
.pbc-du .pbc-planes-button:active {
  background: var(--k-bg);
  box-shadow: 0 1px 0 var(--k-edge);
  transform: translateY(3px);
}
.pbc-du .pbc-planes-button:focus-visible { outline: 3px solid hsl(var(--pbc-blue) / .45); outline-offset: 3px; }
.pbc-du .pbc-planes-button--soft,
.pbc-du .pbc-planes-button--keep {
  --k-bg: hsl(var(--pbc-surface));
  --k-ink: hsl(var(--pbc-ink));
  --k-edge: hsl(var(--pbc-line));
  --k-line: hsl(var(--pbc-line));
  --k-drop: 3px;
}
.pbc-du .pbc-planes-button--current,
.pbc-du .pbc-planes-button[disabled] {
  --k-bg: hsl(var(--pbc-line-soft));
  --k-ink: hsl(var(--pbc-ink-soft));
  --k-edge: transparent;
  --k-line: hsl(var(--pbc-line-soft));
  --k-drop: 0px;
  opacity: 1;
  cursor: default;
  transform: none;
}
/* Mientras se paga ("Un momento"), el botón sigue amarillo pero quieto. */
.pbc-du .pbc-planes-button[disabled]:not(.pbc-planes-button--current) {
  --k-bg: hsl(var(--pbc-gold-soft));
  --k-ink: hsl(var(--pbc-gold-ink));
}
/* La letra pequeña de cada botón: cuándo se cobra y cuándo entra. */
.pbc-du .pbc-planes-small {
  margin: 10px 2px 0;
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
}

/* Clase suelta: el contador con botones redondos grandes. */
.pbc-du .pbc-planes-topupqty { margin: 14px 0 0; }
.pbc-du .pbc-planes-qtybtn {
  width: 48px;
  height: 48px;
  border: 2px solid hsl(var(--pbc-line));
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  font-size: var(--pbc-size-title-s);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-planes-qtybtn:disabled { opacity: .4; box-shadow: none; }
.pbc-du .pbc-planes-qtynum {
  min-height: 48px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-title-s);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-planes-qtynum:focus { border-color: hsl(var(--pbc-blue)); outline: none; }

/* La nota del final (cambiar de plan al acabar el periodo). */
.pbc-du .pbc-planes-note {
  align-items: center;
  margin: 0 2px;
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
}
.pbc-du .pbc-planes-shield {
  width: 36px;
  height: 36px;
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-green-soft));
  color: hsl(var(--pbc-green));
}

/* Desplegables de la oferta, las ventajas, los extras y la garantía
   (includes/plan_offer_banner.html): mismas piezas, letra más grande. */
.pbc-du .pbc-planes-phone .pbc-plegable > summary { font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-planes-phone .pbc-plegable-cuerpo {
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
  line-height: 1.45;
}
.pbc-du .pbc-planes-phone .pbc-oferta {
  border: 1px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-gold-soft));
  color: hsl(var(--pbc-gold-ink));
}
.pbc-du .pbc-planes-phone .pbc-oferta .pbc-plegable-cuerpo,
.pbc-du .pbc-planes-phone .pbc-oferta-reloj { color: hsl(var(--pbc-gold-ink)); }
.pbc-du .pbc-planes-phone .pbc-extras {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-ink));
}
.pbc-du .pbc-planes-phone .pbc-extras li { color: hsl(var(--pbc-ink)); }
.pbc-du .pbc-planes-phone .pbc-extras-nota { font-size: var(--pbc-size-small); }
.pbc-du .pbc-planes-phone .pbc-incluye > summary,
.pbc-du .pbc-planes-phone .pbc-incluye-mas > summary { color: hsl(var(--pbc-blue-dark)); font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-planes-phone .pbc-incluye li { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); }
.pbc-du .pbc-planes-phone .pbc-garantia { color: hsl(var(--pbc-green)); }
.pbc-du .pbc-planes-phone .pbc-garantia > summary {
  align-self: center;
  width: fit-content;
  margin: 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: hsl(var(--pbc-green-soft));
  font-size: var(--pbc-size-small);
}
.pbc-du .pbc-planes-phone .pbc-garantia .pbc-plegable-cuerpo { padding-top: 8px; font-size: var(--pbc-size-label); }

/* ORDENADOR: nunca la columna del móvil estirada ni metida en un marco gris.
   La página entera en blanco, los planes en rejilla y lo demás a lo ancho. */
@media (min-width: 768px) {
  .pbc-du .pbc-planes-phone {
    max-width: 1120px;
    min-height: 0;
    padding: 8px 24px 0;
    overflow: visible;
  }
  .pbc-du .pbc-planes-main { gap: 22px; padding: 18px 0 56px; }
  .pbc-du .pbc-planes-main > .pbc-planes-seeclasses { max-width: 420px; }
  .pbc-du .pbc-planes-foldbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    align-items: start;
    gap: 18px;
    padding: 22px;
  }
  .pbc-du .pbc-planes-foldbody > :not(.pbc-planes-card) { grid-column: 1 / -1; }
  .pbc-du .pbc-planes-note { max-width: 760px; }
  /* Los carruseles de vídeos y profes (piezas comunes) no se estiran a todo
     lo ancho: a la medida de una columna de lectura, centrados. */
  .pbc-du .pbc-planes-main > .pbc-comu,
  .pbc-du .pbc-planes-main > .pbc-profes { width: 100%; max-width: 760px; margin-right: auto; margin-left: auto; }
}


/* ── 2 · PLANES DE LA WEB (payment/plans.html) ───────────────────────────── */

.pbc-du .plans-v2 {
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
}
.pbc-du .plans-v2 button,
.pbc-du .plans-v2 input,
.pbc-du .plans-v2 summary { font-family: inherit; }

/* Cabecera: etiqueta en píldora, título 30-34 en tinta y subtítulo a 17. */
.pbc-du .plans-v2 .plans-hero { padding: 40px 0 24px; }
.pbc-du .plans-v2 .plans-hero .badge {
  padding: 6px 12px;
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: 0;
  text-transform: none;
}
.pbc-du .plans-v2 .plans-hero h1 {
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-title-l);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.15;
  letter-spacing: -.8px;
}
@media (min-width: 768px) {
  .pbc-du .plans-v2 .plans-hero h1 { font-size: 34px; }
}
.pbc-du .plans-v2 .plans-hero .subtitle {
  color: hsl(var(--pbc-ink-soft));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
  line-height: 1.45;
}

/* "Cómo van los créditos": tarjeta blanca con línea fina; los números en
   círculos azules (el morado no es de la paleta). */
.pbc-du .plans-v2 .credits-info-bar .inner {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
.pbc-du .plans-v2 .credits-info-bar .label {
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .plans-v2 .credits-info-bar .credit-item {
  color: hsl(var(--pbc-ink-soft));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
}
.pbc-du .plans-v2 .credits-info-bar .credit-num {
  width: 26px;
  height: 26px;
  background: hsl(var(--pbc-blue)) !important; /* el número trae su color en línea */
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-small);
}

/* Tu plan activo: tarjeta verde suave; "Cancelar plan" es el botón de
   cancelar del kit (blanco con la letra roja), no un botón rojo macizo. */
.pbc-du .plans-v2 .active-sub-card {
  padding: 18px;
  border: 2px solid hsl(var(--pbc-green) / .45);
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-green-soft));
}
.pbc-du .plans-v2 .active-sub-card .plan-name {
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .plans-v2 .active-sub-card .plan-date,
.pbc-du .plans-v2 .active-sub-card .plan-grandfathered,
.pbc-du .plans-v2 .active-sub-card .plan-pending-change {
  margin-top: 4px;
  color: hsl(var(--pbc-ink-soft));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
}
.pbc-du .plans-v2 .active-sub-card .plan-pending-change { color: hsl(var(--pbc-blue-dark)); font-weight: var(--pbc-weight-bold); }
.pbc-du .plans-v2 .cancel-subscription-btn {
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid hsl(var(--pbc-red) / .3);
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-red-dark));
  box-shadow: 0 3px 0 hsl(var(--pbc-red) / .3);
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  transition: transform .08s ease, box-shadow .08s ease;
}
.pbc-du .plans-v2 .cancel-subscription-btn:hover { background: hsl(var(--pbc-red-soft)); }
.pbc-du .plans-v2 .cancel-subscription-btn:active { box-shadow: 0 1px 0 hsl(var(--pbc-red) / .3); transform: translateY(2px); }

/* "Comunidad y extras": la línea con el rótulo, en gris suave. */
.pbc-du .plans-v2 .plans-divider .line { background: hsl(var(--pbc-line-soft)); }
.pbc-du .plans-v2 .plans-divider span {
  color: hsl(var(--pbc-muted));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: 0;
  text-transform: none;
}

/* Cada plan: tarjeta blanca con línea fina; el más elegido con el borde azul
   y la oferta anual con el borde amarillo. Sin la barrita de color de arriba. */
.pbc-du .plans-v2 .plan-card-v2 {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
  transform: none;
}
.pbc-du .plans-v2 .plan-card-v2:hover { box-shadow: 0 6px 18px hsl(var(--pbc-shadow) / .1); transform: none; }
.pbc-du .plans-v2 .plan-card-v2.featured,
.pbc-du .plans-v2 .plan-card-v2.featured:hover { border: 2px solid hsl(var(--pbc-blue)); }
.pbc-du .plans-v2 .plan-card-v2.special-offer { border: 2px solid hsl(var(--pbc-gold)); }
.pbc-du .plans-v2 .plan-card-v2 .accent-bar { display: none; }
.pbc-du .plans-v2 .plan-card-v2 .card-body { padding: 20px; }
.pbc-du .plans-v2 .plan-card-v2 .popular-badge {
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: 0;
  text-transform: none;
}
.pbc-du .plans-v2 .plan-card-v2 .popular-badge.blue { background: hsl(var(--pbc-blue-soft)); color: hsl(var(--pbc-blue-dark)); }
.pbc-du .plans-v2 .plan-card-v2 .popular-badge.yellow { background: hsl(var(--pbc-gold-soft)); color: hsl(var(--pbc-gold-ink)); }
.pbc-du .plans-v2 .plan-card-v2 .plan-name {
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.5px;
}
.pbc-du .plans-v2 .plan-card-v2 .plan-type {
  color: hsl(var(--pbc-muted));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
  letter-spacing: 0;
  text-transform: none;
}
.pbc-du .plans-v2 .plan-card-v2 .price-amount {
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-title-l);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.8px;
}
.pbc-du .plans-v2 .plan-card-v2 .price-period {
  color: hsl(var(--pbc-muted));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
}
.pbc-du .plans-v2 .plan-card-v2 .pbc-precio-antes { color: hsl(var(--pbc-muted)); font-weight: var(--pbc-weight-regular); }
.pbc-du .plans-v2 .plan-card-v2 .credits-pill {
  border-radius: 999px;
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
}
.pbc-du .plans-v2 .plan-card-v2 .credits-pill span { font-family: var(--pbc-font); }
.pbc-du .plans-v2 .plan-card-v2 .pbc-perclass-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  width: auto;
  padding: 5px 11px;
  border-radius: 999px;
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .plans-v2 .plan-card-v2 .pbc-perclass-chip .pbc-ico { display: inline-block; margin: 0; }
.pbc-du .plans-v2 .plan-card-v2 .grandfathered {
  color: hsl(var(--pbc-ink-soft));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
}

/* Botones de cada plan: el que se hunde. Apuntarse, comprar, subir y renovar
   son PAGAR (amarillo); bajar de plan y quedarse con el suyo no cobran
   (blanco con borde). */
.pbc-du .plans-v2 .plan-card-v2 .subscribe-btn,
.pbc-du .plans-v2 .plan-card-v2.featured .subscribe-btn {
  --k-bg: hsl(var(--pbc-gold));
  --k-ink: hsl(var(--pbc-ink));
  --k-edge: hsl(var(--pbc-gold-dark));
  --k-line: hsl(var(--pbc-gold));
  --k-drop: 4px;
  min-height: 54px;
  padding: 10px 18px;
  border: 2px solid var(--k-line);
  border-radius: var(--pbc-radius-button);
  background: var(--k-bg);
  color: var(--k-ink);
  box-shadow: 0 var(--k-drop) 0 var(--k-edge);
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: 0;
  text-transform: none;
  transform: none;
  transition: transform .08s ease, box-shadow .08s ease;
}
.pbc-du .plans-v2 .plan-card-v2 .subscribe-btn:hover,
.pbc-du .plans-v2 .plan-card-v2.featured .subscribe-btn:hover { background: var(--k-bg); color: var(--k-ink); transform: none; }
.pbc-du .plans-v2 .plan-card-v2 .subscribe-btn:active,
.pbc-du .plans-v2 .plan-card-v2.featured .subscribe-btn:active { box-shadow: 0 1px 0 var(--k-edge); transform: translateY(3px); }
.pbc-du .plans-v2 .plan-card-v2 .subscribe-btn:focus-visible { outline: 3px solid hsl(var(--pbc-blue) / .45); outline-offset: 3px; }
.pbc-du .plans-v2 .plan-card-v2 .subscribe-btn[data-change-kind="downgrade"],
.pbc-du .plans-v2 .plan-card-v2 .subscribe-btn[data-change-kind="keep"] {
  --k-bg: hsl(var(--pbc-surface));
  --k-ink: hsl(var(--pbc-ink));
  --k-edge: hsl(var(--pbc-line));
  --k-line: hsl(var(--pbc-line));
  --k-drop: 3px;
}
.pbc-du .plans-v2 .plan-card-v2 .subscribe-btn[disabled] { --k-drop: 0px; opacity: .7; transform: none; }
/* Klarna: secundario, blanco con borde. */
.pbc-du .plans-v2 .pbc-klarna-chip {
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  font-family: var(--pbc-font);
}
.pbc-du .plans-v2 .pbc-klarna-chip:hover { background: hsl(var(--pbc-page)); }
.pbc-du .plans-v2 .pbc-klarna-chip small { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-small); }

/* Desplegables de oferta, ventajas, extras y garantía (plan_offer_banner,
   versión ancha de la web): mismas piezas que en el móvil. */
.pbc-du .plans-v2 .pbc-plegable--ancho > summary { font-family: var(--pbc-font); font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
.pbc-du .plans-v2 .pbc-plegable--ancho .pbc-plegable-cuerpo {
  color: hsl(var(--pbc-ink-soft));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
}
.pbc-du .plans-v2 .pbc-oferta {
  border: 1px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-gold-soft));
  color: hsl(var(--pbc-gold-ink));
}
.pbc-du .plans-v2 .pbc-oferta .pbc-plegable-cuerpo,
.pbc-du .plans-v2 .pbc-oferta-reloj { color: hsl(var(--pbc-gold-ink)); }
.pbc-du .plans-v2 .pbc-extras {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-ink));
}
.pbc-du .plans-v2 .pbc-incluye > summary,
.pbc-du .plans-v2 .pbc-incluye-mas > summary { color: hsl(var(--pbc-blue-dark)); }
.pbc-du .plans-v2 .pbc-garantia { color: hsl(var(--pbc-green)); }
.pbc-du .plans-v2 .pbc-garantia > summary {
  width: fit-content;
  margin: 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: hsl(var(--pbc-green-soft));
  font-size: var(--pbc-size-small);
}

/* La ventanita de la clase suelta (estilos en línea con la letra vieja):
   letra de la casa, contador con botones redondos e "Ir a pagar" amarillo. */
.pbc-du #topupModal h3,
.pbc-du #topupModal p,
.pbc-du #topupModal label,
.pbc-du #topupModal input,
.pbc-du #topupModal button { font-family: var(--pbc-font) !important; }
.pbc-du #topupModal h3 { color: hsl(var(--pbc-ink)) !important; font-weight: var(--pbc-weight-bold); }
.pbc-du #topupModal > div { border-radius: var(--pbc-radius-card) !important; }
.pbc-du #decreaseQty,
.pbc-du #increaseQty {
  border: 2px solid hsl(var(--pbc-line)) !important;
  background: hsl(var(--pbc-surface)) !important;
  color: hsl(var(--pbc-ink)) !important;
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}
.pbc-du #topupQuantity { border: 2px solid hsl(var(--pbc-line)) !important; border-radius: var(--pbc-radius-field) !important; }
.pbc-du #cancelTopup,
.pbc-du #confirmTopup {
  min-height: 54px;
  border-radius: var(--pbc-radius-button) !important;
  font-size: var(--pbc-size-body) !important;
  font-weight: var(--pbc-weight-bold);
}
.pbc-du #cancelTopup {
  border: 2px solid hsl(var(--pbc-line)) !important;
  background: hsl(var(--pbc-surface)) !important;
  color: hsl(var(--pbc-ink)) !important;
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}
.pbc-du #confirmTopup {
  border: 2px solid hsl(var(--pbc-gold)) !important;
  background: hsl(var(--pbc-gold)) !important;
  color: hsl(var(--pbc-ink)) !important;
  box-shadow: 0 4px 0 hsl(var(--pbc-gold-dark));
}
.pbc-du #cancelTopup:active,
.pbc-du #confirmTopup:active { transform: translateY(3px); box-shadow: none; }


/* ── 3 · POR QUÉ HAS CANCELADO (plan-cancel-feedback.html) ───────────────── */

.pbc-du .pcf-wrap { color: hsl(var(--pbc-ink)); font-family: var(--pbc-font); }
.pbc-du .pcf-wrap button,
.pbc-du .pcf-wrap textarea { font-family: inherit; }
/* El cuadrito de arriba: icono de línea sobre azul suave (antes, emoji). */
.pbc-du .pcf-badge {
  width: 64px;
  height: 64px;
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue));
  box-shadow: none;
}
.pbc-du .pcf-badge .pbc-k-ico { width: 30px; height: 30px; }
.pbc-du .pcf-title {
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-l);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.6px;
}
.pbc-du .pcf-sub { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-body); line-height: 1.45; }
.pbc-du .pcf-private {
  gap: 6px;
  padding: 6px 12px;
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pcf-private .pbc-k-ico { width: 16px; height: 16px; }
.pbc-du .pcf-card {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
.pbc-du .pcf-q { color: hsl(var(--pbc-ink)); font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
/* Cada motivo: ficha blanca con borde de 2 px; la elegida, en azul. */
.pbc-du .pcf-opt {
  min-height: 52px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-regular);
}
.pbc-du .pcf-opt input { width: 20px; height: 20px; accent-color: hsl(var(--pbc-blue)); }
.pbc-du .pcf-opt.on {
  border-color: hsl(var(--pbc-blue));
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pcf-comment { min-height: 96px; }
/* "Enviar" es el botón azul que se hunde (pbc-k-btn); aquí solo el hueco. */
.pbc-du .pcf-submit.pbc-k-btn { margin-top: 4px; }
.pbc-du .pcf-error {
  border: 1px solid hsl(var(--pbc-red) / .3);
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-red-soft));
  color: hsl(var(--pbc-red-dark));
  font-size: var(--pbc-size-label);
}
.pbc-du .pcf-back {
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}


/* ── 4 · PAGO DENTRO DE PBC (payment/pay.html) ───────────────────────────── */

/* Fondo blanco y la tarjeta con línea fina; "Pagar" es el botón amarillo
   que se hunde (pbc-k-btn pbc-k-btn--pay en la plantilla). El cuadro de
   Stripe no se toca. */
body.pbc-du .pbc-pay { padding-top: max(18px, env(safe-area-inset-top)); }
body.pbc-du:has(.pbc-pay) { background: hsl(var(--pbc-surface)); }
.pbc-du .pbc-pay__back {
  min-height: 44px;
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-pay__card {
  padding: 22px 18px;
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
.pbc-du .pbc-pay__title { font-size: var(--pbc-size-title-m); letter-spacing: -.4px; }
.pbc-du .pbc-pay__plan { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-body); }
.pbc-du .pbc-pay__summary { border-radius: var(--pbc-radius-field); }
.pbc-du .pbc-pay__row { font-size: var(--pbc-size-label); }
.pbc-du .pbc-pay__row--total { font-size: var(--pbc-size-title-s); }
.pbc-du .pbc-pay__then { font-size: var(--pbc-size-small); }
.pbc-du .pbc-pay__opt { min-height: 56px; border-radius: var(--pbc-radius-field); font-size: var(--pbc-size-label); }
.pbc-du .pbc-pay__code-toggle {
  min-height: 44px;
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-pay__code input,
.pbc-du .pbc-pay__email {
  min-height: 48px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  font-size: var(--pbc-size-body);
}
.pbc-du .pbc-pay__code input:focus,
.pbc-du .pbc-pay__email:focus { border-color: hsl(var(--pbc-blue)); outline: none; }
.pbc-du .pbc-pay__code button {
  min-height: 48px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-button);
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}
.pbc-du .pbc-pay__btn.pbc-k-btn .pbc-pay__spin { border-color: hsl(var(--pbc-ink) / .25); border-top-color: hsl(var(--pbc-ink)); }
.pbc-du .pbc-pay__error { font-size: var(--pbc-size-label); }
.pbc-du .pbc-pay__terms { font-size: var(--pbc-size-small); }
.pbc-du .pbc-pay__safe { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-small); }


/* ── 5 · GRACIAS TRAS PAGAR (payment/thanks.html) ────────────────────────── */

.pbc-du .pbc-gracias-card,
.pbc-du .pbc-gracias-invite {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
.pbc-du .pbc-gracias h1 { font-size: var(--pbc-size-title-l); letter-spacing: -.6px; }
.pbc-du .pbc-gracias p { font-size: var(--pbc-size-body); }
.pbc-du .pbc-gracias .pbc-gracias-next { font-size: var(--pbc-size-title-s); }
.pbc-du .pbc-gracias-invite h2 { font-size: var(--pbc-size-title-s); }
.pbc-du .pbc-gracias-invite p { font-size: var(--pbc-size-label); }
/* Las clases reservadas: filas de CLASE (azul suave, como la etiqueta). */
.pbc-du .pbc-gracias-slots-title { font-size: var(--pbc-size-label); }
.pbc-du .pbc-gracias-slot {
  padding: 12px 14px;
  border: 1px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-blue-soft));
  font-size: var(--pbc-size-label);
}
.pbc-du .pbc-gracias-slot small { color: hsl(var(--pbc-blue-dark)); font-size: var(--pbc-size-small); }
.pbc-du .pbc-gracias-card .pbc-k-btn { margin-top: 18px; }
.pbc-du .pbc-gracias-guar,
.pbc-du .pbc-gracias p.pbc-gracias-guar {
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-green-soft));
  font-size: var(--pbc-size-label);
}
/* Guardar, copiar y compartir: el secundario del kit (blanco con borde). */
.pbc-du .pbc-gracias-copy {
  min-height: 54px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  font-size: var(--pbc-size-body);
  transition: transform .08s ease, box-shadow .08s ease;
}
.pbc-du .pbc-gracias-copy:active { box-shadow: 0 1px 0 hsl(var(--pbc-line)); transform: translateY(2px); }
/* Las de App Store y Google Play se quedan negras (se reconocen así). */
.pbc-du .pbc-gracias-copy.pbc-gracias-store { box-shadow: none; }
.pbc-du .pbc-gracias .gi-goal { min-height: 72px; }
/* Las fichas de "ayuda a tu profe": la ficha del kit, del ancho de su texto
   (en rejilla los textos largos se partían a media palabra). */
.pbc-du .pbc-gracias .gi-chips .pbc-k-chip { width: auto; min-height: 48px; padding: 8px 14px; }
/* El regalo (free_class/_gift_card.html): tarjeta del kit, icono de línea. */
.pbc-du .pbc-gracias .gcard {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
  font-family: var(--pbc-font);
}
.pbc-du .pbc-gracias .gcard .gi { border-radius: var(--pbc-radius-field); background: hsl(var(--pbc-gold-soft)); }
.pbc-du .pbc-gracias .gcard .gi svg { stroke: hsl(var(--pbc-gold-ink)); }
.pbc-du .pbc-gracias .gcard .gt {
  color: hsl(var(--pbc-muted));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: 0;
  text-transform: none;
}
.pbc-du .pbc-gracias .gcard b { color: hsl(var(--pbc-ink)); font-size: var(--pbc-size-body); }
.pbc-du .pbc-gracias .gcard p { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); }
.pbc-du .pbc-gracias .gcard .gp s { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); }
.pbc-du .pbc-gracias .gcard .gp em {
  background: hsl(var(--pbc-green-soft));
  color: hsl(var(--pbc-green));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: 0;
}


/* ── 6 · TUS CRÉDITOS (payment/credit_balance.html) ──────────────────────── */

.pbc-du .pbc-du-credits { color: hsl(var(--pbc-ink)); font-family: var(--pbc-font); }
.pbc-du .pbc-du-credits h1 { color: hsl(var(--pbc-ink)); font-size: var(--pbc-size-title-l); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-du-credits .credit-balance-header p { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-body); }
.pbc-du .pbc-du-credits .credit-balance-card,
.pbc-du .pbc-du-credits .transaction-history-container {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
/* La cabecera de colores pasa a blanca: el número grande en tinta. */
.pbc-du .pbc-du-credits .credit-balance-card-header {
  border-bottom: 1px solid hsl(var(--pbc-line-soft));
  background: hsl(var(--pbc-surface));
}
.pbc-du .pbc-du-credits .credit-balance-card-header p { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); }
.pbc-du .pbc-du-credits .credit-balance-card-header .credit-balance-amount {
  color: hsl(var(--pbc-ink));
  font-size: 34px;
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-du-credits .credit-balance-card-header svg { color: hsl(var(--pbc-blue)); }
.pbc-du .pbc-du-credits .credit-balance-card-header .rounded-full { background: hsl(var(--pbc-blue-soft)); }
/* "Comprar más créditos": pagar, amarillo que se hunde. */
.pbc-du .pbc-du-credits .credit-balance-card-header a {
  min-height: 54px;
  border: 2px solid hsl(var(--pbc-gold));
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-gold));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 4px 0 hsl(var(--pbc-gold-dark));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-du-credits .credit-balance-card-header a:active { box-shadow: 0 1px 0 hsl(var(--pbc-gold-dark)); transform: translateY(3px); }
.pbc-du .pbc-du-credits h3 { color: hsl(var(--pbc-ink)); font-size: var(--pbc-size-title-s); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-du-credits .session-pricing-item { border-color: hsl(var(--pbc-line-soft)); font-size: var(--pbc-size-label); }
.pbc-du .pbc-du-credits table th { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-small); letter-spacing: 0; text-transform: none; }
.pbc-du .pbc-du-credits table td { font-size: var(--pbc-size-label); }
.pbc-du .pbc-du-credits .transaction-footer-text { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); }


/* ── 7 · TARJETA REGALO (gift_card/buy, redeem y print) ─────────────────── */

/* La página ya usaba la paleta: aquí fondo blanco, letra 17, la foto
   ENTERA (sin recortar), campos y botones del kit. La tarjeta azul con el
   bocadillo es el producto y se queda tal cual, también al imprimir. */
.pbc-du.rg-body { background: hsl(var(--pbc-surface)); font-size: var(--pbc-size-body); }
.pbc-du .rg-top a.rg-toplink { min-height: 36px; padding: 8px 14px; font-size: var(--pbc-size-label); }
.pbc-du .rg-eyebrow { font-size: var(--pbc-size-small); letter-spacing: 0; text-transform: none; }
.pbc-du .rg-hero h1 { font-size: 32px; }
.pbc-du .rg-hero p { font-size: var(--pbc-size-body); }
.pbc-du .rg-photo {
  aspect-ratio: auto;
  border-radius: var(--pbc-radius-card);
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .1);
}
.pbc-du .rg-photo img { height: auto; object-fit: initial; }
.pbc-du .rg-photo span { font-size: var(--pbc-size-small); }
.pbc-du .rg-main h2 { font-size: var(--pbc-size-title-m); letter-spacing: -.4px; }
/* Las dos tarjetas a elegir: fichas del kit (borde de 2 px, la elegida azul). */
.pbc-du .rg-opt { border-radius: var(--pbc-radius-card); }
.pbc-du .rg-opt:has(input:checked) {
  border-color: hsl(var(--pbc-blue));
  background: hsl(var(--pbc-blue-soft));
  box-shadow: 0 3px 0 hsl(var(--pbc-blue));
}
.pbc-du .rg-opt:has(input:focus-visible) { outline: 3px solid hsl(var(--pbc-blue) / .45); }
.pbc-du .rg-ico { border-radius: var(--pbc-radius-field); background: hsl(var(--pbc-blue)); }
.pbc-du .rg-opt--ten .rg-ico { background: hsl(var(--pbc-blue-dark)); }
.pbc-du .rg-opt small { font-size: var(--pbc-size-label); }
.pbc-du .rg-badge { font-size: var(--pbc-size-small); letter-spacing: 0; text-transform: none; }
.pbc-du .rg-cap { font-size: var(--pbc-size-label); }
/* Formulario: los campos del kit. */
.pbc-du .rg-box {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
.pbc-du .rg-box label { gap: 6px; font-size: var(--pbc-size-label); }
.pbc-du .rg-box input,
.pbc-du .rg-box textarea {
  min-height: 48px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-surface));
  font-size: var(--pbc-size-body);
}
.pbc-du .rg-box input:focus,
.pbc-du .rg-box textarea:focus { border-color: hsl(var(--pbc-blue)); outline: none; }
/* Botones que se hunden: "Regálala por X €" es PAGAR (amarillo); imprimir,
   canjear y elegir clase, azul; "regalar otra", secundario. */
.pbc-du .rg-btn,
.pbc-du .rg-btn2 {
  --k-bg: hsl(var(--pbc-blue));
  --k-ink: hsl(var(--pbc-on-color));
  --k-edge: hsl(var(--pbc-blue-dark));
  --k-line: hsl(var(--pbc-blue));
  --k-drop: 4px;
  min-height: 54px;
  padding: 14px 18px;
  border: 2px solid var(--k-line);
  border-radius: var(--pbc-radius-button);
  background: var(--k-bg);
  color: var(--k-ink);
  box-shadow: 0 var(--k-drop) 0 var(--k-edge);
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  transition: transform .08s ease, box-shadow .08s ease;
}
.pbc-du .rg-btn:active,
.pbc-du .rg-btn2:active { box-shadow: 0 1px 0 var(--k-edge); transform: translateY(3px); }
.pbc-du #rg-pay {
  --k-bg: hsl(var(--pbc-gold));
  --k-ink: hsl(var(--pbc-ink));
  --k-edge: hsl(var(--pbc-gold-dark));
  --k-line: hsl(var(--pbc-gold));
}
.pbc-du .rg-btn2 {
  --k-bg: hsl(var(--pbc-surface));
  --k-ink: hsl(var(--pbc-ink));
  --k-edge: hsl(var(--pbc-line));
  --k-line: hsl(var(--pbc-line));
  --k-drop: 3px;
}
.pbc-du .rg-btn:focus-visible,
.pbc-du .rg-btn2:focus-visible { outline: 3px solid hsl(var(--pbc-blue) / .45); }
.pbc-du .rg-err { border-radius: var(--pbc-radius-field); background: hsl(var(--pbc-red-soft)); color: hsl(var(--pbc-red-dark)); font-size: var(--pbc-size-label); }
.pbc-du .rg-closed { border-radius: var(--pbc-radius-field); font-size: var(--pbc-size-label); }
.pbc-du .rg-msg { border-radius: var(--pbc-radius-field); font-size: var(--pbc-size-label); }
.pbc-du .rg-ok { border-radius: var(--pbc-radius-card); background: hsl(var(--pbc-green-soft)); }
.pbc-du .rg-ok small { font-size: var(--pbc-size-label); }
.pbc-du .rg-step { border: 1px solid hsl(var(--pbc-line-soft)); border-radius: var(--pbc-radius-card); }
.pbc-du .rg-step p { font-size: var(--pbc-size-label); }
.pbc-du .rg-fine { font-size: var(--pbc-size-small); }
.pbc-du .rg-or { font-size: var(--pbc-size-label); }
/* Las banderas: dibujos, no emojis (en Windows los emojis salen como letras). */
.pbc-du .rg-flags--img { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; letter-spacing: 0; }
.pbc-du .rg-flags--img img { width: 28px; height: 28px; border-radius: 50%; }


/* ── 8 · PÁGINA DEL CURSO (courses/landing.html) ─────────────────────────── */

/* La página ya tenía nuestra letra y nuestros azules, con sus propias
   variables. Con el diseño único: siempre en claro (fondo blanco, también con
   el móvil en modo oscuro, como el resto de la app) y las variables de la
   página apuntando a la paleta única. Todo dentro de .pbc-du-curso. */
body.pbc-du.pbc-du-curso {
  --blue: hsl(var(--pbc-blue));
  --blue-dark: hsl(var(--pbc-blue-dark));
  --blue-soft: hsl(var(--pbc-blue-soft));
  --gold: hsl(var(--pbc-blue-soft));
  --gold-ink: hsl(var(--pbc-blue-dark));
  --green: hsl(var(--pbc-green));
  --green-soft: hsl(var(--pbc-green-soft));
  --red: hsl(var(--pbc-red));
  --ink: hsl(var(--pbc-ink));
  --ink-soft: hsl(var(--pbc-ink-soft));
  --muted: hsl(var(--pbc-muted));
  --line: hsl(var(--pbc-line));
  --page: hsl(var(--pbc-surface));
  --card: hsl(var(--pbc-surface));
  --on: hsl(var(--pbc-on-color));
  --shadow: 0 4px 14px hsl(var(--pbc-shadow) / .08);
  --font: var(--pbc-font);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
}
.pbc-du.pbc-du-curso header { border-bottom-color: hsl(var(--pbc-line-soft)); background: hsl(var(--pbc-surface)); }
.pbc-du.pbc-du-curso .back-cal,
.pbc-du.pbc-du-curso .shbtn {
  min-height: 40px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}
/* La etiqueta del curso: el bocadillo de CLASE (idioma · nivel explicado · grupo). */
.pbc-du.pbc-du-curso .tag {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  padding: 6px 12px;
  border-radius: var(--pbc-radius-tag);
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.3;
}
.pbc-du.pbc-du-curso .tag::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: hsl(var(--pbc-blue));
}
.pbc-du.pbc-du-curso h1 { font-size: 32px; line-height: 1.12; letter-spacing: -.6px; }
@media (min-width: 900px) { .pbc-du.pbc-du-curso h1 { font-size: 34px; } }
.pbc-du.pbc-du-curso .prog h2 { font-size: var(--pbc-size-title-l); }
.pbc-du.pbc-du-curso .whenbox { border-radius: var(--pbc-radius-field); }
/* Foto, vídeo o flyer: enteros, con el redondeo de las tarjetas. */
.pbc-du.pbc-du-curso .media video,
.pbc-du.pbc-du-curso .media .flyer { border-radius: var(--pbc-radius-card); }
.pbc-du.pbc-du-curso .media .poster { border: 1px solid hsl(var(--pbc-line-soft)); border-radius: var(--pbc-radius-card); background: hsl(var(--pbc-blue-soft)); }
/* Cursos: siempre flyer o vídeo, nunca un hueco (Guille). Sin ninguno de los
   dos, en el móvil ya no salía nada; en el ordenador salía un cuadro con la
   inicial del profe: fuera, y la columna de texto centrada. */
@media (min-width: 900px) {
  .pbc-du.pbc-du-curso .grid:has(> .media.no-video:not(.has-flyer)) { grid-template-columns: minmax(0, 760px); justify-content: center; }
  .pbc-du.pbc-du-curso .media.no-video:not(.has-flyer) { display: none; }
}
/* Tarjetas: blancas con línea fina. */
.pbc-du.pbc-du-curso .teacher,
.pbc-du.pbc-du-curso .reviews,
.pbc-du.pbc-du-curso .buy,
.pbc-du.pbc-du-curso .list li {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
}
.pbc-du.pbc-du-curso .buy { box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .08); }
.pbc-du.pbc-du-curso .seats { border-radius: var(--pbc-radius-field); font-size: var(--pbc-size-body); }
.pbc-du.pbc-du-curso .seats.few { border-color: hsl(var(--pbc-gold-dark)); background: hsl(var(--pbc-gold-soft)); }
.pbc-du.pbc-du-curso .classmates li { border-color: hsl(var(--pbc-line)); }
.pbc-du.pbc-du-curso .slot-opt { border-radius: var(--pbc-radius-field); }
.pbc-du.pbc-du-curso .slot-opt .sl,
.pbc-du.pbc-du-curso .lesson .gram b,
.pbc-du.pbc-du-curso .opt .best { letter-spacing: 0; text-transform: none; }
.pbc-du.pbc-du-curso .opt { border-radius: var(--pbc-radius-card); }
.pbc-du.pbc-du-curso .opt .best { border-radius: 999px; padding: 3px 10px; background: hsl(var(--pbc-gold-soft)); color: hsl(var(--pbc-gold-ink)); font-size: var(--pbc-size-small); }
.pbc-du.pbc-du-curso .state,
.pbc-du.pbc-du-curso .guar,
.pbc-du.pbc-du-curso .app-box,
.pbc-du.pbc-du-curso .msg { border-radius: var(--pbc-radius-field); }
.pbc-du.pbc-du-curso .form input[type=text],
.pbc-du.pbc-du-curso .form input[type=email],
.pbc-du.pbc-du-curso .form input[type=password] { min-height: 48px; border-radius: var(--pbc-radius-field); background: hsl(var(--pbc-surface)); font-size: var(--pbc-size-body); }
.pbc-du.pbc-du-curso .chip span { border-radius: 12px; background: hsl(var(--pbc-surface)); box-shadow: 0 3px 0 hsl(var(--pbc-line)); }
.pbc-du.pbc-du-curso .chip input:checked + span { box-shadow: 0 3px 0 hsl(var(--pbc-blue)); }
/* Botones que se hunden: azul para apuntarse con créditos y para ver; amarillo
   cuando se paga (reservar plaza por X €, pagar lo que falta, continuar y
   pagar); el secundario, blanco con borde. */
.pbc-du.pbc-du-curso .btn {
  --k-bg: hsl(var(--pbc-blue));
  --k-ink: hsl(var(--pbc-on-color));
  --k-edge: hsl(var(--pbc-blue-dark));
  --k-line: hsl(var(--pbc-blue));
  --k-drop: 4px;
  min-height: 56px;
  border: 2px solid var(--k-line);
  border-radius: var(--pbc-radius-button);
  background: var(--k-bg);
  color: var(--k-ink);
  box-shadow: 0 var(--k-drop) 0 var(--k-edge);
  font-size: var(--pbc-size-body);
  transition: transform .08s ease, box-shadow .08s ease;
}
.pbc-du.pbc-du-curso .btn:hover { background: var(--k-bg); color: var(--k-ink); }
.pbc-du.pbc-du-curso .btn:active { box-shadow: 0 1px 0 var(--k-edge); transform: translateY(3px); }
.pbc-du.pbc-du-curso form[data-course-confirm="top"] button.btn,
.pbc-du.pbc-du-curso form[data-course-confirm="new"]:not(#loginForm) button.btn,
.pbc-du.pbc-du-curso #openForm {
  --k-bg: hsl(var(--pbc-gold));
  --k-ink: hsl(var(--pbc-ink));
  --k-edge: hsl(var(--pbc-gold-dark));
  --k-line: hsl(var(--pbc-gold));
}
.pbc-du.pbc-du-curso .btn.alt {
  --k-bg: hsl(var(--pbc-surface));
  --k-ink: hsl(var(--pbc-ink));
  --k-edge: hsl(var(--pbc-line));
  --k-line: hsl(var(--pbc-line));
  --k-drop: 3px;
}
.pbc-du.pbc-du-curso .btn.alt:hover { background: hsl(var(--pbc-page)); }
.pbc-du.pbc-du-curso .note,
.pbc-du.pbc-du-curso .terms,
.pbc-du.pbc-du-curso .tzl { font-size: var(--pbc-size-label); }

/* Las dos ventanitas de la página del curso: "¿Te apuntas?" (Sí, me apunto
   = azul que se hunde; Volver = secundario) y la oferta del plan anual
   (pagar el anual = amarillo; Klarna = secundario). */
.pbc-du.pbc-du-curso .pbc-cc-btn { border-radius: var(--pbc-radius-button); font-size: var(--pbc-size-body); }
.pbc-du.pbc-du-curso .pbc-cc-yes {
  min-height: 58px;
  border: 2px solid hsl(var(--pbc-blue));
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-title-s);
}
.pbc-du.pbc-du-curso .pbc-cc-back {
  border: 2px solid hsl(var(--pbc-line));
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}
.pbc-du.pbc-du-curso .pbc-cc-yes:active,
.pbc-du.pbc-du-curso .pbc-cc-back:active,
.pbc-du.pbc-du-curso .ao-btn:active { box-shadow: none; transform: translateY(3px); }
.pbc-du.pbc-du-curso .ao-btn {
  min-height: 58px;
  border: 2px solid hsl(var(--pbc-gold));
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-gold));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 4px 0 hsl(var(--pbc-gold-dark));
  font-size: var(--pbc-size-title-s);
}
.pbc-du.pbc-du-curso .ao-btn.alt {
  border: 2px solid hsl(var(--pbc-line));
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  font-size: var(--pbc-size-body);
}

/* ── 9 · CURSOS EN CLASES, PLANES Y LA LISTA (courses/_block, _card, list) ─ */

/* "Cursos intensivos" > idioma > nivel: filas blancas como "Planes de clases". */
.pbc-du .pbc-curso-scope.pbc-curso-acc {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
  font-family: var(--pbc-font);
}
.pbc-du .pbc-curso-scope .pbc-curso-acchead { min-height: 64px; padding: 12px 16px; }
.pbc-du .pbc-curso-scope .pbc-curso-acctitle { font-size: var(--pbc-size-body); }
.pbc-du .pbc-curso-scope summary.pbc-curso-langhead,
.pbc-du .pbc-curso-scope .pbc-curso-lvl > .pbc-curso-lvlhead {
  min-height: 52px;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  letter-spacing: 0;
  text-transform: none;
}
/* Cada curso: tarjeta del kit. */
.pbc-du .pbc-curso-scope .pbc-curso-card {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
.pbc-du .pbc-curso-scope .pbc-curso-thumb { border-radius: var(--pbc-radius-card) var(--pbc-radius-card) 0 0; }
/* "Lleno" y "En marcha": etiqueta de estado, derecha y sin sello torcido. */
.pbc-du .pbc-curso-scope .pbc-curso-stamp {
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: hsl(var(--pbc-line-soft));
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: 0;
  text-transform: none;
  transform: none;
}
.pbc-du .pbc-curso-scope .pbc-curso-card.is-running .pbc-curso-stamp { background: hsl(var(--pbc-green-soft)); color: hsl(var(--pbc-green)); }
/* Etiquetas: el idioma y el nivel explicado en el bocadillo de CLASE; el
   regalo en amarillo suave. */
.pbc-du .pbc-curso-scope .pbc-curso-badge {
  min-height: 0;
  padding: 5px 11px;
  font-size: var(--pbc-size-small);
  letter-spacing: 0;
  text-transform: none;
}
.pbc-du .pbc-curso-scope .pbc-curso-badge--blue {
  gap: 6px;
  border-radius: var(--pbc-radius-tag);
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
}
.pbc-du .pbc-curso-scope .pbc-curso-badge--blue::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: hsl(var(--pbc-blue));
}
.pbc-du .pbc-curso-scope .pbc-curso-badge--gold { background: hsl(var(--pbc-gold-soft)); color: hsl(var(--pbc-gold-ink)); }
.pbc-du .pbc-curso-scope .pbc-curso-title { font-size: var(--pbc-size-title-s); }
.pbc-du .pbc-curso-scope .pbc-curso-teacher { font-size: var(--pbc-size-label); }
.pbc-du .pbc-curso-scope .pbc-curso-when { border-radius: var(--pbc-radius-field); }
.pbc-du .pbc-curso-scope .pbc-curso-when span,
.pbc-du .pbc-curso-scope .pbc-curso-meta { font-size: var(--pbc-size-label); }
.pbc-du .pbc-curso-scope .pbc-curso-seatstext { font-size: var(--pbc-size-label); }
.pbc-du .pbc-curso-scope .pbc-curso-seatsleft.is-few strong { color: hsl(var(--pbc-gold-ink)); }
/* "Ver el curso": el botón azul que se hunde. */
.pbc-du .pbc-curso-scope .pbc-curso-btn {
  min-height: 54px;
  border: 2px solid hsl(var(--pbc-blue));
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  transition: transform .08s ease, box-shadow .08s ease;
}
.pbc-du .pbc-curso-scope .pbc-curso-btn:hover { background: hsl(var(--pbc-blue)); }
.pbc-du .pbc-curso-scope .pbc-curso-btn:active { box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark)); transform: translateY(3px); }
.pbc-du .pbc-curso-scope .pbc-curso-btn--soft {
  border-color: hsl(var(--pbc-line));
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}
/* Copiar y compartir: iconos de línea en botones con borde. */
.pbc-du .pbc-curso-scope .pbc-sharebtn {
  width: 40px;
  height: 40px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: 12px;
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink-soft));
}
/* La lista de cursos (/courses/): título y banderas como el resto. */
.pbc-du .pbc-curso-listpage { font-family: var(--pbc-font); }
.pbc-du .pbc-curso-listpage .pbc-curso-h1 { font-size: var(--pbc-size-title-l); font-weight: var(--pbc-weight-bold); letter-spacing: -.6px; }
.pbc-du .pbc-curso-scope .pbc-curso-flagbtn {
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  font-size: var(--pbc-size-label);
}
.pbc-du .pbc-curso-scope .pbc-curso-flagbtn.is-on {
  padding: 10px 12px;
  border: 2px solid hsl(var(--pbc-blue));
  background: hsl(var(--pbc-blue-soft));
  box-shadow: 0 3px 0 hsl(var(--pbc-blue));
}
.pbc-du .pbc-curso-listpage .pbc-curso-langhead { font-size: var(--pbc-size-title-s); letter-spacing: 0; text-transform: none; }


/* ── 10 · PASOS DEL CURSO: teléfono, espera, opinión y cuaderno ──────────── */

/* El WhatsApp antes de pagar (curso y clase de 10 €) y la espera de un curso
   aplazado: fondo blanco, título 24, texto 17 y los campos del kit. La tarjeta
   y los botones salen de la sección 9 (pbc-curso-card, pbc-curso-btn). */
body.pbc-du .pbc-cphone,
body.pbc-du .pbc-cwait { font-family: var(--pbc-font); }
.pbc-du .pbc-cphone h1,
.pbc-du .pbc-cwait h1 { color: hsl(var(--pbc-ink)); font-size: var(--pbc-size-title-m); letter-spacing: -.4px; }
.pbc-du .pbc-cphone p,
.pbc-du .pbc-cwait p { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-body); }
.pbc-du .pbc-cphone select,
.pbc-du .pbc-cphone input {
  min-height: 52px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
}
.pbc-du .pbc-cphone select:focus,
.pbc-du .pbc-cphone input:focus { border-color: hsl(var(--pbc-blue)); outline: none; }
.pbc-du .pbc-cphone .err { color: hsl(var(--pbc-red-dark)); font-size: var(--pbc-size-label); }
.pbc-du .pbc-cwait .pbc-cwait-quiet { min-height: 44px; color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); }
/* Opinión del curso y cuaderno: mismas variables que la página del curso
   (sección 8), así que aquí solo lo suyo. */
.pbc-du.pbc-du-curso .back,
.pbc-du.pbc-du-curso .abs-btn,
.pbc-du.pbc-du-curso #printBtn,
.pbc-du.pbc-du-curso .ans > summary,
.pbc-du.pbc-du-curso .rv a.pg {
  min-height: 44px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}
.pbc-du.pbc-du-curso form,
.pbc-du.pbc-du-curso .ok,
.pbc-du.pbc-du-curso .rv { border-radius: var(--pbc-radius-card); }
.pbc-du.pbc-du-curso textarea { min-height: 96px; border: 2px solid hsl(var(--pbc-line)); border-radius: var(--pbc-radius-field); background: hsl(var(--pbc-surface)); }
.pbc-du.pbc-du-curso .chip { letter-spacing: 0; text-transform: none; }


/* ── 11 · TRAS LA CLASE DE 10 €: regalo y recuperar la clase ─────────────── */
/* first_class_gift.html y first_class_recover.html: con el interruptor pintan
   su propia tarjeta (pbc-du-fc); aquí solo el hueco y la letra. */
.pbc-du .pbc-du-fc { max-width: 560px; margin: 0 auto; padding: 32px 16px 48px; color: hsl(var(--pbc-ink)); font-family: var(--pbc-font); }
.pbc-du .pbc-du-fc-card { display: grid; gap: 16px; }
.pbc-du .pbc-du-fc h1 { margin: 0; font-size: var(--pbc-size-title-l); font-weight: var(--pbc-weight-bold); line-height: 1.15; letter-spacing: -.6px; }
.pbc-du .pbc-du-fc-sub { margin: 0; color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-body); line-height: 1.45; }
.pbc-du .pbc-du-fc-opt {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-page));
}
.pbc-du .pbc-du-fc-opt p { margin: 0; font-size: var(--pbc-size-body); line-height: 1.4; }
.pbc-du .pbc-du-fc-opt p.is-chosen { font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-du-fc-opt .pbc-k-status { margin-left: 6px; }