/* ===== css/fuentes.css ===== */
/* ---------- Letras, servidas desde el propio servidor (Inter y Bricolage Grotesque, variables) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fuentes/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fuentes/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(/fuentes/bricolage-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(/fuentes/bricolage-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ===== css/base.css ===== */
/* RankAnime — dirección "la frase es la composición" (taste-skill, semilla 379291050).
   Frases grandes con el póster dentro, listas en columna, sin degradados, sin bordes, sin
   sombras en lo que está quieto. Los colores cambian con la estación del año.
   Los estilos van por trozos (web/css); el servidor los junta en app.css. Este primero:
   colores, letra, botones y las animaciones comunes. */

:root {
  --bg: #f7f7f7;
  --side: #efefef;
  --surface: #ebebeb;
  --surface-2: #dfe3e0;
  --ink: #0d2a1c;
  --muted: #5f6b64;
  --accent: #f6e016;
  --accent-ink: #0d2a1c;
  --print: #f7f7f7;
  --danger: #b3261e;
  --ok: #1f7a46;
  --scrim: rgba(13, 42, 28, 0.42);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  /* Cinco tamaños, nada más */
  --t-display: clamp(52px, 7vw, 120px);
  --t-h2: clamp(36px, 4.2vw, 64px);
  --t-lead: 22px;
  --t-body: 17px;
  --t-small: 14px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.3, 1.5, .5, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b2418; --side: #0e2a1d; --surface: #133426; --surface-2: #1b4231;
    --ink: #eef3ef; --muted: #9fb5a8; --print: #eef3ef;
    --danger: #ff8a80; --ok: #7fd6a2; --scrim: rgba(4, 16, 10, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b2418; --side: #0e2a1d; --surface: #133426; --surface-2: #1b4231;
  --ink: #eef3ef; --muted: #9fb5a8; --print: #eef3ef;
  --danger: #ff8a80; --ok: #7fd6a2; --scrim: rgba(4, 16, 10, 0.7);
  color-scheme: dark;
}

/* ---------- Colores de cada estación (se eligen solos según la fecha; ver js/estacion.js) ---------- */
:root[data-season="otono"] { --bg: #faf8f6; --side: #f2eeeb; --surface: #ebe5e1; --surface-2: #ddd4ce; --ink: #231714; --muted: #75685f; --accent: #d64a2e; --accent-ink: #ffffff; --print: #ffffff; }
@media (prefers-color-scheme: dark) { :root[data-season="otono"]:not([data-theme="light"]) { --bg: #121010; --side: #181514; --surface: #221d1b; --surface-2: #302926; --ink: #f6f1ee; --muted: #a89e98; --accent: #ff6a48; --accent-ink: #1a0c08; --print: #f6f1ee; } }
:root[data-season="invierno"] { --bg: #f3f7fb; --side: #e9f0f7; --surface: #dde7f2; --surface-2: #cddbea; --ink: #11233b; --muted: #56697f; --accent: #79c4f2; --accent-ink: #0c1a2c; --print: #ffffff; }
@media (prefers-color-scheme: dark) { :root[data-season="invierno"]:not([data-theme="light"]) { --bg: #0c1525; --side: #101b2e; --surface: #17243a; --surface-2: #21314b; --ink: #eef4fb; --muted: #9fb3ca; --accent: #a6dcff; --accent-ink: #0c1525; --print: #eef4fb; } }
:root[data-season="primavera"] { --bg: #fdf5f8; --side: #f8e9ef; --surface: #f3dbe5; --surface-2: #ecc9d8; --ink: #3a1424; --muted: #85566b; --accent: #ff8ab9; --accent-ink: #2c0f1c; --print: #ffffff; }
@media (prefers-color-scheme: dark) { :root[data-season="primavera"]:not([data-theme="light"]) { --bg: #22111a; --side: #2a1520; --surface: #391c2b; --surface-2: #4a2639; --ink: #fcedf3; --muted: #d6a7bb; --accent: #ff9cc4; --accent-ink: #22111a; --print: #fcedf3; } }
:root[data-season="verano"] { --bg: #f4fbf9; --side: #e7f5f1; --surface: #d8eee8; --surface-2: #c4e4dc; --ink: #08302c; --muted: #4c7770; --accent: #ffbe2e; --accent-ink: #082a26; --print: #ffffff; }
@media (prefers-color-scheme: dark) { :root[data-season="verano"]:not([data-theme="light"]) { --bg: #05201e; --side: #072623; --surface: #0c3330; --surface-2: #13433f; --ink: #effaf7; --muted: #9dcfc5; --accent: #ffc83a; --accent-ink: #05201e; --print: #effaf7; } }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink); transition: background-color 1.2s ease, color 1.2s ease;
  font: 400 var(--t-body)/1.5 var(--font); letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased; font-feature-settings: "ss03", "cv11";
}
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* «hidden» tiene que ganar a los display de las clases (p. ej. el año en «Nuevo top») */
[hidden] { display: none !important; }

/* ---------- Tipografía ---------- */
.display { font-family: var(--font-display); font-size: var(--t-display); font-weight: 800; line-height: 1; letter-spacing: -0.045em; margin: 0; }
.h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 800; line-height: .98; letter-spacing: -0.04em; margin: 0; text-wrap: balance; }
.h3 { font-size: var(--t-lead); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.lede { font-size: var(--t-body); color: var(--muted); margin: 14px 0 0; max-width: 46ch; }
.statement { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; margin: 0; max-width: 30ch; }
.statement b { font-weight: 800; font-variant-numeric: tabular-nums; }
.section { margin-top: 160px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.link { color: var(--ink); font-weight: 600; font-size: var(--t-body); background: none; border: 0; padding: 0;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--accent); }
.link:hover { text-decoration-thickness: 4px; }
.hint { font-size: var(--t-small); color: var(--muted); margin: 4px 0 0; }
.error-text { color: var(--danger); font-size: var(--t-small); margin-top: 10px; }

/* Titular que sube línea a línea desde detrás de su propia línea base */
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line > span { display: flex; align-items: center; gap: .18em; transform: translateY(105%); animation: line-up .9s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes line-up { to { transform: none; } }
.after-lines { opacity: 0; animation: fade-up .7s var(--ease) .35s forwards; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pulse { 50% { opacity: .5; } }
@keyframes pop { from { transform: scale(0); } }
/* Lo recién añadido aparece con un pequeño salto, sin repintar la página */
@keyframes added { 0% { transform: scale(.6); opacity: 0; } 60% { opacity: 1; } }

/* Aparición al llegar a cada sección */
[data-reveal] > * { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
[data-reveal].in > * { opacity: 1; transform: none; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 999px; border: 0;
  background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 700;
  transition: transform .25s var(--spring), background-color .15s;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(.94); }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 85%, white); }
.btn.big { height: 54px; padding: 0 30px; font-size: var(--t-body); }
.btn.small { height: 34px; padding: 0 12px; font-size: 13px; background: var(--bg); }
.btn.small.on { background: var(--accent); color: var(--accent-ink); }
.btn.danger { color: var(--danger); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn svg { width: 18px; height: 18px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--surface);
  display: grid; place-items: center; transition: transform .25s var(--spring), background-color .15s;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:active { transform: scale(.9); }
.icon-btn[disabled] { opacity: .4; pointer-events: none; }
.icon-btn svg { width: 16px; height: 16px; }
.actions { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; align-items: center; }

/* ===== css/armazon.css ===== */
/* ---------- Armazón: barra lateral, zona principal, decoración de fondo y avisos ---------- */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: 232px 1fr; height: 100dvh; }
.app.setting-up { grid-template-columns: 1fr; }
.app.setting-up .sidebar { display: none; }
.sidebar { background: var(--side); display: flex; flex-direction: column; padding: 28px 14px 18px; overflow-y: auto; }
.wordmark { font-family: var(--font-display); font-size: var(--t-lead); font-weight: 800; letter-spacing: -0.04em; padding: 0 12px 26px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group { font-size: var(--t-small); color: var(--muted); padding: 20px 12px 6px; }
.nav a {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 12px;
  font-size: 15px; transition: background-color .15s, transform .2s var(--spring);
}
.nav a:hover { background: var(--surface); }
.nav a:active { transform: scale(.97); }
.nav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.nav a[aria-current="page"] svg, .nav a[aria-current="page"] .count { color: var(--accent-ink); }
.nav svg { width: 18px; height: 18px; flex: none; }
.nav .count { margin-left: auto; color: var(--muted); font-size: var(--t-small); font-variant-numeric: tabular-nums; }

/* Buscador, encima de Inicio */
.side-search { display: flex; align-items: center; height: 40px; margin: 0 0 14px; padding: 0 12px; border-radius: 12px; background: var(--surface); transition: background-color .15s, box-shadow .15s; }
.side-search::before { content: ""; width: 16px; height: 16px; flex: none; margin-right: 10px; background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center / contain no-repeat; }
.side-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 15px; color: var(--ink); }
.side-search input::placeholder { color: var(--muted); }
.side-search input::-webkit-search-cancel-button { display: none; }
.side-search:focus-within { box-shadow: 0 0 0 3px var(--accent); }

/* Tu cuenta, abajo del todo */
.account { margin-top: auto; padding-top: 18px; }
.account-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
a.account-row { width: 100%; border-radius: 12px; transition: background-color .15s; }
a.account-row:hover, a.account-row.on { background: var(--surface); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--surface-2); object-fit: cover;
  display: grid; place-items: center; font-weight: 600; font-size: var(--t-small);
}
.avatar.big { width: 64px; height: 64px; font-size: var(--t-lead); }
.account-name { display: block; font-size: var(--t-small); font-weight: 600; line-height: 1.2; }
.account-sub { display: block; font-size: 13px; color: var(--muted); }

.main { overflow-y: auto; overflow-x: hidden; padding: 48px 56px 120px; outline: none; }
.view { max-width: 1320px; margin: 0 auto; }

/* Decoración de la estación: un lienzo detrás de todo, que no se puede tocar */
#decor { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }   /* sin tamaño explícito un canvas se pinta a su tamaño interno (×escala) */
#decor.over { z-index: 55; }

/* ---------- Aviso ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 140px); background: var(--accent); color: var(--accent-ink);
  padding: 13px 24px; border-radius: 999px; font-size: 15px; font-weight: 700; transition: transform .5s var(--spring); pointer-events: none; z-index: 10; }
.toast.show { transform: translate(-50%, 0); }
.toast.bad { background: var(--danger); color: #fff; }

/* Cambio de página animado (View Transitions) */
::view-transition-old(root) { animation: vt-out .18s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .45s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Ventanas estrechas: la barra lateral pasa arriba ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidebar { flex-direction: row; align-items: center; padding: 10px 12px; gap: 8px; overflow-x: auto; }
  .wordmark { padding: 0 8px; }
  .nav { flex-direction: row; }
  .nav-group, .nav .count, .account { display: none; }
  .nav a { white-space: nowrap; }
  .side-search { margin: 0; width: 160px; flex: none; }
  .main { padding: 32px 16px 96px; }
  :root { --t-display: 13vw; }
}

/* ===== css/piezas.css ===== */
/* ---------- Piezas que se repiten: pósters, tarjetas, listas ordenadas, selectores y campos ---------- */
.poster { position: relative; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; background: var(--surface); }
.poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.card { display: block; text-align: left; background: none; border: 0; padding: 0; width: 100%; }
.card .poster { transition: transform .35s var(--spring); }
.card:hover .poster { transform: translateY(-6px) rotate(-1deg); }
.card:hover .poster img { transform: scale(1.06); }
.card:active .poster { transform: scale(.97); }
.card-title { margin-top: 12px; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { font-size: var(--t-small); color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 40px 22px; }
.grid.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Botones rápidos «Pendiente» y «Visto» que aparecen al pasar por encima */
.card-wrap { position: relative; }
.quick { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; gap: 6px; opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .25s var(--ease); }
.card-wrap:hover .quick, .card-wrap:focus-within .quick { opacity: 1; transform: none; }
.quick button { flex: 1; height: 32px; border: 0; border-radius: 999px; background: var(--print); color: #0d2a1c; font-size: 13px; font-weight: 700; transition: transform .2s var(--spring); }
.quick button:hover, .quick button:focus-visible { background: var(--accent); }
.quick button:active { transform: scale(.94); }
.badge { position: absolute; top: 8px; left: 8px; height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 700; display: grid; place-items: center; }

/* ---------- Lista ordenada (mejor valorados, partes de una saga) ---------- */
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: start; }
.rank-row { display: flex; align-items: center; gap: 6px; border-radius: 16px; transition: background-color .15s, transform .25s var(--spring), opacity .2s; }
.rank-row:hover, .rank-row:focus-within { background: var(--surface); }
.rank-row.gap { margin-top: 12px; }
.rank-main {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 2.6ch 34px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 5px 14px 5px 10px; background: none; border: 0; text-align: left;
}
.rank-n { font-family: var(--font-display); font-size: var(--t-lead); font-weight: 800; letter-spacing: -0.03em; text-align: right; font-variant-numeric: tabular-nums; }
.rank-row:hover .rank-n { color: var(--accent); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .rank-row:hover .rank-n { color: var(--ink); } }
.rank-thumb { width: 34px; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.rank-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rank-title { font-size: var(--t-body); font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-meta { font-size: var(--t-small); color: var(--muted); }
.rank-score { font-size: var(--t-small); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank-score.muted { color: var(--muted); font-weight: 600; }

/* ---------- Selector de pastilla ---------- */
.segmented { display: inline-flex; background: var(--surface); border-radius: 999px; padding: 4px; position: relative; }
.segmented button { position: relative; z-index: 1; border: 0; background: none; height: 34px; padding: 0 16px; border-radius: 999px; font-size: var(--t-small); color: var(--muted); font-weight: 700; transition: color .2s; }
.segmented button[aria-pressed="true"] { color: var(--accent-ink); }
.segmented .thumb { position: absolute; top: 4px; bottom: 4px; border-radius: 999px; background: var(--accent); transition: left .4s var(--spring), width .4s var(--spring); }

/* ---------- Campos ---------- */
.field-input { display: grid; gap: 6px; margin-top: 24px; }
.field-input label { font-size: var(--t-small); color: var(--muted); }
.field-input input { height: 50px; border-radius: 14px; border: 0; background: var(--bg); padding: 0 16px; font-size: var(--t-body); }
.field-input input:focus { outline: 3px solid var(--accent); }
.field-input textarea { border: 0; border-radius: 14px; background: var(--surface); padding: 12px 16px; font: inherit; resize: vertical; }
.field-input textarea:focus { outline: 3px solid var(--accent); }
.inline-row { display: flex; gap: 10px; }
.inline-row input { flex: 1; min-width: 0; }
.picker-search { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px; margin-top: 20px; border-radius: 999px; background: var(--surface); }
.picker-search svg { width: 18px; height: 18px; color: var(--muted); }
.picker-search input { flex: 1; border: 0; background: none; outline: none; font-size: var(--t-body); }
.picker-search:focus-within { box-shadow: 0 0 0 3px var(--accent); }

/* ---------- Vacíos y carga ---------- */
.empty { padding: 48px 0; color: var(--muted); }
.empty b { display: block; color: var(--ink); font-size: var(--t-lead); letter-spacing: -0.02em; margin-bottom: 6px; }
.skeleton { background: var(--surface); border-radius: 14px; aspect-ratio: 2 / 3; animation: pulse 1.4s ease-in-out infinite; }

@media (max-width: 1100px) {
  .grid.six { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== css/inicio.css ===== */
/* ---------- Inicio: la temporada, lo que sigues viendo, recomendaciones y el aviso de temporada ---------- */
#results { margin-top: 72px; }

/* Campo de color con pósters tirados encima del nombre de la temporada */
.field {
  position: relative; background: var(--accent); color: var(--accent-ink); border-radius: 32px;
  min-height: min(78vh, 760px); display: grid; place-items: center; overflow: hidden; isolation: isolate;
}
/* El grabado de la estación, al fondo: en escala de grises y fundido con el color, para que el
   campo siga siendo del color de la temporada y el nombre se lea igual; se mueve muy despacio */
.field-art { position: absolute; inset: 0; z-index: -1; background: center / cover no-repeat;
  filter: grayscale(1) contrast(1.2) brightness(1.05); mix-blend-mode: multiply; opacity: .42;
  animation: field-drift 48s ease-in-out infinite alternate; }
:root[data-season="otono"] .field-art { background-image: url("/estaciones/otono.webp"); }
:root[data-season="invierno"] .field-art { background-image: url("/estaciones/invierno.webp"); }
:root[data-season="primavera"] .field-art { background-image: url("/estaciones/primavera.webp"); }
:root[data-season="verano"] .field-art { background-image: url("/estaciones/verano.webp"); }
@keyframes field-drift { from { transform: scale(1.04) translate(-1%, 0); } to { transform: scale(1.1) translate(1.5%, -1%); } }
.field .word { font-family: var(--font-display); font-size: clamp(110px, 14vw, 220px); font-weight: 900; line-height: .85; letter-spacing: -0.06em; text-align: center; margin: 0; }
.field .word span { display: block; }
.print {
  position: absolute; width: clamp(150px, 17vw, 250px); padding: 8px; background: var(--print); border: 0; border-radius: 6px;
  transform: rotate(var(--r)); transition: transform .3s var(--spring); z-index: 1;
}
.print img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.print-title { display: block; padding: 8px 2px 2px; font-size: 13px; font-weight: 700; color: #1d1d1f; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Rotación: el póster sale volando y cae otro, como una foto tirada sobre la mesa */
.print.leaving { animation: print-out .48s cubic-bezier(.5, 0, .75, 0) forwards; pointer-events: none; }
.print.landing { animation: print-in .8s var(--spring) both; }
@keyframes print-out { to { opacity: 0; transform: translate(calc(var(--r) * 10), -70px) rotate(calc(var(--r) * -2.5)) scale(.85); } }
@keyframes print-in { from { opacity: 0; transform: translateY(-140px) rotate(calc(var(--r) * 3)) scale(1.3); } 60% { opacity: 1; } }
.print:hover, .print:focus-visible { transform: rotate(0deg) scale(1.04); z-index: 3; }
.print.p1 { --r: -8deg; left: 6%; top: 10%; }
.print.p2 { --r: 6deg; right: 7%; top: 22%; }
.print.p3 { --r: -4deg; left: 40%; bottom: -14%; width: clamp(120px, 12vw, 180px); }

/* ---------- Sigues viendo ---------- */
.watching { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.wcard { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 18px; align-items: center; background: var(--surface); border-radius: 22px; padding: 12px 18px 12px 12px; }
.wcard .poster { border-radius: 10px; }
.wcard-title { font-size: var(--t-body); font-weight: 700; line-height: 1.3; background: none; border: 0; padding: 0; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wcard-title:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.progress { height: 8px; border-radius: 4px; background: var(--surface-2); margin-top: 10px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .6s var(--ease); }
.wcard-eps { font-size: var(--t-small); color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.plus-one { height: 42px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 800; transition: transform .25s var(--spring); }
.plus-one:hover { transform: scale(1.06); }
.plus-one:active { transform: scale(.88); }

/* ---------- Los mejor valorados: texto y póster a la izquierda, lista a la derecha ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: stretch; }
.split-text { display: flex; flex-direction: column; }
.preview { margin-top: auto; width: min(62%, 300px); aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--surface); }
.preview img { width: 100%; height: 100%; object-fit: cover; animation: preview-in .5s var(--ease); }
@keyframes preview-in { from { opacity: 0; transform: scale(1.06); } }

/* ---------- Portada (sin sesión): titular y muro de pósters ---------- */
.welcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; min-height: calc(100vh - 168px); }
.welcome .display { font-size: clamp(56px, 6.4vw, 104px); }
.welcome .lede { font-size: var(--t-lead); margin-top: 18px; max-width: 28ch; }
.fine { font-size: var(--t-small); color: var(--muted); margin-top: 28px; max-width: 42ch; }
.fine a { color: var(--muted); text-decoration-color: var(--accent); }
.wall { height: calc(100vh - 96px); overflow: hidden; border-radius: 28px; animation: fade-in 1s ease both; }
.wall-tilt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; height: 100%; transform: rotate(-6deg) scale(1.18); }
.wall-track { display: grid; gap: 12px; animation: wall-up 160s linear infinite; will-change: transform; }
.wall-track.down { animation-name: wall-down; }
@keyframes wall-up { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 6px)); } }
@keyframes wall-down { from { transform: translateY(calc(-50% - 6px)); } to { transform: translateY(0); } }

/* ---------- Aviso de temporada nueva ---------- */
.intro {
  position: fixed; inset: 0; z-index: 50; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 2vh; padding: 9vh 4vw 0;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);   /* taste-skill-ignore: es una capa que tapa la página un momento */
  animation: fade-in .5s ease both;
}
.intro.out { animation: intro-out .45s cubic-bezier(.4, 0, 1, 1) forwards; }
@keyframes intro-out { to { opacity: 0; transform: scale(1.04); } }
.intro-text { text-align: center; display: grid; justify-items: center; }
.intro-word { font-family: var(--font-display); font-size: clamp(64px, 10.5vw, 180px); font-weight: 800; line-height: .92; letter-spacing: -0.055em; margin: 0; }
.intro-word .line > span { justify-content: center; animation-duration: 1.1s; }
.intro-word .line + .line > span { color: var(--accent); animation-delay: .18s; }
.intro-sub { font-size: var(--t-lead); color: var(--muted); margin: 22px 0 0; opacity: 0; animation: fade-up .7s var(--ease) .7s forwards; }
.intro-actions { display: flex; align-items: center; gap: 22px; margin-top: 28px; opacity: 0; animation: fade-up .7s var(--ease) .85s forwards; }
/* Los estrenos se reparten en abanico, como cartas */
.intro-deck { position: relative; width: min(1180px, 96vw); height: 100%; min-height: 240px; }
.deck-card {
  position: absolute; left: 50%; bottom: -8%; width: clamp(110px, 12.5vw, 200px); aspect-ratio: 2 / 3;
  border: 0; padding: 0; border-radius: 14px; overflow: hidden; background: var(--surface);
  transform: translateX(calc(-50% + var(--x) * 8)) translateY(var(--y)) rotate(var(--rot));
  transform-origin: 50% 100%;
  animation: deal 1s var(--spring) backwards;
  transition: transform .35s var(--spring);
}
.deck-card img { width: 100%; height: 100%; object-fit: cover; }
.deck-card:hover, .deck-card:focus-visible { transform: translateX(calc(-50% + var(--x) * 8)) translateY(calc(var(--y) - 46px)) rotate(var(--rot)) scale(1.06); z-index: 20 !important; }
@keyframes deal { from { opacity: 0; transform: translateX(-50%) translateY(110%) rotate(0deg) scale(.85); } }

@media (max-width: 1100px) {
  .split { gap: 40px; }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .preview { display: none; }
  .welcome { grid-template-columns: 1fr; }
  .wall { height: 60vh; }
  .field { min-height: 78svh; }
  .field .word { font-size: 30vw; }
  .print { width: 52vw; }
  .print.p1 { left: 4%; } .print.p2 { left: 40%; } .print.p3 { display: none; }
  .watching { grid-template-columns: 1fr; }
  .intro { padding-top: 7vh; }
  .deck-card { width: 30vw; }
}

/* ===== css/listas.css ===== */
/* ---------- Mis listas ---------- */
.list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 56px; }
.grouping { margin: -28px 0 28px; animation: pulse 1.6s ease-in-out infinite; }

/* ===== css/fichas.css ===== */
/* ---------- Fichas: la ventana que se abre encima ---------- */
.sheet { border: 0; padding: 0; width: min(940px, calc(100vw - 48px)); max-height: calc(100vh - 64px);
  border-radius: 28px; background: var(--side); color: var(--ink); box-shadow: rgba(0, 0, 0, .35) 0 24px 70px; overflow: hidden; } /* taste-skill-ignore: es un diálogo que flota */
.sheet[open] { animation: sheet-in .5s var(--spring) both; }
.sheet.closing { animation: sheet-out .2s cubic-bezier(.4, 0, 1, 1) both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(40px) scale(.96); } }
@keyframes sheet-out { to { opacity: 0; transform: translateY(16px) scale(.98); } }
.sheet::backdrop { background: var(--scrim); }
.sheet-body { overscroll-behavior: contain; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; padding: 40px; max-height: calc(100vh - 64px); overflow-y: auto; }
.sheet-poster .poster { border-radius: 18px; }
.sheet-close { position: absolute; top: 18px; right: 18px; z-index: 2; }
.sheet h2 { font-family: var(--font-display); font-size: clamp(30px, 3vw, 44px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; margin: 0 44px 0 0; text-wrap: balance; }
.sheet .alt { color: var(--muted); font-size: 15px; margin-top: 8px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; font-size: 15px; color: var(--muted); }
.facts b { color: var(--ink); font-weight: 700; }
.genres { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.genres span { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--surface); }
.synopsis { margin-top: 20px; font-size: 16px; line-height: 1.6; white-space: pre-line; }
.synopsis.short { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

/* Lo tuyo: estado en tus listas, episodios */
.mine { margin-top: 28px; padding: 24px; border-radius: 22px; background: var(--surface); display: grid; gap: 18px; }
.mine-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mine-label { font-size: 15px; font-weight: 700; }
.mine .segmented { background: var(--bg); }
.soon { font-size: 15px; font-weight: 700; color: var(--accent); }
.stepper { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; flex-wrap: wrap; }
.stepper.ep-done { font-family: var(--font-display); font-size: var(--t-lead); font-weight: 800; }
.stepper .icon-btn { background: var(--bg); }
.ep-input { width: 84px; height: 40px; border: 0; border-radius: 12px; background: var(--bg); text-align: center; font-size: var(--t-body); font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.ep-input::-webkit-inner-spin-button, .ep-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ep-input:focus { outline: 3px solid var(--accent); }
.ep-total { color: var(--muted); }

/* Partes de una saga, por bloques */
.saga-block { font-family: var(--font-display); font-size: var(--t-lead); font-weight: 800; letter-spacing: -0.02em; margin: 32px 0 10px; }
.saga-block span { color: var(--muted); font-size: .75em; margin-left: 6px; }

/* Ventanas sin póster: selectores, ajustes, cuenta */
.picker { overscroll-behavior: contain; padding: 36px 40px 40px; max-height: calc(100vh - 64px); overflow-y: auto; }
.picker .grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 24px 16px; margin-top: 28px; }
.picker .card-title { font-size: 13px; }
.account-head { display: flex; align-items: center; gap: 18px; }

@media (max-width: 900px) {
  .sheet-body { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .sheet h2 { overflow-wrap: anywhere; }
  .mine { grid-template-columns: minmax(0, 1fr); }
  .mine-row > * { min-width: 0; }
  .mine .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .mine .segmented button { flex: none; }
  .sheet-poster { max-width: 200px; }
}

/* Volver a la ficha anterior: arriba a la izquierda, con el nombre de lo que había */
.sheet-back { position: absolute; top: 18px; left: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 96px);
  height: 38px; padding: 0 16px 0 10px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink);
  font-size: 15px; font-weight: 600; letter-spacing: -0.015em; transition: background-color .15s, transform .25s var(--spring); }
.sheet-back:hover { background: var(--surface-2); }
.sheet-back:active { transform: scale(.95); }
.sheet-back svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.sheet-back span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet:has(.sheet-back) .sheet-body, .sheet:has(.sheet-back) .picker { padding-top: 76px; }
/* En la ficha de una saga del top: qué parte sale en él */
.part-face { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; margin-right: 8px; border: 0; border-radius: 999px;
  background: var(--bg); color: var(--muted); font-size: 13px; font-weight: 700; transition: background-color .15s, color .15s, transform .25s var(--spring); }
.part-face:hover { background: var(--surface-2); color: var(--ink); }
.part-face:active { transform: scale(.95); }
.part-face.on { background: var(--accent); color: var(--accent-ink); }
.part-face svg { width: 14px; height: 14px; }

/* ===== css/tops.css ===== */
/* ---------- Tops: el podio, la fila del 4 al 10, los niveles, las vitrinas y los selectores ---------- */
.podium { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: clamp(16px, 2.6vw, 36px); align-items: end; width: min(100%, 52vh * 1.55, 720px); margin: 0 auto; }
.slot { position: relative; display: flex; flex-direction: column; min-width: 0; }
.slot-poster { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; border: 0; padding: 0; border-radius: 18px; overflow: hidden; background: var(--surface);
  transition: transform .45s var(--spring); }
.slot-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.slot:not(.vacant):hover .slot-poster { transform: translateY(-10px) rotate(var(--tilt, -1.5deg)); }
.slot:hover .slot-poster img { transform: scale(1.06); }
.slot.p3 { --tilt: 1.5deg; }
/* El escalón del podio: el número grande sobre un bloque de color */
.podium .slot-n {
  order: 3; display: grid; place-items: center; margin-top: 14px; border-radius: 18px; background: var(--surface);
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: var(--ink);
}
.podium .p1 .slot-n { height: 104px; font-size: 84px; background: var(--accent); color: var(--accent-ink); }
.podium .p2 .slot-n { height: 72px; font-size: 58px; }
.podium .p3 .slot-n { height: 48px; font-size: 40px; }
.podium .slot-title, .podium .slot-meta, .podium .spot { order: 2; }
.slot-title { margin-top: 12px; font-size: var(--t-body); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.podium .p1 .slot-title { font-family: var(--font-display); font-size: var(--t-lead); font-weight: 800; letter-spacing: -0.03em; }
.slot-meta { font-size: var(--t-small); color: var(--muted); font-variant-numeric: tabular-nums; }
/* Entrada: los escalones suben uno tras otro (2, 1, 3) */
.podium .slot { animation: rise-step .9s var(--spring) both; }
.podium .p2 { animation-delay: .15s; } .podium .p1 { animation-delay: .3s; } .podium .p3 { animation-delay: .45s; }
@keyframes rise-step { from { opacity: 0; transform: translateY(60px); } }

.rest { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.rest .slot-poster { border-radius: 12px; }
.rest .slot-n { position: absolute; top: 8px; left: 8px; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center;
  background: var(--bg); font-family: var(--font-display); font-size: 17px; font-weight: 800; z-index: 1; pointer-events: none; }
.rest .slot-title { font-size: 14px; margin-top: 10px; }
/* Puestos vacíos */
.slot.vacant .slot-add { width: 100%; aspect-ratio: 2 / 3; border: 0; border-radius: 18px; background: var(--surface); color: var(--muted);
  display: grid; place-content: center; justify-items: center; gap: 8px; font-weight: 700; font-size: var(--t-small); transition: background-color .15s, transform .3s var(--spring); }
.rest .slot.vacant .slot-add { border-radius: 12px; }
.slot.vacant .slot-add:hover { background: var(--surface-2); color: var(--ink); transform: translateY(-6px); }
.slot.vacant .slot-add svg { width: 28px; height: 28px; color: var(--accent); }
.podium .slot.vacant .slot-n { background: var(--surface); color: var(--muted); }

/* ---------- Ordenar: los pósters tiemblan como los iconos del móvil y se cogen con el puntero ---------- */
.edit-bar { display: flex; align-items: center; gap: 16px; }
.edit-bar .hint { margin: 0; animation: fade-up .4s var(--ease); }
.editing .slot:not(.vacant) .slot-poster { cursor: grab; touch-action: none; animation: jiggle .28s ease-in-out infinite alternate; }
.editing .slot:nth-child(2n) .slot-poster { animation-delay: -.14s; animation-duration: .31s; }
.editing .slot:nth-child(3n) .slot-poster { animation-duration: .25s; }
@keyframes jiggle { from { transform: rotate(-1.1deg); } to { transform: rotate(1.1deg); } }
.editing .slot:not(.vacant):hover .slot-poster { transform: none; }
.slot.lifted .slot-poster { opacity: .22; animation: none; }
.slot.swap .slot-poster, .slot.swap .slot-title { animation: swap-in .32s var(--spring); }
@keyframes swap-in { from { transform: scale(.9); opacity: .4; } }
.slot-x { position: absolute; top: -11px; left: -11px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: var(--ink); color: var(--bg); display: grid; place-items: center; animation: pop .35s var(--spring) both; transition: transform .2s var(--spring); }
.slot-x:hover { transform: scale(1.15); }
.slot-x svg { width: 13px; height: 13px; stroke-width: 3; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45); will-change: transform; } /* taste-skill-ignore: flota mientras se arrastra */
.drag-ghost img { width: 100%; height: 100%; object-fit: cover; }
.drag-ghost.landing { transition: transform .3s var(--spring), width .3s var(--ease), height .3s var(--ease), box-shadow .3s; box-shadow: none; }
body.is-dragging { cursor: grabbing; user-select: none; }
body.is-dragging * { cursor: grabbing !important; }
.podium.calm .slot, .rest.calm .slot { animation: none; }
.slot[data-drag]:focus-visible .slot-poster { outline: 3px solid var(--accent); outline-offset: 4px; }
.drop-here, .drop-here .slot-add { outline: 3px dashed var(--accent); outline-offset: 4px; background: var(--surface-2) !important; }
.just-added .slot-poster, .slot.listed.just-added, .vitrina.just-added { animation: added .7s var(--spring) both; }

/* ---------- Top largo: el resto, por niveles ---------- */
.back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; font-size: 15px; }
.back svg { width: 16px; height: 16px; }
.tier { margin-top: 72px; }
.tier .h3 { margin-bottom: 18px; }
.tier-range { color: var(--muted); font-weight: 600; font-size: .8em; margin-left: 8px; }
.tier-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.slot.listed { display: grid; grid-template-columns: 3ch 44px minmax(0, 1fr); grid-template-areas: "n p t" "n p m";
  column-gap: 14px; align-items: center; padding: 8px 12px 8px 6px; border-radius: 14px; transition: background-color .15s; }
.slot.listed:hover { background: var(--surface); }
.slot.listed .slot-poster { grid-area: p; width: 44px; border-radius: 8px; }
.slot.listed .slot-n { grid-area: n; position: static; background: none; min-width: 0; height: auto; padding: 0; text-align: right;
  font-family: var(--font-display); font-size: var(--t-lead); font-weight: 800; }
.slot.listed .slot-title { grid-area: t; margin: 0; font-size: 15px; align-self: end; -webkit-line-clamp: 1; }
.slot.listed .slot-meta { grid-area: m; align-self: start; }
.slot.listed .slot-x { top: -6px; left: -6px; width: 26px; height: 26px; }
.tier-add { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 8px 12px 8px 6px; border: 0; border-radius: 14px; background: transparent;
  color: var(--muted); font-weight: 700; font-size: 15px; transition: background-color .15s, color .15s; }
.tier-add:hover { background: var(--surface); color: var(--ink); }
.tier-add svg { width: 18px; height: 18px; color: var(--accent); }
.tier-n { width: 3ch; text-align: right; font-family: var(--font-display); font-size: var(--t-lead); font-weight: 800; color: var(--surface-2); }
.tier-add:hover .tier-n { color: var(--muted); }

/* ---------- Vitrinas del Salón: un montón de pósters por top ---------- */
.vitrinas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; margin-top: 40px; }
.vitrina { display: grid; gap: 4px; padding: 18px; border-radius: 22px; background: var(--surface); border: 0; text-align: left;
  transition: transform .35s var(--spring), background-color .15s; }
.vitrina:hover { transform: translateY(-6px); background: var(--surface-2); }
.vitrina-stack { position: relative; height: 150px; margin-bottom: 12px; display: grid; place-items: center; color: var(--accent); }
.vitrina-stack img { position: absolute; bottom: 0; left: 50%; width: 84px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px;
  transform: translateX(calc(-50% + var(--k) * 46px)) rotate(calc(var(--k) * 9deg)); transform-origin: 50% 100%;
  transition: transform .4s var(--spring); }
.vitrina-stack img:nth-child(2) { z-index: 2; }
.vitrina:hover .vitrina-stack img { transform: translateX(calc(-50% + var(--k) * 58px)) rotate(calc(var(--k) * 13deg)) translateY(-4px); }
.vitrina-stack svg { width: 40px; height: 40px; }
.vitrina-name { font-family: var(--font-display); font-size: var(--t-lead); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.vitrina-meta { font-size: var(--t-small); color: var(--muted); }
.vitrina.new .vitrina-stack { background: var(--bg); border-radius: 16px; }

/* ---------- Crear un top y ajustes ---------- */
.kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0 8px; }
.kind { display: grid; gap: 4px; text-align: left; padding: 16px 18px; border: 0; border-radius: 18px; background: var(--surface);
  transition: background-color .15s, transform .25s var(--spring); }
.kind b { font-size: var(--t-body); }
.kind span { font-size: var(--t-small); color: var(--muted); }
.kind:hover { transform: translateY(-2px); }
.kind[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.kind[aria-pressed="true"] span { color: var(--accent-ink); }
.sizes { display: flex; gap: 6px; }
.size-opt input { position: absolute; opacity: 0; pointer-events: none; }
.size-opt span { display: grid; place-items: center; min-width: 48px; height: 36px; border-radius: 999px; background: var(--bg); font-weight: 700; font-size: 14px; cursor: pointer; transition: background-color .15s; }
.size-opt input:checked + span { background: var(--accent); color: var(--accent-ink); }
.size-opt input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Openings y endings: elegirlos y escucharlos ---------- */
.op-list { display: grid; gap: 6px; margin-top: 24px; }
.op { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 0; border-radius: 16px; background: var(--surface); text-align: left; font-size: 15px;
  transition: background-color .15s, transform .25s var(--spring); }
.op:hover:not([disabled]) { background: var(--accent); color: var(--accent-ink); transform: translateX(4px); }
.op svg { width: 16px; height: 16px; flex: none; }
.op em { margin-left: auto; color: var(--muted); font-style: normal; font-size: 13px; }
.op[disabled] { opacity: .55; }
.play-badge { position: absolute; inset: auto auto 10px 10px; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
  transition: transform .3s var(--spring); z-index: 1; }
.play-badge svg { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
.slot.listed .play-badge { inset: auto; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); }
.slot.listed .play-badge svg { width: 11px; height: 11px; }
.has-audio:hover .play-badge, .theme-play:hover .play-badge { transform: scale(1.12); }
.slot.listed .has-audio:hover .play-badge { transform: translate(-50%, -50%) scale(1.12); }
.eq { display: none; gap: 2px; align-items: flex-end; height: 16px; }
.eq i { width: 3px; background: currentColor; border-radius: 2px; animation: eq .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; } .eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
.playing .play-badge svg { display: none; }
.playing .eq { display: flex; }
.slot.listed .playing .eq { height: 10px; } .slot.listed .playing .eq i { width: 2px; }
.playing .play-badge { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent); }
.spot { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--muted); width: fit-content; transition: color .15s; }
.spot svg { width: 16px; height: 16px; color: #1db954; }
.spot:hover { color: var(--ink); }
.slot.listed .spot { grid-area: m; justify-self: end; margin: 0; }
.theme-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 8px 12px 8px 8px; border-radius: 16px; background: var(--surface); }
.theme-cover { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.theme-cover img { width: 100%; height: 100%; object-fit: cover; }
/* El play va aparte, al lado, no encima de la portada */
.theme-play { width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--ink);
  transition: transform .3s var(--spring), background-color .15s, color .15s; }
.theme-play svg { width: 15px; height: 15px; margin-left: 2px; fill: currentColor; }
.theme-play:hover { transform: scale(1.1); background: var(--accent); color: var(--accent-ink); }
.theme-play.playing { background: var(--accent); color: var(--accent-ink); }
.theme-play.playing svg { display: none; }
.theme-play.playing .eq { display: flex; height: 14px; }
.theme-text { display: grid; min-width: 0; }
.theme-text b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-text span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
  .podium { gap: 10px; }
  .podium .p1 .slot-n { height: 90px; font-size: 64px; } .podium .p2 .slot-n { height: 66px; font-size: 48px; } .podium .p3 .slot-n { height: 48px; font-size: 36px; }
  .podium .p1 .slot-title { font-size: var(--t-body); }
  .rest { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tier-list, .kinds { grid-template-columns: 1fr; }
}
/* El sitio donde va a posarse el póster que se suelta: invisible hasta que llega */
.slot-poster.awaiting { visibility: hidden; }

/* ===== css/perfil.css ===== */
/* ---------- Perfil: la página y el formulario para editarlo ---------- */
.profile-head { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.avatar.xl { width: 180px; height: 180px; font-size: 72px; object-position: 50% 15%; }
.profile-handle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--t-lead); color: var(--muted); margin: 12px 0 0; }
.id-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; background: var(--surface); padding: 6px 12px;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color .15s; }
.id-chip:hover { background: var(--accent); color: var(--accent-ink); }
.id-chip svg { width: 14px; height: 14px; }
.profile-bio { font-size: var(--t-body); max-width: 46ch; margin: 14px 0 0; }
/* Cifras: una fila con tantas columnas como cifras; número grande arriba y su nombre debajo */
.profile-stats { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 12px; margin-top: 64px; }
.profile-stats div { background: var(--surface); border-radius: 24px; padding: 26px 28px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 132px; }
.profile-stats b { font-family: var(--font-display); font-size: clamp(36px, 3.6vw, 52px); font-weight: 800; letter-spacing: -0.045em; line-height: .95; font-variant-numeric: tabular-nums; }
.profile-stats span { color: var(--muted); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }

/* Editar: tarjeta de cómo te verán a la izquierda, campos a la derecha */
.profile-form { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: start; }
.picker .profile-form { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; margin-top: 20px; }
.pf-card { position: sticky; top: 24px; display: grid; justify-items: center; gap: 6px; padding: 32px 20px; border-radius: 28px; background: var(--surface); text-align: center; }
.pf-avatar { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-family: var(--font-display); font-size: 64px; font-weight: 800; margin-bottom: 12px; }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.pf-avatar.pop { animation: added .6s var(--spring); }
.pf-card b { font-family: var(--font-display); font-size: var(--t-lead); letter-spacing: -0.02em; word-break: break-word; }
.pf-card span { color: var(--muted); font-size: 15px; }
.pf-card .pf-id { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--bg); padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.pf-fields .field-input:first-child { margin-top: 0; }
.picker .field-input input, .picker .field-input textarea, .picker .handle-input { background: var(--bg); }
.handle-input { display: flex; align-items: center; height: 50px; border-radius: 14px; background: var(--surface); padding-left: 16px; }
.handle-input span { color: var(--muted); font-weight: 700; }
.handle-input input { flex: 1; height: 100%; background: transparent !important; padding-left: 2px !important; }
.handle-input:focus-within { outline: 3px solid var(--accent); }
.handle-input input:focus { outline: none; }
.handle-input input:disabled { color: var(--muted); }
.pf-msg { font-size: 13px; color: var(--muted); } .pf-msg.ok { color: var(--ok); } .pf-msg.bad { color: var(--danger); }
.pf-count { float: right; font-variant-numeric: tabular-nums; }
/* Fotos de perfil para elegir */
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; margin-top: 12px; max-height: 300px; overflow-y: auto; padding: 4px; }
.av { aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; overflow: hidden; background: var(--surface-2); transition: transform .25s var(--spring); }
.av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.av:hover { transform: scale(1.08); }
.av[aria-checked="true"] { outline: 4px solid var(--accent); outline-offset: 2px; }

@media (max-width: 900px) {
  .profile-form, .picker .profile-form { grid-template-columns: 1fr; }
  .pf-card { position: static; }
  .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-stats div { min-height: 112px; padding: 20px 20px 18px; }
  .avatar.xl { width: 120px; height: 120px; }
}

/* ===== css/amigos.css ===== */
/* ---------- Amigos: buscar gente, solicitudes y perfiles ajenos; privacidad ----------
   Al estilo de Ajustes: títulos con una frase debajo, listas agrupadas en una sola pieza redondeada
   y cifras en frase, nunca un número suelto pegado al título. */

/* Cabecera de sección: título y, debajo, la frase con cuántos hay */
.sec-head { align-items: flex-end; margin-bottom: 28px; }
.sec-head .h2 { line-height: 1; }
.h2.sm { font-size: clamp(28px, 2.8vw, 40px); letter-spacing: -0.035em; }
.sec-sub { margin: 8px 0 0; font-size: var(--t-body); color: var(--muted); letter-spacing: -0.015em; }
.sec-note { margin: 12px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); max-width: 56ch; }
.user-sec { margin-top: 96px; }

/* Tu tarjeta para que te encuentren */
.share-card { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 32px; padding: 10px 14px 10px 10px; border-radius: 999px; background: var(--surface); }
.share-card .avatar { width: 48px; height: 48px; font-size: 20px; object-position: 50% 15%; }
.share-handle { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0 4px; border-radius: 10px;
  font-size: 22px; font-weight: 750; letter-spacing: -0.03em; color: var(--ink); transition: color .15s; }
.share-handle svg { width: 16px; height: 16px; color: var(--muted); transition: color .15s; }
.share-handle:hover, .share-handle:hover svg { color: var(--accent); }
.share-card .id-chip { background: var(--bg); }

/* Buscar */
.friends-find { margin-top: 72px; max-width: 760px; }
.people-search { display: flex; gap: 10px; align-items: center; margin-top: 20px; }
.people-search .picker-search { flex: 1; min-width: 0; margin: 0; height: 54px; }
.people-search input { min-width: 0; font-size: var(--t-body); }
.people-search .btn { height: 54px; padding: 0 26px; }
.people-none { margin: 20px 0 0; font-size: var(--t-body); color: var(--muted); line-height: 1.45; }
.people-none b { color: var(--ink); font-weight: 700; }
#people-result .people { margin-top: 20px; }

/* Listas de personas: una sola pieza redondeada con filas separadas por un hueco */
.friends-block { margin-top: 96px; }
.people { display: grid; gap: 2px; max-width: 760px; border-radius: 24px; overflow: hidden; }
.person { display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; background: var(--surface); flex-wrap: wrap; transition: background-color .15s; }
.person:hover { background: color-mix(in srgb, var(--surface) 70%, var(--surface-2)); }
.person-link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; border-radius: 16px; }
.person .avatar.big { width: 52px; height: 52px; font-size: 20px; object-position: 50% 15%; }
.person-name { min-width: 0; display: grid; gap: 1px; }
.person-name b { font-size: var(--t-body); font-weight: 650; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-name span { font-size: 15px; color: var(--muted); }
.person-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.person .btn { height: 38px; padding: 0 18px; font-size: 14px; }
.person .btn:not(.primary) { background: var(--bg); }
.rel-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--muted); padding: 0 6px; }
.rel-tag svg { width: 16px; height: 16px; color: var(--accent); }
.profile .actions .rel-tag { height: 46px; }

/* Tus amigos: tarjetas con la foto grande */
.friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 14px; }
.friend { display: grid; justify-items: center; gap: 2px; padding: 24px 12px 20px; border-radius: 26px; background: var(--surface); text-align: center;
  transition: transform .3s var(--spring), background-color .15s; }
.friend:hover { transform: translateY(-5px); background: var(--surface-2); }
.friend:active { transform: scale(.97); }
.friend .avatar { width: 92px; height: 92px; font-size: 36px; margin-bottom: 12px; object-position: 50% 15%; }
.friend b { font-size: 16px; font-weight: 650; letter-spacing: -0.02em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend span { font-size: 14px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Perfil cerrado */
.locked { margin-top: 64px; }
.locked > div { display: grid; justify-items: start; gap: 8px; padding: 36px 40px 40px; border-radius: 28px; background: var(--surface); max-width: 560px; }
.locked-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); margin-bottom: 12px; }
.locked-icon svg { width: 24px; height: 24px; }
.locked b { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.locked span { color: var(--muted); font-size: var(--t-body); line-height: 1.45; }

/* «Así te ven»: aviso arriba del perfil visto desde fuera */
.as-seen { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 56px; border-radius: 24px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.as-seen-icon { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.as-seen-icon svg { width: 20px; height: 20px; }
.as-seen-text { display: grid; gap: 1px; flex: 1; min-width: 200px; }
.as-seen-text b { font-size: var(--t-body); font-weight: 700; letter-spacing: -0.02em; }
.as-seen-text span { font-size: 15px; color: var(--muted); }
.as-seen-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg); }
.as-seen-tabs .btn.small { height: 34px; padding: 0 14px; background: transparent; }
.as-seen-tabs .btn.small.on { background: var(--accent); color: var(--accent-ink); }
.as-seen .link { font-size: 15px; margin-right: 6px; }

/* Privacidad */
.vis-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; background: var(--surface); padding: 6px 12px;
  font-size: 14px; font-weight: 700; color: var(--muted); transition: background-color .15s, color .15s; }
.vis-chip:hover { background: var(--surface-2); color: var(--ink); }
.vis-chip svg { width: 14px; height: 14px; }
.sheet-lede { margin: 12px 0 0; font-size: var(--t-body); line-height: 1.45; color: var(--muted); max-width: 52ch; }
.vis-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; }
.vis-kinds .kind { gap: 6px; padding: 18px 18px 20px; align-content: start; }
.kind-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); margin-bottom: 6px; }
.kind-icon svg { width: 18px; height: 18px; }
.vis-kinds .kind b { font-size: var(--t-body); letter-spacing: -0.02em; }
.vis-kinds .kind span:not(.kind-icon) { line-height: 1.4; }
.kind[aria-pressed="true"] .kind-icon { background: var(--accent-ink); color: var(--accent); }
.group-title { margin: 36px 0 12px; font-size: var(--t-body); font-weight: 700; letter-spacing: -0.02em; }
.settings-group { display: grid; gap: 2px; border-radius: 22px; overflow: hidden; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--surface); cursor: pointer; }
.switch-row b { display: block; font-size: 16px; font-weight: 650; letter-spacing: -0.015em; }
.switch-row span span { display: block; font-size: 14px; color: var(--muted); margin-top: 1px; }
.switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 51px; height: 31px; margin: 0; border-radius: 999px;
  background: var(--surface-2); cursor: pointer; transition: background-color .2s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: rgba(0, 0, 0, .2) 0 2px 4px; transition: transform .35s var(--spring); }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(20px); }
.switch:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Número de solicitudes junto a «Amigos» */
.nav .count.alert { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 12px; }
.nav a[aria-current="page"] .count.alert { background: var(--accent-ink); color: var(--accent); }

/* Un top ajeno, en la ficha */
.coll-view { margin-top: 24px; }
.coll-view .rank-score svg { width: 16px; height: 16px; color: var(--accent); }

@media (max-width: 900px) {
  .nav .count.alert { display: grid; }
  .vis-kinds { grid-template-columns: 1fr; }
  .person-link { flex-basis: 100%; }
  .person-actions { margin-left: 66px; }
  .as-seen .link { order: 4; }
  .as-seen-tabs { order: 3; }
  .user-sec, .friends-block { margin-top: 72px; }
  .friend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== css/bienvenida.css ===== */
/* ---------- Bienvenida: asistente para crear el perfil (una pregunta por pantalla) ---------- */
.setup { min-height: calc(100dvh - 96px); display: grid; grid-template-rows: auto 1fr; max-width: 640px; margin: 0 auto; }
/* Puntos de progreso, centrados arriba */
.setup-top { display: flex; align-items: center; justify-content: center; height: 48px; }
.setup-dots { display: flex; gap: 8px; }
.setup-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--surface-2); transition: width .45s var(--ease), background-color .3s; }
.setup-dots i.done { background: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); }
.setup-dots i.on { width: 28px; background: var(--accent); }
/* Texto a la izquierda; el botón de volver, al lado de cada recuadro (fuera de su margen),
   del mismo alto y estilo que el recuadro */
.setup-step { display: grid; justify-items: start; align-content: center; gap: 22px; text-align: left; padding: 24px 0 48px; }
.setup-step.fwd { animation: step-in .55s var(--ease) both; }
.setup-step.bwd { animation: step-back .55s var(--ease) both; }
@keyframes step-in { from { opacity: 0; transform: translateX(60px); } }
@keyframes step-back { from { opacity: 0; transform: translateX(-60px); } }
.setup-row { display: flex; align-items: stretch; gap: 14px; width: 100%; margin-left: -52px; }
.setup-row > :not(.setup-back) { flex: 1; min-width: 0; }
.setup-row .setup-card { flex: none; }
.setup-row:has(.setup-card) { align-items: center; }
.setup-back { flex: none; width: auto; height: auto; aspect-ratio: 1; border-radius: 18px; background: var(--surface); color: var(--muted);
  transition: background-color .15s, color .15s, transform .25s var(--spring); }
.setup-back svg { width: 22px; height: 22px; }
.setup-back:hover { background: var(--surface-2); color: var(--ink); }
.setup-back:active { transform: scale(.94); }
.setup-row:has(.setup-search) .setup-back { border-radius: 999px; }
.setup-row:has(.setup-card) .setup-back { width: 62px; height: 62px; }

.setup-hello { font-family: var(--font-display); font-size: clamp(88px, 15vw, 190px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin: 0;
  transition: opacity .45s ease, transform .45s var(--ease), filter .45s ease; }
.setup-hello.out { opacity: 0; transform: translateY(-16px) scale(.97); filter: blur(6px); }
.setup-title { font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; margin: 0; text-wrap: balance; }
.setup-lede { font-size: var(--t-lead); color: var(--muted); margin: 0; line-height: 1.4; }
.setup-lede b { color: var(--ink); }
.setup-input { width: min(100%, 460px); border: 0; border-radius: 18px; background: var(--surface); padding: 18px 22px; text-align: left;
  font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.setup-input:focus { outline: 3px solid var(--accent); }
.setup-bio { font-family: var(--font); font-size: var(--t-body); font-weight: 400; text-align: left; resize: none; }
.setup-handle { display: flex; align-items: center; width: min(100%, 460px); border-radius: 18px; background: var(--surface); padding: 0 22px; }
.setup-handle span { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--muted); }
.setup-handle input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 18px 4px; font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--ink); }
.setup-handle:focus-within { outline: 3px solid var(--accent); }
.setup-photo { width: 168px; height: 168px; font-size: 72px; margin: 0; }
.setup-search { width: min(100%, 460px); margin: 0; }
.setup-grid { width: 100%; max-height: 260px; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
.setup-grid .av { animation: pop .4s var(--spring) both; animation-delay: calc(var(--d) * 25ms); }
.setup-actions { display: flex; align-items: center; gap: 24px; }
/* Paso final: la tarjeta con cómo te verán */
.setup-card { display: grid; justify-items: center; gap: 4px; padding: 28px 40px; border-radius: 28px; background: var(--surface); animation: added .8s var(--spring) both; }
.setup-card .pf-avatar { width: 128px; height: 128px; font-size: 56px; margin-bottom: 10px; }
.setup-card b { font-family: var(--font-display); font-size: var(--t-lead); letter-spacing: -0.02em; }
.setup-card span { color: var(--muted); }
.setup-card .pf-id { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--bg); padding: 4px 10px; border-radius: 999px; }

@media (max-width: 900px) { .setup-row { margin-left: 0; } }

/* ===== css/movil.css ===== */
/* ---------- Móvil: al estilo del iPhone ----------
   Todo lo de pantallas estrechas vive aquí (va después del resto para ganar), así el escritorio no
   cambia. Barra de pestañas abajo, títulos grandes, listas agrupadas como en Ajustes, carriles que se
   deslizan con el dedo y fichas que suben desde abajo. */
.tabbar, .m-back, .m-search, .m-links { display: none; }

@media (max-width: 900px) {
  :root { --t-display: clamp(38px, 11.5vw, 54px); --t-h2: clamp(28px, 8vw, 34px); --t-lead: 19px; }
  .m-hide { display: none !important; }

  /* ---------- Armazón: sin barra lateral; pestañas abajo ---------- */
  .app { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .sidebar { display: none; }
  .main { padding: calc(env(safe-area-inset-top) + 18px) 20px calc(env(safe-area-inset-bottom) + 112px); }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px 6px calc(env(safe-area-inset-bottom) + 4px); background: color-mix(in srgb, var(--side) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); }   /* taste-skill-ignore: barra de pestañas de iOS, flota sobre el contenido */
  .tabbar[hidden] { display: none; }
  .tabbar a { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 50px; color: var(--muted);
    font-size: 10.5px; font-weight: 600; letter-spacing: 0; -webkit-tap-highlight-color: transparent; transition: color .15s, transform .2s var(--spring); }
  .tabbar a:active { transform: scale(.88); }
  .tabbar svg { width: 25px; height: 25px; stroke-width: 2; }
  .tabbar a[aria-current="page"] { color: var(--accent); }
  .tab-av { width: 26px; height: 26px; font-size: 12px; object-position: 50% 15%; }
  .tabbar a[aria-current="page"] .tab-av { outline: 2px solid var(--accent); outline-offset: 1px; }
  .tab-badge { position: absolute; top: 2px; left: calc(50% + 7px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 800; }
  .toast { bottom: calc(env(safe-area-inset-bottom) + 86px); max-width: calc(100vw - 32px); text-align: center; }

  /* Volver (a Listas, a Tú…): arriba, como en iOS */
  .m-back { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 10px -6px; min-height: 44px; color: var(--accent);
    font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
  .m-back svg { width: 24px; height: 24px; stroke-width: 2.4; }
  .link.back { min-height: 44px; display: inline-flex; align-items: center; }

  /* Títulos y ritmo: menos aire entre secciones que en el escritorio */
  .view .section[style*="margin-top"], .user-sec, .friends-block { margin-top: 64px !important; }
  .section-head { margin-bottom: 20px; gap: 10px 16px; align-items: flex-end; }
  .lede { font-size: 17px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  .grid.six { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
  .grid.six .card-title { font-size: 13px; }
  .card-title { font-size: 15px; }

  /* ---------- Listas agrupadas (Listas, Tú) ---------- */
  .m-links { display: grid; margin-top: 28px; }
  .settings-group .m-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 8px 14px 8px 12px; border: 0;
    background: var(--surface); color: var(--ink); text-align: left; font-size: 17px; -webkit-tap-highlight-color: transparent; transition: background-color .12s; }
  .settings-group .m-row:active { background: var(--surface-2); }
  .m-row-ic { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
  .m-row-ic svg { width: 18px; height: 18px; }
  .m-row-name { flex: 1; font-weight: 600; letter-spacing: -0.02em; }
  .m-row-val { color: var(--muted); font-variant-numeric: tabular-nums; }
  .m-row-badge { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 800; }
  .m-row > svg:last-child { width: 18px; height: 18px; color: var(--muted); flex: none; }
  .nav-group-m { margin-top: 28px; }

  /* ---------- Inicio: el campo de la temporada, con el nombre arriba y los pósters abajo ---------- */
  .field { min-height: 0; height: 560px; place-items: start center; padding-top: 34px; border-radius: 28px; }
  .field .word { font-size: min(27vw, calc((100vw - 76px) / (var(--n, 6) * .6))); line-height: .86; }
  .print { width: 43vw; max-width: 200px; padding: 6px; }
  .print.p1 { left: 5%; top: auto; bottom: 8%; }
  .print.p2 { right: 5%; top: auto; bottom: 13%; }
  .print.p3 { display: none; }
  .print-title { font-size: 12px; }
  .watching { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .wcard { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 20px; }
  .wcard-title { font-size: 16px; }

  /* ---------- Buscar (pestaña) ---------- */
  .m-search { position: sticky; top: calc(env(safe-area-inset-top) + 6px); z-index: 5; display: flex; align-items: center; gap: 8px; height: 46px;
    margin-top: 18px; padding: 0 14px; border-radius: 14px; background: var(--surface); }
  .m-search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
  .m-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: 17px; color: var(--ink); }
  .m-search:focus-within { box-shadow: 0 0 0 3px var(--accent); }
  .search-view #results-for:empty { display: none; }
  .search-view #results { margin-top: 28px !important; }
  .idle-title { margin-bottom: 18px; }

  /* ---------- Salón: los tops en un carril que se desliza ---------- */
  .vitrinas { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 24px -20px 0; padding: 4px 20px 10px;
    scrollbar-width: none; overscroll-behavior-x: contain; }
  .vitrinas::-webkit-scrollbar { display: none; }
  .vitrinas > * { flex: 0 0 172px; scroll-snap-align: start; scroll-margin-left: 20px; }
  .vitrina { padding: 14px 14px 16px; border-radius: 22px; }
  .vitrina:hover { transform: none; }
  .vitrina-stack { height: 118px; margin-bottom: 10px; }
  .vitrina-stack img { width: 68px; border-radius: 8px; }
  .vitrina-name { font-size: 17px; }
  .vitrina-meta { font-size: 13px; }
  /* El podio entero en la pantalla */
  .podium { gap: 10px; width: 100%; }
  .slot-poster { border-radius: 14px; }
  .podium .p1 .slot-title { font-size: 16px; }
  .podium .slot-title { font-size: 13px; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .podium .slot-meta { font-size: 12px; }
  .podium .p1 .slot-n { height: 76px; font-size: 52px; border-radius: 14px; } .podium .p2 .slot-n { height: 56px; font-size: 40px; border-radius: 14px; }
  .podium .p3 .slot-n { height: 40px; font-size: 30px; border-radius: 14px; }
  .rest { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; margin-top: 36px; }
  .rest .slot-n { top: 6px; left: 6px; min-width: 26px; height: 26px; font-size: 13px; }
  .rest .slot-title { font-size: 12px; }
  .slot.vacant .slot-add span { font-size: 12px; }
  .tier { margin-top: 48px; }
  .tier-add { min-height: 46px; }
  .tier-n { font-size: 18px; }
  .edit-bar { gap: 8px; }
  .edit-bar .btn { height: 40px; padding: 0 18px; }

  /* ---------- Tú: cabecera centrada, como la tarjeta de contacto del iPhone ---------- */
  .profile-head { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  .profile-id { display: grid; justify-items: center; }
  .avatar.xl { width: 116px; height: 116px; }
  .profile-head .display { font-size: clamp(36px, 10vw, 46px); }
  .profile-handle { justify-content: center; font-size: 17px; margin-top: 8px; gap: 8px; }
  .profile-bio { margin-top: 10px; }
  .profile-head .actions { justify-content: center; margin-top: 18px; }
  .profile-stats { margin-top: 28px; gap: 10px; }
  .profile-stats b { font-size: 34px; }
  .as-seen { margin-bottom: 32px; }
  .locked { margin-top: 36px; }
  .locked > div { padding: 28px 24px; }

  /* Amigos */
  .share-card { margin-top: 20px; flex-wrap: nowrap; gap: 10px; max-width: 100%; padding-right: 10px; }
  .share-card .avatar { width: 42px; height: 42px; }
  .share-handle { font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .share-card .id-chip { flex: none; font-size: 13px; padding: 6px 10px; }
  .friends-find { margin-top: 44px; }

  /* Listas: el orden debajo del título */
  .list-head { flex-direction: column; align-items: flex-start; gap: 18px; }

  /* ---------- Fichas: suben desde abajo, a todo el ancho, con su asa ---------- */
  .sheet { width: 100%; max-width: 100%; max-height: calc(100dvh - env(safe-area-inset-top) - 10px); margin: auto 0 0; border-radius: 26px 26px 0 0; }
  .sheet[open] { animation: sheet-up .5s var(--spring) both; }
  .sheet.closing { animation: sheet-down .24s cubic-bezier(.4, 0, 1, 1) both; }
  @keyframes sheet-up { from { transform: translateY(100%); } }
  @keyframes sheet-down { to { transform: translateY(100%); } }
  .sheet::before { content: ""; position: absolute; top: 7px; left: 50%; z-index: 3; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--surface-2); }
  .sheet-body, .picker { max-height: calc(100dvh - env(safe-area-inset-top) - 10px); padding: 26px 20px calc(env(safe-area-inset-bottom) + 28px); gap: 20px; }
  .sheet-close { top: 14px; right: 14px; }
  .sheet-back { top: 14px; left: 14px; }
  .sheet:has(.sheet-back) .sheet-body, .sheet:has(.sheet-back) .picker { padding-top: 66px; }
  .sheet-poster { max-width: 150px; }
  .sheet h2 { font-size: 28px; }
  .picker h2 { margin-right: 52px; }
  .facts { font-size: 14px; gap: 4px 14px; }
  .synopsis { font-size: 16px; }
  .mine { padding: 18px; gap: 14px; }
  .picker .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
  .picker .card-title { font-size: 12px; }
}

/* ===== css/movimiento.css ===== */
/* ---------- Menos movimiento: si el sistema lo pide, todo aparece quieto (va al final para ganar) ---------- */
@media (prefers-reduced-motion: reduce) {
  .wall-track, .field-art, .podium .slot, .editing .slot-poster, .deck-card { animation: none !important; }
  .line > span { transform: none; animation: none; }
  .after-lines, .intro-sub, .intro-actions { opacity: 1; animation: none; }
  [data-reveal] > * { opacity: 1; transform: none; transition: none; }
  .setup-step { animation: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}