@font-face{font-family:UnboundedCompacta;src:url(unbounded-extrabold.woff) format("woff");font-weight:400;font-style:normal;font-display:swap;size-adjust:72%}
/* ÁLBUM NUEVO · Mi álbum con el estilo del inicio y las estampas que se pegan.
   - Arriba ya no es negro: papel con título UnboundedCompacta.
   - Pestañas en píldora con Raleway (sin letra de máquina).
   - Al marcar "Lo tengo", la estampa se pega: brillo que la cruza, golpecito y sello "Pegada" (album-nuevo.js).
   - Colección completa: en vez de los rayos que giran, una ESTAMPA DORADA que cae y se estampa.
   Para quitarlo: borra este archivo, album-nuevo.js y sus dos líneas en mi-coleccion.html. */
html body.collection-page{--an-bone:#eeede8;--an-paper:#f7f6f2;--an-ink:#151412;--an-mute:#6b675e;--an-line:#d9d6cd;--an-or:#ff8346;--an-or-ink:#c4521c;--an-gold1:#8a6a2f;--an-gold2:#e2c47f;--an-gold3:#f3e2ae;--an-display:UnboundedCompacta,Impact,"Arial Narrow",sans-serif;--an-body:Raleway,Arial,sans-serif}

/* ---------- Arriba ---------- */
html body.collection-page #album-app .album-hero{background:var(--an-paper)!important;color:var(--an-ink)!important;border:0!important;border-radius:26px!important;box-shadow:none!important}
html body.collection-page #album-app .album-hero h1{color:var(--an-ink)!important;font:400 clamp(48px,7vw,104px)/.88 var(--an-display)!important;letter-spacing:0!important;text-transform:uppercase!important;text-shadow:none!important}
html body.collection-page #album-app .album-kicker{color:var(--an-or-ink)!important;font:700 12px/1 var(--an-body)!important;letter-spacing:.08em!important}
html body.collection-page #album-app .album-kicker::before{background:var(--an-or)!important}
html body.collection-page #album-app .album-hcard{background:#fff!important;border:0!important;border-radius:20px!important;color:var(--an-ink)!important}
html body.collection-page #album-app .album-hcard .lead{color:var(--an-ink)!important}
html body.collection-page #album-app .album-hbar{background:var(--an-line)!important;border-radius:999px!important;height:8px!important}
html body.collection-page #album-app .album-hbar i{background:var(--an-or)!important;border-radius:999px!important}
html body.collection-page #album-app .album-sum{color:var(--an-mute)!important;font:700 12.5px/1.4 var(--an-body)!important;letter-spacing:.04em!important}
html body.collection-page #album-app .album-pill{border:1.5px solid var(--an-ink)!important;color:var(--an-ink)!important;background:transparent!important;font:800 12px/1 var(--an-body)!important;letter-spacing:.06em!important}
html body.collection-page #album-app .album-pill *{color:var(--an-or-ink)!important}
html body.collection-page #album-app .album-extras a{color:var(--an-ink)!important}

/* ---------- Pestañas ---------- */
html body.collection-page #album-app .album-tabs [role=tab]{border:0!important;border-radius:18px!important;background:var(--an-paper)!important;color:var(--an-ink)!important;box-shadow:none!important;transform:none!important}
html body.collection-page #album-app .album-tabs [role=tab] small{font:700 11px/1 var(--an-body)!important;letter-spacing:.06em!important;color:var(--an-mute)!important}
html body.collection-page #album-app .album-tabs [role=tab] b{font:800 14.5px/1.15 var(--an-body)!important;letter-spacing:0!important;text-transform:none!important}
html body.collection-page #album-app .album-tabs [role=tab][aria-selected=true],html body.collection-page #album-app .album-tabs [role=tab][aria-selected=true] b,html body.collection-page #album-app .album-tabs [role=tab][aria-selected=true] .cnt,html body.collection-page #album-app .album-tabs [role=tab][aria-selected=true] .cnt *{background:var(--an-ink)!important;color:var(--an-bone)!important}
html body.collection-page #album-app .album-tabs [role=tab][aria-selected=true] b,html body.collection-page #album-app .album-tabs [role=tab][aria-selected=true] .cnt,html body.collection-page #album-app .album-tabs [role=tab][aria-selected=true] .cnt *{background:transparent!important}
html body.collection-page #album-app .album-tabs [role=tab][aria-selected=true] small{color:var(--an-or)!important}
html body.collection-page #album-app .album-tabs [role=tab]::before,html body.collection-page #album-app .album-tabs [role=tab]::after{display:none!important}

/* ---------- La estampa se pega ---------- */
#album-app .al-dex .rc{position:relative}
#album-app .al-dex.an-pegada .rc::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.85) 48%,transparent 66%);background-size:260% 100%;animation:an-glint .9s ease-out .45s both}
@keyframes an-glint{from{background-position:120% 0;opacity:1}to{background-position:-60% 0;opacity:0}}
.an-sello{position:absolute;right:8%;top:10%;z-index:4;padding:5px 10px;border:3px solid currentColor;border-radius:8px;background:rgba(247,246,242,.9);color:#1f7a3f;font:400 clamp(15px,1.6vw,20px)/1 UnboundedCompacta,Impact,"Arial Narrow",sans-serif;letter-spacing:.04em;text-transform:uppercase;pointer-events:none;transform:rotate(-10deg);animation:an-sello 2s cubic-bezier(.3,1.4,.5,1) .55s both}
@keyframes an-sello{0%{opacity:0;transform:rotate(-24deg) scale(2.4)}16%{opacity:1;transform:rotate(-8deg) scale(.92)}24%{transform:rotate(-10deg) scale(1)}80%{opacity:1}100%{opacity:0;transform:rotate(-10deg) scale(1)}}

/* ---------- Colección completa: estampa dorada (sin rayos que giran) ---------- */
#album-app .al-moment{overflow:hidden!important;background:rgba(238,237,232,.86)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#album-app .al-rays{display:none!important}
#album-app .al-medal{background:linear-gradient(135deg,var(--an-gold1),var(--an-gold2) 30%,var(--an-gold3) 48%,#b8923f 64%,var(--an-gold2) 86%)!important;color:#2a1f0c!important;border:4px solid #2a1f0c!important;border-radius:28px!important;box-shadow:0 26px 60px rgba(42,31,12,.32),inset 0 0 0 6px rgba(255,255,255,.35)!important;transform:rotate(-4deg)}
#album-app .al-medal .star{background:#2a1f0c!important;color:var(--an-gold2)!important}
#album-app .al-medal .k{color:#3d2e12!important;font:800 12px/1 var(--an-body)!important;letter-spacing:.12em!important}
#album-app .al-medal .h{color:#2a1f0c!important;text-shadow:none!important;font:400 clamp(22px,3vw,32px)/1 var(--an-display)!important;letter-spacing:.02em!important}
#album-app .al-medal .n{color:#2a1f0c!important;text-shadow:0 2px 0 rgba(255,255,255,.4)!important;font:400 clamp(34px,5.4vw,72px)/.92 var(--an-display)!important;letter-spacing:0!important;overflow-wrap:normal!important;word-break:keep-all!important;hyphens:none!important;max-width:100%}
#album-app .al-medal .c{color:#3d2e12!important;font:800 13px/1 var(--an-body)!important;letter-spacing:.08em!important}
#album-app .al-medal .b button{border:2.5px solid #2a1f0c!important;background:transparent!important;color:#2a1f0c!important;font:800 14px/1 var(--an-body)!important;letter-spacing:0!important;text-transform:none!important}
#album-app .al-medal .b button.p{background:#2a1f0c!important;color:var(--an-gold3)!important}
/* Brillo que cruza la estampa dorada */
#album-app .al-medal::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);background-size:280% 100%;animation:an-glint 1.4s ease-out 1s both}
/* Confeti de papel (cae una vez, no gira) */
.an-confeti{position:absolute;top:-6%;width:10px;height:16px;border-radius:2px;pointer-events:none;animation:an-confeti 1.8s cubic-bezier(.3,.6,.5,1) both}
@keyframes an-confeti{from{transform:translate(0,0) rotate(0)}to{transform:translate(var(--dx),110vh) rotate(var(--r));opacity:.2}}

@media(prefers-reduced-motion:reduce){#album-app .al-dex.an-pegada .rc::after,.an-sello,#album-app .al-medal::after{animation:none}.an-sello{display:none}.an-confeti{display:none}}

/* ---------- Celular: las pestañas en una fila que se desliza (todas del mismo alto) ---------- */
@media(max-width:760px){
  html body.collection-page #album-app .album-tabs{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;overflow-x:auto!important;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px 10px!important;padding:2px 16px 4px!important;grid-template-columns:none!important}
  html body.collection-page #album-app .album-tabs::-webkit-scrollbar{display:none}
  html body.collection-page #album-app .album-tabs [role=tab]{flex:0 0 auto!important;width:auto!important;min-width:0!important;height:auto!important;min-height:58px!important;margin:0!important;padding:10px 16px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;gap:4px;scroll-snap-align:start;white-space:nowrap}
  html body.collection-page #album-app .album-tabs [role=tab] small{padding-left:0!important}
  html body.collection-page #album-app .album-tabs [role=tab] b{white-space:nowrap!important}
}

/* ================= Mi álbum · elegir colección en celular =================
   Arriba, la colección que estás viendo en grande con "Cambiar". Al tocarlo se abre la lista de todas en cuadrícula
   (con filtros Todas / Selecciones / Clubes). Al elegir una, se cierra. En compu queda igual que antes (índice a la izquierda). */
#album-app .al-ixcur{display:none}
@media(max-width:900px){
  #album-app #album-cols .album-index{display:block!important;position:static!important;max-height:none!important;overflow:visible!important;padding:0!important;scroll-snap-type:none!important}
  #album-app #album-cols .al-ixcur{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:10px 12px 10px 10px;border:2px solid var(--rt-ink,#151412);border-radius:18px;background:#fff;color:#151412;text-align:left;cursor:pointer;box-shadow:0 6px 0 -2px var(--pg,#151412)}
  #album-app #album-cols .al-ixcur-th{display:grid;place-items:center;width:62px;height:62px;border-radius:14px;background:#f1f0ec;overflow:hidden}
  #album-app #album-cols .al-ixcur-th img{width:86%;height:86%;object-fit:contain}
  #album-app #album-cols .al-ixcur-tx{display:grid;gap:3px;min-width:0}
  #album-app #album-cols .al-ixcur-tx small{overflow:hidden;color:#6b675e;font:700 10px/1 Raleway,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis}
  #album-app #album-cols .al-ixcur-tx b{overflow:hidden;font:400 22px/1 UnboundedCompacta,Impact,"Arial Narrow",sans-serif;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis}
  #album-app #album-cols .al-ixcur-bar{display:block;height:5px;border-radius:9px;background:#e7e5df;overflow:hidden}
  #album-app #album-cols .al-ixcur-bar i{display:block;height:100%;background:#ff8346}
  #album-app #album-cols .al-ixcur-tx em{color:#6b675e;font:600 12px/1 Raleway,Arial,sans-serif;font-style:normal}
  #album-app #album-cols .al-ixcur-go{display:inline-flex;align-items:center;gap:5px;padding:9px 12px;border-radius:999px;background:#151412;color:#fff;font:800 12.5px/1 Raleway,Arial,sans-serif}
  /* La lista: escondida hasta tocar "Cambiar" */
  #album-app #album-cols .album-index:not(.is-open) .al-ixhead,#album-app #album-cols .album-index:not(.is-open) .al-ixg{display:none!important}
  #album-app #album-cols .album-index.is-open .al-ixcur{border-radius:18px 18px 0 0;box-shadow:none}
  #album-app #album-cols .album-index.is-open .al-ixhead{position:static;display:flex!important;flex-direction:column;gap:8px;width:auto!important;margin:0;padding:12px 12px 4px;border:2px solid #151412;border-top:0;border-bottom:0;background:#fff}
  #album-app #album-cols .album-index.is-open .al-ixhead>b{display:none}
  #album-app #album-cols .album-index.is-open .al-ixf{display:grid;grid-template-columns:repeat(3,1fr)}
  #album-app #album-cols .album-index.is-open .al-ixg{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;padding:8px 12px 12px;border:2px solid #151412;border-top:0;background:#fff;animation:al-ixabre .25s ease-out}
  #album-app #album-cols .album-index.is-open .al-ixg:last-child{border-radius:0 0 18px 18px}
  @keyframes al-ixabre{from{opacity:0;transform:translateY(-6px)}}
  #album-app #album-cols .album-index.is-open .al-ixgt{grid-column:1/-1;margin:6px 0 0;padding:0}
  #album-app #album-cols .album-index.is-open .al-ixrow{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto auto;justify-items:center;gap:6px;width:auto!important;padding:10px 8px!important;border-radius:14px!important;background:#f6f5f1!important;text-align:center;box-shadow:none}
  #album-app #album-cols .album-index.is-open .al-ixrow[aria-pressed="true"]{background:#fff1e8!important;box-shadow:inset 0 0 0 2px #ff8346!important;color:#151412}
  #album-app #album-cols .album-index.is-open .al-th{width:58px;height:58px;background:#fff}
  #album-app #album-cols .album-index.is-open .al-tx{display:grid;justify-items:center;gap:5px;min-width:0;width:100%}
  #album-app #album-cols .album-index.is-open .al-tx b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
  #album-app #album-cols .album-index.is-open .al-pn{position:absolute;top:8px;right:8px;font-size:11.5px}
  #album-app #album-cols .album-index.is-open .al-ixrow{position:relative}
}

/* Hojear el álbum: anterior / siguiente al final de cada colección */
#album-app .al-hoja{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:22px;padding-top:16px;border-top:1.5px dashed #d9d6cd}
#album-app .al-hoja button{display:grid;gap:3px;max-width:100%;padding:11px 14px;border:1.5px solid #151412;border-radius:16px;background:#fff;color:#151412;cursor:pointer;transition:background .2s,transform .2s}
#album-app .al-hoja button:hover{background:#151412;color:#fff;transform:translateY(-1px)}
#album-app .al-hoja-prev{justify-self:start;text-align:left}
#album-app .al-hoja-next{justify-self:end;text-align:right;border-color:#ff8346!important;background:#ff8346!important}
#album-app .al-hoja-next:hover{background:#151412!important;color:#fff!important;border-color:#151412!important}
#album-app .al-hoja small{font:700 11px/1 Raleway,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
#album-app .al-hoja b{overflow:hidden;font:400 19px/1.05 UnboundedCompacta,Impact,"Arial Narrow",sans-serif;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis}
#album-app .al-hoja-n{color:#6b675e;font:700 12px/1 Raleway,Arial,sans-serif;white-space:nowrap}
#album-app .al-hoja button:focus-visible{outline:3px solid #ff8346;outline-offset:2px}
@media(max-width:520px){#album-app .al-hoja{grid-template-columns:1fr 1fr}#album-app .al-hoja-n{display:none}#album-app .al-hoja b{font-size:16px;white-space:normal}}
