/* ═══════════════════════════════════════════════════════════════════════
   E.9 · M5 · REWARD FLOW — los keyframes

   La capa que en la Fase F se sustituye por Reanimated o por Rive. Ni el
   secuenciador ni las reglas dependen de nada de aquí.

   Dos decisiones que son la mitad de la sensación de calidad:

   · **NADA se mueve lineal.** `--rw-elastico` llega con peso y se asienta; lo
     lineal se percibe como «pantalla», lo elástico como «objeto».
   · **La escala del compás es discreta (1.0 → 1.14).** Un crecimiento grande
     parece un error de render; uno pequeño se lee como respiración. La
     anticipación la produce el TIEMPO que dura, no el tamaño.
═══════════════════════════════════════════════════════════════════════ */

:root {
  --rw-elastico: cubic-bezier(.22, 1.2, .36, 1);
  --rw-suave:    cubic-bezier(.16, 1, .3, 1);

  /* ── [F.12.9] LA FRANJA DEL «CONTINUAR» ──────────────────────────────
     UN solo número para las dos mitades del problema: lo que la escena deja
     libre por abajo y dónde se posa el botón. Mientras salgan del mismo token
     es IMPOSIBLE que el botón caiga fuera o encima del contenido; con dos
     números independientes volvería a pasar en cuanto uno cambie.
     Medido: botón 52 px de alto (15+15 de relleno + 22 de línea) + 20 de aire
     por debajo + 20 por encima = 92. */
  --rw-banda: 92px;
  --rw-banda-abajo: 20px;

  /* ── EN VENTANAS MUY ALTAS LA COMPOSICIÓN SE CENTRA, NO SE ESTIRA ─────
     La hoja ya decide eso para el ANCHO («en escritorio se centra con un ancho
     máximo, como una app móvil bien portada»); esto es la misma decisión para
     el ALTO. Sin ella, en un monitor de 1.200 px el contenido intrínseco
     —~620 px— dejaba 450 px de vacío entre las cajas y un botón clavado al
     borde inferior.
     Por encima de la altura de referencia, el sobrante se reparte a partes
     iguales arriba y abajo, y el botón sube EXACTAMENTE lo mismo que baja la
     cabecera: los dos leen esta variable, así que no pueden descuadrarse. */
  --rw-centrado: 0px;
}
@media (min-height: 920px) {
  :root { --rw-centrado: calc((100vh - 920px) / 2); }
}

/* ── La capa · interrumpe, no añade (mecanismo nº 1) ────────────────
   Opaca y a pantalla completa. Compitiendo con el feed detrás, la celebración
   no se lee como un logro sino como un aviso. */
/* ⚠️ F.12.8 · LA CAPA YA NO CENTRA UNA TARJETA: LA ESCENA LA LLENA.
   Tenía `gap:26px; padding:32px 22px` y `justify-content:center`, así que por
   muy «a pantalla completa» que fuera el contenedor, dentro vivía una columna
   de unos 300 px en medio de una pantalla vacía. Eso es lo que hacía que la
   celebración se leyera como un modal.
   Ahora la capa es sólo el lienzo —fondo y fundido— y la composición la monta
   la escena con las clases del reverso de las publicaciones.
   El fundido sube de .22s a .5s: la entrada también tiene que respirar. */
.rw-capa {
  position: fixed; inset: 0; z-index: 900;
  display: block; padding: 0;
  background: var(--bg);
  opacity: 0; transition: opacity .5s var(--rw-suave);
  -webkit-tap-highlight-color: transparent; cursor: pointer;
  overflow: hidden;
}
#reward-escena { position: absolute; inset: 0; }
.rw-capa.rw-abierta { opacity: 1; }
.rw-capa.hidden { display: none; }

/* Las escenas antiguas (hito, evolución, nivel, resultado) siguen siendo una
   columna centrada: no se tocan. Las dos rediseñadas montan un `.pfb` que
   ocupa el lienzo entero y no usan esta clase.
   Sí reservan la franja del botón por abajo: cualquiera de ellas puede ser la
   ÚLTIMA de la secuencia y quedarse en pantalla cuando aparece «Continuar». */
.rw-escena {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center;
  padding: 32px 22px calc(var(--rw-banda) + var(--rw-centrado) + env(safe-area-inset-bottom, 0px));
  animation: rw-entra .34s var(--rw-elastico) both;
}
@keyframes rw-entra {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* ── EL COMPÁS · el mecanismo nº 3 ──────────────────────────────────
   Se aplica al ELEMENTO, no a la capa: lo que crece es el icono, y el número
   se mueve después. Si creciera todo a la vez no habría anticipación. */
.rw-anticipa { animation: rw-latido .26s var(--rw-elastico) both; }
@keyframes rw-latido {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.14); }
  100% { transform: scale(1.06); }
}

.rw-cifra {
  font-size: 60px; font-weight: 900; letter-spacing: -.04em; line-height: 1;
  color: var(--tx-hi); font-variant-numeric: tabular-nums;
}
.rw-titulo   { font-size: 21px; font-weight: 800; color: var(--tx-hi); letter-spacing: -.02em; }
.rw-etiqueta { font-size: 13px; color: var(--tx-2); }

/* ── Llama ──────────────────────────────────────────────────────── */
.rw-llama-icono { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
.rw-llama-cuerpo { font-size: 78px; line-height: 1; filter: drop-shadow(0 6px 18px rgba(217,119,6,.45)); }
.rw-llama-halo {
  position: absolute; inset: 8px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217,119,6,.30), transparent 68%);
  animation: rw-halo 1.5s ease-in-out infinite;
}
@keyframes rw-halo { 0%,100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.13); opacity: 1; } }

/* ── Semana · el progreso se ve completarse (mecanismo nº 7) ─────────
   ⚠️ [F.12.9] AQUÍ VIVÍA EL «CÍRCULO CON PICO NEGRO» Y EL «CUADRADO NARANJA».
   Este bloque convertía el propio `.rw-dia` en el círculo: 34×34,
   `border-radius:50%`, `background: var(--surface)` y `border: 2px solid`.
   Desde F.12.8 `.rw-dia` YA NO ES el círculo: es la CELDA del panel de la
   semana (`.pfb-cell`), una caja en columna de ~40×56 que contiene el punto
   (`.rw-dia-punto`) y la letra del día. Aplicada a esa caja, la misma regla
   pintaba un rectángulo oscuro redondeado detrás del punto —el «pico»— y
   `.rw-dia-hecho` le daba el fondo de acento a la CELDA ENTERA: el cuadrado
   naranja. La forma no se ocultaba: se retira su causa.

   El punto es el ÚNICO elemento con forma y con color; la celda es sólo
   maquetación. Las reglas vivas están más abajo, en el bloque de la pantalla
   de racha (`.rw-semana-panel`, `.rw-dia-punto`).
   `.rw-semana-fila` (la fila suelta, sin panel) tampoco la pinta ya nadie:
   el único marcado de la semana es el de `escenas.js`, que monta el panel. */
.rw-dia {
  /* Sin fondo, sin borde y sin radio propios: la celda no es una forma. */
  background: none; border: 0; border-radius: 0; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--tx-3);
}

/* ── Rayos · el fondo de los momentos grandes ───────────────────────
   `conic-gradient` + rotación lenta: cuesta un solo compositing layer y no hay
   una sola partícula en el DOM. Cien nodos animándose es lo que convierte una
   celebración en un tirón en un móvil de gama media. */
.rw-rayos {
  position: absolute; width: 320px; height: 320px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(217,119,6,.20) 0 8deg, transparent 8deg 30deg);
  animation: rw-girar 9s linear infinite; opacity: 0; transition: opacity .4s ease;
  pointer-events: none;
}
.rw-celebra .rw-rayos { opacity: 1; }
@keyframes rw-girar { to { transform: rotate(360deg); } }

.rw-evo, .rw-hito, .rw-maestria { position: relative; }
.rw-evo-mascota { width: 168px; height: 168px; display: flex; align-items: center; justify-content: center; position: relative; }
.rw-evo-mascota img { width: 100%; height: 100%; object-fit: contain; }
.rw-evo-fallback { font-size: 76px; }
.rw-hito-num { font-size: 86px; font-weight: 900; color: var(--accent); line-height: 1; letter-spacing: -.05em; }
.rw-maestria-icono { font-size: 76px; }
.rw-nivel-insignia { position: relative; width: 96px; height: 96px; }

/* ── Duelo ──────────────────────────────────────────────────────── */
.rw-duelo-marcador { display: flex; align-items: baseline; gap: 12px; font-size: 56px; font-weight: 900; letter-spacing: -.04em; }
.rw-duelo-mio  { color: var(--accent); }
.rw-duelo-suyo { color: var(--tx-3); }
.rw-duelo-sep  { color: var(--tx-3); font-size: 30px; }
.rw-duelo-lose .rw-duelo-mio { color: var(--tx-3); }
.rw-duelo-lose .rw-duelo-suyo { color: var(--tx-2); }

/* ── Cifras · lo que te llevas ──────────────────────────────────── */
.rw-cifras-caja {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px 30px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border);
}
.rw-cifra-fila { display: flex; align-items: center; gap: 12px; }
.rw-cifra-fila .rw-cifra { font-size: 34px; min-width: 62px; text-align: right; }
.rw-cifra-ic { font-size: 25px; }
.rw-resumen { margin-bottom: 4px; }

/* ── Continuar · SOLO al final (mecanismo nº 6) ─────────────────────
   Un botón disponible desde el principio invita a saltarse la celebración, y
   entonces no hay celebración. Aparece con su propio retardo para que no
   compita con la última escena.

   ⚠️ [F.12.9] POR QUÉ ESTE BOTÓN NO SE VEÍA — y no era su tamaño.
   El marcado es `.rw-capa > #reward-escena + button`. La capa es
   `display:block` y el botón estaba EN FLUJO NORMAL, así que ocupaba la
   esquina superior izquierda… debajo de `#reward-escena`, que es
   `position:absolute; inset:0`. Un elemento posicionado pinta por encima de
   uno estático hermano, de modo que la escena —opaca y a pantalla completa—
   lo tapaba ENTERO. No estaba «cortado por el viewport»: estaba detrás de la
   escena, en la esquina de arriba, desde el primer día.

   La corrección es de composición y no un desplazamiento a ojo: el botón pasa
   a ocupar la franja que las escenas reservan (`--rw-banda`), centrado por
   `left/right:0 + margin:auto` —y NO por `translateX(-50%)`, que le robaría el
   `transform` a su propia animación de entrada— y con el área segura del móvil
   sumada al hueco de abajo. */
.rw-continuar {
  position: absolute; z-index: 2;
  left: 0; right: 0; margin: 0 auto;
  bottom: calc(var(--rw-banda-abajo) + var(--rw-centrado) + env(safe-area-inset-bottom, 0px));
  width: -moz-fit-content; width: fit-content;
  min-width: 220px; padding: 15px 30px; border: none; border-radius: 15px;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 800;
  cursor: pointer; opacity: 0; transform: translateY(12px);
  transition: opacity .3s ease, transform .34s var(--rw-elastico);
}
.rw-continuar.rw-cont-visible { opacity: 1; transform: none; }
.rw-continuar.hidden { display: none; }
.rw-continuar:active { transform: scale(.97); }

/* ── Intensidad · lo que significa VISUALMENTE ──────────────────────
   La lógica pasa el nivel (§3.4) y esta capa decide qué es «épica». Es
   exactamente el reparto que permite cambiar a Rive sin tocar reglas. */
.rw-capa[data-intensidad="discreta"] .rw-escena { animation-duration: .2s; }
.rw-capa[data-intensidad="discreta"] .rw-cifra  { font-size: 44px; }
.rw-capa[data-intensidad="discreta"] .rw-rayos  { display: none; }
.rw-capa[data-intensidad="epica"]    .rw-cifra  { font-size: 68px; }
.rw-capa[data-intensidad="epica"]    .rw-llama-cuerpo { font-size: 92px; }

/* ── Accesibilidad ──────────────────────────────────────────────────
   Quien pide menos movimiento recibe la MISMA secuencia sin los movimientos:
   se conservan los tiempos y el orden, porque la información —cuánto has
   ganado, qué ha subido— no puede depender de la animación. */
@media (prefers-reduced-motion: reduce) {
  .rw-escena, .rw-anticipa, .rw-llama-halo, .rw-rayos, .rw-continuar, .rw-dia {
    animation: none !important; transition: none !important; transform: none !important;
  }
  .rw-capa { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   F.12.7 · LA SECUENCIA REDISEÑADA
   ──────────────────────────────────────────────────────────────────────────
   Dos pantallas, y una sola gramática visual para las tres procedencias
   (publicación, Focus y duelo): lo que cambia entre ellas son los datos, nunca
   el aspecto.
══════════════════════════════════════════════════════════════════════════ */

/* ── PANTALLA 1 · racha ─────────────────────────────────────────────────
   La llama es ahora un SVG (el asset real), no un carácter tipográfico: la
   caja se dimensiona sola y `font-size` ya no pinta nada aquí. */
.rw-racha { display: flex; flex-direction: column; align-items: center; }

.rw-racha-cabeza {
  display: flex; flex-direction: column; align-items: center;
  /* FASE 3 · la llama y el número SUBEN para dejar sitio a la semana. Se anima
     `transform` y no `margin`: no provoca recálculo de diseño y se mantiene a
     60 fps en un móvil modesto. */
  transition: transform .52s cubic-bezier(.22,1,.3,1);
  will-change: transform;
}
.rw-racha-cabeza.rw-racha-arriba { transform: translateY(-26px) scale(.86); }

.rw-llama-cuerpo { font-size: 0; line-height: 0; filter: drop-shadow(0 10px 26px rgba(217,119,6,.5)); }
.rw-llama-icono  { width: auto; height: auto; padding: 6px; }
.rw-racha-num    { margin-top: 2px; }

/* ⚠️ [F.12.9] RETIRADO EL SEGUNDO ORIGEN DEL CUADRADO NARANJA.
   Aquí estaban `.rw-dia-hecho` (degradado de acento) y `.rw-dia-hoy.rw-dia-hecho`
   (anillo `box-shadow` de 3 px + latido `rwHoyLate`). Los tres se aplicaban al
   contenedor `.rw-dia`, no al punto: el degradado llenaba la celda rectangular,
   el anillo dibujaba el marco naranja alrededor de ella y el latido escalaba
   celda + letra en vez de sólo el círculo.
   El color, el anillo y el latido viven ahora —y sólo— en `.rw-dia-punto`
   (ver el bloque de `.rw-semana-panel` más abajo), que es la única forma
   circular de la composición. Con eso la transición es círculo → círculo
   naranja, que es lo que se pidió, sin tocar el tempo de la animación.

   También se retira el escalonado de `.rw-semana-fila`: esa fila dejó de
   montarse en F.12.8 (el marcado sólo produce `.rw-semana-panel`), así que sus
   siete `nth-child` y `rwDiaEntra` eran selectores muertos. */
.rw-semana-oculta { opacity: 0; pointer-events: none; }

/* El CONTINUAR de esta pantalla. Comparte aspecto con el del anfitrión —es el
   mismo gesto— pero vive dentro de la escena porque tiene que aparecer A MITAD
   de la secuencia, no al final. */
.rw-cont {
  margin-top: 22px; padding: 13px 34px;
  border: none; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2, #b45309) 100%);
  box-shadow: 0 10px 26px rgba(217,119,6,.4);
  -webkit-tap-highlight-color: transparent;
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.3,1);
  animation: rwContRespira 2.4s ease-in-out 1.2s infinite;
}
.rw-cont-oculto { opacity: 0; transform: translateY(10px); pointer-events: none; animation: none; }
.rw-cont:active { transform: scale(.96); }
.rw-cont:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes rwContRespira {
  0%, 100% { box-shadow: 0 10px 26px rgba(217,119,6,.4); }
  50%      { box-shadow: 0 10px 34px rgba(217,119,6,.62); }
}

/* ── PANTALLA 2 · el companion ──────────────────────────────────────────
   Reutilizada por las tres procedencias. */
.rw-comp { display: flex; flex-direction: column; align-items: center; width: 100%; }

.rw-comp-top {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .42s ease, transform .42s cubic-bezier(.22,1,.3,1);
}
.rw-comp-top.rw-comp-top-visible { opacity: 1; transform: none; }
.rw-comp-stat {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--tx-2);
}
.rw-comp-stat b { font-size: 19px; font-weight: 800; color: var(--tx-hi); letter-spacing: -.02em; }
.rw-comp-nivel svg { flex-shrink: 0; }

/* El arte, grande y con halo — el mismo lenguaje que el reverso de las
   publicaciones, no un modal de «+10 monedas». */
.rw-comp-arte { position: relative; margin: 14px 0 4px; line-height: 0; }
.rw-comp-aura {
  position: absolute; inset: -18%;
  background: radial-gradient(circle at 50% 45%, rgba(217,119,6,.32) 0%, rgba(217,119,6,0) 66%);
  pointer-events: none;
  animation: rwAuraLatido 3.2s ease-in-out infinite;
}
@keyframes rwAuraLatido { 0%,100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.rw-comp-arte img { filter: drop-shadow(0 18px 34px rgba(0,0,0,.55)); }
.rw-comp-nombre {
  font-size: 13px; font-weight: 700; color: var(--tx-2);
  letter-spacing: -.01em; margin-bottom: 4px; text-align: center;
}

/* Las tres recompensas, una al lado de otra. `minmax(0,1fr)` y no `1fr`: sin el
   mínimo a cero, una cifra larga ensancha su columna y desborda en un móvil
   estrecho en vez de encogerse. */
.rw-comp-premios {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px; width: 100%; max-width: 340px; margin-top: 16px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .42s ease, transform .42s cubic-bezier(.22,1,.3,1);
}
.rw-comp-premios.rw-comp-premios-visible { opacity: 1; transform: none; }
.rw-premio {
  padding: 12px 6px; border-radius: 15px; text-align: center; min-width: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.rw-premio-n {
  font-size: 24px; font-weight: 850; letter-spacing: -.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis;
}
.rw-premio-et {
  margin-top: 3px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--tx-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rw-p-coins .rw-premio-n { color: #f0b429; }
.rw-p-prax  .rw-premio-n { color: var(--accent); }
.rw-p-mae   .rw-premio-n { color: #a855f7; }

/* Móvil estrecho: las tres siguen cabiendo en fila, encogiendo la tipografía
   antes que romper la rejilla. */
@media (max-width: 360px) {
  .rw-comp-premios { gap: 7px; }
  .rw-premio { padding: 10px 4px; border-radius: 13px; }
  .rw-premio-n  { font-size: 20px; }
  .rw-premio-et { font-size: 8.5px; letter-spacing: .04em; }
  .rw-comp-top  { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .rw-racha-cabeza, .rw-comp-top, .rw-comp-premios, .rw-cont { transition: none; }
  .rw-comp-aura, .rw-cont { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   F.12.8 · LAS DOS EXPERIENCIAS, A PANTALLA COMPLETA
   ──────────────────────────────────────────────────────────────────────────
   El lenguaje visual NO se inventa aquí: es el del reverso de las
   publicaciones (`.pfb*`, definido junto a las cartas en `index.html`). Lo que
   añade este bloque es (a) un modificador de TAMAÑO para que esa misma
   composición funcione ocupando el viewport en vez de una carta de 320 px, y
   (b) el mecanismo de revelado escalonado.

   Ni una regla redefine el aspecto de un `.pfb-*`: sólo dimensiones, para no
   partir en dos el sistema visual. Si mañana cambia el cristal de los paneles
   de las cartas, estas pantallas cambian con él.
══════════════════════════════════════════════════════════════════════════ */

/* ── EL LIENZO ─────────────────────────────────────────────────────────── */
.rw-pfb {
  position: absolute; inset: 0;
  /* ⚠️ Se REDECLARAN `display` y `flex-direction` aunque `.pfb` ya los trae:
     esta hoja tiene que poder montar la composición sin depender de que el
     bloque incrustado siga diciendo lo mismo. Lo que NO se redeclara es el
     aspecto (cristal, bordes, tipografía): eso se hereda a propósito. */
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between;
  /* Aire real arriba y abajo + área segura del móvil: el botón de Continuar
     no puede acabar debajo del indicador de inicio de un iPhone. */
  padding: calc(30px + env(safe-area-inset-top, 0px)) 20px
           calc(26px + env(safe-area-inset-bottom, 0px));
  transition: opacity .3s var(--rw-suave), transform .3s var(--rw-suave);
}
/* La salida de la pantalla de racha encadena con la del companion: se va hacia
   arriba mientras la siguiente entra, en vez de cortar a negro. */
.rw-pfb-sale { opacity: 0; transform: translateY(-22px) scale(.985); }

/* ── EL REVELADO · lo que hace que se perciba una secuencia ────────────── */
.rw-oculto { opacity: 0 !important; transform: translateY(16px); pointer-events: none; }
.rw-pfb .pfb-panel,
.rw-pfb .pfb-cell,
.rw-pfb .pfb-vsep,
.rw-pfb .pfb-hero,
.rw-pfb .pfb-name,
.rw-pfb .pfb-pillrow,
.rw-pfb .pfb-rings,
.rw-pfb .pfb-glow,
.rw-pfb .rw-llama-icono,
.rw-pfb .rw-racha-num,
.rw-pfb .rw-cont {
  opacity: 1; transform: none;
  transition: opacity .72s var(--rw-suave), transform .72s var(--rw-suave);
}
/* El halo y los anillos entran con escala, no con desplazamiento: son luz. */
.rw-pfb .pfb-rings.rw-oculto,
.rw-pfb .pfb-glow.rw-oculto { transform: translate(-50%,-50%) scale(.82); }
.rw-pfb .pfb-rings, .rw-pfb .pfb-glow { transition: opacity 1.1s var(--rw-suave), transform 1.1s var(--rw-suave); }

/* El companion entra desde algo más lejos y más despacio que el resto: es el
   protagonista, y su entrada es la que marca el tempo de la pantalla. */
.rw-pfb .pfb-hero.rw-oculto { transform: translateY(26px) scale(.92); }
.rw-pfb .pfb-hero { transition: opacity 1.05s var(--rw-suave), transform 1.05s var(--rw-suave); }

/* ── TAMAÑOS A PANTALLA COMPLETA (el modificador) ──────────────────────── */
/* ⚠️ [F.12.9] AQUÍ HABÍA UN `padding: 30px 20px 26px` QUE ANULABA EL ÁREA
   SEGURA. `.pfb-xl` y `.rw-pfb` tienen la misma especificidad y siempre van
   juntas en el mismo nodo, pero ésta se declara DESPUÉS: ganaba, y con ella se
   perdían los `env(safe-area-inset-*)` de `.rw-pfb`. En un iPhone eso metía la
   composición bajo la muesca y bajo el indicador de inicio.
   El relleno del lienzo lo fija `.rw-pfb` y sólo `.rw-pfb`; este modificador
   se ocupa de TAMAÑOS, que es lo que promete su comentario. */
.pfb-xl .pfb-panel { padding: 16px 10px; border-radius: 22px; max-width: 520px; }
.pfb-xl .pfb-cell { gap: 12px; }
.pfb-xl .pfb-cell-v { font-size: 24px; }
.pfb-xl .pfb-cell-l { font-size: 10px; }
.pfb-xl .pfb-vsep { height: 44px; }
.pfb-xl.pfb-panel-b3 .pfb-cell-v, .pfb-xl .pfb-panel-b3 .pfb-cell-v { font-size: 20px; }
.pfb-xl.pfb-panel-b3 .pfb-cell-l, .pfb-xl .pfb-panel-b3 .pfb-cell-l { font-size: 9px; }
.pfb-xl .pfb-name { font-size: 26px; }
.pfb-xl .pfb-hero { padding: 4px 0; }
.pfb-xl .pfb-rings i:nth-child(1) { width: 260px; height: 260px; }
.pfb-xl .pfb-rings i:nth-child(2) { width: 380px; height: 380px; }
.pfb-xl .pfb-rings i:nth-child(3) { width: 500px; height: 500px; }
.pfb-xl .pfb-glow { width: 92%; max-width: 520px; }

/* En escritorio la composición NO se estira: se centra con un ancho máximo,
   como una app móvil bien portada. Estirar 500 px de contenido a 1.400 es lo
   que hace que una pantalla parezca una web. */
.pfb-xl > *:not(.pfb-amb):not(.pfb-rings):not(.pfb-glow):not(.pfb-p):not(.rw-cont) {
  width: 100%; max-width: 520px; margin-left: auto; margin-right: auto;
}
/* El botón NO: un «Continuar» de 520 px de ancho no es un botón, es una barra.
   Se centra por sí mismo y conserva su tamaño natural. */
.pfb-xl > .rw-cont { width: auto; max-width: none; align-self: center; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   [F.12.9] PANTALLA DEL COMPANION · las proporciones, revisadas enteras
   ──────────────────────────────────────────────────────────────────────────
   Lo que estaba mal NO era el tamaño del botón: era el reparto del alto.

   `.pfb-hero` es `flex:1` y `.pfb-panel-b` lleva `margin-top:auto`, así que el
   companion se quedaba con TODO el espacio sobrante y las cajas de premios se
   pegaban al borde inferior. Y dentro de ese hueco enorme la imagen estaba
   limitada por `max-width:68%`, de modo que el sobrante no lo ocupaba el
   companion sino el AIRE alrededor del companion: un vacío de ~100 px entre la
   mascota y las cajas, con la mascota más pequeña de lo que cabía. Sumado a
   que la franja del botón no estaba reservada por nadie, la composición se
   comía el viewport entero.

   El reparto pasa a ser explícito, de arriba abajo:

       panel de estado                (tamaño propio)
       companion   ← crece, TOPADO    (el protagonista, pero acotado)
       nombre · píldoras              (el «pequeño gap» que se pidió)
       cajas de premios               (justo debajo, sin `margin-top:auto`)
       espacio limpio                 (todo el sobrante, aquí y no arriba)
       CONTINUAR                      (en la franja reservada)

   El tope del companion es `min(44vh, 420px)`: en vh para que acompañe al alto
   real del móvil, y con un techo en px para que en un escritorio de 1.200 no se
   convierta en un póster. Cuando la pantalla no da para tanto, `flex-shrink`
   encoge la caja y `max-height:100%` encoge la imagen con ella — la
   composición se adapta sola en vez de depender de un breakpoint por modelo.
══════════════════════════════════════════════════════════════════════════ */
.rw-pfb-comp {
  /* Nada de `space-between`: repartiría el sobrante por IGUAL entre los cuatro
     huecos y despegaría el nombre y las píldoras del companion, que son su
     identidad y tienen que ir juntos. El reparto se hace con dos únicos
     elastómeros —ver `::after` justo abajo—, y el resto de la columna se apila
     desde arriba con sus separaciones propias. */
  justify-content: flex-start;
  padding-bottom: calc(var(--rw-banda) + env(safe-area-inset-bottom, 0px));
  padding-top: calc(22px + var(--rw-centrado) + env(safe-area-inset-top, 0px));
}
/* ⚠️ EL SEGUNDO ELASTÓMERO. Sin él todo el sobrante caía en un solo sitio y la
   pantalla quedaba descompensada: con `flex-start` se abría un vacío de ~180 px
   entre las cajas y el botón, y con la caja del companion creciendo sola el
   vacío se abría entre la mascota y las cajas — que es el defecto original.
   Con dos cajas elásticas del mismo peso, el aire sobrante se parte por la
   mitad ENTRE LA MASCOTA Y EL BOTÓN, en cualquier alto de pantalla y sin un
   solo breakpoint. Es un `::after` y no un `<div>` a propósito: es espacio, no
   contenido, y así ninguna escena tiene que acordarse de pintarlo. */
.rw-pfb-comp::after { content: ''; flex: 1 1 0; min-height: 0; }
/* ⚠️ EL TOPE ESTÁ CALIBRADO CONTRA EL ARTE REAL, NO A OJO: los PNG de las
   mascotas son de 280×280 y `.pfb-hero img` los deja a tamaño natural
   (`width/height: auto !important`), así que el companion NO puede medir más
   de 280 px de alto. Todo lo que la caja crezca por encima de eso es AIRE
   alrededor del companion — que era exactamente el hueco que separaba la
   mascota de las cajas. El tope es la RED para ventanas de escritorio muy
   altas —donde media pantalla de aire alrededor de un PNG de 280 px sería
   ridícula—; el reparto normal lo hace el `::after` de arriba.
   Sigue siendo `flex: 1 1 auto` y no un alto fijo: en pantallas bajas la caja
   ENCOGE y, al quedar su alto definido por el reparto flex, el `max-height:100%`
   de la imagen se resuelve y el arte encoge con ella. */
.rw-pfb-comp .pfb-hero {
  flex: 1 1 auto; min-height: 0;
  max-height: min(46vh, 420px);
  padding: 4px 0 0;
}
/* Más ancho que el 68 % de la carta: en un móvil estrecho el ancho dejaba de
   dar los 280 px del arte y lo encogía sin necesidad. Con 88 % el companion se
   ve a tamaño completo desde 320 px de pantalla. */
.rw-pfb-comp .pfb-hero img { max-width: 88%; max-height: 100%; }
.rw-pfb-comp .pfb-name    { margin-bottom: 5px; }
.rw-pfb-comp .pfb-pillrow { margin-bottom: 12px; }
/* ⚠️ SIN ESTO NO HAY ARREGLO POSIBLE: `margin-top:auto` empuja el panel de
   premios al fondo del lienzo, y ningún ajuste de gaps puede acercarlo al
   companion mientras siga ahí. */
.rw-pfb-comp .pfb-panel-b { margin-top: 0; }

/* ── PANTALLA DE RACHA ─────────────────────────────────────────────────── */
.rw-racha-cabeza {
  /* Crece para ocupar el hueco libre y se centra DENTRO de él: así la llama y
     el número quedan en el centro óptico de la pantalla en vez de pegados
     arriba, que es lo que producía el vacío del medio. */
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  position: relative; z-index: 1;
  transition: transform .9s var(--rw-suave);
  will-change: transform;
}
.rw-racha-arriba { transform: translateY(-3vh) scale(.88); }
.rw-llama-icono { line-height: 0; filter: drop-shadow(0 18px 44px rgba(255,140,0,.42)); }
.rw-llama-cuerpo { font-size: 0; line-height: 0; }
/* La llama entra con desenfoque y escala: «aparece» en vez de «se enciende». */
.rw-pfb .rw-llama-icono.rw-oculto { transform: scale(.86); filter: blur(10px) drop-shadow(0 0 0 transparent); }
.rw-pfb .rw-llama-icono { transition: opacity 1.15s var(--rw-suave), transform 1.15s var(--rw-suave), filter 1.15s var(--rw-suave); }
.rw-racha-num { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rw-racha-num .rw-cifra { font-size: clamp(56px, 17vw, 92px); }
.rw-racha-num .pfb-cell-l { font-size: 12px; }

/* La semana es un panel de cristal — el MISMO de las cartas — con una celda
   por día. Cada día tiene presencia real, no un punto de 8 px. */
/* ⚠️ ALTURA EXPLÍCITA, medida y no supuesta. La celda se quedaba en 34 px con
   un contenido de 53 (punto 32 + hueco 9 + etiqueta), así que la letra se
   montaba sobre el círculo. Con `align-items:stretch` en el panel y una altura
   mínima en la celda, la caja crece con su contenido en vez de recortarlo.
   La semana ocupa además una franja de verdad, que es lo que se pidió. */
.rw-semana-panel {
  justify-content: space-between; align-items: stretch;
  flex-shrink: 0; margin-bottom: 30px; padding: 18px 10px;
}
.rw-semana-panel .rw-dia { min-height: 56px; }
/* ⚠️ `flex: 0 0 <n>px` y NO `width`. `.pfb-cell` es `flex:1` y su hijo se
   estiraba a lo ancho de la celda: los puntos salían ELIPSES de 71×30. Y el
   `gap` de `.pfb-cell` (11px, en fila) no separaba nada al cambiar a columna,
   así que la letra se montaba sobre el punto. Las dos cosas se ven en cuanto se
   mira la pantalla; ninguna la habría cazado un test. */
.rw-semana-panel .rw-dia {
  flex: 1 1 0; min-width: 0;
  flex-direction: column; justify-content: center; gap: 9px;
}
/* ⚠️ EL PUNTO ES LA ÚNICA FORMA DE LA COMPOSICIÓN, y por eso lleva las tres
   cosas que definen un círculo perfecto: los DOS ejes al mismo valor
   (`flex-basis` fija el alto porque la celda es una columna; `width` fija el
   ancho), `flex-shrink:0` para que la rejilla no lo aplaste, y
   `border-box`+`background-clip` por defecto, que hacen que el degradado llegue
   hasta el filo sin dejar un anillo del color anterior. Si algún día cambia el
   tamaño hay que cambiar LOS TRES valores a la vez: cambiar sólo `width`
   devuelve una elipse (era el caso de la consulta de ≤360 px, corregido abajo). */
.rw-dia-punto {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  transition: background .5s var(--rw-suave), border-color .5s var(--rw-suave),
              box-shadow .5s var(--rw-suave), transform .5s var(--rw-elastico);
}
.rw-dia-hecho .rw-dia-punto {
  background: linear-gradient(160deg, #ffa300 0%, #f15a00 100%);
  border-color: transparent;
  box-shadow: 0 0 16px rgba(255,140,0,.5);
}
.rw-dia-hoy .pfb-cell-l { color: #fff; }
.rw-dia-hoy.rw-dia-hecho .rw-dia-punto {
  box-shadow: 0 0 0 3px rgba(255,140,0,.26), 0 0 22px rgba(255,140,0,.6);
}
.rw-dia-marcando .rw-dia-punto { animation: rwHoyEntra .9s var(--rw-elastico) both; }
@keyframes rwHoyEntra {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); }
  100% { transform: scale(1.06); }
}

/* ── EL BOTÓN CONTINUAR ────────────────────────────────────────────────── */
.rw-cont {
  align-self: center;
  padding: 16px 44px; border: none; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: linear-gradient(135deg, var(--accent-hi, #f59e0b) 0%, var(--accent, #d97706) 100%);
  box-shadow: 0 12px 30px rgba(217,119,6,.42), inset 0 1px 0 rgba(255,235,190,.4);
  -webkit-tap-highlight-color: transparent;
}
.rw-cont:active { transform: scale(.96); }
.rw-cont:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────
   La composición se adapta por PROPORCIONES (vh, `flex-shrink`, `min()`), no
   por breakpoints: estas consultas sólo aprietan las holguras donde el alto
   deja de sobrar. Ninguna corrige una resolución concreta.

   Comprobado que «Continuar» entra completo, sumando los altos reales, en:
     320×568, 360×640, 375×667, 390×844, 430×932 y escritorio. */
@media (max-height: 760px) {
  /* La franja se estrecha con el botón: los dos salen del mismo token, así
     que el hueco reservado sigue siendo exactamente el que ocupa. */
  :root { --rw-banda: 76px; --rw-banda-abajo: 14px; }
  .rw-continuar { padding: 12px 26px; font-size: 15px; }
  .rw-pfb { padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
  .rw-pfb-comp { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  /* El alto del companion NO se topa aquí: el `min(46vh,420px)` global ya
     encoge con la pantalla y el `::after` reparte lo que sobre. Un tope extra
     sólo servía para engordar el vacío de abajo. */
  .rw-pfb-comp .pfb-name { font-size: 22px; }
  .pfb-xl .pfb-panel { padding: 12px 8px; }
  .rw-semana-panel { margin-bottom: 18px; padding: 14px 8px; }
}
@media (max-height: 700px) {
  .pfb-xl .pfb-hero img { max-height: 34vh; width: auto; }
  .rw-racha-num .rw-cifra { font-size: clamp(44px, 13vh, 72px); }
  .rw-cont { padding: 13px 36px; }
}
/* Alturas de verdad pequeñas (iPhone SE en horizontal, ventanas recortadas):
   lo primero que cede es el arte, nunca el botón. */
@media (max-height: 620px) {
  :root { --rw-banda: 66px; --rw-banda-abajo: 10px; }
  .rw-continuar { padding: 10px 24px; font-size: 14px; }
  .rw-pfb-comp .pfb-name { font-size: 19px; margin-bottom: 3px; }
  .rw-pfb-comp .pfb-pillrow { margin-bottom: 8px; }
}
@media (max-width: 360px) {
  .pfb-xl .pfb-panel { padding: 13px 6px; }
  .pfb-xl .pfb-cell { gap: 8px; }
  .pfb-xl .pfb-cell-v { font-size: 19px; }
  .pfb-xl .pfb-cell-l { font-size: 8.5px; }
  .pfb-xl .pfb-cell-emo { font-size: 20px; }
  /* Los TRES a la vez: sin `flex-basis` el punto medía 24 de ancho y 32 de
     alto —una elipse— en cualquier móvil de 360 px o menos. */
  .rw-dia-punto { flex-basis: 24px; width: 24px; height: 24px; }
  .rw-semana-panel .rw-dia { min-height: 48px; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .rw-pfb, .rw-pfb *, .rw-racha-cabeza { transition-duration: .01ms !important; }
  .rw-dia-marcando .rw-dia-punto { animation: none; }
}