/* ¡Fuego de Confeti! — base: CARTEL DE FERIA PIRATA. Tablas de barco con remaches y cuerda, letreros como banderines de
   tela, botones como MECHAS (madera y rojo de feria, con la chispa que corre) y BALAS de cañón, el contador como 5 globos
   que revientan y dejan confeti, el globo del loro, la palabrota del impacto, el "¡cumple!" y el resumen final.
   Colores: madera, rojo de feria, oro y turquesa sobre papel crema. Letras: Chango (cartel) + Grandstander. Todo cuelga de
   html.fc. 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. */
.fc {
  --tinta: #2A1508; --tinta-2: #5B2F14; --papel: #FFF3D6; --papel-2: #F6E0B4; --crema: #FFF7E6;
  --madera: #8A5128; --madera-d: #5B2F14; --madera-dd: #3D1E0B; --madera-l: #B9773E;
  --rojo: #B3152C; --rojo-l: #E6233F; --oro: #FFC933; --oro-d: #C98A12; --turquesa: #0B7F7C; --turquesa-l: #19C2B0; --azul: #1F5FD1; --morado: #6D2DBF; --naranja: #B4530A;
  --wa: #25D366;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --f-cartel: "Chango", "Grandstander", Impact, sans-serif;
  --f-texto: "Grandstander", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* tablas de barco: vetas por degradado (sin imágenes) */
  --tablas: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 42px, rgba(30, 12, 2, .55) 42px 44px), repeating-linear-gradient(92deg, rgba(255, 220, 170, .05) 0 7px, rgba(40, 15, 0, .05) 7px 19px), linear-gradient(180deg, #A5642F, #7D4720);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.fc *, .fc *::before, .fc *::after { box-sizing: border-box; }
.fc body { margin: 0; font-family: var(--f-texto); color: var(--tinta); overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
.fc button { font: inherit; color: inherit; }
.fc :focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; box-shadow: 0 0 0 6px var(--oro); }
.fc .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; }
.fc .noscript { margin: 24px; font: 700 18px/1.5 var(--f-texto); background: var(--papel); padding: 16px; border-radius: 10px; }

/* ---------- marco ---------- */
.fc .fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; background:
  radial-gradient(30% 20% at 62% 58%, rgba(255, 240, 200, .95), rgba(255, 200, 140, 0) 70%),
  linear-gradient(180deg, #4A70C4 0%, #B884B8 30%, #F4A08A 46%, #FFC163 58%, #FFE2A0 60%, #2C7EA8 60.4%, #0E4E78 100%); }
.fc:not(.is-showcase) .fondo { filter: blur(6px) saturate(1.05); }
.fc.is-showcase .fondo { display: none; }
.fc .app { position: fixed; inset: 0; z-index: 1; overflow: hidden; isolation: isolate; container-type: size; container-name: marco; background: #0E4E78; transition: opacity .5s ease; }
/* computadora y tableta: el mismo marco de teléfono que los demás diseños, con marco de madera y el atardecer alrededor */
@media (min-width: 560px) and (min-height: 560px) {
  .fc .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 5px var(--oro), 0 0 0 13px var(--madera), 0 0 0 16px var(--madera-dd), 0 30px 90px rgba(20, 8, 2, .6); }
}
.fc.is-showcase .app { inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 0 !important; box-shadow: none !important; }
.fc .stage { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none; }
.fc .stage:focus-visible { box-shadow: inset 0 0 0 4px var(--oro), inset 0 0 0 7px var(--tinta); }
.fc .gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s ease; }
.fc .gl.is-on { opacity: 1; }
.fc .vineta { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(135% 95% at 50% 45%, rgba(0, 0, 0, 0) 62%, rgba(40, 14, 40, .3) 100%); }
.fc .sin-gl .stage { background: url("../assets/poster/fondo-confeti.webp") center / cover no-repeat, linear-gradient(180deg, #4A70C4 0%, #F4A08A 40%, #FFC163 58%, #2C7EA8 60.4%, #0E4E78); }
.fc .ui { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.fc .ui > * { pointer-events: auto; }

/* ---------- botones: MECHAS (cartel rojo con cuerda dorada y chispa) y BALAS de cañón ---------- */
.fc .mecha {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px;
  border: 0; border-radius: 10px; color: var(--crema); text-decoration: none; cursor: pointer; overflow: visible;
  font: 800 17px/1.12 var(--f-texto); letter-spacing: .01em; text-align: center;
  background: linear-gradient(180deg, #D41E3A, var(--rojo) 62%, #8F0E22);
  box-shadow: inset 0 0 0 2px var(--oro), inset 0 0 0 4px rgba(90, 10, 20, .55), 0 4px 0 var(--madera-dd), 0 8px 16px rgba(30, 10, 2, .4);
  transition: transform .1s ease, box-shadow .1s ease; touch-action: manipulation; user-select: none;
}
.fc .mecha > * { position: relative; }
.fc .mecha:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px var(--oro), inset 0 0 0 4px rgba(90, 10, 20, .55), 0 1px 0 var(--madera-dd); }
.fc .mecha.is-crema { color: var(--tinta); background: linear-gradient(180deg, #FFF7E6, var(--papel-2)); box-shadow: inset 0 0 0 2px var(--madera-d), 0 4px 0 var(--madera-dd), 0 6px 12px rgba(30, 10, 2, .3); }
.fc .mecha.is-wa { color: #06301A; background: linear-gradient(180deg, #A9F0C4, #55DE8C); box-shadow: inset 0 0 0 2px #0B5A2E, 0 4px 0 #0B5A2E, 0 8px 16px rgba(11, 90, 46, .25); }
.fc .mecha.is-chica { min-height: 44px; padding: 0 16px; font-size: 15.5px; }
.fc .mecha.is-grande { min-height: 60px; font: 400 21px/1.05 var(--f-cartel); letter-spacing: .015em; padding: 0 24px; }
.fc .mecha.is-bloque { width: 100%; }
.fc .pi { display: inline-flex; }
/* la mecha encendida: cordón dorado que asoma del botón con una chispa que titila */
.fc .mecha-chispa { position: absolute !important; right: -8px; top: -10px; width: 26px; height: 26px; pointer-events: none; }
.fc .mecha-chispa::before { content: ""; position: absolute; left: 2px; bottom: 2px; width: 14px; height: 14px; border-left: 3px solid var(--oro); border-top: 3px solid var(--oro); border-radius: 12px 0 0 0; }
.fc .mecha-chispa::after { content: ""; position: absolute; right: 3px; top: 1px; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle, #FFF7D0 0 30%, #FFC933 45%, #FF6A00 70%, rgba(255, 90, 0, 0) 74%); animation: fc-chispa .34s steps(2) infinite; }
@keyframes fc-chispa { 0% { transform: scale(.75) rotate(0); } 100% { transform: scale(1.2) rotate(40deg); } }
.fc .tj-seguir, .fc .is-empezar, .fc .disparar { touch-action: none; }

.fc .bala {
  width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; cursor: pointer; color: var(--crema); padding: 0;
  background: radial-gradient(circle at 34% 28%, #6B6F7E 0 8%, #3C3E4A 26%, #1E1F27 66%, #101117 100%);
  box-shadow: inset 0 0 0 2px var(--oro), 0 3px 0 var(--madera-dd), 0 6px 12px rgba(20, 8, 2, .4);
  transition: transform .1s ease; touch-action: manipulation;
}
.fc .bala:active { transform: scale(.93); }
.fc .bala.is-fuego { background: radial-gradient(circle at 34% 28%, #FF7A85 0 8%, #D41E3A 30%, #8F0E22 100%); }

.fc .enlace { min-height: 44px; padding: 8px 14px; border: 0; border-radius: 8px; background: rgba(42, 21, 8, .78); color: var(--crema); font: 700 15px/1.2 var(--f-texto); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* remaches: cuatro clavos dorados en las esquinas de cada tabla */
.fc .remaches { position: absolute; inset: 7px; pointer-events: none; background:
  radial-gradient(circle at 6px 6px, #FFE9A8 0 1.6px, #C98A12 2.6px, #5B2F14 5px, rgba(0, 0, 0, 0) 5.6px) top left / 14px 14px no-repeat,
  radial-gradient(circle at 8px 6px, #FFE9A8 0 1.6px, #C98A12 2.6px, #5B2F14 5px, rgba(0, 0, 0, 0) 5.6px) top right / 14px 14px no-repeat,
  radial-gradient(circle at 6px 8px, #FFE9A8 0 1.6px, #C98A12 2.6px, #5B2F14 5px, rgba(0, 0, 0, 0) 5.6px) bottom left / 14px 14px no-repeat,
  radial-gradient(circle at 8px 8px, #FFE9A8 0 1.6px, #C98A12 2.6px, #5B2F14 5px, rgba(0, 0, 0, 0) 5.6px) bottom right / 14px 14px no-repeat; }

/* ---------- HUD ---------- */
.fc .hud { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: calc(10px + var(--safe-t)) 12px 0; pointer-events: none; }
.fc .hud > * { pointer-events: auto; }
.fc .globos { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 1px; margin: 0; padding: 7px 8px 4px; transition: opacity .3s; }
.fc .hud.is-portada .globos { opacity: 0; }
.fc .globos-cuerda { position: absolute; left: 4px; right: 4px; top: 4px; height: 13px; border-top: 3px solid var(--crema); border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform: scaleY(-1); filter: drop-shadow(0 1px 0 var(--madera-dd)); }
.fc .gl { line-height: 0; }
.fc .globos .gl { position: relative; opacity: 1; width: auto; height: auto; inset: auto; filter: drop-shadow(0 2px 1px rgba(30, 10, 2, .45)); transform-origin: 50% 0; animation: fc-mece 2.6s ease-in-out infinite; }
.fc .globos .gl:nth-child(2n) { animation-delay: -1.2s; }
.fc .globos .gl.is-reventado { animation: none; }
.fc .globos .gl.is-pop { animation: fc-pop .5s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes fc-mece { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes fc-pop { 0% { transform: scale(.3); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* ---------- letrero de instrucción (banderín de tela) ---------- */
.fc .abajo { position: absolute; left: 0; right: 0; bottom: calc(14px + var(--safe-b)); display: flex; justify-content: center; padding: 0 74px 0 12px; pointer-events: none; }
.fc .pista { display: flex; align-items: center; gap: 8px; max-width: 100%; min-height: 50px; padding: 8px 26px 8px 14px; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s, background .2s; color: var(--crema); font: 800 16.5px/1.15 var(--f-texto);
  background: var(--turquesa); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); filter: drop-shadow(0 3px 0 rgba(30, 10, 2, .55)); }
.fc .pista.is-on { opacity: 1; transform: none; }
.fc .pista.is-discreta { opacity: .86; font-size: 14.5px; min-height: 44px; }
.fc .pista[data-modo="oro"] { background: var(--oro); color: var(--tinta); }
.fc .pista-ic { display: inline-flex; flex: none; }

.fc .disparar { position: absolute; right: 12px; bottom: calc(14px + var(--safe-b)); width: 62px; height: 62px; flex-direction: column; gap: 0; }
.fc .dp-ic { display: inline-flex; margin-top: -2px; }
.fc .dp-t { font: 800 10.5px/1 var(--f-texto); }
.fc [data-fase="celebra"] .disparar { display: none; }
.fc .con-tarjeta .disparar, .fc .con-tarjeta .abajo { display: none; }

/* manita: se apoya en el cañón y jala hacia atrás */
.fc .manita { position: absolute; left: var(--x, 50%); top: var(--y, 70%); width: 0; height: 0; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 3; }
.fc .manita.is-on { opacity: 1; }
.fc .manita-dedo { position: absolute; left: -22px; top: -6px; filter: drop-shadow(0 4px 3px rgba(30, 10, 2, .5)); }
.fc .manita-rastro { position: absolute; left: -4px; top: 0; width: 8px; height: 118px; border-radius: 6px; background: repeating-linear-gradient(180deg, #FFF7E6 0 8px, rgba(255, 247, 230, 0) 8px 16px); transform-origin: top; opacity: 0; }
.fc .manita.is-on .manita-dedo { animation: fc-jala 2s cubic-bezier(.55, .1, .3, 1) infinite; }
.fc .manita.is-on .manita-rastro { animation: fc-rastro 2s linear infinite; }
@keyframes fc-jala { 0% { transform: translateY(-8px) scale(1.1); opacity: 0; } 12% { transform: translateY(0) scale(1); opacity: 1; } 62% { transform: translateY(110px); opacity: 1; } 72% { transform: translateY(110px) scale(1.06); opacity: 1; } 84% { transform: translateY(70px) scale(1.2); opacity: 0; } 100% { opacity: 0; } }
@keyframes fc-rastro { 0%, 12% { opacity: 0; transform: scaleY(0); } 62% { opacity: .9; transform: scaleY(.95); } 76% { opacity: .9; transform: scaleY(1); } 84%, 100% { opacity: 0; } }

/* ---------- el loro habla ---------- */
.fc .loro-dice { position: absolute; left: 16px; right: 16px; top: calc(70px + var(--safe-t)); margin: 0; display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(-6px) scale(.9); transition: opacity .18s, transform .22s cubic-bezier(.2, 1.6, .4, 1); }
.fc .loro-dice.is-in { opacity: 1; transform: none; }
.fc .loro-dice span { position: relative; display: block; max-width: 300px; padding: 10px 16px; border-radius: 16px; text-align: center; font: 800 19px/1.15 var(--f-texto); color: var(--tinta); background: var(--crema); box-shadow: 0 0 0 3px var(--tinta), 4px 5px 0 3px var(--rojo); }
.fc .loro-dice span::after { content: ""; position: absolute; left: 30px; bottom: -14px; width: 20px; height: 16px; background: var(--crema); clip-path: polygon(0 0, 100% 0, 0 100%); box-shadow: 0 0 0 3px var(--tinta); }

/* ---------- la palabrota del impacto ---------- */
.fc .pum { position: absolute; left: 0; right: 0; top: 30cqh; margin: 0; text-align: center; pointer-events: none; font: 400 clamp(56px, 19cqw, 84px)/1 var(--f-cartel); letter-spacing: .01em; color: #FFE14D; -webkit-text-stroke: 3px var(--tinta); paint-order: stroke fill; text-shadow: 0 5px 0 var(--rojo-l), 0 9px 0 var(--tinta); animation: fc-pum 1.15s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.fc .pum.t1 { color: #7CF5E8; transform: rotate(4deg); }
.fc .pum.t2 { color: #FF9EC4; }
@keyframes fc-pum { 0% { transform: scale(.2) rotate(-14deg); opacity: 0; } 22% { transform: scale(1.18) rotate(-6deg); opacity: 1; } 34% { transform: scale(1) rotate(-5deg); } 76% { transform: scale(1.03) rotate(-5deg); opacity: 1; } 100% { transform: scale(1.3) rotate(-5deg); opacity: 0; } }

/* ---------- catalejo ---------- */
.fc .catalejo-vista { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(circle at 50% 44%, rgba(0, 0, 0, 0) 0 41cqw, #1A0D05 calc(41cqw + 2px) 100%); }
.fc .catalejo-vista.is-in { opacity: 1; }
.fc .cv-aro { position: absolute; left: 50%; top: 44%; width: 86cqw; height: 86cqw; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 0 6px var(--oro), 0 0 0 10px var(--madera-d), inset 0 0 26px 8px rgba(30, 10, 2, .55); }

/* ---------- portada ---------- */
.fc .portada { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: calc(72px + var(--safe-t)) 16px calc(18px + var(--safe-b)); pointer-events: none; transition: opacity .4s, transform .4s; }
.fc .portada > * { pointer-events: auto; }
.fc .portada.is-out { opacity: 0; transform: translateY(-16px); }
.fc .portada-letrero { position: relative; text-align: center; padding: 12px 14px 15px; border-radius: 8px; background: var(--tablas); box-shadow: inset 0 0 0 3px var(--madera-dd), inset 0 0 0 5px var(--madera-l), 0 6px 0 var(--madera-dd), 0 12px 24px rgba(30, 10, 2, .45); animation: fc-baja .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.fc .portada-letrero::before, .fc .portada-letrero::after { content: ""; position: absolute; top: -74px; width: 5px; height: 74px; background: repeating-linear-gradient(170deg, #E8C98A 0 5px, #A67C3F 5px 9px); box-shadow: 0 0 0 1px var(--madera-dd); }
.fc .portada-letrero::before { left: 22%; }
.fc .portada-letrero::after { right: 22%; }
@keyframes fc-baja { 0% { transform: translateY(-220px); } 100% { transform: none; } }
.fc .portada-k { margin: -22px auto 6px; width: max-content; max-width: 100%; }
.fc .portada-k span { display: block; padding: 5px 20px; color: var(--crema); font: 800 15px/1.2 var(--f-texto); background: var(--rojo); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%); }
.fc .portada-t { margin: 2px 0 6px; font: 400 clamp(29px, 8.3cqw, 37px)/1.06 var(--f-cartel); color: #FFE14D; -webkit-text-stroke: 2px var(--tinta); paint-order: stroke fill; text-shadow: 0 3px 0 var(--tinta); }
.fc .portada-sub { margin: 0; color: var(--crema); font: 700 15.5px/1.28 var(--f-texto); text-shadow: 0 1px 2px var(--madera-dd), 0 0 8px var(--madera-dd); }
.fc .portada-acciones { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fc .is-empezar { min-width: 240px; }
.fc .saltar-intro { position: absolute; left: 50%; bottom: calc(16px + var(--safe-b)); transform: translateX(-50%); white-space: nowrap; }
.fc .saltar { position: absolute; right: 12px; bottom: calc(14px + var(--safe-b)); }

/* ---------- tarjeta de cada objetivo ---------- */
.fc .tarjeta { position: absolute; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); max-height: 62cqh; overflow: auto; overscroll-behavior: contain; padding: 22px 12px 12px; border-radius: 10px; background: var(--tablas); box-shadow: inset 0 0 0 3px var(--madera-dd), inset 0 0 0 5px var(--madera-l), 0 6px 0 var(--madera-dd), 0 14px 30px rgba(30, 10, 2, .5); opacity: 0; transform: translateY(46px) rotate(-1.5deg); transition: opacity .24s, transform .32s cubic-bezier(.2, 1.5, .4, 1); }
.fc .tarjeta.is-in { opacity: 1; transform: none; }
.fc .tarjeta.is-out { opacity: 0; transform: translateY(30px); }
.fc .tj-k { position: relative; margin: -30px auto 8px; width: max-content; max-width: 100%; }
.fc .tj-k span { display: block; padding: 6px 22px; color: var(--crema); font: 800 14.5px/1.2 var(--f-texto); background: var(--c, var(--rojo)); clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%, 11px 50%); }
.fc .tono-rojo { --c: var(--rojo); } .fc .tono-turquesa { --c: var(--turquesa); } .fc .tono-morado { --c: var(--morado); } .fc .tono-azul { --c: var(--azul); } .fc .tono-naranja { --c: var(--naranja); }
.fc .tarjeta { padding-top: 26px; overflow: visible auto; }
.fc .tj-papel { padding: 12px 14px 14px; border-radius: 4px; background: var(--papel); box-shadow: 0 0 0 2px var(--madera-dd), 2px 3px 0 2px rgba(30, 10, 2, .35); }
.fc .tj-t { margin: 0 0 8px; font: 400 clamp(23px, 6.6cqw, 28px)/1.08 var(--f-cartel); color: var(--c, var(--rojo)); outline: none; }
.fc .tj-cuerpo { display: flex; flex-direction: column; gap: 9px; font: 700 16px/1.32 var(--f-texto); }
.fc .tj-seguir { margin-top: 12px; overflow: hidden; }
/* en pantallas bajas la tarjeta puede crecer hasta debajo de los botones de arriba (así cabe completa sin deslizar);
   el botón "¡Siguiente blanco!" va siempre en un renglón (letra y márgenes un poco menores en celulares angostos) */
.fc .tarjeta { max-height: max(62cqh, calc(100cqh - 84px - var(--safe-b))); }
.fc .tj-seguir > span:not(.pi):not(.tj-avance):not(.mecha-chispa) { white-space: nowrap; }
@container marco (max-width: 380px) {
  .fc .mecha.is-grande.tj-seguir { padding: 0 12px; font-size: min(21px, 5.5cqw); }
}
@container marco (max-height: 640px) {
  .fc .tarjeta .carta { align-self: center; width: min(100%, calc(20cqh * 320 / 170)); }
  .fc .tarjeta .acciones > * { flex-basis: 110px; }
}
.fc .tj-avance { position: absolute !important; left: 0; bottom: 0; height: 5px; width: 100%; transform-origin: left; background: var(--oro); transform: scaleX(0); }
.fc .is-auto .tj-avance { animation: fc-avance var(--auto, 11s) linear forwards; }
@keyframes fc-avance { to { transform: scaleX(1); } }

.fc .dato-grande { text-align: center; padding: 8px 10px; border-radius: 6px; color: var(--crema); background: var(--c, var(--rojo)); box-shadow: inset 0 0 0 2px var(--oro); }
.fc .dg-k, .fc .dg-s { margin: 0; font: 800 15px/1.2 var(--f-texto); }
.fc .dg-k { text-transform: uppercase; letter-spacing: .05em; }
.fc .dg-v { margin: 1px 0; font: 400 clamp(29px, 8.8cqw, 37px)/1.1 var(--f-cartel); }
.fc .chip { align-self: center; margin: 0; padding: 4px 12px; border-radius: 6px; color: var(--tinta); background: var(--oro); font: 800 15px/1.2 var(--f-texto); box-shadow: 0 0 0 2px var(--tinta); }
.fc .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.fc .acciones > * { flex: 1 1 140px; min-height: 46px; font-size: 15px; padding: 6px 10px; }
.fc .bitacora { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.fc .bitacora li { display: grid; grid-template-columns: 74px 1fr; gap: 8px; padding: 4px 0; border-bottom: 2px dashed rgba(91, 47, 20, .35); font-size: 15.5px; }
.fc .bitacora li:last-child { border-bottom: 0; }
.fc .bt-hora { color: var(--rojo); font-weight: 800; }
.fc .carta { border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 2px var(--madera-dd); line-height: 0; }
.fc .carta svg { width: 100%; height: auto; display: block; }
.fc .lugar-nombre { margin: 0; font: 400 21px/1.15 var(--f-cartel); }
.fc .lugar-dir { margin: 0; font: 500 15px/1.3 var(--f-texto); }
.fc .mensaje { margin: 0; font: 700 19px/1.3 var(--f-texto); }
.fc .mensaje p { margin: 0 0 4px; }
.fc .mensaje footer { color: var(--c, var(--rojo)); font: 800 16px/1.2 var(--f-texto); }
.fc .anfitriones { margin: 0; font: 400 clamp(25px, 7.4cqw, 31px)/1.12 var(--f-cartel); }
.fc .invita-nota { margin: 0; }

/* ---------- ¡cumple! ---------- */
.fc .cumple { position: absolute; left: 12px; right: 12px; top: 36cqh; text-align: center; pointer-events: none; animation: fc-cumple .7s cubic-bezier(.2, 1.5, .4, 1) both; transition: top .5s ease; }
.fc .cumple.is-arriba { top: 32cqh; }
.fc .cumple-k { margin: 0 auto 4px; width: max-content; max-width: 100%; }
.fc .cumple-k span { display: block; padding: 5px 20px; color: var(--crema); font: 800 15px/1.2 var(--f-texto); background: var(--rojo); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%); }
.fc .cumple-t { margin: 0; font: 400 clamp(33px, 10cqw, 44px)/1.05 var(--f-cartel); color: #FFE14D; -webkit-text-stroke: 3px var(--tinta); paint-order: stroke fill; text-shadow: 0 4px 0 var(--rojo-l), 0 7px 0 var(--tinta); }
.fc .cumple-s { display: inline-block; margin: 8px 0 0; padding: 4px 14px; border-radius: 6px; color: var(--tinta); background: var(--crema); box-shadow: 0 0 0 2px var(--tinta); font: 800 16.5px/1.2 var(--f-texto); }
@keyframes fc-cumple { 0% { transform: scale(.5); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- resumen final ---------- */
.fc .fin.tabla { position: absolute; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); max-height: 56cqh; overflow: auto; padding: 16px 14px 10px; border-radius: 10px; color: var(--crema); animation: fc-sube .5s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes fc-sube { 0% { transform: translateY(60px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.fc .fin-linea { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 800 16.5px/1.25 var(--f-texto); text-shadow: 0 1px 2px var(--madera-dd); }
.fc .fin-lugar { margin: 0 0 10px; }
.fc .fin-lugar summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font: 800 16.5px/1.2 var(--f-texto); list-style: none; text-shadow: 0 1px 2px var(--madera-dd); }
.fc .fin-lugar summary::-webkit-details-marker { display: none; }
.fc .fin-vermapa { margin-left: auto; padding: 3px 9px; border-radius: 5px; color: var(--tinta); background: var(--oro); font: 800 13.5px/1.2 var(--f-texto); }
.fc .fin-lugar[open] > :not(summary) { color: var(--tinta); }
.fc .fin-lugar .lugar-nombre, .fc .fin-lugar .lugar-dir { color: var(--crema); text-shadow: 0 1px 2px var(--madera-dd); margin-top: 6px; }
.fc .fin-lugar .acciones { margin-top: 8px; }
.fc .fin-enlaces { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.fc .fin-enlaces .enlace { background: transparent; text-shadow: 0 1px 2px var(--madera-dd); }

/* ---------- vitrina y pruebas ---------- */
.fc .is-vitrina .ui > :not(.vitrina-t) { display: none; }
.fc .vitrina-t { position: absolute; left: 0; right: 0; top: 7%; margin: 0; text-align: center; pointer-events: none; }
.fc .vitrina-t span { display: block; font: 400 clamp(36px, 11cqw, 76px)/1.05 var(--f-cartel); color: #FFE14D; -webkit-text-stroke: 3px var(--tinta); paint-order: stroke fill; text-shadow: 0 5px 0 var(--tinta); }
.fc .vitrina-t small { display: inline-block; margin-top: 6px; padding: 3px 14px; border-radius: 6px; background: var(--crema); color: var(--tinta); box-shadow: 0 0 0 2px var(--tinta); font: 800 clamp(16px, 4cqw, 22px)/1.2 var(--f-texto); }
.fc .dbg-fps { position: absolute; left: 8px; top: 74px; margin: 0; padding: 2px 6px; background: rgba(0, 0, 0, .6); color: #fff; font: 11px/1.3 monospace; pointer-events: none !important; }

.rm .fc *, .fc.rm * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .fc .manita.is-on .manita-dedo, .fc .manita.is-on .manita-rastro { animation-duration: 3.4s; }
  .fc .globos .gl, .fc .mecha-chispa::after { animation: none; }
  .fc .pum { animation-duration: .9s; animation-timing-function: linear; }
}