/* ============================================================================
   SOMOS TRUFAS — LA SECCIÓN COMUNIDAD (15 oct 2026)
   ============================================================================
   Una hoja para las cinco páginas de la sección Comunidad del menú:
   /bot/, /actividad/, /misiones/, /recompensas/ y /referidos/. Las cinco
   comparten piezas (la cabecera, la moneda, la barra de progreso, la tarjeta
   de misión, el velo de «inicia sesión») y por eso van juntas; lo que dibuja
   cada una con datos está en assets/portales-comunidad.js.

   Contrato: db/plan-reorganizacion-web.md. Reglas visuales: la skill
   diseno-trufas y /muestra. Solo tokens; las cajas grandes son `.caja` (capa
   doble) y lo pequeño lleva el aro `--filo-*` de su escalón, nunca un
   `border` con `clip-path`.

   PREFIJO `pc-` (portales de comunidad) en todo, para no chocar con base.css
   ni con comunidad.css, que viven en las mismas páginas o al lado.
   ========================================================================== */

/* ---------- LA CABECERA DE CADA PÁGINA ----------
   Antetítulo → titular → entradilla, como el hero de las demás páginas pero
   sin la mascota: aquí la imagen la pone la propia página (la demo del bot,
   el saldo, el catálogo). */
.pc-hero{padding:var(--esp-bloque) 0 var(--esp-cabecera);position:relative}
.pc-hero .eyebrow{font-size:var(--tipo-antetitulo);margin-bottom:.9rem}
.pc-hero h1{font-size:var(--tipo-hero);color:var(--texto-1)}
.pc-hero h1 em{font-style:normal;color:var(--yellow);display:block}
.pc-entradilla{font-size:var(--tipo-entradilla);color:var(--texto-2);max-width:46ch;margin-top:1.1rem;line-height:1.6}
.pc-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.6rem}
/* El logo de Discord (o el del Dashboard) dentro de un botón, del alto del texto. */
.pc-hero .btn > svg,.pc-sec .btn > svg{width:1.25em;height:1.25em;fill:currentColor;flex:none}

/* La cabecera partida: texto a la izquierda, la pieza visual a la derecha.
   En estrecho, una debajo de otra. */
.pc-hero-par{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--esp-bloque);align-items:center}
@media (max-width:900px){ .pc-hero-par{grid-template-columns:1fr;gap:var(--esp-cabecera)} }

/* ---------- LAS SECCIONES ---------- */
.pc-sec{padding-bottom:var(--esp-seccion)}
.pc-cab{margin-bottom:var(--esp-cabecera);max-width:52rem}
.pc-cab .eyebrow{font-size:var(--tipo-antetitulo);margin-bottom:.8rem}
.pc-cab h2{font-size:var(--tipo-titulo);color:var(--texto-1)}
.pc-baja{font-size:var(--tipo-descripcion);color:var(--texto-2);margin-top:.9rem;max-width:56ch;line-height:1.6}
.pc-nota{font-size:var(--tipo-leyenda);color:var(--texto-3);line-height:1.5}
.pc-nota a,.pc-baja a{color:var(--yellow)}

.pc-rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr));gap:var(--esp-rejilla)}

/* Cinco tarjetas (los módulos del bot) en una fila en ordenador: en cuatro
   columnas quedaba una huérfana. */
@media (min-width:1024px){ .pc-rej.cinco{grid-template-columns:repeat(5,minmax(0,1fr))} }

/* ---------- LA TARJETA (una .caja con relleno de tarjeta) ----------
   El relleno es 1,2 veces el hueco de la rejilla (24 px): --esp-caja (40)
   es el de un formulario y en una rejilla de cuatro inflaba la tarjeta. */
.pc-t{padding:calc(var(--esp-rejilla) * 1.2);display:flex;flex-direction:column;gap:.7rem;min-width:0;
  transition:background .2s ease}
.pc-t:hover,.pc-t:focus-within{--filo-color:var(--yellow)}
.pc-t h3{font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-subtitulo);
  letter-spacing:.01em;line-height:1;color:var(--texto-1)}
.pc-t p{font-size:var(--tipo-descripcion);color:var(--texto-3);line-height:1.55}
.pc-t-pie{margin-top:auto;display:flex;flex-wrap:wrap;gap:.35rem;padding-top:.3rem}
/* El halo de data-foco (assets/interaccion.css) lo pinta el elemento; si no
   llega ese archivo, la tarjeta se queda como está. */

/* LOS ICONOS: trazo de 1,8 en amarillo, del alto de un subtítulo. */
.pc-ico{width:2.25rem;height:2.25rem;flex:none;color:var(--yellow);fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.pc-ico-s{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-.15em}

/* ---------- LA TRUFACOIN QUE GIRA ----------
   Al pasar el cursor (o al enfocar su tarjeta), una vuelta entera sobre el
   eje vertical, como una moneda que se lanza. Una vez por pasada. */
.pc-moneda{display:inline-block;perspective:600px;flex:none}
.pc-moneda img{width:100%;height:auto;display:block;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.pc-moneda:hover img,.pc-gira:hover .pc-moneda img,.pc-gira:focus-within .pc-moneda img{transform:rotateY(360deg)}

/* ---------- LA BARRA DE PROGRESO (HUD) ----------
   Recta y sin contorno, para que el bisel de la tarjeta sea el único
   chaflán. El relleno sube de 0 a su valor (--p, de 0 a 1) cuando la barra
   se ve (`.llena`, la pone el JS). Sin JS o con menos movimiento, ya está
   en su sitio. */
.pc-barra{position:relative;height:.5rem;background:var(--line);overflow:hidden}
.pc-barra > i{position:absolute;inset:0;background:var(--yellow);transform-origin:0 50%;
  transform:scaleX(var(--p,0))}
.pc-barra.gruesa{height:.75rem}
.pc-barra.apagada > i{background:var(--yellow-bajo)}
@media (prefers-reduced-motion: no-preference){
  .js-barras .pc-barra:not(.llena) > i{transform:scaleX(0)}
  .js-barras .pc-barra > i{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
}
.pc-barra-pie{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.45rem;
  font-size:var(--tipo-leyenda);color:var(--texto-3)}
.pc-barra-pie b{font-weight:600;color:var(--texto-1)}

/* ---------- LAS CIFRAS (rejilla abierta: filetes, sin caja) ---------- */
.pc-cifras{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,8.5rem),1fr));
  gap:0 var(--esp-rejilla)}
.pc-cifra{border-top:1px solid var(--line);padding:1rem 0 1.2rem;min-width:0}
/* Las siete del Resumen, en dos filas de 4 + 3 en ordenador (en seis
   columnas quedaba una sola abajo). */
@media (min-width:1024px){ .pc-cifras.siete{grid-template-columns:repeat(4,minmax(0,1fr))} }
.pc-cifra-n{font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-numeral);
  letter-spacing:.01em;line-height:1;color:var(--texto-1);display:flex;align-items:center;gap:.5rem}
.pc-cifra-n img{width:.85em;height:.85em}
.pc-cifra-n > .pc-ico-s{width:.8em;height:.8em}
.pc-cifra-n .pc-ico-s{color:var(--yellow)}
.pc-cifra-n.vacia{color:var(--texto-3)}
.pc-cifra-r{font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-3);margin-top:.55rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.pc-cifra-btn{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);
  font:inherit;color:inherit;cursor:pointer;transition:border-color .2s ease}
.pc-cifra-btn .pc-cifra-n > span{transition:color .2s ease}
.pc-cifra-btn:hover,.pc-cifra-btn:focus-visible{border-top-color:var(--yellow)}
.pc-cifra-btn:hover .pc-cifra-n > span,.pc-cifra-btn:focus-visible .pc-cifra-n > span{color:var(--yellow)}
.pc-cifra-btn:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.pc-cifra-d{font-size:var(--tipo-leyenda);color:var(--texto-3);margin-top:.3rem}

/* ---------- EL SALDO EN UNA LÍNEA (Recompensas y Referidos) ---------- */
.pc-saldo{display:inline-flex;align-items:center;gap:.75rem;padding:.6rem 1rem .6rem .7rem;
  position:relative;clip-path:var(--bevel-sm);background:rgba(242,232,220,.06);
  --filo-color:rgba(255,198,33,.45);box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
  transition:background .2s ease}
.pc-saldo:hover{background:rgba(242,232,220,.1);--filo-color:var(--yellow)}
.pc-saldo .pc-moneda{width:2.25rem}
.pc-saldo-n{font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-dato);line-height:1;color:var(--texto-1)}
.pc-saldo-r{display:block;font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);margin-top:.2rem}
.pc-saldo[hidden]{display:none}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .pc-saldo::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
  .pc-saldo:focus-visible{outline:none;--filo-color:var(--yellow)}
  .pc-saldo:focus-visible::after{clip-path:var(--filo-foco-sm)}
}

/* ---------- EL ESTADO (cargando, vacío, error, sin sesión) ---------- */
.pc-estado{padding:var(--esp-caja);display:grid;gap:.9rem;justify-items:start;max-width:40rem}
.pc-estado h3{font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-subtitulo);line-height:1;letter-spacing:.01em}
.pc-estado p{font-size:var(--tipo-descripcion);color:var(--texto-2);line-height:1.6}
.pc-estado .pc-nota{color:var(--texto-3)}
.pc-estado .pc-nota a{color:var(--yellow)}
.pc-estado.aviso{--caja-fondo:var(--gris-1);--filo-color:var(--gris-2)}
.pc-estado.aviso h3{color:var(--gris-4)}

/* Cargando: tres renglones que laten, del tamaño de lo que va a llegar. */
.pc-cargando{display:grid;gap:var(--esp-rejilla)}
.pc-hueso{height:6rem;background:var(--surface);clip-path:var(--bevel)}
.pc-hueso.bajo{height:3rem;clip-path:var(--bevel-sm)}
@media (prefers-reduced-motion: no-preference){
  @keyframes pc-latir{50%{background:var(--surface-2)}}
  .pc-hueso{animation:pc-latir 1.4s ease-in-out infinite}
  .pc-hueso:nth-child(2){animation-delay:.15s}
  .pc-hueso:nth-child(3){animation-delay:.3s}
}

/* ---------- EL VELO DE «INICIA SESIÓN» ----------
   Sin sesión se enseña CÓMO SE VERÁ: la misma vista con datos de ejemplo,
   difuminada, inerte y oculta a los lectores de pantalla, y encima la
   invitación a entrar. La vista previa no es información: es un cebo. */
.pc-velo{position:relative;display:grid;isolation:isolate}
.pc-velo > *{grid-area:1/1}
.pc-velo-prev{filter:blur(6px) saturate(.7);opacity:.55;pointer-events:none;user-select:none;min-width:0;
  max-height:36rem;overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.pc-velo-carta{align-self:center;justify-self:center;z-index:1;margin:var(--esp-rejilla);
  --caja-fondo:var(--surface);text-align:left}
@media (max-width:620px){
  .pc-velo-prev{opacity:.35}
  .pc-velo-carta{align-self:start;margin:var(--esp-rejilla) 0}
}
.pc-legal,.pc-estado .pc-legal{font-size:var(--tipo-leyenda);color:var(--texto-3);line-height:1.5;max-width:34rem}
.pc-legal a{color:var(--texto-2);text-decoration:underline;text-underline-offset:2px}

/* ---------- LAS PESTAÑAS (Mi actividad) ----------
   Un tablist de verdad: flechas, Inicio y Fin. Como el menú de páginas:
   mayúsculas, la activa en crema con la raya amarilla debajo. En estrecho
   se desliza de lado antes que partirse en dos renglones. */
.pc-tabs{display:flex;gap:1.75rem;border-bottom:1px solid var(--line);margin-bottom:var(--esp-cabecera);
  overflow-x:auto;scrollbar-width:none}
.pc-tabs::-webkit-scrollbar{display:none}
.pc-tab{flex:none;background:none;border:0;cursor:pointer;font-family:'Poppins',sans-serif;
  font-size:var(--tipo-control);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-3);padding:.9rem 0;transition:color .15s ease, box-shadow .2s ease}
.pc-tab:hover{color:var(--texto-1)}
.pc-tab[aria-selected="true"]{color:var(--texto-1);box-shadow:inset 0 -2px 0 var(--yellow)}
.pc-tab:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.pc-panel:focus-visible{outline:none}
.pc-panel[hidden]{display:none}
@media (max-width:520px){ .pc-tabs{gap:1.25rem} }

/* ---------- MI ACTIVIDAD ---------- */
.pc-bloque:not(:first-child){margin-top:var(--esp-bloque)}
.pc-rotulo{font-family:'Poppins',sans-serif;line-height:1.4;font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3);margin-bottom:1rem}

/* El marcador grande: la cifra a la izquierda y lo que la explica al lado. */
.pc-marcador{padding:var(--esp-caja);display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--esp-bloque);align-items:center}
.pc-marcador-n{display:flex;align-items:center;gap:1rem}
.pc-marcador-n .pc-moneda{width:4.5rem}
.pc-marcador-cifra{font-family:var(--fuente-display);font-weight:800;font-size:var(--tipo-cifra);line-height:.85;color:var(--texto-1)}
.pc-marcador-u{display:block;font-size:var(--tipo-rotulo);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3);margin-top:.5rem}
.pc-marcador-lado{display:grid;gap:.9rem;min-width:0}
.pc-marcador-lado .pc-frase{font-size:var(--tipo-descripcion);color:var(--texto-2);line-height:1.55}
@media (max-width:720px){
  .pc-marcador{grid-template-columns:1fr;gap:var(--esp-rejilla)}
}

/* El nivel: el número dentro de un rombo biselado amarillo. */
.pc-nivel{width:6.5rem;aspect-ratio:1;display:grid;place-items:center;flex:none;position:relative;
  clip-path:var(--bevel);background:var(--yellow);color:var(--sobre-amarillo)}
.pc-nivel b{font-family:var(--fuente-display);font-weight:800;font-size:var(--tipo-titulo);line-height:.8}
.pc-nivel small{position:absolute;top:.55rem;left:0;right:0;text-align:center;font-size:var(--tipo-etiqueta);
  font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.pc-nivel b{margin-top:.6rem}

/* Movimientos del libro. */
.pc-movs{list-style:none;display:grid}
.pc-mov{display:grid;grid-template-columns:2.25rem minmax(0,1fr) auto;gap:.9rem;align-items:center;
  padding:.8rem 0;border-top:1px solid var(--line)}
.pc-mov:last-child{border-bottom:1px solid var(--line)}
.pc-mov-ico{width:2.25rem;height:2.25rem;display:grid;place-items:center;color:var(--texto-2);background:var(--surface);clip-path:var(--bevel-xs)}
.pc-mov-ico svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pc-mov-t{font-size:var(--tipo-descripcion);color:var(--texto-1);display:block;line-height:1.3}
.pc-mov-c{font-size:var(--tipo-leyenda);color:var(--texto-3)}
.pc-mov-m{font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-dato);line-height:1;color:var(--texto-2)}
.pc-mov-m.mas{color:var(--yellow)}
.pc-mov-m.menos{color:var(--gris-3)}

/* ---------- EL TOP ---------- */
.pc-top{list-style:none;display:grid;gap:.5rem;counter-reset:pt}
.pc-top-fila{display:grid;grid-template-columns:2.5rem 2.25rem minmax(0,1fr) auto;gap:.9rem;align-items:center;
  padding:.65rem 1rem;background:var(--surface);clip-path:var(--bevel-sm)}
.pc-top-fila .p{font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-dato);color:var(--texto-3);line-height:1}
.pc-top-fila:nth-child(-n+3) .p{color:var(--yellow)}
.pc-top-fila .a{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--surface-2)}
.pc-top-fila .n{height:.7rem;background:var(--line);width:var(--w,60%)}
.pc-top-fila .s{font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-dato);color:var(--texto-2);line-height:1}
.pc-top-fila.yo{background:var(--brown)}
.pc-top-fila.yo .n{background:none;height:auto;width:auto;font-size:var(--tipo-descripcion);font-weight:600;color:var(--texto-1)}
.pc-top-fila.yo .p{color:var(--texto-1)}
/* Con datos (migración 78): la inicial en el círculo, el nombre y el saldo. */
.pc-top-fila.dato .a{display:grid;place-items:center;font-family:var(--fuente-display-e);font-weight:700;
  font-size:var(--tipo-descripcion);color:var(--texto-2)}
.pc-top-fila.dato .n{background:none;height:auto;width:auto;min-width:0;display:flex;align-items:center;gap:.5rem}
.pc-top-fila.dato .n-t{font-size:var(--tipo-descripcion);font-weight:600;color:var(--texto-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pc-top-fila.dato .s{display:inline-flex;align-items:center;gap:.4rem}
.pc-top-fila.dato .s img{width:1.1em;height:auto}
.pc-top-fila.yo .a{background:var(--yellow);color:var(--sobre-amarillo)}
.pc-top-publico{margin-top:var(--esp-bloque)}
.pc-top + .pc-estado,.pc-grupo-cab + .pc-nota{margin-bottom:1.1rem}
.pc-grupo-cab .pill{font-size:var(--tipo-etiqueta)}

/* El comando de Discord, como se escribe allí. */
.pc-cmd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--tipo-descripcion);font-weight:500;
  color:var(--yellow);background:var(--surface-2);padding:.15rem .45rem;white-space:nowrap}

/* ---------- LA TARJETA DE MISIÓN ---------- */
.pc-misiones{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:var(--esp-rejilla)}
.pc-mision{padding:calc(var(--esp-rejilla) * 1.2);display:flex;flex-direction:column;gap:.85rem;min-width:0}
.pc-mision-top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.pc-mision-top .pc-ico{width:1.75rem;height:1.75rem}
.pc-mision-cuando{margin-left:auto;font-size:var(--tipo-leyenda);color:var(--texto-3);white-space:nowrap}
.pc-mision h3{font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-subtitulo);line-height:1;letter-spacing:.01em;color:var(--texto-1)}
.pc-mision-desc{font-size:var(--tipo-descripcion);color:var(--texto-3);line-height:1.55}
.pc-premios{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto}
.pc-premios .bv-chip img{width:1.3em;height:1.3em}
.pc-racha{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:var(--tipo-leyenda);color:var(--texto-3);
  border-top:1px solid var(--line);padding-top:.75rem}
.pc-racha b{font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-dato);line-height:1;color:var(--texto-1)}
.pc-racha .pc-ico-s{color:var(--yellow);width:1.4em;height:1.4em}
.pc-racha.apagada .pc-ico-s{color:var(--texto-3)}
.pc-racha-sig{margin-left:auto}

/* COMPLETADA: el contorno amarillo, la barra llena y el sello. La primera
   vez que se ve en este periodo, el sello cae y la caja destella una vez
   (`.celebra`, la pone el JS). Al pulsarla, chispas (data-chispa). */
.pc-mision.completada{--filo-color:var(--yellow)}
.pc-mision.completada h3{color:var(--yellow)}
.pc-sello{display:inline-flex;align-items:center;gap:.35rem}
@media (prefers-reduced-motion: no-preference){
  @keyframes pc-sello{0%{transform:scale(2.2) rotate(-8deg);opacity:0}60%{transform:scale(.92) rotate(0);opacity:1}100%{transform:none}}
  @keyframes pc-destello{0%{background-position:150% 0}100%{background-position:-50% 0}}
  .pc-mision.celebra .pc-sello{animation:pc-sello .5s var(--mov-rebote) .25s both}
  .pc-mision.celebra::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 35%,rgba(255,198,33,.22) 50%,transparent 65%) 150% 0/250% 100% no-repeat;
    animation:pc-destello .9s ease-out .2s both}
}

/* Los grupos de misiones (Diarias, Semanales, Únicas). */
.pc-grupo{margin-top:var(--esp-bloque)}
.pc-grupo-cab{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.pc-grupo-cab h2{font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-subtitulo);line-height:1;letter-spacing:.01em}
.pc-grupo-cab span{font-size:var(--tipo-leyenda);color:var(--texto-3)}

/* ---------- RECOMPENSAS: EL CATÁLOGO QUE VIENE ----------
   Con aspecto de catálogo, pero sin precio: donde irá el precio va un
   candado y «— Trufas». Nada se puede pulsar todavía. */
.pc-cat{gap:.9rem}
/* La «foto» va dentro del relleno y con su propio bisel: a sangre, taparía
   la raya del chaflán de la caja. */
.pc-cat-img{aspect-ratio:16/9;display:grid;place-items:center;background:var(--surface-2);position:relative;overflow:hidden;clip-path:var(--bevel-sm)}
.pc-cat-img .pc-ico{width:3.5rem;height:3.5rem;transition:transform .4s var(--mov-rebote)}
.pc-cat:hover .pc-cat-img .pc-ico{transform:scale(1.12) rotate(-6deg)}
.pc-cat-img .pill{position:absolute;top:.8rem;left:.8rem}
.pc-cat-cuerpo{display:flex;flex-direction:column;gap:.6rem;flex:1}
.pc-t .pc-precio{margin-top:auto;display:flex;align-items:center;gap:.5rem;font-family:var(--fuente-display-e);font-weight:700;
  font-size:var(--tipo-dato);color:var(--texto-3);line-height:1;padding-top:.6rem;border-top:1px solid var(--line)}
.pc-precio img{width:1.1em;height:1.1em;filter:grayscale(1);opacity:.6}
.pc-precio .pc-ico-s{margin-left:auto;width:.9em;height:.9em}

/* Las tres verdades de las Trufas, en rejilla abierta. */
.pc-verdades{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--esp-rejilla)}
.pc-verdad{border-top:2px solid var(--line);padding-top:1.1rem;display:grid;gap:.5rem;align-content:start}
.pc-verdad h3{font-family:'Poppins',sans-serif;font-weight:600;font-size:var(--tipo-entradilla);text-transform:none;letter-spacing:0;line-height:1.3}
.pc-verdad p{font-size:var(--tipo-descripcion);color:var(--texto-3);line-height:1.55}
.pc-verdad .pc-ico{width:2rem;height:2rem}
.pc-verdad a{color:var(--yellow)}
@media (max-width:900px){ .pc-verdades{grid-template-columns:1fr} }

/* La moneda grande de la cabecera de Recompensas. Con assets/moneda3d.js
   es la Trufacoin en 3D; la imagen se queda de reserva en su sitio. */
.pc-moneda-grande{width:min(100%,18rem);justify-self:center}

/* La Trufacoin 3D del bot, posada en la esquina de abajo de la demo y medio
   fuera de ella. El envoltorio existe porque el clip-path de la .caja se
   la comería. */
.pc-demo-marco{position:relative;min-width:0}
.pc-demo-moneda{position:absolute;z-index:1;width:8rem;right:-2.5rem;bottom:-3.5rem}
@media (max-width:1100px){ .pc-demo-moneda{width:5.5rem;right:-1rem;bottom:-2.5rem} }
@media (max-width:520px){ .pc-demo-moneda{width:4.5rem;right:-.5rem;bottom:-2.25rem} }

/* ---------- REFERIDOS: EL ENLACE APAGADO ---------- */
.pc-enlace{padding:var(--esp-caja);display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.pc-campo{display:flex;align-items:stretch;gap:.6rem;flex-wrap:wrap}
.pc-campo-in{flex:1 1 12rem;min-width:0;position:relative;clip-path:var(--bevel-sm);background:var(--ink);
  --filo-color:var(--line);box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
  display:flex;align-items:center;gap:.6rem;padding:0 1rem;min-height:2.9rem;color:var(--texto-3);
  font-size:var(--tipo-descripcion);overflow:hidden}
.pc-campo-in span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .pc-campo-in::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- EL BOT: LA DEMO DE DISCORD ----------
   Un trozo de chat que se escribe solo: cada mensaje suma Trufas y el
   marcador de arriba sube. Sin JS (o con menos movimiento) se ven los tres
   mensajes y el total, quietos. Es un ejemplo: los valores reales los
   configura el staff en el Dashboard. */
.pc-demo{padding:calc(var(--esp-rejilla) * 1.2);display:grid;gap:1rem;min-width:0;--caja-fondo:var(--surface)}
.pc-demo-cab{display:flex;align-items:center;gap:.6rem;padding-bottom:.9rem;border-bottom:1px solid var(--line);
  font-size:var(--tipo-descripcion);color:var(--texto-2)}
.pc-demo-cab .hash{font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-dato);color:var(--texto-3);line-height:1}
.pc-demo-saldo{margin-left:auto;display:flex;align-items:center;gap:.45rem}
.pc-demo-saldo .pc-moneda{width:1.75rem}
.pc-demo-saldo b{font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-dato);color:var(--texto-1);line-height:1;
  min-width:3ch;text-align:right;font-variant-numeric:tabular-nums}
.pc-demo-lista{list-style:none;display:grid;gap:.9rem;min-height:15rem;align-content:start}
.pc-msg{display:grid;grid-template-columns:2.25rem minmax(0,1fr) auto;gap:.75rem;align-items:start}
.pc-msg-av{width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;
  font-family:var(--fuente-display-e);font-weight:700;font-size:var(--tipo-descripcion);color:var(--sobre-amarillo);background:var(--yellow-bajo)}
.pc-msg:nth-child(2) .pc-msg-av{background:var(--brown);color:var(--texto-1)}
.pc-msg:nth-child(3) .pc-msg-av{background:var(--gris-4)}
.pc-msg-q{font-size:var(--tipo-leyenda);font-weight:600;color:var(--texto-1)}
.pc-msg-q span{font-weight:300;color:var(--texto-3);margin-left:.4rem}
.pc-msg-t{font-size:var(--tipo-descripcion);color:var(--texto-2);line-height:1.45;margin-top:.1rem}
.pc-msg-voz{display:inline-flex;align-items:center;gap:.4rem;color:var(--texto-2)}
.pc-msg-mas{position:relative;align-self:center;display:inline-flex;align-items:center;gap:.3rem;
  font-family:var(--fuente-display-e);font-weight:800;font-size:var(--tipo-dato);color:var(--yellow);line-height:1;white-space:nowrap}
.pc-msg-mas img{width:1.1em;height:1.1em}
.pc-msg-mas small{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:var(--tipo-etiqueta);
  letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3)}
.pc-demo-pie{font-size:var(--tipo-leyenda);color:var(--texto-3)}
@media (prefers-reduced-motion: no-preference){
  .pc-demo.anima .pc-msg{opacity:0;translate:0 .75rem;transition:opacity .35s ease, translate .45s var(--mov-rebote)}
  .pc-demo.anima .pc-msg.visto{opacity:1;translate:0 0}
  .pc-demo.anima .pc-msg .pc-msg-mas{opacity:0;transform:translateY(.5rem) scale(.6)}
  .pc-demo.anima .pc-msg.cobrado .pc-msg-mas{opacity:1;transform:none;transition:opacity .25s ease, transform .4s var(--mov-rebote)}
  .pc-demo.anima .pc-msg-t .cursor{display:inline-block;width:.5ch;background:var(--yellow);height:1em;vertical-align:-.15em;margin-left:1px;
    animation:pc-parpadeo .8s steps(1) infinite}
  @keyframes pc-parpadeo{50%{opacity:0}}
  .pc-demo-saldo.sube b{animation:pc-sube .45s var(--mov-rebote)}
  .pc-demo-saldo.sube .pc-moneda img{transform:rotateY(360deg)}
  @keyframes pc-sube{0%{transform:scale(1)}40%{transform:scale(1.25);color:var(--yellow)}100%{transform:scale(1)}}
}

/* Los módulos del bot: tarjeta con icono y nombre. */
.pc-modulo .pc-ico{margin-bottom:.4rem}

/* Cómo se gana: rejilla de fuentes, abierta (filete arriba). */
.pc-fuentes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--esp-rejilla)}
.pc-fuente{border-top:1px solid var(--line);padding:1.2rem 0 1.4rem;display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:.4rem 1rem;align-content:start}
.pc-fuente .pc-ico{grid-row:span 2;width:2rem;height:2rem;transition:transform .3s var(--mov-rebote)}
.pc-fuente:hover .pc-ico{transform:translateY(-3px) rotate(-6deg)}
.pc-fuente h3{font-family:'Poppins',sans-serif;font-weight:600;font-size:var(--tipo-entradilla);text-transform:none;letter-spacing:0;line-height:1.3}
.pc-fuente p{font-size:var(--tipo-descripcion);color:var(--texto-3);line-height:1.5}
@media (max-width:900px){ .pc-fuentes{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .pc-fuentes{grid-template-columns:1fr} }

/* Los comandos: una lista abierta con el comando a la izquierda. */
.pc-cmds{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--esp-rejilla)}
.pc-cmds li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;align-items:baseline;padding:1rem 0;border-top:1px solid var(--line)}
.pc-cmds li p{font-size:var(--tipo-descripcion);color:var(--texto-2);line-height:1.5}
@media (max-width:760px){ .pc-cmds{grid-template-columns:1fr} }
@media (max-width:420px){ .pc-cmds li{grid-template-columns:1fr;gap:.4rem} }

/* El cierre de una página: frase + una acción amarilla. */
.pc-cierre{padding:var(--esp-caja);display:flex;align-items:center;justify-content:space-between;gap:var(--esp-rejilla);flex-wrap:wrap}
.pc-cierre p{font-size:var(--tipo-cuerpo);color:var(--texto-2);max-width:46ch}
.pc-cierre strong{font-weight:600;color:var(--texto-1)}

/* ---------- MÓVIL ---------- */
@media (max-width:520px){
  .pc-hero{padding-top:var(--esp-cabecera)}
  .pc-t,.pc-mision,.pc-demo{padding:var(--esp-rejilla)}
  .pc-top-fila{grid-template-columns:2rem 2rem minmax(0,1fr) auto;gap:.6rem;padding:.6rem .8rem}
  .pc-top-fila .a{width:2rem;height:2rem}
  .pc-nivel{width:5.25rem}
  .pc-marcador-n .pc-moneda{width:3.5rem}
}

/* ---------- UNA SECCIÓN, UNA PANTALLA ----------
   Estas páginas fluyen (son herramientas, como /perfil/ o /equipos/): no
   llevan .pantalla. Solo la cabecera del bot ocupa la primera pantalla, con
   la demo al lado. */
@media screen and (min-width:1024px){
  html.pantallas .pc-hero.pantalla{padding-block:2.5rem}
}

@media print{
  .pc-velo-prev,.pc-demo-lista .cursor{display:none}
  .pc-barra > i{transform:scaleX(var(--p,0))!important}
}