/* ══════════════════════════════════════════════════════════════════════════
   DISEÑO ÚNICO · zona INICIO (oleada 2, Guille 08-09/11/2026)

   Portada del MÓVIL (includes/mobile_home.html y sus tarjetas): «Hoy» (maqueta P02),
   «Tu siguiente paso» (P01), «Cómo funciona», confianza, «Esta semana» y «Tu semana».
   Maquetas: lienzo de la auditoría https://claude.ai/artifact/GBLGVtqJSYoMAtKsyjmnQw
   y piezas de https://claude.ai/artifact/4hhEPAoAwKMUzikVaEqBEF (P3Kit, P3Clases).

   Reglas (las mismas que pbc-kit.css, que esta hoja no toca):
   · Solo se carga con el interruptor DISENO_UNICO y todo va dentro de `.pbc-du`.
   · Ni un color escrito a mano: todo sale de pbc-design-tokens.css (lo vigila
     mainmodule/tests/test_du_inicio.py).
   · Letra PBC Sans 400/700; texto 17, nunca menos de 13 en etiquetas; títulos 24-30.
   · La cabecera azul con curva y la barra de abajo no se tocan aquí.
   ══════════════════════════════════════════════════════════════════════════ */

/* Piezas de la portada: móvil (.pbc-mhome) y ordenador con sesión (.du-desk). */
/* Fondo blanco y la letra de la casa. */
@media (max-width: 767.98px) {
  /* Solo el móvil: la portada del ordenador se queda como siempre (Guille 10/11/2026). */
  body.pbc-du.has-pbc-mhome { background: hsl(var(--pbc-surface)); }
}
.pbc-du .pbc-mhome {
  --mh-bg: hsl(var(--pbc-surface));
  background: hsl(var(--pbc-surface));
  font-family: var(--pbc-font);
}
.pbc-du .pbc-mhome-body {
  align-content: start;
  gap: 14px;
  padding-top: 4px;
}
/* Sin mascotas nunca (Guille 09/11/2026). */
.pbc-du .pbc-mhome-mascot-box,
.pbc-du .pbc-ajolote-paseo { display: none !important; }

/* ── Tarjetas: blancas, línea fina, radio 20 ─────────────────────────────── */
.pbc-du .pbc-mhome-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 .du-ini-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  color: hsl(var(--pbc-ink));
}
.pbc-du .du-ini-card p { margin: 0; }
.pbc-du .du-ini-row { display: flex; align-items: center; gap: 10px; }
.pbc-du .du-ini-between { justify-content: space-between; flex-wrap: wrap; }
.pbc-du .du-ini-center { text-align: center; }
.pbc-du .du-ini-nowrap { white-space: nowrap; }

/* ── Letra ───────────────────────────────────────────────────────────────── */
.pbc-du .du-ini-kick {
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.3;
}
.pbc-du .du-ini-t2 {
  margin: 0;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.2;
  letter-spacing: -0.4px;
}
.pbc-du .du-ini-t3 {
  margin: 0;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.3;
}
.pbc-du .du-ini-sub { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); }
.pbc-du .du-ini-small {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
  line-height: 1.4;
}
.pbc-du .du-ini-small b { color: hsl(var(--pbc-ink)); }
.pbc-du .du-ini-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
}
.pbc-du .du-ini-when b { font-size: var(--pbc-size-title-s); font-weight: var(--pbc-weight-bold); }
.pbc-du .du-ini-when span:not(.pbc-k-status) { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); }
.pbc-du .du-ini-link {
  align-self: center;
  color: hsl(var(--pbc-blue));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  text-decoration: none;
}
.pbc-du .du-ini-link:hover,
.pbc-du .du-ini-link:focus { color: hsl(var(--pbc-blue-dark)); text-decoration: underline; }

/* ── Banderas e idiomas ──────────────────────────────────────────────────── */
.pbc-du .du-ini-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pbc-du .du-ini-flag {
  width: 28px;
  height: 21px;
  border-radius: 4px;
  background-size: cover;
  box-shadow: 0 0 0 1px hsl(var(--pbc-line-soft));
}
.pbc-du .du-ini-swap { color: hsl(var(--pbc-muted)); }

/* ── Fichas (nivel, tamaño, duración; Prepárate) ─────────────────────────── */
.pbc-du .du-ini-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pbc-du .du-ini-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .du-ini-chips--line li {
  border: 1px solid hsl(var(--pbc-line));
  background: hsl(var(--pbc-surface));
}
.pbc-du .du-ini-chips .pbc-k-ico { width: 18px; height: 18px; color: hsl(var(--pbc-blue)); }

/* ── «Hoy»: cuenta atrás, quién va y Entrar ──────────────────────────────── */
.pbc-du .du-ini-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: hsl(var(--pbc-ink));
  color: hsl(var(--pbc-on-color));
}
.pbc-du .du-ini-count span { color: hsl(var(--pbc-line)); font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); }
.pbc-du .du-ini-count b { font-size: var(--pbc-size-title-m); font-weight: var(--pbc-weight-bold); white-space: nowrap; }
.pbc-du .du-ini-count b[hidden] { display: none; }
.pbc-du .du-ini-who {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  line-height: 1.4;
}
.pbc-du .du-ini-who .pbc-k-ico { color: hsl(var(--pbc-blue)); margin-top: 1px; }
.pbc-du .du-ini-who b { color: hsl(var(--pbc-ink)); }
.pbc-du .du-ini-card [hidden] { display: none !important; }
.pbc-du .du-ini-card .pbc-k-btn { margin-top: 4px; text-decoration: none; }

/* ── «Cómo funciona» ─────────────────────────────────────────────────────── */
.pbc-du .du-ini-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pbc-du .du-ini-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
  line-height: 1.35;
}
.pbc-du .du-ini-num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}

/* ── Confianza: nota de Google, clases dadas y un vídeo real ─────────────── */
.pbc-du .du-ini-google {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  text-decoration: none;
}
.pbc-du .du-ini-google b { font-size: var(--pbc-size-body); }
.pbc-du .du-ini-star { fill: hsl(var(--pbc-gold)); stroke: hsl(var(--pbc-gold-dark)); }
.pbc-du .du-ini-star * { fill: inherit; stroke: inherit; }
.pbc-du .du-ini-video { margin: 0; }
/* Entero: ancho fijo y alto natural, sin recortar ni bandas (regla 6). */
.pbc-du .du-ini-video video {
  display: block;
  width: min(100%, 240px);
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  background: hsl(var(--pbc-page));
}
.pbc-du .du-ini-video figcaption {
  margin-top: 6px;
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  text-align: center;
}
/* El saludo de la cabecera (maqueta P01/P02): la línea de debajo a 17, sin negrita. */
.pbc-du .pbc-mhome .pbc-mtop-heading p {
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-regular);
}

/* ── «Esta semana en PBC Languages» ──────────────────────────────────────── */
.pbc-du .du-ini-week { display: flex; flex-direction: column; gap: 10px; }
.pbc-du .du-ini-week > .du-ini-kick { margin: 0; padding-left: 4px; }
.pbc-du .du-ini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pbc-du .du-ini-grid > :only-child { grid-column: 1 / -1; }
.pbc-du .du-ini-mini { gap: 6px; padding: 14px; text-decoration: none; }
.pbc-du .du-ini-mini .pbc-k-tag { white-space: normal; }
.pbc-du a.du-ini-t3 { text-decoration: none; }
.pbc-du .du-ini-mini .du-ini-small { font-size: var(--pbc-size-small); }
.pbc-du .du-ini-mini .pbc-k-shield { margin-top: 4px; }
/* «Progresa más rápido» (Guille 12/11/2026): la clase de 10 € ocupa su sitio, con la fórmula PBC
   explicada (antes era una tarjetita al lado de un evento). Tarjeta ancha, aire y un solo botón. */
.pbc-du .du-ini-fast { gap: 12px; padding: 20px 18px; }
.pbc-du .du-ini-fast .du-ini-t2 { margin: 0; }
.pbc-du .du-ini-fast-p { margin: 0; color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-body); line-height: 1.4; }
.pbc-du .du-ini-fast .du-ini-steps { margin: 0; }
/* Toda la tarjeta de 10 € se toca (antes solo el título) y, al tocar, sale una ruedita:
   tarda en abrir y parecía que no pasaba nada (Guille 12/11/2026). El escudo queda por
   encima para poder abrir su explicación sin salir. */
.pbc-du .du-ini-mini { position: relative; }
.pbc-du .du-ini-mini--link a.du-ini-t3::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--pbc-radius-card);
}
.pbc-du .du-ini-mini--link .pbc-k-shield { position: relative; z-index: 2; }
.pbc-du .du-ini-mini.is-loading { pointer-events: none; opacity: .8; cursor: progress; }
.pbc-du .du-ini-mini.is-loading::after {
  content: ""; position: absolute; top: 12px; right: 12px; width: 18px; height: 18px;
  border-radius: 50%; border: 2px solid hsl(var(--pbc-line-soft));
  border-top-color: hsl(var(--pbc-blue)); animation: du-ini-spin .7s linear infinite;
}
@keyframes du-ini-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pbc-du .du-ini-mini.is-loading::after { animation-duration: 2s; } }

/* ── «Tu semana» (la agenda de siempre, con día y etiqueta de tipo) ──────── */
.pbc-du .pbc-mhome-agenda { padding: 18px; }
.pbc-du .pbc-mhome-agenda .pbc-mhome-h2 {
  max-width: none;
  font-size: var(--pbc-size-title-s);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: 0;
}
.pbc-du .pbc-mhome-agenda .pbc-mhome-sub {
  max-width: none;
  margin-top: 4px;
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-small);
}
.pbc-du .pbc-mhome-agenda-list > li + li { padding-top: 12px; border-top: 1px solid hsl(var(--pbc-line-soft)); }
.pbc-du .pbc-mhome-agenda-row { align-items: flex-start; }
.pbc-du .du-ini-day {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  padding: 6px 0;
  border-radius: 14px;
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.2;
  text-transform: capitalize;
}
.pbc-du .du-ini-day b { color: hsl(var(--pbc-ink)); font-size: var(--pbc-size-title-s); }
.pbc-du .pbc-mhome-agenda-text { gap: 4px; }
/* Nunca «…»: el texto salta de línea en vez de cortarse (regla 7). */
.pbc-du .pbc-mhome-agenda-what,
.pbc-du .pbc-mhome-agenda-sub { white-space: normal; overflow: visible; text-overflow: clip; }
.pbc-du .pbc-mhome-agenda-what { font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-mhome-agenda-sub { font-size: var(--pbc-size-label); line-height: 1.35; }

/* ── Botones de la portada con el botón que se hunde ─────────────────────── */
.pbc-du .pbc-mhome .pbc-btn-reservar,
.pbc-du .du-desk .pbc-btn-reservar,
.pbc-du .pbc-mhome .pbc-mhome-confirm-btn {
  --k-bg: hsl(var(--pbc-blue));
  --k-ink: hsl(var(--pbc-on-color));
  --k-edge: hsl(var(--pbc-blue-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  margin-top: 12px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--pbc-radius-button);
  background: var(--k-bg);
  color: var(--k-ink);
  box-shadow: 0 4px 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;
  text-decoration: none;
  animation: none;
  transition: transform .08s ease, box-shadow .08s ease;
}
.pbc-du .pbc-mhome .pbc-btn-reservar:active,
.pbc-du .du-desk .pbc-btn-reservar:active,
.pbc-du .pbc-mhome .pbc-mhome-confirm-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--k-edge); }
.pbc-du .pbc-mhome .pbc-btn-reservar--second,
.pbc-du .du-desk .pbc-btn-reservar--second {
  --k-bg: hsl(var(--pbc-surface));
  --k-ink: hsl(var(--pbc-ink));
  --k-edge: hsl(var(--pbc-line));
  border: 2px solid hsl(var(--pbc-line));
  box-shadow: 0 3px 0 var(--k-edge);
}
/* Pagar es amarillo (la clase de 10 €). */
.pbc-du .pbc-mhome [data-fc10-secondary].pbc-btn-reservar,
.pbc-du .du-desk [data-fc10-secondary].pbc-btn-reservar,
.pbc-du .pbc-mhome .pbc-du-pay {
  --k-bg: hsl(var(--pbc-gold));
  --k-ink: hsl(var(--pbc-ink));
  --k-edge: hsl(var(--pbc-gold-dark));
  border: 0;
}

/* Las tarjetas de siempre (cursos, reservar, primer intercambio, 10 €) a la medida nueva. */
.pbc-du .pbc-mhome-hero { min-height: 0; padding: 18px; }
.pbc-du .pbc-mhome-hero-text { width: auto; }
.pbc-du .pbc-mhome-hero .pbc-mhome-h2 {
  max-width: none;
  font-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -0.4px;
}

/* «¿Vienes a tu intercambio?»: «Sí, voy» es azul (apuntarse), no amarillo. */
.pbc-du .pbc-mhome-confirm { padding: 18px; }
.pbc-du .pbc-mhome-confirm-title { font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-mhome-confirm-link { font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); color: hsl(var(--pbc-blue)); }

/* Evento de «Tu semana»: Entrar verde cuando abre, gris mientras tanto; Cancelar secundario. */
.pbc-du .pbc-mhome-agenda-btn {
  min-height: 44px;
  border-radius: 14px;
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-mhome-agenda-join:not(.is-waiting) {
  background: hsl(var(--pbc-green));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 4px 0 hsl(var(--pbc-green-dark));
}
.pbc-du .pbc-mhome-agenda-join.is-waiting {
  background: hsl(var(--pbc-line-soft));
  color: hsl(var(--pbc-ink-soft));
  box-shadow: none;
}
.pbc-du .pbc-mhome-agenda-cancel {
  border: 2px solid hsl(var(--pbc-line));
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-red-dark));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}


/* ══════════════════════════════════════════════════════════════════════════
   P12 · CHAT (community_wa.html, includes/cwa_row.html): primero tus salas por
   tus idiomas (último mensaje y cuántos en línea), luego «PBC Languages» (Avisos,
   ideas y Amigos) y al final tus mensajes; buscador arriba y «Descubrir más
   salas» al final. Una sola lista (#cwaList): el JS de siempre la sigue ordenando
   por actividad y aquí cada fila se coloca bajo su título con `order`.
   ══════════════════════════════════════════════════════════════════════════ */
.pbc-du #cwaList { display: flex; flex-direction: column; }
.pbc-du #cwaList > .du-chat-h--rooms { order: 0; }
.pbc-du #cwaList > li:has(> .cwa-row[data-sec="rooms"]) { order: 1; }
.pbc-du #cwaList > .du-chat-h--pbc { order: 2; }
.pbc-du #cwaList > li:has(> .cwa-row[data-sec="pbc"]),
.pbc-du #cwaList > .du-chat-friends { order: 3; }
.pbc-du #cwaList > .du-chat-h--private { order: 4; }
.pbc-du #cwaList > li:has(> .cwa-row[data-sec="private"]) { order: 5; }
/* Un título sin filas debajo no se pinta. */
.pbc-du #cwaList:not(:has(.cwa-row[data-sec="rooms"])) > .du-chat-h--rooms,
.pbc-du #cwaList:not(:has(.cwa-row[data-sec="private"])) > .du-chat-h--private,
.pbc-du #cwaList:not(:has(.cwa-row[data-sec="pbc"], .du-chat-friends)) > .du-chat-h--pbc { display: none; }
/* Buscando o con un filtro puesto: solo resultados, sin títulos ni la fila de Amigos. */
.pbc-du .cwa-left:has(.cwa-chip.on:not([data-f="all"])) .du-chat-h,
.pbc-du .cwa-left:has(.cwa-chip.on:not([data-f="all"])) .du-chat-friends,
.pbc-du .cwa-left:has(#cwaSearch:not(:placeholder-shown)) .du-chat-h,
.pbc-du .cwa-left:has(#cwaSearch:not(:placeholder-shown)) .du-chat-friends { display: none; }

.pbc-du .du-chat-h {
  padding: 16px 16px 6px;
  list-style: none;
}
.pbc-du .du-chat-h span {
  color: hsl(var(--pbc-ink-soft));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .du-chat-pbcrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  color: hsl(var(--pbc-ink));
  text-decoration: none;
}
.pbc-du .du-chat-pbcrow:hover,
.pbc-du .du-chat-pbcrow:focus { color: hsl(var(--pbc-ink)); text-decoration: none; background: hsl(var(--pbc-page)); }
.pbc-du .du-chat-pbctext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pbc-du .du-chat-pbctext b { font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
.pbc-du .du-chat-pbctext span { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-small); }
.pbc-du .du-chat-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue));
}
.pbc-du .cwa-ava .du-chat-ico { width: 100%; height: 100%; }
.pbc-du .du-chat-ico svg,
.pbc-du .du-chat-lupa,
.pbc-du .du-chat-globe,
.pbc-du .du-chat-chev { fill: none; stroke: currentColor; }
.pbc-du .du-chat-ico svg { width: 24px; height: 24px; }
.pbc-du .du-chat-ico--gold { background: hsl(var(--pbc-gold-soft)); color: hsl(var(--pbc-gold-ink)); }
.pbc-du .du-chat-ico--green { background: hsl(var(--pbc-green-soft)); color: hsl(var(--pbc-green)); }
.pbc-du .du-chat-chev { width: 20px; height: 20px; flex: 0 0 auto; color: hsl(var(--pbc-muted)); }
.pbc-du .du-chat-lupa { width: 20px; height: 20px; flex: 0 0 auto; color: hsl(var(--pbc-muted)); }
.pbc-du .du-chat-globe { width: 18px; height: 18px; flex: 0 0 auto; }
.pbc-du .du-chat-online {
  display: block;
  margin-top: 2px;
  color: hsl(var(--pbc-green));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .cwa-mid { min-width: 0; }

@media (max-width: 767.98px) {
  /* Fondo blanco, tarjetas con línea fina y la letra de la casa (solo 400 y 700). */
  .pbc-du.cwa-body .cwa-page,
  .pbc-du.cwa-body .cwa-panel { background: hsl(var(--pbc-surface)); font-family: var(--pbc-font); }
  .pbc-du.cwa-body .cwa-search {
    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.cwa-body .cwa-search input { font-family: var(--pbc-font); font-weight: var(--pbc-weight-regular); }
  .pbc-du.cwa-body .cwa-chip {
    border: 1px solid hsl(var(--pbc-line));
    background: hsl(var(--pbc-surface));
    color: hsl(var(--pbc-ink));
    font-family: var(--pbc-font);
    font-weight: var(--pbc-weight-bold);
  }
  .pbc-du.cwa-body .cwa-chip.on {
    border-color: hsl(var(--pbc-blue));
    background: hsl(var(--pbc-blue-soft));
    color: hsl(var(--pbc-blue-dark));
  }
  .pbc-du.cwa-body .cwa-list {
    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.cwa-body .cwa-list > li + li > .cwa-row,
  .pbc-du.cwa-body .cwa-list > li + li > .du-chat-pbcrow { border-top: 1px solid hsl(var(--pbc-line-soft)); }
  .pbc-du.cwa-body .cwa-name { font-weight: var(--pbc-weight-bold); }
  .pbc-du.cwa-body .cwa-snip b { font-weight: var(--pbc-weight-bold); }
  .pbc-du.cwa-body .cwa-when { font-weight: var(--pbc-weight-bold); }
  .pbc-du.cwa-body .cwa-badge {
    background: hsl(var(--pbc-red));
    box-shadow: none;
    font-weight: var(--pbc-weight-bold);
  }
  .pbc-du.cwa-body .cwa-at { font-weight: var(--pbc-weight-bold); }
  /* «Descubrir más salas»: el botón secundario del kit (blanco, borde y canto). */
  .pbc-du.cwa-body .cwa-disc summary.cwa-disc-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px;
    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);
    font-weight: var(--pbc-weight-bold);
  }
}
/* Nunca «…» (regla 7): el último mensaje salta a una segunda línea y, si aún no
   cabe, se corta en el borde sin puntos suspensivos. */
.pbc-du.cwa-body .cwa-snip {
  white-space: normal;
  text-overflow: clip;
  display: block;
  max-height: 2.6em;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   AVISOS (notice_center.html), AMIGOS (friends.html) y CREAR GRUPO
   (chat_group_form.html): mismas pantallas, piezas del kit. Fondo blanco,
   tarjetas con línea fina, letra 400/700, botón que se hunde (azul para hacer,
   blanco para lo secundario; aquí nada es pagar, así que nada amarillo).
   ══════════════════════════════════════════════════════════════════════════ */
.pbc-du.has-pbc-avisos,
.pbc-du .pbc-avisos-screen { background: hsl(var(--pbc-surface)); font-family: var(--pbc-font); }
.pbc-du .pbc-avisos-header { background: hsl(var(--pbc-blue)); }
.pbc-du .pbc-avisos-header-title { font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-avisos-section-title {
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: 0;
  text-transform: none;
}
.pbc-du .pbc-avisos-card,
.pbc-du .pbc-avisos-permission,
.pbc-du .pbc-avisos-check {
  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-avisos-card.pbc-avisos-unread { border-color: hsl(var(--pbc-blue)); background: hsl(var(--pbc-blue-soft)); }
.pbc-du .pbc-avisos-card-title,
.pbc-du .pbc-avisos-permission-title { font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-avisos-card-detail,
.pbc-du .pbc-avisos-permission-text { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); }
.pbc-du .pbc-avisos-time { font-size: var(--pbc-size-small); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-avisos-action { color: hsl(var(--pbc-blue)); font-weight: var(--pbc-weight-bold); }

/* Botones: el azul que se hunde para hacer y el blanco con borde para lo demás. */
.pbc-du .pbc-avisos-button,
.pbc-du .pbc-fr-add:not(.pbc-fr-ghost),
.pbc-du .cgrp .cgrp-btn:not(.ghost) {
  border: 0;
  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-family: var(--pbc-font);
  font-weight: var(--pbc-weight-bold);
  transition: transform .08s ease, box-shadow .08s ease;
}
.pbc-du .pbc-avisos-button { min-height: 54px; font-size: var(--pbc-size-body); }
.pbc-du .pbc-avisos-button:active,
.pbc-du .pbc-fr-add:not(.pbc-fr-ghost):active,
.pbc-du .cgrp .cgrp-btn:not(.ghost):active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark));
}
.pbc-du .pbc-avisos-check-btn,
.pbc-du .pbc-fr-ghost {
  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);
  font-weight: var(--pbc-weight-bold);
}
/* «Aún no» (desactivado): gris, sin canto. */
.pbc-du .pbc-fr-add[disabled],
.pbc-du .cgrp .cgrp-btn[disabled] {
  background: hsl(var(--pbc-line-soft));
  color: hsl(var(--pbc-ink-soft));
  box-shadow: none;
  transform: none;
}
/* Salir del grupo / quitar: secundario con letra roja oscura (cancelar). */
.pbc-du .cgrp .cgrp-btn.ghost {
  border: 2px solid hsl(var(--pbc-line));
  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-line));
  font-weight: var(--pbc-weight-bold);
}

/* Amigos */
.pbc-du.pbc-fr-body { background: hsl(var(--pbc-surface)); font-family: var(--pbc-font); }
.pbc-du .pbc-fr-top h1 { font-size: var(--pbc-size-title-m); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-fr-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-fr-search { border: 1px solid hsl(var(--pbc-line)); }
.pbc-du .pbc-fr-search:focus-within { border-color: hsl(var(--pbc-blue)); }
.pbc-du .pbc-fr-ttl,
.pbc-du .pbc-fr-hd span { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-small); }

/* Crear grupo */
.pbc-du.cgrp-body { background: hsl(var(--pbc-surface)); font-family: var(--pbc-font); }
.pbc-du .cgrp .cgrp-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 .cgrp label.cgrp-lbl { color: hsl(var(--pbc-ink)); font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); }
.pbc-du .cgrp input[type=text],
.pbc-du .cgrp input[type=search] {
  min-height: 52px;
  border: 1.5px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  font-family: var(--pbc-font);
}
.pbc-du .cgrp input[type=text]:focus,
.pbc-du .cgrp input[type=search]:focus { border-color: hsl(var(--pbc-blue)); outline: none; box-shadow: 0 0 0 4px hsl(var(--pbc-blue-soft)); }

/* Privados y solicitudes (directs.html): la letra de la casa (fuera la Futura),
   aceptar azul que se hunde, rechazar secundario con letra roja oscura. */
.pbc-du.dm-body { background: hsl(var(--pbc-surface)); font-family: var(--pbc-font); }
.pbc-du .dm-h1 { font-family: var(--pbc-font); font-size: var(--pbc-size-title-m); font-weight: var(--pbc-weight-bold); }
.pbc-du .dm-sub { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); }
.pbc-du .dm-section-title { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); }
.pbc-du .dm-search input {
  min-height: 52px;
  border: 1.5px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  font-family: var(--pbc-font);
}
.pbc-du .dm-search input:focus { border-color: hsl(var(--pbc-blue)); box-shadow: 0 0 0 4px hsl(var(--pbc-blue-soft)); }
.pbc-du .dm-btn {
  border-radius: var(--pbc-radius-button);
  font-family: var(--pbc-font);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .dm-btn.ok {
  border: 0;
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
}
.pbc-du .dm-btn.ok:active { transform: translateY(3px); box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark)); }
.pbc-du .dm-btn.no {
  border: 2px solid hsl(var(--pbc-line));
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-red-dark));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}

/* ══════════════════════════════════════════════════════════════════════════
   PANEL DEL ALUMNO (dashboard.html, body.du-dash; el del profe es de su zona).
   Pasada ligera: mismas piezas y mismo orden; fondo blanco, tarjetas blancas
   con línea fina, letra 400/700, «Reservar» azul que se hunde y lo demás
   secundario blanco. Sin mayúsculas en los botones.
   ══════════════════════════════════════════════════════════════════════════ */
.pbc-du.du-dash { background: hsl(var(--pbc-surface)); font-family: var(--pbc-font); }
.pbc-du.du-dash h1,
.pbc-du.du-dash h2,
.pbc-du.du-dash h3 { font-family: var(--pbc-font); font-weight: var(--pbc-weight-bold); }
.pbc-du.du-dash .font-black,
.pbc-du.du-dash .font-extrabold,
.pbc-du.du-dash .font-semibold { font-weight: var(--pbc-weight-bold); }
.pbc-du.du-dash .font-medium { font-weight: var(--pbc-weight-regular); }
.pbc-du.du-dash .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);
}
/* La bienvenida: tarjeta blanca (el azul lo lleva el menú de arriba). */
.pbc-du.du-dash .dashboard-welcome-card {
  background: hsl(var(--pbc-surface)) !important;
  color: hsl(var(--pbc-ink)) !important;
}
.pbc-du.du-dash .dashboard-welcome-card .text-white,
.pbc-du.du-dash .dashboard-welcome-card h1 { color: hsl(var(--pbc-ink)) !important; }
/* Botones: el que se hunde (azul) y el secundario (blanco con borde). */
.pbc-du.du-dash .btn-hero {
  border: 0 !important;
  border-radius: var(--pbc-radius-button) !important;
  background: hsl(var(--pbc-blue)) !important;
  color: hsl(var(--pbc-on-color)) !important;
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark)) !important;
  font-family: var(--pbc-font);
  font-weight: var(--pbc-weight-bold) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.pbc-du.du-dash .btn-hero:active { transform: translateY(3px); box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark)) !important; }
/* Los botones pequeños de las tarjetas (ver, copiar, editar) son secundarios. */
.pbc-du.du-dash .btn-hero-sm,
.pbc-du.du-dash .btn-outline-white {
  border: 2px solid hsl(var(--pbc-line)) !important;
  border-radius: var(--pbc-radius-button) !important;
  background: hsl(var(--pbc-surface)) !important;
  color: hsl(var(--pbc-ink)) !important;
  box-shadow: 0 3px 0 hsl(var(--pbc-line)) !important;
  font-family: var(--pbc-font);
  font-weight: var(--pbc-weight-bold) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* «Join the call» de las tarjetas del panel: es EL botón, no uno más entre «Details»
   y «Copy link» (Bruce 11/11/2026: no lo encontraba). Azul que se hunde. */
.pbc-du.du-dash .btn-hero-sm.du-join {
  border-color: hsl(var(--pbc-blue)) !important;
  background: hsl(var(--pbc-blue)) !important;
  color: hsl(var(--pbc-on-color)) !important;
  box-shadow: 0 3px 0 hsl(var(--pbc-blue-dark)) !important;
}

/* «Tu semana» arriba del panel (includes/du_proximo.html): todo lo reservado, cada
   cosa con su «Entrar». Mismas piezas que «Tu semana» de la portada del móvil. */
.pbc-du .du-prox {
  margin: 0 0 24px;
  padding: 20px;
  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);
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
}
.pbc-du .du-prox-t {
  margin: 0;
  font-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.2;
  letter-spacing: -0.4px;
}
.pbc-du .du-prox-sub {
  margin: 4px 0 0;
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-small);
}
.pbc-du .du-prox-list { margin: 14px 0 0; padding: 0; list-style: none; }
.pbc-du .du-prox-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  padding: 14px 0;
}
.pbc-du .du-prox-row:last-child { padding-bottom: 0; }
.pbc-du .du-prox-row + .du-prox-row { border-top: 1px solid hsl(var(--pbc-line-soft)); }
.pbc-du .du-prox-text {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}
.pbc-du .du-prox-what { font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); line-height: 1.3; }
.pbc-du .du-prox-when { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); line-height: 1.35; }
/* En el móvil, el botón a lo ancho debajo; en el ordenador, con su ancho natural. */
.pbc-du .du-prox-enter { flex: 1 1 100%; text-decoration: none; }
@media (min-width: 640px) {
  .pbc-du .du-prox-enter { flex: 0 0 auto; width: auto; min-width: 150px; }
}

/* Bienvenida «activa los avisos» (welcome_notifications.html, sin mascota con el
   diseño único) y «¿Qué quieres aprender?» (choose_learning_language.html). */
.pbc-du .pushob { font-family: var(--pbc-font); }
.pbc-du .pushob-title { font-family: var(--pbc-font); font-weight: var(--pbc-weight-bold) !important; }
.pbc-du .pushob-go,
.pbc-du #learn-lang-submit {
  border: 0 !important;
  border-radius: var(--pbc-radius-button) !important;
  background: hsl(var(--pbc-blue)) !important;
  color: hsl(var(--pbc-on-color)) !important;
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark)) !important;
  font-family: var(--pbc-font);
  font-weight: var(--pbc-weight-bold) !important;
}
.pbc-du .pushob-go:active,
.pbc-du #learn-lang-submit:active { transform: translateY(3px); box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark)) !important; }
.pbc-du .learn-lang-wrapper h2 { font-family: var(--pbc-font); font-weight: var(--pbc-weight-bold); }


/* ══════════════════════════════════════════════════════════════════════════
   PORTADA DEL ORDENADOR CON SESIÓN (includes/du_inicio_desk.html, alumno): dos
   columnas como P3Desk (lo principal y, a la derecha, Prepárate / Esta semana /
   Tu semana / atajos). En el móvil no existe: allí manda la portada del móvil.
   ══════════════════════════════════════════════════════════════════════════ */
.pbc-du .du-desk { display: none; }
@media (min-width: 768px) {
  .pbc-du .du-desk {
    display: block;
    padding: 112px 24px 48px;
    background: hsl(var(--pbc-surface));
    color: hsl(var(--pbc-ink));
    font-family: var(--pbc-font);
  }
  .pbc-du .du-desk-in { max-width: 1120px; margin: 0 auto; }
  /* En la portada el menú va transparente sobre la foto del hero; sin hero, azul de
     siempre (mismo sitio y tamaño). Si arriba sale el aviso de eventos (va encima,
     en absoluto), se le deja su hueco. */
  .pbc-du.page-home-v2:has(.du-desk) > nav.navbar { background-color: hsl(var(--pbc-blue)) !important; }
  .pbc-du.page-home-v2:has(.ge-notice-wrap) .du-desk { padding-top: 164px; }
  .pbc-du .du-desk-hola {
    margin: 0;
    color: hsl(var(--pbc-ink));
    font-size: 36px;
    font-weight: var(--pbc-weight-bold);
    letter-spacing: -1px;
    line-height: 1.15;
  }
  .pbc-du .du-desk-sub { margin: 6px 0 0; color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-body); }
  .pbc-du .du-desk-sub:empty { display: none; }
  .pbc-du .du-desk-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
    margin-top: 22px;
  }
  .pbc-du .du-desk-main,
  .pbc-du .du-desk-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .pbc-du .du-desk .pbc-mhome-hero-text { width: auto; }
  .pbc-du .du-desk-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
  .pbc-du .du-desk-list li + li { border-top: 1px solid hsl(var(--pbc-line-soft)); }
  .pbc-du .du-desk-list a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    color: inherit;
    text-decoration: none;
  }
  .pbc-du .du-desk-list a:hover .du-ini-t3,
  .pbc-du .du-desk-list a:focus .du-ini-t3 { color: hsl(var(--pbc-blue)); }
  .pbc-du .du-desk-links { gap: 0; padding: 6px 18px; }
  .pbc-du .du-desk-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 52px;
    color: hsl(var(--pbc-ink));
    font-size: var(--pbc-size-body);
    font-weight: var(--pbc-weight-bold);
    text-decoration: none;
  }
  .pbc-du .du-desk-links a + a { border-top: 1px solid hsl(var(--pbc-line-soft)); }
  .pbc-du .du-desk-links a:hover,
  .pbc-du .du-desk-links a:focus { color: hsl(var(--pbc-blue)); }
  .pbc-du .du-desk-links svg { flex: 0 0 auto; color: hsl(var(--pbc-muted)); }
  .pbc-du .du-desk-links .pbc-k-status { margin-left: 6px; padding: 3px 9px; font-size: var(--pbc-size-small); }
  .pbc-du .du-desk-flags { display: flex; flex-wrap: wrap; gap: 10px; }
  .pbc-du .du-desk-flags a { display: inline-flex; line-height: 0; border-radius: 6px; box-shadow: 0 0 0 1px hsl(var(--pbc-line-soft)); }
  .pbc-du .du-desk-flags .hero-flag-icon { width: 40px; height: 30px; border-radius: 6px; }
  /* El vídeo de confianza en la columna estrecha: entero y centrado. */
  .pbc-du .du-desk .du-ini-video video { width: min(100%, 220px); }
}

/* «Practica gratis con nativos» (lang_first.html, /empieza/): mismas fichas y pasos;
   «Continuar» azul que se hunde cuando ya se puede, gris («aún no») mientras tanto. */
.pbc-du .lf-chip { border: 2px solid hsl(var(--pbc-line)); border-radius: var(--pbc-radius-field); font-family: var(--pbc-font); }
.pbc-du .lf-chip[aria-pressed="true"] { border-color: hsl(var(--pbc-blue)); background: hsl(var(--pbc-blue-soft)); }
.pbc-du .lf-go {
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-line-soft));
  color: hsl(var(--pbc-ink-soft));
  box-shadow: none;
  font-family: var(--pbc-font);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .lf-go.is-ready {
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
}
.pbc-du .lf-go.is-ready:active { transform: translateY(3px); box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark)); }

/* Franja de confianza de la portada del MÓVIL: con el diseño único solo queda la
   cifra de las clases dadas (fuera el 97 % y la nota repetida): centrada bajo la de
   Google. La del ordenador se queda como siempre (Guille 10/11/2026). */
.pbc-du .pbc-mhome-proof .hero-proof .hero-proof-stats { display: flex; justify-content: center; }

/* Confianza en la portada del móvil, en todos los estados (includes/du_inicio_confianza.html):
   tres cifras de verdad en fila (Google, clases dadas, valoraciones de 4-5 estrellas). */
.pbc-du .du-ini-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.pbc-du .du-ini-cifra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 10px 6px;
  border-radius: 14px;
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-ink));
  text-align: center;
  text-decoration: none;
}
.pbc-du .du-ini-cifra b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--pbc-size-title-s);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .du-ini-cifra span { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-small); line-height: 1.3; }
.pbc-du .du-ini-cifra .du-ini-star { width: 18px; height: 18px; }

/* Fotos y vídeos ENTEROS en la portada del móvil (regla 6 del reglamento; Guille
   10/11/2026: «fotos enteras»): ancho fijo y alto natural, sin recortar ni bandas.
   · Vídeos de alumnos: todos grabados en vertical (9:16), así que el cuadro es 9:16
     y más estrecho (se asoma el siguiente). Si alguno no lo es, al darle al play el
     cuadro toma su forma real (script de includes/du_inicio_confianza.html).
   · Fotos de la comunidad: cada una con su alto; la tira toma el alto de la foto que
     se ve (mismo script). */
.pbc-du .pbc-mhome .pbc-svid .pbc-comu-slide { flex: 0 0 min(62%, 260px); }
.pbc-du .pbc-mhome .pbc-svid-frame { aspect-ratio: 9 / 16; }
.pbc-du .pbc-mhome .pbc-comu:not(.pbc-svid):not(.pbc-testi) .pbc-comu-strip {
  align-items: flex-start;
  overflow-y: hidden;
  transition: height .25s ease;
}
.pbc-du .pbc-mhome .pbc-comu:not(.pbc-svid):not(.pbc-testi) .pbc-comu-slide { background: none; }
.pbc-du .pbc-mhome .pbc-comu-slide img { height: auto; aspect-ratio: auto; object-fit: contain; }