/* Expedición Fósil — hojas: hallazgos, esqueleto, libreta de datos, credencial, museo y visor de fotos. */
.xf .sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.xf .sheet-scrim { position: absolute; inset: 0; background: rgba(40, 20, 5, .55); opacity: 0; transition: opacity .25s ease; }
.xf .sheet.is-in .sheet-scrim { opacity: 1; }
.xf .sheet-card {
  position: relative; width: min(100%, 540px); max-height: calc(100cqh - var(--safe-t) - 18px); overflow: auto; overscroll-behavior: contain;
  padding: 0 18px calc(var(--safe-b) + 18px); border: 2.5px solid var(--ink); border-bottom: 0; border-radius: 26px 26px 0 0;
  background: linear-gradient(180deg, #FFF8EA, #FBEBCB); color: var(--ink); box-shadow: 0 -10px 30px rgba(40, 20, 5, .3);
  transform: translateY(105%); transition: transform .32s cubic-bezier(.2, .9, .3, 1);
}
.xf .sheet.is-in .sheet-card { transform: none; }
.xf .sheet.is-out .sheet-card { transform: translateY(105%); transition-duration: .24s; }
.xf .sheet.is-out .sheet-scrim { opacity: 0; }
.xf .sheet-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 10px; background: linear-gradient(180deg, #FFF8EA 75%, rgba(255, 248, 234, 0)); }
.xf .sheet-head.is-bare { justify-content: flex-end; padding-bottom: 0; background: none; pointer-events: none; }
.xf .sheet-head.is-bare .sheet-x { pointer-events: auto; }
.xf .sheet-head h2 { margin: 0; font: 400 24px/1.1 var(--f-display); color: #7A3A12; }
.xf .sheet-x { flex: none; width: 44px; height: 44px; }
.xf .sheet.is-full .sheet-card { width: min(100%, 1000px); height: calc(100cqh - var(--safe-t) - 12px); }

/* ---------- Hallazgo ---------- */
/* (velo más claro: arriba de la tarjeta se ve el fósil, que se levantó en el hoyo) */
.xf .sheet:has(.find:not(.is-again)) .sheet-scrim { background: rgba(40, 20, 5, .28); }
.xf .find:not(.is-again) .sheet-body { margin-top: -44px; }
.xf .find:not(.is-again) .find-k { min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 50px; } /* (a la altura de la ×, sin chocar) */
.xf .find .sheet-body { display: flex; flex-direction: column; gap: 10px; text-align: center; margin-top: -40px; }
.xf .find-art { position: relative; height: clamp(160px, 31cqh, 270px); display: flex; align-items: center; justify-content: center; padding: 8px 6%; animation: xf-lift .9s cubic-bezier(.25, 1.5, .5, 1) both; }
.xf .find-art::before { content: ""; position: absolute; inset: 0 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 210, 110, .75), rgba(255, 178, 30, .18) 60%, transparent); animation: xf-glow2 2.4s ease-in-out infinite; }
.xf .find-art > * { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 12px 10px rgba(60, 30, 8, .35)); }
.xf .find-art .slab { width: auto; aspect-ratio: .82; margin: 0 auto; }
.xf .find-art .slab-imp { height: 100%; aspect-ratio: auto; }
@keyframes xf-lift { from { opacity: 0; transform: translateY(40px) scale(.75) rotate(-8deg); } 60% { opacity: 1; } }
@keyframes xf-glow2 { 50% { opacity: .65; transform: scale(.94); } }
.xf .find-k { margin: 0; font: 400 13px/1.3 var(--f-type); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.xf .find-t { margin: 0; font: 400 clamp(26px, 7cqw, 32px)/1.05 var(--f-display); color: #7A3A12; }
.xf .find-body { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.xf .find-go { margin-top: 6px; }
.xf .fd-big { margin: 0; font: 800 21px/1.3 var(--f-body); }
.xf .fd-note { margin: 0; font: 700 16px/1.45 var(--f-body); color: var(--ink-2); max-width: 34ch; }
.xf .fd-chip { margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--amber); border: 2px solid var(--ink); font: 800 15px var(--f-body); }
.xf .fd-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.xf .fd-actions .gbtn { flex: 1 1 160px; }

/* rastro de huellas */
.xf .trail { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; text-align: left; position: relative; }
.xf .trail::before { content: ""; position: absolute; left: 25px; top: 18px; bottom: 18px; border-left: 3px dashed rgba(122, 74, 30, .35); }
.xf .trail li { position: relative; display: grid; grid-template-columns: 52px auto 1fr; align-items: center; gap: 10px; min-height: 48px; padding: 4px 8px 4px 0; border-radius: 14px; animation: xf-pop .5s calc(var(--i, 0) * 120ms + .2s) cubic-bezier(.3, 1.5, .5, 1) both; }
.xf .trail-print { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #E9C894; border: 2.5px solid var(--ink); color: #6E431C; transform: rotate(-12deg); }
.xf .trail li:nth-child(even) .trail-print { transform: rotate(14deg); }
.xf .trail-time { font: 400 20px var(--f-display); color: var(--terra-d); white-space: nowrap; }
.xf .trail-what { font: 800 16px/1.25 var(--f-body); }
.xf .trail.is-compact li { min-height: 40px; grid-template-columns: 40px auto 1fr; animation: none; }
.xf .trail.is-compact::before { left: 19px; }
.xf .trail.is-compact .trail-print { width: 40px; height: 40px; }

/* huevos (regalos) */
.xf .gifts { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.xf .gifts li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 2px solid rgba(59, 36, 20, .25); border-radius: 16px; background: rgba(255, 255, 255, .55); }
.xf .gifts li.is-hi { border: 2.5px solid var(--ink); background: linear-gradient(135deg, #FFE7A3, #FFC84A); box-shadow: 0 3px 0 var(--ink), 0 0 18px rgba(255, 178, 30, .55); }
.xf .gift-egg { width: 44px; height: 56px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 2px rgba(60, 30, 8, .3)); }
.xf .is-hi .gift-egg { width: 52px; height: 66px; animation: xf-wobble 2.4s ease-in-out infinite; }
@keyframes xf-wobble { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-8deg); } 86% { transform: rotate(7deg); } 93% { transform: rotate(-3deg); } }
.xf .gift-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xf .gift-txt strong { font: 800 17px/1.2 var(--f-body); }
.xf .gift-txt small { font: 700 14px/1.3 var(--f-body); color: var(--ink-2); }
.xf .is-hi .gift-txt small { color: #5A3A1E; }
.xf .gift-tag { align-self: flex-start; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: #fff; border: 1.5px solid var(--ink); font: 800 12px var(--f-body); font-style: normal; }
.xf .gifts.is-compact li { padding: 6px 8px; }

/* impresiones fósiles (fotos) */
.xf .slabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; width: 100%; }
@container (min-width: 560px) { .xf .slabs { grid-template-columns: repeat(3, 1fr); } }
.xf .slabs.is-small { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.xf .slab { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 16px 12px 18px 13px; background: linear-gradient(160deg, #E2D9C6, #BDB09A); box-shadow: inset 0 0 0 2px rgba(80, 64, 40, .35), 0 4px 0 rgba(59, 36, 20, .5); }
.xf .slab.is-btn { cursor: pointer; transition: transform .2s; }
.xf .slab.is-btn:active { transform: scale(.97); }
.xf .slab-imp { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px 8px 12px 9px; box-shadow: inset 0 3px 8px rgba(30, 20, 8, .55); background: #A99C86; }
.xf .slab-imp img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) sepia(.45) contrast(1.25) brightness(.9); transition: filter .9s ease; }
.xf .slab-grain { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .7; transition: opacity .9s ease;
  background: radial-gradient(circle at 20% 30%, rgba(120, 100, 70, .5) 0 1px, transparent 2px) 0 0 / 9px 11px, radial-gradient(circle at 70% 60%, rgba(90, 70, 40, .45) 0 1.2px, transparent 2px) 0 0 / 13px 9px, linear-gradient(160deg, rgba(210, 196, 170, .9), rgba(160, 140, 110, .9)); box-shadow: inset 0 0 18px rgba(40, 28, 10, .6); }
.xf .slab.is-color .slab-imp img { filter: none; }
.xf .slab.is-color .slab-grain { opacity: .08; }
.xf .slab-cap { font: 400 13px/1.2 var(--f-type); text-align: center; color: #4A3A26; }

/* ---------- Esqueleto en grande ---------- */
.xf .skelsheet-svg { width: min(100%, 360px); margin: 0 auto 10px; }
.xf .skelsheet-svg svg { width: 100%; height: auto; display: block; }
.xf .skelsheet-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xf .skelsheet-list .gbtn { width: 100%; justify-content: flex-start; text-align: left; font-size: 14px; }

/* ---------- Libreta de datos ---------- */
.xf .dt-sec { padding: 14px 0; border-top: 2px dashed rgba(122, 74, 30, .3); }
.xf .dt-sec h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font: 400 20px var(--f-display); color: #7A3A12; }
.xf .dt-sec p { margin: 0 0 4px; font: 700 16px/1.45 var(--f-body); }
.xf .dt-big { font-weight: 900 !important; font-size: 19px !important; }
.xf .dt-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.xf .dt-row .gbtn { flex: 1 1 150px; }
.xf .dt-list { margin: 0; padding-left: 22px; font: 700 16px/1.5 var(--f-body); }
.xf .dt-faq { border: 2px solid rgba(59, 36, 20, .2); border-radius: 12px; padding: 0 12px; margin-bottom: 8px; background: rgba(255, 255, 255, .5); }
.xf .dt-faq summary { min-height: 44px; display: flex; align-items: center; font: 800 16px var(--f-body); cursor: pointer; }
.xf .dt-faq p { padding-bottom: 10px; }
.xf .dt-cta { padding: 16px 0 4px; border-top: 2px dashed rgba(122, 74, 30, .3); text-align: center; }
.xf .dt-hosts { margin: 6px 0 0; text-align: center; font: 400 14px var(--f-type); color: var(--ink-2); }

/* ---------- Credencial ---------- */
.xf .cred { --c: #2EC4C9; position: relative; width: min(100%, 340px); margin: 0 auto; border: 3px solid var(--ink); border-radius: 18px; background: #FFF8EC; box-shadow: 0 6px 0 var(--ink), 0 16px 30px rgba(40, 20, 5, .25); overflow: hidden; text-align: left; }
.xf .cred-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: var(--c); }
.xf .cred-top span { padding: 3px 9px; border-radius: 999px; background: rgba(255, 248, 236, .95); font: 900 12px/1.1 var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.xf .cred-top .cred-no { font-family: var(--f-type); font-weight: 400; letter-spacing: 0; }
.xf .cred-main { display: flex; align-items: center; gap: 12px; padding: 12px 12px 18px; }
.xf .cred-medal { flex: none; filter: drop-shadow(0 3px 0 rgba(59, 36, 20, .6)); }
.xf .cred-medal svg { display: block; }
.xf .cred-txt { min-width: 0; flex: 1; }
.xf .cred-name { margin: 0; font: 400 24px/1.05 var(--f-display); color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xf .cred-exp { margin: 3px 0 0; font: 800 14px/1.25 var(--f-body); color: var(--ink-2); }
.xf .cred-meta { margin: 6px 0 0; font: 800 14px/1.3 var(--f-body); color: var(--ink); overflow-wrap: anywhere; }
.xf .cred-tape { height: 12px; background: repeating-linear-gradient(-45deg, var(--tape-1) 0 9px, var(--tape-2) 9px 18px); border-top: 2px solid var(--ink); }
.xf .cred-stamp { position: absolute; right: 10px; bottom: 22px; padding: 2px 8px; border: 3px solid #C4302A; border-radius: 8px; font: 400 17px/1.1 var(--f-type); text-transform: uppercase; color: #C4302A; transform: rotate(-12deg); opacity: .85; mix-blend-mode: multiply; }
.xf .cred-shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .75) 48%, transparent 60%); transform: translateX(-120%); pointer-events: none; }
.xf .cred.is-honorary { background: #F6EEDF; }
.xf .cred.is-honorary .cred-top { background: #B8A07A; }
.xf .cred.is-honorary .cred-meta { font-style: italic; font-weight: 700; }
.xf .cred.is-new { animation: xf-credin 1s cubic-bezier(.2, 1.2, .4, 1) both; }
.xf .cred.is-new .cred-stamp { animation: xf-stamp .3s .7s cubic-bezier(.5, 0, .9, .5) both; }
.xf .cred.is-new .cred-shine { animation: xf-shine 1.1s 1.1s ease-in-out both; }
@keyframes xf-credin { from { opacity: 0; transform: perspective(800px) rotateY(-80deg) translateY(30px) scale(.8); } }
@keyframes xf-stamp { from { opacity: 0; transform: rotate(-12deg) scale(2.4); } }
@keyframes xf-shine { to { transform: translateX(120%); } }
.xf .cred-preview { margin: 0 0 16px; }

/* formulario */
.xf .cf { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }
.xf .cf-l { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 0; font: 800 15px var(--f-body); }
.xf .cf-count { font: 700 13px var(--f-body); color: var(--ink-2); }
.xf .cf input[type="text"], .xf .cf textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 2.5px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); font: 700 17px/1.3 var(--f-body); }
.xf .cf textarea { resize: vertical; min-height: 64px; }
.xf .cf input::placeholder { color: #8C7660; }
.xf .cf-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 8px; border: 2.5px solid var(--ink); border-radius: 16px; overflow: hidden; }
.xf .cf-seg-b { min-height: 48px; border: 0; background: #fff; font: 800 16px var(--f-body); cursor: pointer; }
.xf .cf-seg-b + .cf-seg-b { border-left: 2.5px solid var(--ink); }
.xf .cf-seg-b[aria-checked="true"] { background: var(--terra); color: #fff; }
.xf .cf-people { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.xf .cf-people[hidden] { display: none; }
.xf .cf-step { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 2px solid rgba(59, 36, 20, .25); border-radius: 14px; background: rgba(255, 255, 255, .6); }
.xf .cf-step-l { font: 800 14px var(--f-body); }
.xf .cf-step-c { display: flex; align-items: center; justify-content: space-between; }
.xf .cf-step-c output { font: 400 26px var(--f-display); min-width: 2ch; text-align: center; }
.xf .step-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 2.5px solid var(--ink); border-radius: 50%; background: var(--amber-l); cursor: pointer; padding: 0; }
.xf .step-btn:active { transform: scale(.93); }
.xf .cf-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.xf .cf-sw { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink); background: var(--c); cursor: pointer; padding: 0; box-shadow: inset 0 0 0 3px #fff; }
.xf .cf-sw[aria-checked="true"] { outline: 3px solid var(--ink); outline-offset: 3px; transform: scale(1.06); }
.xf .cf-symbols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.xf .cf-sym { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; padding: 6px; border: 2.5px solid rgba(59, 36, 20, .35); border-radius: 14px; background: #fff; color: #7A3A12; cursor: pointer; }
.xf .cf-sym small { font: 800 13px var(--f-body); color: var(--ink); }
.xf .cf-sym[aria-checked="true"] { border-color: var(--ink); background: var(--amber-l); box-shadow: 0 3px 0 var(--ink); }
.xf .cf-err { margin: 2px 0 0; min-height: 1.2em; font: 800 15px var(--f-body); color: #A4231A; }
.xf .cf-deadline { margin: 8px 0 0; text-align: center; font: 400 14px var(--f-type); color: var(--ink-2); }

/* credencial obtenida */
.xf .credshow .sheet-body { text-align: center; display: flex; flex-direction: column; gap: 14px; }
.xf .cs-t { margin: 0; font: 400 28px/1.05 var(--f-display); color: #7A3A12; }
.xf .cs-stage { padding: 10px 0 6px; }
.xf .cs-sub { margin: 0; font: 700 16px/1.4 var(--f-body); color: var(--ink-2); }

/* ---------- Museo ---------- */
.xf .museum .sheet-card { background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .25), transparent 40%), radial-gradient(rgba(120, 80, 40, .18) 1px, transparent 1.5px) 0 0 / 7px 7px, linear-gradient(180deg, #E8C690, #D6A86A); }
.xf .museum .sheet-head { background: linear-gradient(180deg, #E8C690 75%, rgba(232, 198, 144, 0)); }
.xf .museum-count { margin: 0 0 12px; font: 800 17px var(--f-body); }
.xf .museum-count strong { font: 400 30px var(--f-display); color: #7A3A12; }
.xf .wall { list-style: none; margin: 0; padding: 10px 2px 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 14px; }
.xf .ficha { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 20px 10px 12px; border: 2.5px solid var(--ink); border-radius: 12px; background: #FFF6E6; box-shadow: 0 4px 0 rgba(59, 36, 20, .7), 0 10px 16px rgba(60, 30, 8, .2); transform: rotate(var(--r)); animation: xf-pop .5s var(--d) cubic-bezier(.3, 1.5, .5, 1) both; }
.xf .ficha::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; border-radius: 9px 9px 0 0; background: var(--c); }
.xf .ficha-pin { position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FF8A6A, #C4302A 60%); border: 2px solid var(--ink); }
.xf .ficha-medal svg { display: block; }
.xf .ficha-name { margin: 0; font: 900 15px/1.2 var(--f-body); overflow-wrap: anywhere; }
.xf .ficha-meta { margin: 0; font: 700 13px/1.3 var(--f-body); color: var(--ink-2); overflow-wrap: anywhere; }
.xf .ficha.is-honorary { background: #F2E8D6; }
.xf .ficha.is-honorary::before { background: #B8A07A; }
.xf .ficha.is-honorary .ficha-meta { font-style: italic; }
.xf .ficha.is-mine { outline: 3px solid var(--amber); outline-offset: 3px; }
.xf .ficha-you { position: absolute; right: -8px; top: -12px; padding: 2px 9px; border-radius: 999px; background: var(--amber); border: 2px solid var(--ink); font: 400 15px var(--f-display); transform: rotate(10deg); }
.xf .is-pinning .ficha.is-mine { animation: xf-pin .9s .4s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes xf-pin { 0% { opacity: 0; transform: translateY(-120px) rotate(-20deg) scale(1.3); } 60% { opacity: 1; transform: translateY(6px) rotate(var(--r)) scale(1); } 100% { transform: rotate(var(--r)); } }
.xf .museum-sub { margin: 18px 0 4px; font: 400 20px var(--f-display); color: #7A3A12; }
.xf .museum-empty { margin: 20px 0; text-align: center; font: 800 17px var(--f-body); }
.xf .museum-actions { position: sticky; bottom: calc(-1 * var(--safe-b) - 18px); display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 0 calc(var(--safe-b) + 4px); margin-top: 14px; background: linear-gradient(180deg, rgba(214, 168, 106, 0), #D6A86A 30%); }
.xf .museum-actions .gbtn { flex: 1 1 200px; }

/* ---------- Visor de fotos ---------- */
.xf .viewer .sheet-card { background: #1E140C; color: #FFF6E6; border-color: #1E140C; display: flex; flex-direction: column; }
.xf .viewer .sheet-head { background: none; }
.xf .viewer .sheet-body { flex: 1; display: grid; place-items: center; position: relative; }
.xf .viewer-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.xf .viewer-img { max-width: 100%; max-height: calc(100cqh - 190px); border-radius: 14px; border: 6px solid #E2D9C6; object-fit: contain; }
.xf .viewer-cap { margin: 0; font: 400 16px var(--f-type); }
.xf .viewer-prev, .xf .viewer-next { position: absolute; top: 50%; margin-top: -23px; }
.xf .viewer-prev { left: 2px; transform: scaleX(-1); }
.xf .viewer-next { right: 2px; }

/* ---------- Aviso de demo ---------- */
.xf .demo-note .sheet-body { text-align: center; }
.xf .demo-ic { margin: 0; font-size: 40px; }
.xf .demo-note p { font: 800 17px/1.4 var(--f-body); }