/* La Poción del Arcoíris — base: RECETARIO DE HADA. Páginas de papel con orilla rasgada y cinta de color, sellos de
   "¡Poción lista!", etiquetas de frasco y botones en forma de frasco, el contador como 5 frasquitos en una repisa, la nota
   con cinta adhesiva y el "¡cumple!" en un listón. Colores: papel, tinta ciruela, rosa fresa, oro. Letras: Sansita Swashed
   (títulos, cuento) + Mali (manuscrita y legible). Todo cuelga de html.pa. Por dentro se mide contra el marco (.app es un
   contenedor de tamaño: cqw/cqh), nunca contra la ventana. Contraste de textos ≥ 4.5:1. */
.pa {
  --tinta: #43265A; --tinta-2: #6A4A82; --papel: #FFF7E8; --papel-2: #FBE8CF; --papel-3: #F1D9B8;
  --rosa: #C32F7F; --rosa-d: #A01F68; --rosa-l: #FF8DB8; --oro: #FFC42E; --oro-d: #8A5A00; --corcho: #CE9A63; --corcho-d: #8F6235; --verde: #13795F;
  --pocion: #FF4F9A; --claro: #FFC0DD;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --f-titulo: "Sansita Swashed", "Mali", Georgia, serif;
  --f-texto: "Mali", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* orilla rasgada del papel (arriba y abajo): un trazo irregular que se repite */
  --orilla-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' preserveAspectRatio='none'%3E%3Cpath d='M0 12V6c6-3 12 2 19 0s9-5 16-3 9 6 17 4 11-5 19-3 10 5 18 3 12-4 19-2 8 4 12 3v4z' fill='%23FFF7E8'/%3E%3C/svg%3E");
  --orilla-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' preserveAspectRatio='none'%3E%3Cpath d='M0 0v6c6 3 12-2 19 0s9 5 16 3 9-6 17-4 11 5 19 3 10-5 18-3 12 4 19 2 8-4 12-3V0z' fill='%23FFF7E8'/%3E%3C/svg%3E");
  --sombra-p: drop-shadow(0 2px 0 rgba(67, 38, 90, .28)) drop-shadow(0 10px 16px rgba(67, 38, 90, .22));
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.pa *, .pa *::before, .pa *::after { box-sizing: border-box; }
.pa body { margin: 0; font-family: var(--f-texto); color: var(--tinta); overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
.pa button { font: inherit; color: inherit; }
.pa :focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; box-shadow: 0 0 0 6px var(--oro); }
.pa .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pa .noscript { margin: 24px; font: 700 18px/1.5 var(--f-texto); background: var(--papel); padding: 16px; border-radius: 10px; }

/* ---------- marco ---------- */
.pa .fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(45% 32% at 50% 40%, #FFF2C9, rgba(255, 242, 201, 0) 72%), linear-gradient(180deg, #FFD6C8 0%, #FFE6D2 45%, #FFC9DA 100%); }
.pa:not(.is-showcase) .fondo { filter: blur(6px) saturate(1.05); }
.pa.is-showcase .fondo { display: none; }
.pa .app { position: fixed; inset: 0; z-index: 1; overflow: hidden; isolation: isolate; container-type: size; container-name: marco; background: #FFE0D2; transition: opacity .5s ease; }
/* computadora y tableta: el mismo marco de teléfono que los demás diseños */
@media (min-width: 560px) and (min-height: 560px) {
  .pa .app { inset: auto; left: 50%; top: 50%; width: min(430px, 100vw - 32px); height: min(932px, 100dvh - 40px); transform: translate(-50%, -50%); border-radius: 30px;
    box-shadow: 0 0 0 4px var(--papel), 0 0 0 11px #E9A7C4, 0 0 0 14px var(--tinta), 0 30px 90px rgba(67, 38, 90, .42); }
}
.pa.is-showcase .app { inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 0 !important; box-shadow: none !important; }
.pa .stage { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none; }
.pa .stage:focus-visible { box-shadow: inset 0 0 0 4px var(--oro), inset 0 0 0 7px var(--tinta); }
.pa .gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s ease; }
.pa .gl.is-on { opacity: 1; }
.pa .vineta { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(130% 90% at 50% 52%, rgba(255, 220, 200, 0) 62%, rgba(150, 70, 110, .2) 100%); }
.pa .sin-gl .stage { background: url("../assets/poster/fondo-pocion.webp") center / cover no-repeat, linear-gradient(180deg, #FFD6C8, #FFC9DA); }
.pa .ui { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.pa .ui > * { pointer-events: auto; }

/* ---------- página de recetario: papel, orilla rasgada ---------- */
.pa .pagina { position: relative; background:
  linear-gradient(90deg, rgba(67, 38, 90, .07), rgba(67, 38, 90, 0) 26px),
  radial-gradient(120% 90% at 80% 10%, #FFFBF1, var(--papel) 55%, var(--papel-2));
  color: var(--tinta); filter: var(--sombra-p); }
.pa .pagina::before, .pa .pagina::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background-size: 120px 12px; background-repeat: repeat-x; pointer-events: none; }
.pa .pagina::before { top: -11px; background-image: var(--orilla-a); }
.pa .pagina::after { bottom: -11px; background-image: var(--orilla-b); }

/* ---------- botones: FRASCO (de lado, con cuello y corcho), ETIQUETA (de papel, con hilo) y TAPÓN (redondo) ---------- */
.pa .frasco-cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 30px 0 22px; margin-right: 14px;
  border: 0; border-radius: 26px 16px 16px 26px; color: #fff; text-decoration: none; cursor: pointer;
  font: 700 17px/1.12 var(--f-texto); text-align: center;
  background: linear-gradient(180deg, #CB3586 0%, var(--rosa) 52%, var(--rosa-d) 100%);
  box-shadow: inset 0 0 0 2.5px var(--tinta), inset 0 4px 0 2px rgba(255, 255, 255, .28), 0 3px 0 var(--tinta), 0 8px 14px rgba(67, 38, 90, .28);
  transition: transform .1s ease, box-shadow .1s ease; touch-action: manipulation; user-select: none;
}
.pa .frasco-cta > * { position: relative; }
/* cuello y corcho, a la derecha */
.pa .frasco-cta::before { content: ""; position: absolute; right: -9px; top: 50%; width: 12px; height: 24px; margin-top: -12px; background: #E2DCE8; border: 2.5px solid var(--tinta); border-left: 0; }
.pa .frasco-cta::after { content: ""; position: absolute; right: -19px; top: 50%; width: 12px; height: 18px; margin-top: -9px; border-radius: 3px 5px 5px 3px; background: linear-gradient(180deg, #E0B07A, var(--corcho) 60%, var(--corcho-d)); border: 2.5px solid var(--tinta); }
.pa .frasco-cta:active { transform: translateY(2px); box-shadow: inset 0 0 0 2.5px var(--tinta), inset 0 4px 0 2px rgba(255, 255, 255, .28), 0 1px 0 var(--tinta); }
.pa .frasco-cta.is-grande { min-height: 62px; font: 800 22px/1.05 var(--f-titulo); padding: 0 34px 0 26px; border-radius: 32px 18px 18px 32px; }
.pa .frasco-cta.is-bloque { width: calc(100% - 14px); }
.pa .frasco-cta.is-chico { min-height: 46px; font-size: 15.5px; padding: 0 20px 0 14px; }
.pa .pi { display: inline-flex; }

.pa .etiqueta {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 14px 0 26px;
  border: 0; border-radius: 8px; color: var(--tinta); text-decoration: none; cursor: pointer; font: 700 15.5px/1.14 var(--f-texto); text-align: center;
  background: linear-gradient(180deg, #FFFDF6, var(--papel-2)); box-shadow: inset 0 0 0 2px var(--tinta), 0 2px 0 var(--tinta), 0 5px 9px rgba(67, 38, 90, .18); touch-action: manipulation;
}
.pa .etiqueta > * { position: relative; }
/* ojillo del hilo */
.pa .etiqueta::before { content: ""; position: absolute; left: 9px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #FFD9E8; box-shadow: inset 0 0 0 2px var(--tinta); }
.pa .etiqueta:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--tinta); }
.pa .etiqueta.is-wa { background: linear-gradient(180deg, #D9F7E2, #A5E9BD); }
.pa .etiqueta.is-mini { min-height: 44px; padding: 0 12px 0 22px; font-size: 14.5px; }

.pa .tapon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; color: var(--tinta); cursor: pointer; touch-action: manipulation;
  background: radial-gradient(70% 55% at 34% 26%, #fff, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #FFEFD8, #F3D6AE); box-shadow: inset 0 0 0 2.5px var(--tinta), 0 3px 0 var(--tinta); }
.pa .tapon:active { transform: translateY(2px); box-shadow: inset 0 0 0 2.5px var(--tinta), 0 1px 0 var(--tinta); }
.pa .enlace { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--tinta); cursor: pointer; font: 700 15px/1.2 var(--f-texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* ---------- HUD ---------- */
.pa .hud { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: calc(10px + var(--safe-t)) 11px 0; pointer-events: none; z-index: 8; transition: opacity .3s; }
.pa .hud > * { pointer-events: auto; }
.pa .hud.is-intro { opacity: 0; }
.pa .hud.is-portada .repisita { visibility: hidden; }
.pa .repisita { position: relative; display: flex; align-items: flex-end; gap: 3px; margin: 0; padding: 3px 10px 0; min-height: 50px; border-bottom: 7px solid var(--corcho); border-radius: 0 0 3px 3px; filter: drop-shadow(0 2px 0 var(--tinta)); }
.pa .repisita::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: -9.5px; height: 3px; background: var(--tinta); border-radius: 2px; }
.pa .rp { display: block; line-height: 0; transform-origin: 50% 100%; }
.pa .rp.is-pop { animation: pa-rp .55s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes pa-rp { 0% { transform: scale(.4, 1.5); } 60% { transform: scale(1.3, .84); } 100% { transform: scale(1); } }

/* ---------- la tira de la receta ---------- */
.pa .receta { position: absolute; left: 14px; right: 14px; top: calc(80px + var(--safe-t)); padding: 8px 14px 10px; background: linear-gradient(90deg, rgba(67, 38, 90, .07), rgba(67, 38, 90, 0) 22px), var(--papel); filter: var(--sombra-p); opacity: 0; transform: translateY(-12px) rotate(-.6deg); transition: opacity .3s, transform .3s; pointer-events: none !important; }
.pa .receta.is-on { opacity: 1; transform: rotate(-.6deg); }
.pa .receta::before, .pa .receta::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background-size: 120px 10px; background-repeat: repeat-x; }
.pa .receta::before { top: -9px; background-image: var(--orilla-a); }
.pa .receta::after { bottom: -9px; background-image: var(--orilla-b); }
.pa .rc-k { margin: 0; font: 700 13px/1.2 var(--f-texto); color: var(--rosa-d); letter-spacing: .02em; }
.pa .rc-t { margin: 0 0 4px; font: 800 19.5px/1.08 var(--f-titulo); color: var(--tinta); }
.pa .rc-ing { display: flex; flex-wrap: wrap; gap: 4px 9px; margin: 0; padding: 0; list-style: none; }
.pa .rc-ing li { position: relative; display: flex; align-items: center; gap: 3px; font: 600 13.5px/1.1 var(--f-texto); transition: opacity .25s; }
.pa .rc-ing .rc-ic { display: inline-flex; line-height: 0; }
.pa .rc-ing .rc-pal { display: none; color: var(--verde); }
.pa .rc-ing li.is-dentro { color: var(--verde); }
.pa .rc-ing li.is-dentro .rc-nom { text-decoration: line-through; text-decoration-thickness: 2px; }
.pa .rc-ing li.is-dentro .rc-pal { display: inline-flex; }
.pa .receta[data-modo="revolver"] .rc-ing { opacity: .85; }

/* ---------- nota con cinta ---------- */
.pa .nota { position: absolute; left: 50%; bottom: calc(26px + var(--safe-b)); transform: translate(-50%, 10px) rotate(-1.2deg); max-width: calc(100% - 40px); margin: 0; padding: 11px 20px; background: #FFF6B8; color: var(--tinta); font: 700 clamp(17px, 4.6cqw, 19.5px)/1.2 var(--f-texto); text-align: center; white-space: nowrap; filter: drop-shadow(0 2px 0 rgba(67, 38, 90, .35)) drop-shadow(0 6px 8px rgba(67, 38, 90, .2)); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none !important; }
.pa .nota.is-on { opacity: 1; transform: translate(-50%, 0) rotate(-1.2deg); }
.pa .nota[data-modo="bien"], .pa .nota[data-modo="casi"] { background: #C8F2D8; }
.pa .nota-cinta { position: absolute; left: 50%; top: -9px; width: 66px; height: 18px; margin-left: -33px; background: repeating-linear-gradient(90deg, rgba(255, 141, 184, .75) 0 8px, rgba(255, 207, 226, .75) 8px 16px); transform: rotate(1.6deg); }

/* ---------- mano y guía del círculo ---------- */
.pa .manita { position: absolute; left: 0; top: 0; width: 66px; height: 66px; margin: -8px 0 0 -18px; opacity: 0; pointer-events: none !important; }
.pa .manita.is-on { opacity: 1; }
.pa .manita.is-toca { transform: translate(var(--x), var(--y)); animation: pa-toca 1.15s ease-in-out infinite; }
.pa .manita.is-gira { offset-rotate: 0deg; animation: pa-gira 2.2s linear infinite; }
.pa .manita-dedo { display: block; line-height: 0; filter: drop-shadow(0 3px 4px rgba(67, 38, 90, .35)); }
@keyframes pa-toca { 0%, 100% { transform: translate(var(--x), var(--y)) translateY(0) scale(1); } 45% { transform: translate(var(--x), var(--y)) translateY(13px) scale(.88); } }
@keyframes pa-gira { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
.pa .giro { position: absolute; left: var(--x); top: var(--y); width: calc(var(--rx) * 2); height: calc(var(--ry) * 2); margin: calc(var(--ry) * -1) 0 0 calc(var(--rx) * -1); border-radius: 50%; border: 3px dashed #fff; filter: drop-shadow(0 1px 0 var(--tinta)); opacity: 0; transition: opacity .25s; pointer-events: none !important; }
.pa .giro.is-on { opacity: .95; }

/* ---------- la palabrita del plop ---------- */
.pa .plop { position: absolute; left: var(--x); top: var(--y); margin: 0; pointer-events: none !important; transform: translate(-50%, -50%); }
.pa .plop span { display: block; font: 800 36px/1 var(--f-titulo); color: #fff; -webkit-text-stroke: 5px var(--tinta); paint-order: stroke fill; animation: pa-plop .85s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pa-plop { 0% { transform: scale(.3) translateY(10px); opacity: 0; } 30% { transform: scale(1.15) translateY(-6px); opacity: 1; } 70% { transform: scale(1) translateY(-14px); opacity: 1; } 100% { transform: scale(.95) translateY(-24px); opacity: 0; } }

/* ---------- portada ---------- */
.pa .portada { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: calc(72px + var(--safe-t)) 22px calc(22px + var(--safe-b)); transition: opacity .3s, transform .3s; pointer-events: none !important; }
.pa .portada.is-out { opacity: 0; transform: translateY(-14px); }
.pa .portada-hoja { padding: 14px 20px 16px; transform: rotate(-1deg); pointer-events: auto; animation: pa-hoja-entra .6s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes pa-hoja-entra { 0% { opacity: 0; transform: translateY(-24px) rotate(3deg); } 100% { opacity: 1; transform: rotate(-1deg); } }
.pa .portada-k { margin: 0 0 2px; font: 700 14.5px/1.2 var(--f-texto); color: var(--rosa-d); }
.pa .portada-t { margin: 0 0 6px; font: 800 clamp(30px, 8.4cqw, 36px)/1.06 var(--f-titulo); color: var(--tinta); }
.pa .portada-sub { margin: 0; font: 600 16px/1.32 var(--f-texto); }
.pa .portada-acciones { display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: auto; animation: pa-sube .5s .15s ease-out both; }
@keyframes pa-sube { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: none; } }
.pa .portada-extras { display: flex; flex-wrap: wrap; justify-content: center; }
.pa .portada-extras .enlace { padding: 4px 12px; border-radius: 22px; background: rgba(255, 247, 232, .9); text-decoration-thickness: 1.5px; }
.pa .is-empezar { min-width: 230px; touch-action: none; }
.pa .saltar-intro { position: absolute; left: 50%; bottom: calc(14px + var(--safe-b)); transform: translateX(-50%); padding: 4px 14px; border-radius: 22px; background: rgba(255, 247, 232, .92); white-space: nowrap; }
.pa .saltar { position: absolute; right: 12px; bottom: calc(12px + var(--safe-b)); padding: 4px 14px; border-radius: 22px; background: rgba(255, 247, 232, .92); }

/* ---------- la página de cada poción ---------- */
.pa .tarjeta { position: absolute; left: 12px; right: 12px; bottom: calc(14px + var(--safe-b)); max-height: calc(100cqh - 200px); overflow: visible; padding: 16px 18px 18px; transform: translateY(26px) rotate(.8deg); opacity: 0; transition: transform .38s cubic-bezier(.2, 1.3, .4, 1), opacity .25s; }
.pa .tarjeta.is-in { transform: rotate(.4deg); opacity: 1; }
.pa .tarjeta.is-out { transform: translateY(38px) rotate(1.6deg); opacity: 0; }
.pa .tj-cinta { position: absolute; right: 88px; top: -14px; width: 26px; height: 72px; background: linear-gradient(180deg, var(--pocion), var(--claro) 160%); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); filter: none; opacity: .92; }
.pa .sello { position: absolute; right: 14px; top: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 86px; height: 86px; margin: 0; border-radius: 50%; color: var(--rosa-d); font: 800 18px/.96 var(--f-titulo); transform: rotate(-13deg); box-shadow: inset 0 0 0 3.5px currentColor, inset 0 0 0 6.5px var(--papel), inset 0 0 0 8.5px currentColor; background: rgba(255, 247, 232, .85); animation: pa-sello .4s .36s cubic-bezier(.2, 1.1, .3, 1) both; }
.pa .sello span { display: block; }
@keyframes pa-sello { 0% { opacity: 0; transform: rotate(-13deg) scale(2.4); } 70% { opacity: 1; transform: rotate(-13deg) scale(.92); } 100% { opacity: 1; transform: rotate(-13deg) scale(1); } }
.pa .tj-k { margin: 0 96px 2px 0; font: 700 13.5px/1.2 var(--f-texto); color: var(--rosa-d); }
.pa .tj-t { margin: 0 96px 10px 0; font: 800 clamp(25px, 7cqw, 29px)/1.06 var(--f-titulo); }
.pa .tj-t:focus, .pa .tj-t:focus-visible { outline: none; box-shadow: none; }
.pa .tj-cuerpo { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; overflow: auto; max-height: calc(100cqh - 410px); font: 600 16px/1.3 var(--f-texto); }
.pa .tj-cuerpo p { margin: 0; }
.pa .tj-seguir { touch-action: none; }
.pa .tj-avance { position: absolute !important; left: 16px; right: 18px; bottom: 6px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .7); transform-origin: left; transform: scaleX(0); }
.pa .tarjeta.is-auto .tj-avance { animation: pa-av var(--auto, 11s) linear both; }
@keyframes pa-av { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.pa.rm .tj-avance { display: none; }

.pa .dato-grande { padding: 8px 12px 10px; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--claro) 52%, var(--papel)), var(--papel)); border: 2px dashed var(--tinta); border-radius: 10px; }
.pa .dg-k { margin: 0; font: 700 15px/1.2 var(--f-texto); text-transform: capitalize; }
.pa .dg-v { margin: 0; font: 800 clamp(31px, 8.8cqw, 38px)/1.05 var(--f-titulo); }
.pa .dg-s { margin: 0; font: 600 14.5px/1.2 var(--f-texto); }
.pa .nota-tinta { align-self: center; margin: 0; padding: 2px 12px; font: 700 16px/1.2 var(--f-texto); color: var(--rosa-d); border-bottom: 2.5px solid var(--oro); }
.pa .acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.pa .acciones > * { flex: 1 1 140px; }
.pa .pasos { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.pa .pasos li { display: grid; grid-template-columns: 76px 1fr; gap: 8px; align-items: baseline; padding: 2px 0; border-bottom: 1.5px dotted rgba(67, 38, 90, .4); }
.pa .pa-hora { font-weight: 700; color: var(--rosa-d); }
.pa .mapita { line-height: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 2px var(--tinta); }
.pa .mapita svg { width: 100%; height: auto; display: block; }
.pa .lugar-nombre { margin: 0; font: 800 20px/1.1 var(--f-titulo); }
.pa .lugar-dir { margin: 0; font: 600 15px/1.25 var(--f-texto); }
.pa .mensaje { margin: 0; padding: 4px 14px; border-left: 4px solid var(--pocion); }
.pa .mensaje p { font: 800 22px/1.18 var(--f-titulo); }
.pa .mensaje footer { margin-top: 4px; font: 700 16px/1.2 var(--f-texto); color: var(--rosa-d); }
.pa .anfitriones { font: 800 27px/1.1 var(--f-titulo); text-align: center; }
.pa .invita-nota { text-align: center; }

/* ---------- final ---------- */
.pa .cumple { position: absolute; left: 0; right: 0; top: 46cqh; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 12px; pointer-events: none !important; animation: pa-cumple .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pa-cumple { 0% { opacity: 0; transform: translateY(16px) scale(.8); } 100% { opacity: 1; transform: none; } }
.pa .cumple.is-arriba { top: 44cqh; }
.pa .cumple.is-arriba .cumple-s { display: none; }
.pa .cumple-t { position: relative; margin: 0; padding: 4px 34px 7px; font: 800 clamp(30px, 8.6cqw, 37px)/1.04 var(--f-titulo); color: #fff; background: linear-gradient(180deg, #CB3586, var(--rosa-d)); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%); text-shadow: 0 2px 0 rgba(67, 38, 90, .5); }
.pa .cumple-k { margin: 0 0 3px; padding: 2px 12px; font: 700 14.5px/1.2 var(--f-texto); color: var(--tinta); background: rgba(255, 247, 232, .92); border-radius: 12px; }
.pa .cumple-s { margin: 3px 0 0; padding: 2px 12px; font: 700 15.5px/1.2 var(--f-texto); color: var(--tinta); background: rgba(255, 247, 232, .92); border-radius: 12px; }
.pa .fin { position: absolute; left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); max-height: 46cqh; overflow: auto; padding: 12px 16px 6px; animation: pa-sube .5s ease-out both; }
.pa .fin::before, .pa .fin::after { display: none; }
.pa .fin-linea { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font: 700 15.5px/1.2 var(--f-texto); }
.pa .fin-lugar { display: flex; flex-direction: column; gap: 5px; margin-bottom: 9px; }
.pa .fin-lugar .mapita svg { max-height: 86px; }
.pa .fin-lugar .lugar-nombre { font-size: 18px; }
.pa .fin-lugar .lugar-dir { font-size: 13.5px; }
.pa .fin-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; margin-top: 2px; }
.pa .destello { position: absolute; inset: 0; z-index: 5; background: #fff; pointer-events: none; animation: pa-fl .75s ease-out both; }
@keyframes pa-fl { 0% { opacity: .85; } 100% { opacity: 0; } }
.pa.rm .destello { display: none; }

.pa .vitrina-t { position: absolute; left: 0; right: 0; top: 4cqh; margin: 0; text-align: center; font: 800 clamp(32px, 7cqw, 58px)/1.05 var(--f-titulo); color: #fff; -webkit-text-stroke: 5px var(--tinta); paint-order: stroke fill; }
.pa .vitrina-t small { display: block; margin-top: 4px; font-size: .55em; }
.pa .dbg-fps { position: absolute; left: 8px; bottom: 4px; margin: 0; padding: 2px 6px; background: rgba(0, 0, 0, .65); color: #fff; font: 700 11px/1.3 monospace; z-index: 50; pointer-events: none !important; }
@media (prefers-reduced-motion: reduce) { .pa .manita.is-toca, .pa .manita.is-gira { animation: none; } .pa .plop span, .pa .sello, .pa .portada-hoja, .pa .portada-acciones, .pa .cumple, .pa .fin { animation-duration: .01s; } }
.pa.rm .manita.is-toca, .pa.rm .manita.is-gira { animation: none; }