/* La Isla del Tesoro — base: colores, tipografía, marco de teléfono en computadora, sellos de cera y brújulas, escena,
   portada, contador de 5 X, mapa de pergamino, pistas, dedo que enseña, excavar, tarjetas, "¡cumple!", final y vitrina.
   Estilo propio: bitácora de explorador: pergamino con orillas quemadas (border-image de 9 rebanadas), sellos de cera,
   rosa de los vientos, líneas punteadas de mapa y X tachadas con tinta. Todo cuelga de html.it. Por dentro todo se mide
   contra el marco (.app es un contenedor de tamaño: cqw/cqh), nunca contra la ventana. Sin backdrop-filter sobre el
   lienzo y sin sombras animadas (rendimiento). */
.it {
  --tinta: #3B2314; --tinta-2: #5A3408; --papel: #F3E1BA; --papel-2: #FFF3DC; --lacre: #A5222B; --lacre-2: #7E141C; --oro: #C58A1F; --oro-2: #8A5A10; --mar: #0E7FB2; --wa: #1F8F4E;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --f-display: "Berkshire Swash", Georgia, serif; --f-body: "Alegreya", Georgia, "Times New Roman", serif;
  --pergamino: url("../assets/ui/pergamino.webp");
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.it *, .it *::before, .it *::after { box-sizing: border-box; }
.it body { margin: 0; font-family: var(--f-body); color: var(--tinta); overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
.it button { font: inherit; color: inherit; }
.it :focus-visible { outline: 3px solid var(--lacre); outline-offset: 3px; }
.it .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; }
.it .noscript { margin: 24px; font: 500 18px/1.5 var(--f-body); color: var(--tinta); background: var(--papel-2); padding: 16px; border-radius: 10px; }

/* ---------- marco ---------- */
.it .fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(70% 60% at 50% 40%, #56D3D0 0%, #1E9BC4 48%, #0B5D8E 100%); }
.it .fondo::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(40% 12% at 16% 86%, rgba(255, 233, 180, .55), transparent 70%), radial-gradient(34% 10% at 82% 14%, rgba(255, 255, 255, .34), transparent 70%); }
.it .app { position: fixed; inset: 0; z-index: 1; overflow: hidden; isolation: isolate; container-type: size; container-name: marco; background: var(--mar); transition: opacity .5s ease; }
/* computadora y tableta: el mismo marco de teléfono que los demás diseños, con el mar difuminado alrededor */
@media (min-width: 560px) and (min-height: 560px) {
  .it .app { inset: auto; left: 50%; top: 50%; width: min(430px, 100vw - 32px); height: min(932px, 100dvh - 40px); transform: translate(-50%, -50%); border-radius: 38px;
    box-shadow: 0 0 0 7px #6E3D1C, 0 0 0 9px #D9A23A, 0 30px 90px rgba(2, 30, 50, .5); }
}
.it.is-showcase .fondo { display: none; }
.it.is-showcase .app { inset: 0 !important; width: auto !important; height: auto !important; transform: none !important; border-radius: 0 !important; box-shadow: none !important; }
.it .stage { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.it .gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s ease; }
.it .gl.is-on { opacity: 1; }
.it .sin-gl .stage { background: url("../assets/poster/fondo-isla.webp") center / cover no-repeat, var(--mar); }
.it .ui { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.it .ui > * { pointer-events: auto; }
.it .is-reposo *, .it .is-reposo *::before, .it .is-reposo *::after { animation-play-state: paused !important; }

/* pergamino: cualquier panel de papel */
.it .papel { border: 16px solid transparent; border-image: var(--pergamino) 72 fill / 34px / 0 stretch; padding: 8px 8px 10px; color: var(--tinta); }

/* ---------- sellos de cera (acción principal) y brújulas (secundarias) ---------- */
.it .sello {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 6px 26px; border: 0;
  border-radius: 46% 54% 50% 50% / 62% 52% 48% 38%; background: radial-gradient(120% 130% at 36% 26%, #D3464C 0%, var(--lacre) 46%, var(--lacre-2) 100%); color: #FFF3DC;
  font: 400 20px/1.1 var(--f-display); text-decoration: none; cursor: pointer; text-shadow: 0 1px 0 rgba(70, 8, 12, .7);
  box-shadow: inset 0 2px 2px rgba(255, 200, 190, .55), inset 0 -3px 5px rgba(60, 4, 8, .55), inset 0 0 0 3px rgba(255, 190, 170, .12), 0 3px 0 #5A0D13, 0 7px 12px rgba(40, 12, 8, .32);
  transition: transform .12s ease; touch-action: manipulation; user-select: none;
}
.it .sello::after { content: ""; position: absolute; inset: 6px 10px; border-radius: inherit; border: 1.5px dashed rgba(255, 220, 200, .38); pointer-events: none; }
.it .sello:active { transform: translateY(2px) scale(.985); }
.it .sello .bi { display: inline-flex; }
.it .sello.is-block { width: 100%; }
.it .sello.is-grande { min-height: 66px; font-size: 24px; padding: 8px 34px; }
.it .sello.is-chico { min-height: 48px; padding: 6px 14px; font-size: 16.5px; border-radius: 40% 60% 46% 54% / 58% 52% 48% 42%; }
.it .brujula {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 4px 16px; border: 2px solid var(--oro-2); border-radius: 26px;
  background: linear-gradient(180deg, #FFF6E0, #EFD9A9); color: var(--tinta); font: 700 16.5px/1.15 var(--f-body); text-decoration: none; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px #FFF7E3, 0 2px 0 var(--oro-2); touch-action: manipulation; user-select: none;
}
.it .brujula:active { transform: translateY(2px); box-shadow: inset 0 0 0 1.5px #FFF7E3; }
.it .brujula .bi { display: inline-flex; color: var(--lacre); }
.it .brujula.is-wa { background: linear-gradient(180deg, #36B26B, var(--wa)); border-color: #0E5F31; color: #fff; box-shadow: 0 2px 0 #0E5F31; }
.it .brujula.is-wa .bi { color: #fff; }
.it .brujula.is-chico { min-height: 44px; padding: 2px 14px; font-size: 15.5px; }
.it .brujula-x { position: relative; display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 42% 36%, #FFF6DC, #F0D9A5 62%, #DDBB80); color: var(--tinta); cursor: pointer; box-shadow: inset 0 0 0 3px var(--oro), inset 0 0 0 4.5px var(--oro-2), 0 3px 5px rgba(30, 20, 8, .35); }
.it .brujula-x:active { transform: scale(.94); }
.it .nb-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--tinta); font: 700 16.5px var(--f-body); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; cursor: pointer; }

/* ---------- barra de arriba: sonido, 5 X, bitácora ---------- */
.it .hud { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(var(--safe-t) + 10px) 10px 0; pointer-events: none; transition: opacity .3s; }
.it .hud > * { pointer-events: auto; }
.it .tachas { display: flex; align-items: center; gap: 2px; min-height: 48px; padding: 4px 12px; border-radius: 22px 18px 24px 16px / 18px 24px 16px 22px; background: linear-gradient(180deg, #FFF3D8, #EFD8A8); box-shadow: inset 0 0 0 1.5px rgba(138, 90, 16, .55), 0 3px 5px rgba(30, 20, 8, .32); }
.it .hud.is-intro .tachas { visibility: hidden; }
.it .tacha { position: relative; display: block; width: 32px; height: 32px; }
.it .tacha svg { width: 100%; height: 100%; display: block; fill: none; stroke-linecap: round; }
.it .tacha .tx { stroke: var(--tinta-2); stroke-width: 3.2; opacity: .62; }
.it .tacha .tt { stroke: var(--lacre); stroke-width: 4.6; stroke-dasharray: 46; stroke-dashoffset: 46; transition: stroke-dashoffset .5s ease .1s; }
.it .tacha.is-on .tx { opacity: 1; }
.it .tacha.is-on .tt { stroke-dashoffset: 0; }

/* ---------- portada ---------- */
.it .intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px; padding: calc(var(--safe-t) + 66px) 12px calc(var(--safe-b) + 18px); pointer-events: none; transition: opacity .4s, transform .5s; }
.it .intro > * { pointer-events: auto; }
.it .intro.is-out { opacity: 0; transform: translateY(16px); pointer-events: none; }
.it .intro-caja { width: 100%; max-width: 372px; text-align: center; padding: 2px 4px; }
.it .intro-rosa { display: block; width: 46px; height: 46px; margin: -6px auto 2px; color: var(--lacre); }
.it .intro-k { margin: 0; font: 700 14px/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.it .intro-t { margin: 4px 0 4px; font: 400 clamp(30px, 9.6cqw, 40px)/1.05 var(--f-display); color: var(--tinta); text-wrap: balance; }
.it .intro-sub { margin: 0; font: 500 18px/1.3 var(--f-body); color: var(--tinta); text-wrap: balance; }
.it .intro-acciones { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.it .intro-acciones .nb-link { border-radius: 22px; background: var(--papel-2); box-shadow: inset 0 0 0 1.5px rgba(138, 90, 16, .6), 0 2px 5px rgba(30, 20, 8, .3); }

/* ---------- mapa del tesoro ---------- */
.it .mapa-tesoro { position: absolute; left: 6px; right: 6px; bottom: calc(var(--safe-b) + 4px); padding: 12px 6px 4px; border: 12px solid transparent; border-image: var(--pergamino) 72 fill / 26px / 0 stretch; transform: translateY(116%); transition: transform .55s cubic-bezier(.2, .9, .25, 1.06); filter: drop-shadow(0 4px 7px rgba(30, 16, 6, .4)); }
.it .mapa-tesoro.is-on { transform: none; }
.it .mp-t { position: absolute; left: 8px; top: 2px; z-index: 1; margin: 0; font: 400 15px/1 var(--f-display); color: var(--tinta-2); }
.it .mp-papel { position: relative; aspect-ratio: 360 / 132; }
.it .mp-papel > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.it .m-olas path { fill: none; stroke: #2A7F96; stroke-width: 1.5; stroke-linecap: round; opacity: .55; }
.it .m-costa { fill: #EBD196; stroke: var(--tinta-2); stroke-width: 1.8; stroke-linejoin: round; }
.it .m-costa-s { fill: none; stroke: #4FB0BF; stroke-width: 7; stroke-linejoin: round; opacity: .5; }
.it .m-tinta { fill: none; stroke: var(--tinta-2); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.it .m-agua { fill: none; stroke: #2A7F96; stroke-width: 2.2; stroke-linecap: round; }
.it .m-ruta { fill: none; stroke: var(--tinta-2); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .1 7; opacity: .42; }
.it .m-ruta.is-sig { stroke: var(--lacre); opacity: 1; }
.it .m-ruta.is-hecha { stroke: var(--lacre); opacity: .72; }
.it .m-rosa circle { fill: none; stroke: var(--tinta-2); stroke-width: 1.2; stroke-dasharray: 1.5 2.5; }
.it .m-rosa path { fill: var(--lacre); }
.it .m-rosa text { font: 400 11px var(--f-display); fill: var(--tinta); }
.it .mp-x { position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 6px; border: 0; background: none; border-radius: 50%; cursor: pointer; touch-action: manipulation; }
.it .mp-x svg { display: block; width: 100%; height: 100%; fill: none; stroke-linecap: round; overflow: visible; }
.it .mx-trazo { stroke: var(--tinta-2); stroke-width: 5.4; opacity: .55; }
.it .mx-tache { stroke: var(--lacre); stroke-width: 5.6; stroke-dasharray: 44; stroke-dashoffset: 44; transition: stroke-dashoffset .5s ease .2s; }
.it .mp-x.is-hecha .mx-trazo { stroke: var(--lacre-2); opacity: 1; }
.it .mp-x.is-hecha .mx-tache { stroke-dashoffset: 0; }
.it .mp-x.is-sig .mx-trazo { stroke: var(--lacre); stroke-width: 6.6; opacity: 1; }
.it .mp-x.is-sig::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; border: 3px solid var(--lacre); opacity: .9; animation: it-pulso 1.5s ease-out infinite; will-change: transform, opacity; }
@keyframes it-pulso { 0% { transform: scale(.55); opacity: .95; } 100% { transform: scale(1.28); opacity: 0; } }
.it .mapa-tesoro.is-ayuda .mp-x.is-sig { animation: it-salta .7s ease-in-out 3; }
@keyframes it-salta { 50% { transform: translateY(-9px) scale(1.16); } }

/* ---------- pista (lo que dice el loro) ---------- */
.it .pista { position: absolute; left: 50%; top: calc(var(--safe-t) + 70px); max-width: calc(100cqw - 28px); width: max-content; margin: 0; padding: 8px 16px 8px 14px; display: flex; align-items: center; gap: 8px; border-radius: 16px 20px 18px 6px; background: var(--papel-2); box-shadow: inset 0 0 0 1.5px rgba(138, 90, 16, .6), 0 3px 6px rgba(30, 20, 8, .32); font: 700 18px/1.2 var(--f-body); color: var(--tinta); text-align: left; transform: translate(-50%, -10px); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.it .pista.is-on { opacity: 1; transform: translate(-50%, 0); }
.it .pista .pi-loro { flex: none; display: block; width: 30px; height: 30px; }

/* ---------- toque: anillo de tinta donde toca el dedo ---------- */
.it .anillo { position: absolute; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 3.5px dashed #FFF3DC; pointer-events: none; animation: it-anillo .55s ease-out both; }
@keyframes it-anillo { from { transform: translate(var(--x), var(--y)) scale(.4); opacity: 1; } to { transform: translate(var(--x), var(--y)) scale(1.3); opacity: 0; } }

/* ---------- excavar ---------- */
.it .excava { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 14px); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 16px; opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .3s; pointer-events: none; }
.it .excava.is-on { opacity: 1; transform: none; }
.it .excava.is-on .sello { pointer-events: auto; }
.it .ex-avance { display: flex; align-items: center; gap: 6px; width: min(280px, 76cqw); padding: 6px 12px; border-radius: 18px; background: var(--papel-2); box-shadow: inset 0 0 0 1.5px rgba(138, 90, 16, .6), 0 2px 5px rgba(30, 20, 8, .3); }
.it .ex-linea { position: relative; flex: 1; height: 8px; background-image: radial-gradient(circle, rgba(90, 52, 8, .4) 2.6px, transparent 3px); background-size: 13px 8px; }
.it .ex-linea i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background-image: radial-gradient(circle, var(--lacre) 3.2px, transparent 3.6px); background-size: 13px 8px; clip-path: inset(0 100% 0 0); }
.it .ex-x { font: 400 24px/1 var(--f-display); color: var(--lacre); }
/* el dedo que enseña a frotar */
.it .manita { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -30px 0 0 -45px; color: #fff; opacity: 0; transition: opacity .3s; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(40, 20, 8, .75)); }
.it .manita.is-on { opacity: 1; }
.it .mn-mano { position: absolute; left: 18px; top: 18px; display: block; animation: it-frota 1s ease-in-out infinite; will-change: transform; }
.it .mn-estela { position: absolute; left: -16px; right: -16px; top: 22px; height: 7px; border-radius: 6px; background-image: radial-gradient(circle, #FFF3DC 3px, transparent 3.5px); background-size: 16px 7px; }
@keyframes it-frota { 0%, 100% { transform: translateX(-30px) rotate(-10deg); } 50% { transform: translateX(30px) rotate(10deg); } }

/* ---------- tarjeta del tesoro ---------- */
.it .tarjeta { position: absolute; left: 6px; right: 6px; bottom: calc(var(--safe-b) + 6px); max-height: calc(100cqh - 136px); display: flex; flex-direction: column; overflow: auto; overscroll-behavior: contain; border: 14px solid transparent; border-image: var(--pergamino) 72 fill / 32px / 0 stretch; padding: 10px 10px 12px; color: var(--tinta); opacity: 0; transform: translateY(40px) rotate(-1.2deg); transition: opacity .28s, transform .38s cubic-bezier(.2, .9, .25, 1.1); filter: drop-shadow(0 6px 10px rgba(30, 16, 6, .42)); }
.it .tarjeta.is-in { opacity: 1; transform: none; }
.it .tarjeta.is-out { opacity: 0; transform: translateY(26px); }
.it .tj-cab { display: flex; align-items: center; gap: 10px; }
.it .tj-sello { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 46% 54% 52% 48% / 56% 46% 54% 44%; background: radial-gradient(120% 130% at 36% 26%, #D3464C, var(--lacre) 50%, var(--lacre-2)); color: #FFE9C8; font: 400 26px/1 var(--f-display); box-shadow: inset 0 2px 2px rgba(255, 200, 190, .5), inset 0 -3px 5px rgba(60, 4, 8, .55), 0 2px 3px rgba(40, 12, 8, .4); }
.it .tj-kk { min-width: 0; }
.it .tj-k { margin: 0; font: 800 14.5px/1.25 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--lacre-2); }
.it .tj-quien { margin: 0; font: 500 16.5px/1.2 var(--f-body); color: var(--tinta-2); }
.it .tj-t { margin: 6px 0 4px; font: 400 clamp(30px, 9cqw, 36px)/1.05 var(--f-display); color: var(--tinta); outline: none; }
.it .tj-cuerpo { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; }
.it .tj-pie { position: sticky; bottom: -4px; }
.it .lectura { padding: 6px 8px 8px; text-align: center; border-top: 2px dotted var(--oro-2); border-bottom: 2px dotted var(--oro-2); }
.it .lc-k { margin: 0; font: 800 16px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--lacre-2); }
.it .lc-v { margin: 2px 0; font: 400 clamp(34px, 11cqw, 44px)/1.05 var(--f-display); color: var(--tinta); }
.it .lc-v.is-texto { font-size: clamp(25px, 7.4cqw, 31px); line-height: 1.16; text-wrap: balance; }
.it .lc-s { margin: 0; font: 500 18px var(--f-body); color: var(--tinta-2); }
.it .chip { align-self: center; margin: 0; padding: 3px 14px; border-radius: 16px 12px 16px 12px; border: 2px dashed var(--lacre); color: var(--lacre-2); font: 700 17px var(--f-body); }
.it .acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.it .acciones > * { flex: 1 1 140px; white-space: nowrap; }
.it .itinerario { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.it .itinerario li { display: flex; gap: 10px; align-items: baseline; padding: 3px 4px; border-bottom: 1.5px dotted rgba(90, 52, 8, .5); }
.it .it-hora { flex: none; min-width: 70px; font: 800 17px var(--f-body); color: var(--lacre-2); }
.it .it-que { font: 500 17px/1.25 var(--f-body); }
.it .mapa-ciudad { border-radius: 8px; overflow: hidden; border: 2px solid var(--oro-2); line-height: 0; filter: sepia(.32) saturate(.9); }
.it .mapa-ciudad svg { width: 100%; height: auto; max-height: 26cqh; display: block; }
.it .lugar-nombre { margin: 0; font: 400 26px/1.1 var(--f-display); color: var(--tinta); }
.it .lugar-dir { margin: 0; font: 500 17px/1.3 var(--f-body); color: var(--tinta); }
.it .mensaje { margin: 0; padding: 4px 8px; border-left: 4px solid var(--lacre); }
.it .mensaje p { margin: 0; font: 400 24px/1.22 var(--f-display); color: var(--tinta); }
.it .mensaje footer { margin-top: 4px; font: 700 17px var(--f-body); color: var(--lacre-2); text-align: right; }
.it .cf-deadline { margin: 8px 0 0; text-align: center; font: 500 16px var(--f-body); color: var(--tinta-2); }

/* ---------- ¡cumple! ---------- */
.it .cumple { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 7cqh); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.it .cumple-cinta { width: calc(100cqw - 16px); max-width: 400px; text-align: center; padding: 8px 8px 10px; border: 14px solid transparent; border-image: var(--pergamino) 72 fill / 30px / 0 stretch; animation: it-cinta .6s cubic-bezier(.2, 1.2, .3, 1) both; filter: drop-shadow(0 6px 10px rgba(30, 16, 6, .45)); }
@keyframes it-cinta { from { transform: scale(.6) rotate(-3deg); opacity: 0; } }
.it .cumple-t { margin: 0 0 2px; font: 400 clamp(34px, 11.4cqw, 46px)/1.05 var(--f-display); color: var(--lacre-2); }
.it .cumple-s { margin: 0; font: 700 19px/1.2 var(--f-body); color: var(--tinta); }
.it .cumple-e { margin: 2px 0 0; font: 500 17px/1.2 var(--f-body); color: var(--tinta-2); }

/* ---------- gritos (avisos grandes de un momento) ---------- */
.it .grito { position: absolute; left: 50%; top: 13cqh; margin: 0; width: calc(100cqw - 24px); text-align: center; font: 400 clamp(26px, 8.4cqw, 34px)/1.12 var(--f-display); color: var(--tinta); border: 14px solid transparent; border-image: var(--pergamino) 72 fill / 30px / 0 stretch; padding: 6px 8px 8px; transform: translateX(-50%); animation: it-grito 2.6s ease both; pointer-events: none; text-wrap: balance; }
.it .grito small { display: block; margin-top: 4px; font: 700 20px/1.2 var(--f-body); }
@keyframes it-grito { 0% { opacity: 0; transform: translate(-50%, 14px) scale(.9); } 12%, 84% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -8px); } }

/* ---------- saltar la llegada ---------- */
.it .saltar { position: absolute; right: 12px; bottom: calc(var(--safe-b) + 14px); min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: var(--papel-2); box-shadow: inset 0 0 0 1.5px rgba(138, 90, 16, .6), 0 2px 5px rgba(30, 20, 8, .3); color: var(--tinta); font: 700 16.5px var(--f-body); cursor: pointer; }

/* ---------- final ---------- */
.it .fin { position: absolute; left: 6px; right: 6px; bottom: calc(var(--safe-b) + 6px); max-height: calc(100cqh - 120px); overflow: auto; overscroll-behavior: contain; border: 14px solid transparent; border-image: var(--pergamino) 72 fill / 30px / 0 stretch; padding: 8px 10px 6px; color: var(--tinta); display: flex; flex-direction: column; gap: 6px; animation: it-sube .5s cubic-bezier(.2, .9, .25, 1.05) both; filter: drop-shadow(0 6px 10px rgba(30, 16, 6, .42)); }
@keyframes it-sube { from { transform: translateY(40px); opacity: 0; } }
.it .fin-t { margin: 0; text-align: center; font: 400 clamp(30px, 9.4cqw, 38px)/1.05 var(--f-display); color: var(--lacre-2); }
.it .fin-linea { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; margin: 0; font: 700 18px/1.25 var(--f-body); }
.it .fin-sep { color: var(--oro-2); }
.it .fin-lugar { margin: 0; }
.it .fin-lugar > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none; padding: 2px 6px; border-top: 2px dotted var(--oro-2); border-bottom: 2px dotted var(--oro-2); font: 700 17px var(--f-body); }
.it .fin-lugar > summary::-webkit-details-marker { display: none; }
.it .fin-lugar .bi { display: inline-flex; color: var(--lacre); }
.it .fin-salon { flex: 1; min-width: 0; }
.it .fin-vermapa { font: 700 15px var(--f-body); color: var(--lacre-2); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.it .fin-lugar[open] > *:not(summary) { margin-top: 8px; }
.it .fin-rsvp { align-self: stretch; margin: 4px 0 0; }
.it .fin-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; margin: 0; }

/* ---------- vitrina ---------- */
.it .is-vitrina .ui > *:not(.vitrina-t) { display: none; }
.it .vitrina-t { position: absolute; left: 50%; top: 6%; margin: 0; width: max-content; max-width: 90%; text-align: center; font: 400 clamp(26px, 5cqw, 46px)/1.08 var(--f-display); color: #FFF6DC; text-shadow: 0 2px 0 #7A4A0C, 0 3px 12px rgba(50, 26, 4, .8); transform: translateX(-50%); }
.it .vitrina-t small { display: block; font: 700 clamp(18px, 3cqw, 28px)/1.2 var(--f-body); }
.it .dbg-fps { position: absolute; left: 6px; top: calc(var(--safe-t) + 64px); margin: 0; padding: 2px 6px; font: 600 12px monospace; color: #fff; background: rgba(0, 0, 0, .6); border-radius: 4px; pointer-events: none; }

/* ---------- menos movimiento ---------- */
.it.rm .mp-x.is-sig::before, .it.rm .mn-mano { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .it .mp-x.is-sig::before, .it .mn-mano { animation: none; }
  .it .mapa-tesoro, .it .tarjeta { transition: opacity .2s; }
}