/* =============================================================================
   Filatel.IA design system: "Tinta y álbum" (ink and stamp album)
   Rules and usage: docs/diseno.md. Living style guide: /Diseno.
   Built on Bootstrap 5.1: use Bootstrap's grid/utilities, and these tokens and
   fi-* components for anything visual. Do not add colors outside the tokens.
   Motifs and icons: /img/motivos.svg (own drawings, used with <use href>).
   ============================================================================= */

/* ---- Fonts (self-hosted, SIL Open Font License 1.1: see /fonts/LICENSE-*.txt) */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
    /* Brand inks (contrast ratios measured on --fi-paper / --fi-surface) */
    --fi-ink: #1c2e4a;           /* primary: engraving ink blue. 11.9:1 / 13.4:1 */
    --fi-ink-hover: #111e33;
    --fi-ink-soft: #e8edf4;      /* tinted backgrounds, hover rows */
    --fi-postmark: #b13a1c;      /* accent: vermilion postmark. 5.3:1 / 5.9:1. Sparingly */
    --fi-postmark-soft: #fbe4df;
    --fi-gold: #b8862b;          /* gilt edge: decoration only, never text on light */
    --fi-gold-light: #e3c27a;    /* gold text on dark green/ink (6.9:1 / 8:1) */

    /* Album: dark green bands (footer, highlights). Text on it: --fi-paper 10.3:1 */
    --fi-album: #1f3d33;
    --fi-album-deep: #16302a;
    --fi-album-text: #c9d3c9;    /* secondary text on album, 7.7:1 */

    /* Surfaces and text */
    --fi-paper: #f5efe3;         /* page background: cream album paper */
    --fi-page: #ebe3d1;          /* album page behind stamps / photos */
    --fi-surface: #fffdf8;       /* cards, tables, inputs */
    --fi-line: #e2d8c4;          /* dividers (decorative) */
    --fi-line-strong: #8f826a;   /* input borders: 3.7:1 on surface (AA for UI) */
    --fi-text: #1d1f24;          /* 14.4:1 */
    --fi-muted: #5b5e66;         /* secondary text: 5.7:1 paper, 5.1:1 album page */

    /* Listing status colors: background / text (all >= 5.5:1) */
    --fi-st-uploaded-bg: #ebe5d8;   --fi-st-uploaded-fg: #3d4148;
    --fi-st-working-bg: #e4eef9;    --fi-st-working-fg: #134a85;
    --fi-st-review-bg: #fbefcf;     --fi-st-review-fg: #6e4400;
    --fi-st-reviewed-bg: #e1f1e6;   --fi-st-reviewed-fg: #1f6b3a;
    --fi-st-published-bg: #1c2e4a;  --fi-st-published-fg: #ffffff;
    --fi-st-error-bg: #fbe4df;      --fi-st-error-fg: #8c1d16;

    /* Type */
    --fi-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --fi-font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --fi-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --fi-font-brand: var(--fi-font-display);

    /* Shape, depth, spacing */
    --fi-radius: 14px;
    --fi-radius-sm: 8px;
    --fi-shadow: 0 1px 0 rgba(28, 46, 74, .04), 0 2px 6px rgba(28, 46, 74, .06), 0 12px 28px -18px rgba(28, 46, 74, .35);
    --fi-shadow-lift: 0 2px 4px rgba(28, 46, 74, .06), 0 22px 40px -22px rgba(28, 46, 74, .45);
    --fi-tap: 44px;              /* minimum touch target */
    --fi-focus: 0 0 0 3px var(--fi-surface), 0 0 0 6px var(--fi-ink);
    --fi-perf: 10px;             /* perforation pitch of stamp edges */

    /* Bootstrap 5.1 variables that read from CSS custom properties */
    --bs-body-font-family: var(--fi-font);
    --bs-primary: var(--fi-ink);
}

/* ---- Base ---------------------------------------------------------------- */

html { font-size: 16px; }
body {
    background: var(--fi-paper);
    color: var(--fi-text);
    font-family: var(--fi-font);
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01";
}
.fi-main { flex: 1 0 auto; padding-bottom: 3.5rem; }
h1, .h1, h2, .h2, .fi-display { font-family: var(--fi-font-display); font-weight: 600; color: var(--fi-ink); letter-spacing: -.015em; line-height: 1.12; }
h1, .h1 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); }
h2, .h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); }
h3, .h3 { font-size: 1.1rem; font-weight: 600; color: var(--fi-ink); }
em.fi-accent, .fi-accent { font-style: italic; font-weight: 500; color: var(--fi-postmark); }
a { color: var(--fi-ink); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--fi-postmark); }
.text-muted { color: var(--fi-muted) !important; }
.lead { font-size: 1.15rem; color: var(--fi-muted); }
code { color: var(--fi-postmark); }
::selection { background: var(--fi-gold-light); color: var(--fi-ink); }

/* Catalogue-style label: "Nº 01 · Subida". Small mono caps, like a stamp catalogue */
.fi-eyebrow { font-family: var(--fi-font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--fi-postmark); display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.fi-eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; }
.fi-mono { font-family: var(--fi-font-mono); font-size: .85em; letter-spacing: .02em; }

/* Inline icon from the motif sprite */
.fi-icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; }
.fi-icon--lg { width: 2rem; height: 2rem; }
.fi-icon--xl { width: 3rem; height: 3rem; }

/* One visible focus style everywhere (keyboard users) */
:focus-visible { outline: none; box-shadow: var(--fi-focus) !important; border-radius: var(--fi-radius-sm); }
.btn:focus, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: var(--fi-focus); }
.form-control:focus, .form-select:focus { border-color: var(--fi-ink); }

/* ---- Header and brand ---------------------------------------------------- */

.fi-navbar {
    background: color-mix(in srgb, var(--fi-paper) 88%, transparent);
    backdrop-filter: saturate(1.2) blur(10px);
    position: sticky; top: 0; z-index: 1030;
    padding-top: .5rem; padding-bottom: .5rem;
}
/* Perforated bottom edge: the header is "torn" from a sheet of stamps */
.fi-navbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px;
    background: radial-gradient(circle at 5px 0, transparent 2.6px, var(--fi-line) 3px, var(--fi-line) 3.4px, transparent 3.8px) 0 0 / var(--fi-perf) 5px repeat-x;
    pointer-events: none;
}
.fi-navbar .nav-link { color: var(--fi-text); min-height: var(--fi-tap); display: flex; align-items: center; font-weight: 500; padding-left: .8rem !important; padding-right: .8rem !important; border-radius: 999px; }
.fi-navbar .nav-link:hover { color: var(--fi-postmark); }
.fi-navbar .nav-link.active, .fi-navbar .nav-link[aria-current="page"] { color: var(--fi-ink); background: var(--fi-page); }
.fi-navbar .navbar-toggler { min-width: var(--fi-tap); min-height: var(--fi-tap); border-color: var(--fi-line-strong); }
.fi-navbar .fi-nav-cta { margin-left: .25rem; }
.fi-user { font-family: var(--fi-font-mono); font-size: .8rem; color: var(--fi-muted) !important; }

.fi-brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--fi-font-brand); font-size: 1.45rem; font-weight: 600; color: var(--fi-ink) !important; letter-spacing: -.02em; text-decoration: none; min-height: var(--fi-tap); }
.fi-brand__dot { color: var(--fi-postmark); font-style: italic; font-weight: 500; }
.fi-skip { z-index: 2000; }
.fi-brand__mark { width: 34px; height: 34px; color: var(--fi-ink); transform: rotate(-6deg); transition: transform .3s ease; }
.fi-brand:hover .fi-brand__mark { transform: rotate(0deg); }

/* Footer: dark green album cover with a gilt rule */
.fi-footer { flex-shrink: 0; background: var(--fi-album); color: var(--fi-album-text); border-top: 3px double var(--fi-gold); padding: 2.5rem 0 2rem; font-size: .925rem; }
.fi-footer a { color: var(--fi-paper); }
.fi-footer a:hover { color: var(--fi-gold-light); }
.fi-footer .fi-brand { color: var(--fi-paper) !important; font-size: 1.3rem; }
.fi-footer .fi-brand__dot { color: var(--fi-gold-light); }
.fi-footer .fi-brand__mark { color: var(--fi-gold-light); }
.fi-footer__links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; padding: 0; margin: 0; }
.fi-footer__links a { display: inline-flex; align-items: center; min-height: var(--fi-tap); }
.fi-footer__small { font-family: var(--fi-font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }

/* ---- Buttons ------------------------------------------------------------- */

.btn { min-height: var(--fi-tap); border-radius: 999px; font-weight: 600; padding-left: 1.15rem; padding-right: 1.15rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: background-color .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s; }
.btn-lg { min-height: 54px; padding-left: 1.6rem; padding-right: 1.6rem; font-size: 1.05rem; }
.btn-sm { min-height: var(--fi-tap); }
.btn-primary { background: var(--fi-ink); border-color: var(--fi-ink); color: #fff; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 6px 16px -8px rgba(28, 46, 74, .6); }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background: var(--fi-ink-hover); border-color: var(--fi-ink-hover); color: #fff; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:disabled, .btn-primary.disabled { background: var(--fi-muted); border-color: var(--fi-muted); box-shadow: none; }
.btn-accent { background: var(--fi-postmark); border-color: var(--fi-postmark); color: #fff; }
.btn-accent:hover, .btn-accent:focus { background: #8f2e15; border-color: #8f2e15; color: #fff; }
.btn-outline-primary { color: var(--fi-ink); border: 1.5px solid var(--fi-ink); background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:active { background: var(--fi-ink); border-color: var(--fi-ink); color: #fff; }
.btn-outline-danger { color: var(--fi-postmark); border: 1.5px solid var(--fi-postmark); background: transparent; }
.btn-outline-danger:hover, .btn-outline-danger:active { background: var(--fi-postmark); border-color: var(--fi-postmark); color: #fff; }
.btn-secondary { background: var(--fi-page); border-color: var(--fi-page); color: var(--fi-ink); }
.btn-secondary:hover { background: var(--fi-line); border-color: var(--fi-line); color: var(--fi-ink); }
.btn-link { color: var(--fi-ink); font-weight: 500; }
.btn-link:hover { color: var(--fi-postmark); }
.btn-on-dark { background: var(--fi-paper); color: var(--fi-ink); border-color: var(--fi-paper); }
.btn-on-dark:hover { background: var(--fi-gold-light); border-color: var(--fi-gold-light); color: var(--fi-ink); }
.btn-outline-light-fi { color: var(--fi-paper); border: 1.5px solid var(--fi-album-text); }
.btn-outline-light-fi:hover { background: var(--fi-paper); color: var(--fi-ink); }
.btn .fi-icon { width: 1.15em; height: 1.15em; }

/* ---- Page header: eyebrow + title + actions ----------------------------- */

.fi-page-header { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end; justify-content: space-between; margin: 1.25rem 0 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--fi-line); }
.fi-page-header h1 { margin: 0 0 .25rem; }
.fi-page-header .fi-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.fi-page-header .fi-actions form { margin: 0; }

/* ---- Listing status ------------------------------------------------------ */

.fi-status { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; white-space: nowrap; line-height: 1.3; }
.fi-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }
.fi-status--uploaded  { background: var(--fi-st-uploaded-bg);  color: var(--fi-st-uploaded-fg); }
.fi-status--working   { background: var(--fi-st-working-bg);   color: var(--fi-st-working-fg); }
.fi-status--review    { background: var(--fi-st-review-bg);    color: var(--fi-st-review-fg); }
.fi-status--reviewed  { background: var(--fi-st-reviewed-bg);  color: var(--fi-st-reviewed-fg); }
.fi-status--published { background: var(--fi-st-published-bg); color: var(--fi-st-published-fg); }
.fi-status--error     { background: var(--fi-st-error-bg);     color: var(--fi-st-error-fg); }
.fi-status--working::before { animation: fi-pulse 1.2s ease-in-out infinite; }
@keyframes fi-pulse { 50% { opacity: .3; } }

/* "The AI proposes, the seller reviews": marks content the seller has not checked yet */
.fi-ai-note { display: flex; gap: .65rem; align-items: flex-start; border: 1px dashed var(--fi-st-review-fg); background: var(--fi-st-review-bg); color: var(--fi-st-review-fg); padding: .75rem 1rem; border-radius: var(--fi-radius-sm); font-size: .95rem; }
.fi-ai-note .fi-icon { margin-top: .1rem; }
.fi-error-text { color: var(--fi-st-error-fg); font-size: .875rem; }

/* ---- Album page, stamp frames and cards --------------------------------- */

/* Album page: the faint ruled grid of a stock album, behind photos and illustrations */
.fi-album-page { background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(28, 46, 74, .06) 27px 28px), var(--fi-page); }

/* Each photo is shown as a perforated stamp mounted on an album page.
   The holes are dots of the album color on the photo's white padding ring. */
.fi-stamp {
    display: flex; gap: 14px; align-items: center; justify-content: center;
    padding: 20px 18px;
    background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(28, 46, 74, .06) 27px 28px), var(--fi-page);
}
.fi-stamp img, .fi-stamp .fi-stamp__ph {
    flex: 0 1 auto; min-width: 0; max-width: 100%; height: 190px; object-fit: contain;
    padding: 9px;
    background:
        linear-gradient(var(--fi-surface), var(--fi-surface)) content-box,
        radial-gradient(circle, var(--fi-page) 2.6px, transparent 3.1px) -5px -5px / var(--fi-perf) var(--fi-perf),
        var(--fi-surface);
    filter: drop-shadow(0 3px 4px rgba(28, 46, 74, .18));
    transition: transform .25s ease;
}
.fi-stamp .fi-stamp__ph { flex: 1 1 0; background-image: linear-gradient(135deg, #dfe6ee, #c9d6e3) , radial-gradient(circle, var(--fi-page) 2.6px, transparent 3.1px); background-clip: content-box, padding-box; background-origin: content-box, padding-box; background-size: auto, var(--fi-perf) var(--fi-perf); background-position: 0 0, -5px -5px; }
.fi-stamp img:nth-child(odd) { transform: rotate(-1.2deg); }
.fi-stamp img:nth-child(even) { transform: rotate(1deg); }
.fi-card:hover .fi-stamp img { transform: rotate(0) scale(1.02); }

.fi-card { background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: var(--fi-radius); box-shadow: var(--fi-shadow); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.fi-card:hover { box-shadow: var(--fi-shadow-lift); transform: translateY(-2px); }
.fi-card__body { padding: 1rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.fi-card__title { font-weight: 600; line-height: 1.35; color: var(--fi-text); }
.fi-card__meta { color: var(--fi-muted); font-size: .875rem; }
.fi-card__no { white-space: nowrap; font-family: var(--fi-font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fi-muted); }
.fi-price { font-family: var(--fi-font-display); font-weight: 600; font-size: 1.25rem; color: var(--fi-ink); }

/* Specifics list (País, Año, Calidad...) */
.fi-specs { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; margin: 0; font-size: .875rem; padding-top: .5rem; border-top: 1px dashed var(--fi-line); }
.fi-specs dt { color: var(--fi-muted); font-weight: 400; }
.fi-specs dd { margin: 0; font-weight: 500; }
.fi-details summary { cursor: pointer; font-weight: 500; color: var(--fi-ink); min-height: var(--fi-tap); display: flex; align-items: center; }
.fi-details[open] summary { min-height: 0; margin: .5rem 0 .35rem; }
.fi-details p { margin: 0; color: var(--fi-text); font-size: .9rem; }

/* ---- Lists and empty states --------------------------------------------- */

.fi-list { background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: var(--fi-radius); overflow: hidden; box-shadow: var(--fi-shadow); }
.fi-list > a { display: flex; align-items: center; gap: 1.1rem; padding: 1rem 1.25rem; color: inherit; text-decoration: none; border-bottom: 1px solid var(--fi-line); min-height: 88px; transition: background-color .15s; }
.fi-list > a:last-child { border-bottom: 0; }
.fi-list > a:hover { background: color-mix(in srgb, var(--fi-page) 45%, var(--fi-surface)); }
.fi-list > a::after { content: ""; margin-left: auto; flex: none; width: .6rem; height: .6rem; border-right: 2px solid var(--fi-muted); border-top: 2px solid var(--fi-muted); transform: rotate(45deg); }
.fi-list > a:hover::after { border-color: var(--fi-postmark); }
.fi-list img, .fi-list .fi-list__ph {
    width: 64px; height: 64px; object-fit: cover; flex: none; padding: 5px;
    background:
        radial-gradient(circle, var(--fi-surface) 1.8px, transparent 2.2px) -3.5px -3.5px / 7px 7px,
        var(--fi-page);
    transform: rotate(-3deg);
    filter: drop-shadow(0 2px 3px rgba(28, 46, 74, .2));
}
.fi-list .fi-list__ph { background-color: var(--fi-page); display: grid; place-items: center; color: var(--fi-muted); }
.fi-list__title { font-family: var(--fi-font-display); font-weight: 600; font-size: 1.15rem; color: var(--fi-ink); line-height: 1.25; }

.fi-empty { background: var(--fi-surface); border: 2px dashed var(--fi-line); border-radius: var(--fi-radius); padding: 3rem 1.5rem; text-align: center; color: var(--fi-muted); }
.fi-empty__art { width: 160px; height: auto; margin: 0 auto 1.25rem; display: block; }
.fi-empty h2 { font-size: 1.4rem; }

/* ---- Forms and panels ---------------------------------------------------- */

.fi-panel { background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: var(--fi-radius); padding: 1.5rem; box-shadow: var(--fi-shadow); }
@media (min-width: 768px) { .fi-panel { padding: 2rem; } }
.fi-panel--album { background: var(--fi-album); color: var(--fi-paper); border-color: var(--fi-album-deep); }
.fi-panel--album h2, .fi-panel--album h3, .fi-panel--album .h2 { color: var(--fi-paper); }
.fi-panel--album .text-muted, .fi-panel--album p { color: var(--fi-album-text) !important; }
.fi-panel--album .fi-eyebrow { color: var(--fi-gold-light); }

.form-control, .form-select { min-height: var(--fi-tap); border-color: var(--fi-line-strong); background-color: var(--fi-surface); border-radius: var(--fi-radius-sm); color: var(--fi-text); }
.form-control::placeholder { color: #85837b; }
.form-label, .form-floating > label { font-weight: 500; }
.form-floating > .form-control { min-height: 58px; }
.form-text { color: var(--fi-muted); }
.form-check-input { width: 1.25em; height: 1.25em; border-color: var(--fi-line-strong); }
.form-check-input:checked { background-color: var(--fi-ink); border-color: var(--fi-ink); }
.form-check { min-height: var(--fi-tap); display: flex; align-items: center; gap: .5rem; padding-left: 0; }
.form-check .form-check-input { float: none; margin: 0; flex: none; }
.text-danger { color: var(--fi-st-error-fg) !important; }
input[type="file"].form-control { padding: .55rem; }
input[type="file"].form-control::file-selector-button { border: 0; border-radius: 999px; background: var(--fi-ink); color: #fff; font-weight: 600; padding: .45rem 1rem; margin-right: .9rem; min-height: 34px; }

.alert { border-radius: var(--fi-radius-sm); border-width: 1px; }
.alert-danger { background: var(--fi-st-error-bg); color: var(--fi-st-error-fg); border-color: #efc2b8; }
.alert-warning { background: var(--fi-st-review-bg); color: var(--fi-st-review-fg); border-color: #ecd59a; }
.alert-info { background: var(--fi-st-working-bg); color: var(--fi-st-working-fg); border-color: #bcd2ec; }
.alert-success { background: var(--fi-st-reviewed-bg); color: var(--fi-st-reviewed-fg); border-color: #b9dcc4; }

/* Choice cards: radio options that look like small album slots */
.fi-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.fi-choice { position: relative; display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border: 1.5px solid var(--fi-line); border-radius: var(--fi-radius-sm); background: var(--fi-surface); cursor: pointer; min-height: 72px; transition: border-color .15s, background-color .15s; }
.fi-choice:hover { border-color: var(--fi-line-strong); }
.fi-choice .form-check-input { flex: none; margin: 0; }
.fi-choice:has(.form-check-input:checked) { border-color: var(--fi-ink); background: var(--fi-ink-soft); }
.fi-choice__art { display: flex; gap: 4px; color: var(--fi-ink); margin-left: auto; }
.fi-choice__art .fi-icon { width: 1.8rem; height: 1.8rem; }
.fi-choice label { cursor: pointer; font-weight: 500; line-height: 1.3; }
.fi-choice label small { display: block; font-weight: 400; color: var(--fi-muted); }

/* Drop zone around the file input: an envelope waiting for the photos */
.fi-dropzone { position: relative; border: 2px dashed var(--fi-line-strong); border-radius: var(--fi-radius); padding: 1.75rem 1.25rem; text-align: center; transition: border-color .15s, background-color .15s; }
.fi-dropzone:hover, .fi-dropzone:focus-within { border-color: var(--fi-ink); background-color: var(--fi-ink-soft); }
.fi-dropzone__art { color: var(--fi-ink); margin-bottom: .5rem; }
.fi-dropzone__title { font-family: var(--fi-font-display); font-size: 1.25rem; color: var(--fi-ink); margin-bottom: .25rem; }
.fi-dropzone input[type="file"] { max-width: 100%; margin: 1rem auto .5rem; background: var(--fi-surface); }

/* ---- Progress ------------------------------------------------------------ */

.fi-progress { background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: var(--fi-radius); padding: 1rem 1.25rem; box-shadow: var(--fi-shadow); }
.fi-progress__label { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--fi-ink); }
.fi-progress .progress { height: .9rem; background: var(--fi-page); border-radius: 999px; overflow: hidden; }
.fi-progress .progress-bar {
    background-color: var(--fi-ink);
    /* a strip of stamps: perforation ticks along the bar */
    background-image: repeating-linear-gradient(90deg, transparent 0 14px, rgba(255, 253, 248, .35) 14px 16px);
    transition: width .6s ease;
}
.fi-progress .progress-bar-striped.progress-bar-animated { animation: fi-roll 1s linear infinite; }
@keyframes fi-roll { from { background-position: 0 0; } to { background-position: 16px 0; } }

/* Journey of a batch: Subido > Propuesta > Revisado > Publicado */
.fi-journey { display: flex; gap: .25rem; list-style: none; padding: 0; margin: 0 0 1.5rem; counter-reset: fi-step; flex-wrap: wrap; }
.fi-journey li { counter-increment: fi-step; display: flex; align-items: center; gap: .5rem; padding: .35rem .85rem .35rem .4rem; border-radius: 999px; font-size: .875rem; font-weight: 500; color: var(--fi-muted); background: transparent; border: 1px solid var(--fi-line); }
.fi-journey li::before { content: counter(fi-step); width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--fi-font-mono); font-size: .75rem; background: var(--fi-page); color: var(--fi-muted); }
.fi-journey li.is-done { color: var(--fi-ink); border-color: transparent; background: var(--fi-surface); }
.fi-journey li.is-done::before { content: "✓"; background: var(--fi-st-reviewed-bg); color: var(--fi-st-reviewed-fg); }
.fi-journey li.is-current { color: #fff; background: var(--fi-ink); border-color: var(--fi-ink); }
.fi-journey li.is-current::before { background: var(--fi-gold-light); color: var(--fi-ink); }

/* ---- Landing page --------------------------------------------------------- */

.fi-hero { position: relative; padding: 2.5rem 0 3.5rem; }
@media (min-width: 992px) { .fi-hero { padding: 4.5rem 0 5rem; } }
@media (max-width: 991.98px) { .fi-hero > .row, .fi-band > .row { --bs-gutter-x: 1.5rem; } } /* g-5 would push the row 12px beyond the viewport on phones */
.fi-hero h1 { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.1rem); line-height: 1.02; letter-spacing: -.03em; margin-bottom: 1.25rem; }
.fi-hero .lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); max-width: 34rem; }
.fi-hero__art { position: relative; max-width: 520px; margin: 0 auto; }
.fi-hero__art > svg { width: 100%; height: auto; display: block; }
.fi-hero__card { position: absolute; right: -4%; bottom: 4%; width: min(300px, 64%); background: var(--fi-surface); border-radius: var(--fi-radius); box-shadow: var(--fi-shadow-lift); padding: 1rem 1.1rem; border: 1px solid var(--fi-line); display: grid; gap: .4rem; }
.fi-hero__card .fi-card__title { font-size: .9rem; }
@media (max-width: 575.98px) { .fi-hero__card { position: relative; right: auto; bottom: auto; width: 92%; margin: -3.5rem auto 0; } }
.fi-trust { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.75rem; color: var(--fi-muted); font-size: .9rem; list-style: none; padding: 0; }
.fi-trust li { display: inline-flex; align-items: center; gap: .4rem; }
.fi-trust .fi-icon { color: var(--fi-st-reviewed-fg); }

/* Strip of collectible kinds, like a row of catalogue tabs */
.fi-kinds { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; padding: 1.5rem 0; border-top: 1px solid var(--fi-line); border-bottom: 1px solid var(--fi-line); list-style: none; margin: 0; }
.fi-kinds li { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 1rem; font-family: var(--fi-font-display); font-size: 1.15rem; color: var(--fi-ink); }
.fi-kinds .fi-icon { width: 1.6rem; height: 1.6rem; color: var(--fi-postmark); }

.fi-section { padding: 4rem 0; }
@media (max-width: 767.98px) { .fi-section { padding: 3rem 0; } }
.fi-section__head { max-width: 40rem; margin-bottom: 2.25rem; }
.fi-section__head h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); }

/* Steps: three numbered "stamps" with a perforated edge */
.fi-step-wrap { filter: drop-shadow(0 8px 14px rgba(28, 46, 74, .12)); height: 100%; }
.fi-step { height: 100%;
    background:
        radial-gradient(circle, var(--fi-paper) 4px, transparent 4.5px) -6px -6px / 12px 12px,
        var(--fi-surface);
    padding: 12px;
}
.fi-step__inner { background: var(--fi-surface); border: 1px solid var(--fi-line); height: 100%; padding: 1.5rem 1.35rem; }
.fi-step__no { font-family: var(--fi-font-display); font-style: italic; font-weight: 500; font-size: 2.6rem; line-height: 1; color: var(--fi-postmark); }
.fi-step__icon { width: 2.4rem; height: 2.4rem; color: var(--fi-ink); }
.fi-step h3 { font-family: var(--fi-font-display); font-size: 1.35rem; margin: .9rem 0 .4rem; }
.fi-step p { color: var(--fi-muted); margin: 0; }

/* Dark album band */
/* Full-bleed without horizontal scroll: paint beyond the container with a huge shadow, clipped vertically */
.fi-band { background: var(--fi-album); color: var(--fi-paper); position: relative; box-shadow: 0 0 0 100vmax var(--fi-album); clip-path: inset(0 -100vmax); }
.fi-band::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(255, 253, 248, .05) 31px 32px); pointer-events: none; }
.fi-band > .container { position: relative; }
.fi-band h2 { color: var(--fi-paper); }
.fi-band p, .fi-band li { color: var(--fi-album-text); }
.fi-band .fi-eyebrow, .fi-band .fi-accent { color: var(--fi-gold-light); }
.fi-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.fi-checks li { display: flex; gap: .65rem; align-items: flex-start; }
.fi-checks .fi-icon { margin-top: .15rem; color: var(--fi-st-reviewed-fg); }
.fi-band .fi-checks .fi-icon { color: var(--fi-gold-light); }

/* Mini editor preview used on the landing page band */
.fi-preview { background: var(--fi-surface); color: var(--fi-text); border-radius: var(--fi-radius); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); overflow: hidden; }
.fi-preview__bar { display: flex; gap: .4rem; align-items: center; padding: .6rem .9rem; background: var(--fi-page); border-bottom: 1px solid var(--fi-line); font-family: var(--fi-font-mono); font-size: .75rem; color: var(--fi-muted); }
.fi-preview__row { display: grid; grid-template-columns: 56px 1fr auto; gap: .9rem; align-items: center; padding: .8rem .9rem; border-bottom: 1px solid var(--fi-line); }
.fi-preview__row:last-child { border-bottom: 0; }
.fi-preview__row .fi-card__title { font-size: .875rem; }
.fi-preview__thumb { width: 56px; height: 56px; padding: 4px; background: radial-gradient(circle, var(--fi-surface) 1.6px, transparent 2px) -3px -3px / 6px 6px, var(--fi-page); }
.fi-preview__thumb > span { display: block; width: 100%; height: 100%; }
.fi-preview .fi-status { font-size: .75rem; }
@media (max-width: 575.98px) { .fi-preview__row { grid-template-columns: 48px 1fr; } .fi-preview__row .fi-status { grid-column: 2; justify-self: start; } .fi-preview__thumb { width: 48px; height: 48px; } }

/* Pricing plans: each plan is a "stamp value" */
.fi-plan { height: 100%; background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: var(--fi-radius); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: .75rem; box-shadow: var(--fi-shadow); position: relative; }
.fi-plan--featured { border: 2px solid var(--fi-ink); box-shadow: var(--fi-shadow-lift); }
.fi-plan__name { font-family: var(--fi-font-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fi-muted); }
.fi-plan__price { font-family: var(--fi-font-display); font-size: 3rem; line-height: 1; color: var(--fi-ink); font-weight: 600; }
.fi-plan__price small { font-family: var(--fi-font); font-size: 1rem; font-weight: 500; color: var(--fi-muted); }
.fi-plan__tag { position: absolute; top: -14px; right: 1.25rem; background: var(--fi-postmark); color: #fff; font-family: var(--fi-font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 999px; }

/* Ribbon note: offers, small announcements */
.fi-ribbon { display: inline-flex; align-items: center; gap: .5rem; background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: 999px; padding: .3rem .9rem .3rem .35rem; font-size: .875rem; color: var(--fi-text); box-shadow: var(--fi-shadow); margin-bottom: 1.25rem; }
.fi-ribbon b { background: var(--fi-postmark); color: #fff; border-radius: 999px; padding: .15rem .6rem; font-family: var(--fi-font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }

/* Big action tiles (signed-in home) */
.fi-tile { display: flex; flex-direction: column; gap: .75rem; height: 100%; padding: 1.75rem; border-radius: var(--fi-radius); background: var(--fi-surface); border: 1px solid var(--fi-line); box-shadow: var(--fi-shadow); color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
a.fi-tile:hover { transform: translateY(-3px); box-shadow: var(--fi-shadow-lift); color: inherit; }
.fi-tile__icon { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--fi-page); color: var(--fi-ink); }
.fi-tile__icon .fi-icon { width: 1.75rem; height: 1.75rem; }
.fi-tile h2 { font-size: 1.45rem; margin: 0; }
.fi-tile p { color: var(--fi-muted); margin: 0; }
.fi-tile__go { margin-top: auto; font-weight: 600; color: var(--fi-ink); display: inline-flex; align-items: center; gap: .4rem; }
a.fi-tile:hover .fi-tile__go { color: var(--fi-postmark); }
.fi-tile--album { background: var(--fi-album); border-color: var(--fi-album-deep); }
.fi-tile--album h2 { color: var(--fi-paper); }
.fi-tile--album p { color: var(--fi-album-text); }
.fi-tile--album .fi-tile__icon { background: rgba(255, 253, 248, .1); color: var(--fi-gold-light); }
.fi-tile--album .fi-tile__go, a.fi-tile--album:hover .fi-tile__go { color: var(--fi-gold-light); }

/* Auth pages: form on paper + album-green aside */
.fi-auth { display: grid; gap: 0; border-radius: calc(var(--fi-radius) + 4px); overflow: hidden; box-shadow: var(--fi-shadow-lift); border: 1px solid var(--fi-line); margin: 1.5rem auto 0; max-width: 1000px; background: var(--fi-surface); }
@media (min-width: 768px) { .fi-auth { grid-template-columns: 1.05fr .95fr; } }
.fi-auth__form { padding: 2rem 1.5rem; }
@media (min-width: 768px) { .fi-auth__form { padding: 3rem 3rem; } }
.fi-auth__aside { background: var(--fi-album); color: var(--fi-paper); padding: 2.5rem 2.25rem; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; min-height: 100%; }
.fi-auth__aside::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(255, 253, 248, .05) 31px 32px); }
.fi-auth__aside > * { position: relative; }
.fi-auth__aside h2 { color: var(--fi-paper); }
.fi-auth__aside p, .fi-auth__aside li { color: var(--fi-album-text); }
.fi-auth__art { width: 100%; max-width: 300px; height: auto; margin-bottom: auto; align-self: center; }
@media (max-width: 767.98px) { .fi-auth__aside { padding: 1.75rem 1.5rem; } .fi-auth__art { display: none; } }

/* Prose pages (privacy, legal) */
.fi-prose { max-width: 44rem; }
.fi-prose h2 { margin-top: 2rem; font-size: 1.4rem; }
.fi-prose p, .fi-prose li { font-size: 1.05rem; }
.fi-facts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 1.75rem 0; }
.fi-fact { background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: var(--fi-radius-sm); padding: 1.1rem 1.15rem; }
.fi-fact .fi-icon { color: var(--fi-postmark); width: 1.75rem; height: 1.75rem; margin-bottom: .5rem; }
.fi-fact strong { display: block; color: var(--fi-ink); }
.fi-fact span { color: var(--fi-muted); font-size: .9rem; }

/* Final call to action */
.fi-cta__art { width: 100%; max-width: 220px; height: auto; }
/* Placeholder "photos" for examples (style guide, landing previews) */
.fi-swatch-ink { background: linear-gradient(135deg, #2c4670, var(--fi-ink)); }
.fi-swatch-red { background: linear-gradient(135deg, #cf5a35, var(--fi-postmark)); }
.fi-swatch-green { background: linear-gradient(135deg, #2f5a4b, var(--fi-album)); }
.fi-swatch-gold { background: linear-gradient(135deg, var(--fi-gold-light), var(--fi-gold)); }

/* Postmark decoration (inline SVG placed over a panel corner) */
.fi-postmark-deco { position: absolute; color: var(--fi-postmark); opacity: .22; pointer-events: none; }

/* ---- Editor table (step 7) ---------------------------------------------- */
/* Desktop: a dense table with fixed columns that fits 1140px without scrolling.
   Below 768px each row becomes a card (cells carry data-label). */

.fi-editor { width: 100%; table-layout: fixed; background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: var(--fi-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: .875rem; box-shadow: var(--fi-shadow); }
.fi-editor th { position: sticky; top: 0; z-index: 1; background: var(--fi-page); color: var(--fi-ink); font-family: var(--fi-font-mono); font-weight: 500; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--fi-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-editor td { padding: .75rem .6rem; border-bottom: 1px solid var(--fi-line); vertical-align: top; }
.fi-editor tr:last-child td { border-bottom: 0; }
.fi-editor tbody tr { transition: background-color .15s; }
.fi-editor tbody tr:hover, .fi-editor tbody tr:focus-within { background: color-mix(in srgb, var(--fi-ink-soft) 55%, var(--fi-surface)); }
.fi-editor tr.is-review td:first-child { box-shadow: inset 4px 0 0 var(--fi-st-review-fg); }
.fi-editor tr.is-reviewed td:first-child { box-shadow: inset 4px 0 0 var(--fi-st-reviewed-fg); }
.fi-editor tr.is-error td:first-child { box-shadow: inset 4px 0 0 var(--fi-st-error-fg); }
.fi-editor .form-control, .fi-editor .form-select { min-height: var(--fi-tap); font-size: .875rem; padding: .35rem .55rem; width: 100%; }
.fi-editor .form-select { padding-right: 1.8rem; background-position: right .5rem center; }
.fi-editor textarea.form-control { resize: vertical; line-height: 1.4; }
.fi-editor .fi-col-photo { width: 84px; }
.fi-editor .fi-col-price { width: 96px; }
.fi-editor .fi-col-cond { width: 108px; }
.fi-editor .fi-col-data { width: 200px; }
.fi-editor .fi-col-cat { width: 116px; }
.fi-editor .fi-col-rev { width: 148px; }
.fi-editor .fi-status { white-space: normal; font-size: .75rem; }
.fi-editor .fi-thumb { width: 64px; height: 64px; padding: 4px; background: radial-gradient(circle, var(--fi-surface) 1.6px, transparent 2px) -3px -3px / 6px 6px, var(--fi-page); display: block; object-fit: contain; }
.fi-editor .fi-thumb > span { display: block; width: 100%; height: 100%; }
.fi-editor .fi-count { font-family: var(--fi-font-mono); font-size: .7rem; color: var(--fi-muted); text-align: right; margin-top: .2rem; }
.fi-editor .fi-count.is-over { color: var(--fi-st-error-fg); font-weight: 600; }
.fi-editor .is-invalid { border-color: var(--fi-st-error-fg); }
.fi-editor .fi-row2 { display: flex; gap: .35rem; margin-top: .35rem; }
.fi-editor .fi-row2 > :first-child { flex: 0 0 4.4rem; }
.fi-editor .fi-hint { font-size: .75rem; color: var(--fi-muted); margin-top: .2rem; }
.fi-editor .form-check { min-height: var(--fi-tap); margin-top: .35rem; }
.fi-editor .form-check-label { flex: 1; min-height: var(--fi-tap); display: flex; align-items: center; cursor: pointer; }

.fi-editor-bar { position: sticky; bottom: .75rem; z-index: 2; background: var(--fi-ink); color: #fff; border-radius: 999px; box-shadow: 0 16px 36px -16px rgba(17, 30, 51, .7); padding: .5rem .5rem .5rem 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin-top: 1.25rem; }
.fi-editor-bar strong { color: var(--fi-gold-light); }
.fi-editor-bar .btn-outline-primary { color: #fff; border-color: rgba(255, 255, 255, .6); }
.fi-editor-bar .btn-outline-primary:hover { background: #fff; color: var(--fi-ink); }
.fi-editor-bar .btn-primary { background: var(--fi-paper); color: var(--fi-ink); border-color: var(--fi-paper); box-shadow: none; }
.fi-editor-bar .btn-primary:hover { background: var(--fi-gold-light); border-color: var(--fi-gold-light); color: var(--fi-ink); }
.fi-editor-bar .btn-primary:disabled { background: transparent; border: 1.5px dashed rgba(255, 255, 255, .55); color: var(--fi-album-text); opacity: 1; transform: none; }
.fi-editor-bar small { color: var(--fi-album-text); }
/* Shortcut row above the table ("Marcar todos como revisados"); hidden until the script shows it */
.fi-editor-tools { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: flex-end; margin-bottom: .75rem; }
.fi-editor-tools .fi-hint { margin: 0; font-size: .875rem; color: var(--fi-muted); }
.fi-editor-tools:not(:has(:not([hidden]))) { display: none; }
.fi-editor td[colspan] { vertical-align: middle; }

@media (max-width: 767.98px) {
    .fi-editor, .fi-editor tbody, .fi-editor tr, .fi-editor td { display: block; width: 100% !important; }
    .fi-editor { border: 0; background: transparent; box-shadow: none; table-layout: auto; }
    .fi-editor thead, .fi-editor colgroup { display: none; }
    .fi-editor tr { background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: var(--fi-radius); margin-bottom: 1rem; padding: .75rem .25rem; box-shadow: var(--fi-shadow); }
    .fi-editor td { border: 0; padding: .4rem .85rem; }
    .fi-editor td[data-label]::before { content: attr(data-label); display: block; font-family: var(--fi-font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fi-muted); margin-bottom: .25rem; }
    .fi-editor tr.is-review, .fi-editor tr.is-reviewed, .fi-editor tr.is-error { border-left-width: 5px; }
    .fi-editor tr.is-review { border-left-color: var(--fi-st-review-fg); }
    .fi-editor tr.is-reviewed { border-left-color: var(--fi-st-reviewed-fg); }
    .fi-editor tr.is-error { border-left-color: var(--fi-st-error-fg); }
    .fi-editor tr td:first-child { box-shadow: none !important; }
    .fi-editor td.fi-cell-photo { display: flex; align-items: center; gap: .75rem; }
    .fi-editor td.fi-cell-photo::before { display: none; }
    .fi-editor .fi-thumb { width: 84px; height: 84px; }
    .fi-editor-bar { border-radius: var(--fi-radius); padding: .75rem; bottom: .5rem; font-size: .9rem; }
    .fi-editor-bar > span:last-child { width: 100%; }
    .fi-editor-bar .btn { flex: 1 1 calc(50% - .25rem); padding-left: .5rem; padding-right: .5rem; font-size: .875rem; }
    .fi-editor-bar .btn-primary { flex-basis: 100%; order: -1; }
}

/* ---- Style guide helpers (/Diseno only) --------------------------------- */

.fi-swatch { height: 72px; border-bottom: 1px solid var(--fi-line); }
.fi-motifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .75rem; }
.fi-motifs figure { margin: 0; background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: var(--fi-radius-sm); padding: 1rem .5rem .75rem; text-align: center; color: var(--fi-ink); }
.fi-motifs figcaption { font-family: var(--fi-font-mono); font-size: .7rem; color: var(--fi-muted); margin-top: .5rem; }

/* ---- Motion preferences --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .fi-card:hover, a.fi-tile:hover, .btn-primary:hover { transform: none; }
    .fi-stamp img { transform: none !important; }
}

/* ---- Small additions ------------------------------------------------------ */

.fi-narrow { max-width: 34rem; }
.fi-panel--album .fi-checks .fi-icon, .fi-auth__aside .fi-checks .fi-icon { color: var(--fi-gold-light); }
.fi-connected { display: flex; gap: 1rem; align-items: flex-start; }
.fi-connected .fi-tile__icon { background: var(--fi-st-reviewed-bg); color: var(--fi-st-reviewed-fg); }
.fi-connect-art { display: flex; align-items: center; gap: .75rem; color: var(--fi-ink); margin-bottom: 1.25rem; }
.fi-connect-art__line { flex: 0 1 3rem; height: 0; border-top: 2px dashed var(--fi-line-strong); }
.fi-connect-art .fi-icon--lg { color: var(--fi-postmark); }
.fi-w-50 { width: 50%; }
.fi-auth__aside .fi-eyebrow, .fi-auth__aside .fi-accent, .fi-panel--album .fi-accent, .fi-tile--album .fi-accent { color: var(--fi-gold-light); }
.fi-tile--album .fi-card__no { color: var(--fi-album-text); }

/* ---- Publishing (step 8) ------------------------------------------------- */
.fi-hint { font-size: .8125rem; color: var(--fi-muted); }
.fi-item-link { color: var(--fi-ink); font-size: .8125rem; text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: .5rem 0; }
.fi-item-link:hover { color: var(--fi-postmark); }

/* ---- Selling settings and status on eBay (step 9) ------------------------ */

/* Form section: a numbered catalogue heading, then the fields */
.fi-form-section { border: 0; padding: 0 0 1.75rem; margin: 0 0 1.75rem; border-bottom: 1px dashed var(--fi-line-strong); min-width: 0; }
.fi-form-section legend { float: none; width: auto; padding: 0; margin: 0 0 1rem; font-family: var(--fi-font-display); font-weight: 600; font-size: 1.35rem; color: var(--fi-ink); letter-spacing: -.01em; display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.fi-form-section__no { font-family: var(--fi-font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--fi-postmark); }
.fi-advanced { margin-top: .25rem; }
.fi-advanced > summary { font-weight: 600; }
.fi-settings .fi-ai-note { margin-bottom: 1rem; }

/* Read-only fee table by weight */
.fi-rates-wrap { background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: var(--fi-radius-sm); overflow: hidden; }
.fi-rates { width: 100%; border-collapse: collapse; font-size: .9rem; }
.fi-rates th, .fi-rates td { padding: .6rem .75rem; text-align: right; border-bottom: 1px solid var(--fi-line); font-variant-numeric: tabular-nums; }
.fi-rates thead th { background: var(--fi-page); font-family: var(--fi-font-mono); font-weight: 500; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fi-ink); }
.fi-rates tbody th { text-align: left; font-weight: 500; color: var(--fi-ink); }
.fi-rates thead th:first-child { text-align: left; }
.fi-rates tr:last-child th, .fi-rates tr:last-child td { border-bottom: 0; }
@media (max-width: 575.98px) { .fi-rates { font-size: .8125rem; } .fi-rates th, .fi-rates td { padding: .55rem .4rem; } .fi-rates thead th { letter-spacing: .02em; } }

/* What a published listing is doing on eBay: complements (never replaces) the listing status */
.fi-ebay-state { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; border: 1.5px solid currentColor; line-height: 1.3; }
.fi-ebay-state--active { background: var(--fi-st-reviewed-bg); color: var(--fi-st-reviewed-fg); }
.fi-ebay-state--sold { background: var(--fi-ink-soft); color: var(--fi-ink); }
.fi-ebay-state--ended { background: var(--fi-st-uploaded-bg); color: var(--fi-st-uploaded-fg); }
.fi-ebay-state--unknown { background: transparent; color: var(--fi-muted); border-style: dashed; }

/* Batch summary of what happened on eBay */
.fi-sync { display: flex; gap: .75rem; align-items: flex-start; background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: var(--fi-radius-sm); padding: .85rem 1.1rem; }
.fi-sync > .fi-icon { margin-top: .15rem; color: var(--fi-ink); }
.fi-rates tbody th { white-space: nowrap; }

/* ---- Account area ("Tu cuenta") ------------------------------------------ */

/* Side menu: pills that wrap on mobile, a vertical list from large screens up */
.fi-subnav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.fi-subnav a { display: flex; align-items: center; gap: .5rem; min-height: var(--fi-tap); padding: .4rem 1rem; border-radius: 999px; border: 1px solid var(--fi-line); background: var(--fi-surface); color: var(--fi-text); font-weight: 500; text-decoration: none; }
.fi-subnav a:hover { color: var(--fi-ink); border-color: var(--fi-line-strong); }
.fi-subnav a[aria-current="page"] { background: var(--fi-page); color: var(--fi-ink); border-color: var(--fi-ink); }
.fi-subnav a.fi-subnav__danger { color: var(--fi-postmark); }
.fi-subnav .fi-icon { flex: none; }
@media (min-width: 992px) {
    .fi-subnav { flex-direction: column; flex-wrap: nowrap; gap: .25rem; position: sticky; top: 5rem; }
    .fi-subnav a { border-radius: var(--fi-radius-sm); border-color: transparent; background: transparent; }
    .fi-subnav a[aria-current="page"] { border-color: var(--fi-line-strong); }
}

/* ---- Primeros pasos (portada con sesión) ----------------------------------- */

.fi-start { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; counter-reset: fi-start; }
.fi-start__item { counter-increment: fi-start; display: grid; grid-template-columns: 2.5rem 1fr; gap: .25rem 1rem; align-items: start; padding: 1.1rem 1.15rem; background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: var(--fi-radius); }
.fi-start__item::before { content: counter(fi-start); grid-column: 1; grid-row: 1 / span 4; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--fi-font-mono); font-weight: 600; background: var(--fi-page); color: var(--fi-ink); border: 1px dashed var(--fi-line-strong); }
.fi-start__item.is-next { border: 2px solid var(--fi-ink); box-shadow: var(--fi-shadow); }
.fi-start__item.is-next::before { background: var(--fi-ink); color: #fff; border-style: solid; }
.fi-start__item.is-done::before { content: "✓"; background: var(--fi-st-reviewed-bg); color: var(--fi-st-reviewed-fg); border-style: solid; border-color: transparent; }
.fi-start__item > * { grid-column: 2; }
.fi-start__head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; }
.fi-start__head h3 { font-family: var(--fi-font-display); font-size: 1.3rem; margin: 0; }
.fi-start__why { color: var(--fi-muted); margin: 0; }
.fi-start__action { margin-top: .6rem; }
.fi-start__action .btn { width: 100%; }
@media (min-width: 576px) { .fi-start__action .btn { width: auto; } }
.fi-page-header h1 { overflow-wrap: anywhere; }

/* ---- Demostración animada de la portada (fi-demo) --------------------------- */
/* Seis escenas, ~28 s. Sin JavaScript: una tira de cuadros fijos (el estado natural, sin animar,
   de cada elemento es su estado FINAL). Con JavaScript (.is-js): un escenario y una escena cada vez;
   la animación de una escena arranca cuando su cuadro recibe .is-active. Solo se animan transform y
   opacity. Con "reducir movimiento" se apaga toda animación (bloque de preferencias de movimiento). */

.fi-demo { --fi-demo-ease: cubic-bezier(.22, .8, .3, 1); }
.fi-flip { transform: scaleX(-1); }

.fi-demo__stage { display: grid; gap: 1rem; }
@media (min-width: 768px) { .fi-demo__stage { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .fi-demo__stage { grid-template-columns: repeat(3, 1fr); } }

.fi-demo__frame { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: var(--fi-radius); box-shadow: var(--fi-shadow); overflow: hidden; }
.fi-demo__cap { display: flex; flex-direction: column; align-items: flex-start; }
.fi-demo__title { font-family: var(--fi-font-display); font-weight: 600; color: var(--fi-ink); font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem); line-height: 1.1; letter-spacing: -.02em; margin: 0; }
.fi-demo__art { width: 100%; max-width: 30rem; min-width: 0; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: .75rem; }

/* Escenario: relación de aspecto fija y escenas apiladas */
.fi-demo.is-js .fi-demo__stage { display: block; position: relative; aspect-ratio: 5 / 8; max-width: 1040px; margin: 0 auto; background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: var(--fi-radius); box-shadow: var(--fi-shadow-lift); overflow: hidden; }
@media (min-width: 576px) { .fi-demo.is-js .fi-demo__stage { aspect-ratio: 4 / 3; } }
@media (min-width: 992px) { .fi-demo.is-js .fi-demo__stage { aspect-ratio: 16 / 9; } }
.fi-demo.is-js .fi-demo__frame { position: absolute; inset: 0; border: 0; border-radius: 0; box-shadow: none; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.fi-demo.is-js .fi-demo__frame.is-active { opacity: 1; visibility: visible; transition: opacity .4s ease; animation: fi-demo-in .6s var(--fi-demo-ease) both; }
@media (min-width: 992px) {
    .fi-demo.is-js .fi-demo__frame { flex-direction: row; align-items: center; padding: 2rem 2.5rem; gap: 2.5rem; }
    .fi-demo.is-js .fi-demo__cap { flex: 0 0 36%; }
    .fi-demo.is-js .fi-demo__art { flex: 1; }
}

/* Controles */
.fi-demo__controls { max-width: 1040px; margin: 1rem auto 0; display: grid; gap: .75rem; }
.fi-demo__nav { display: flex; gap: .35rem; }
.fi-demo__dot { flex: 1 1 0; min-width: 0; min-height: var(--fi-tap); display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem; background: transparent; border: 0; padding: .3rem 0 .45rem; font-family: var(--fi-font-mono); font-size: .75rem; letter-spacing: .08em; color: var(--fi-muted); border-radius: var(--fi-radius-sm); cursor: pointer; text-align: left; }
.fi-demo__dot:hover, .fi-demo__dot.is-current { color: var(--fi-ink); }
.fi-demo__dot.is-current { font-weight: 600; }
.fi-demo__dot-bar { display: block; height: 6px; border-radius: 999px; background: var(--fi-line-strong); overflow: hidden; }
.fi-demo__dot-bar i { display: block; height: 100%; background: var(--fi-ink); transform: scaleX(0); transform-origin: left; }
.fi-demo__dot.is-done .fi-demo__dot-bar i { transform: scaleX(1); }
.fi-demo:not(.is-static) .fi-demo__dot.is-current .fi-demo__dot-bar i { animation: fi-demo-fill var(--d, 4s) linear both; }
.fi-demo.is-static .fi-demo__dot.is-current .fi-demo__dot-bar i { transform: scaleX(1); }
.fi-demo__btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.fi-demo__btns .btn { flex: 1 1 auto; }
@media (min-width: 576px) { .fi-demo__btns .btn { flex: 0 0 auto; } }
.fi-demo.is-paused * { animation-play-state: paused !important; }

/* Piezas comunes de las escenas */
.fi-demo__perf { padding: 7px; background: radial-gradient(circle, var(--fi-page) 2.3px, transparent 2.8px) -5px -5px / 10px 10px, var(--fi-surface); filter: drop-shadow(0 3px 4px rgba(28, 46, 74, .18)); }
.fi-demo__perf > span { display: grid; place-items: center; align-content: center; gap: .1rem; width: 100%; height: 100%; color: var(--fi-paper); }
.fi-demo__perf .fi-icon { width: 1.6rem; height: 1.6rem; }
.fi-demo__perf b { font-family: var(--fi-font-mono); font-weight: 500; font-size: .75rem; letter-spacing: .04em; }
.fi-demo__perf .fi-swatch-gold { color: var(--fi-ink); }
.fi-demo__s-first, .fi-demo__s-mid { opacity: 0; }   /* estado final: solo se ve el último */
.fi-demo__chips, .fi-demo__swap { display: grid; justify-items: end; }
.fi-demo__swap { justify-items: start; }
.fi-demo__chips > *, .fi-demo__swap > * { grid-area: 1 / 1; }

/* Nº 01: hoja de álbum con seis huecos */
.fi-demo__album { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; padding: .9rem; border-radius: var(--fi-radius-sm); border: 1px solid var(--fi-line); }
.fi-demo__slot { position: relative; aspect-ratio: 4 / 5; border: 1.5px dashed var(--fi-line-strong); border-radius: 3px; }
.fi-demo__stamp { position: absolute; inset: 0; }
.fi-demo__slot:nth-child(1) .fi-demo__stamp { transform: rotate(-2.5deg); }
.fi-demo__slot:nth-child(2) .fi-demo__stamp { transform: rotate(1.5deg); }
.fi-demo__slot:nth-child(3) .fi-demo__stamp { transform: rotate(-1deg); }
.fi-demo__slot:nth-child(4) .fi-demo__stamp { transform: rotate(2deg); }
.fi-demo__slot:nth-child(5) .fi-demo__stamp { transform: rotate(-2deg); }
.fi-demo__slot:nth-child(6) .fi-demo__stamp { transform: rotate(1deg); }

/* Nº 02: zona de subida con fotos y progreso */
.fi-demo__drop { padding: 1rem; display: grid; justify-items: center; gap: .35rem; pointer-events: none; }
.fi-demo__drop .fi-dropzone__art { margin: 0; }
.fi-demo__drop .fi-dropzone__title { margin: 0; font-size: 1.2rem; }
.fi-demo__thumbs { display: flex; gap: .6rem; justify-content: center; margin-top: .35rem; }
.fi-demo__photo { width: 52px; height: 64px; }
.fi-demo__prog .fi-progress__label { font-size: 1rem; }
.fi-demo__bar { height: .9rem; background: var(--fi-page); border-radius: 999px; overflow: hidden; }
.fi-demo__bar i { display: block; height: 100%; background-color: var(--fi-ink); background-image: repeating-linear-gradient(90deg, transparent 0 14px, rgba(255, 253, 248, .35) 14px 16px); transform-origin: left; }

/* Nº 03: anuncio que escribe la IA */
.fi-demo__listing { background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: var(--fi-radius); box-shadow: var(--fi-shadow); padding: .9rem 1rem; display: grid; gap: .55rem; }
.fi-demo__line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem .5rem; min-height: 1.6rem; }
.fi-demo__line .fi-demo__chips { margin-left: auto; }
.fi-demo__ltitle { margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.4; color: var(--fi-text); }
.fi-demo__w { display: inline-block; }
.fi-demo__count { color: var(--fi-muted); display: inline-flex; align-items: baseline; gap: .3rem; }
.fi-demo__win { display: inline-block; height: 1.4em; line-height: 1.4em; overflow: hidden; text-align: right; min-width: 1.6em; }
.fi-demo__col { display: block; transform: translateY(calc(-100% * (var(--rows) - 1) / var(--rows))); }
.fi-demo__col > span { display: block; height: 1.4em; }
.fi-demo__fields { display: grid; gap: .5rem; padding-top: .55rem; border-top: 1px dashed var(--fi-line); }
.fi-demo__fields--3 { grid-template-columns: repeat(3, 1fr); }
.fi-demo__fields--2 { grid-template-columns: 1fr 1fr; align-items: end; }
.fi-demo__fields > div { display: flex; flex-direction: column; min-width: 0; }
.fi-demo__fields b { font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.fi-demo__fields .fi-mono { font-size: .95rem; }
.fi-demo__listing .fi-ai-note { font-size: 1rem; padding: .55rem .8rem; }

/* Nº 04: tabla de revisión */
.fi-demo .fi-preview { box-shadow: none; border: 1px solid var(--fi-line); }
.fi-demo .fi-preview__row { grid-template-columns: 48px 1fr; position: relative; }
.fi-demo .fi-preview__row > .fi-status, .fi-demo .fi-preview__row > .fi-demo__chips { grid-column: 2; justify-self: start; }
.fi-demo .fi-preview__thumb { width: 48px; height: 48px; }
.fi-demo .fi-preview__row .fi-card__title { font-size: 1rem; }
.fi-demo .fi-card__meta { font-size: 1rem; }
.fi-demo__edit::after { content: ""; position: absolute; inset: 3px; border: 2px solid var(--fi-ink); border-radius: var(--fi-radius-sm); opacity: 0; pointer-events: none; }
.fi-demo__fix { position: relative; display: inline-grid; }
.fi-demo__fix > * { grid-area: 1 / 1; text-decoration: none; }
.fi-demo__fix s { opacity: 0; text-decoration: line-through; color: var(--fi-postmark); }
.fi-demo__fix ins { color: var(--fi-ink); background: var(--fi-ink-soft); border-radius: 3px; }
.fi-demo__rev { display: inline-flex; align-items: center; gap: .4rem; color: var(--fi-st-reviewed-fg); font-weight: 600; }
.fi-demo__box { width: 1.4rem; height: 1.4rem; border-radius: 4px; background: var(--fi-st-reviewed-fg); display: grid; place-items: center; color: #fff; }
.fi-demo__box .fi-icon { width: 1rem; height: 1rem; }
.fi-demo__note { margin: 0; text-align: center; color: var(--fi-muted); }
@media (max-width: 575.98px) { .fi-demo__opt { display: none; } }

/* Nº 05: publicación */
.fi-demo__queue { display: grid; gap: .5rem; }
.fi-demo__mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .6rem .8rem; background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: var(--fi-radius-sm); min-height: var(--fi-tap); }
.fi-demo__mtitle { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575.98px) { .fi-demo__mini { grid-template-columns: minmax(0, 1fr); gap: .35rem; } .fi-demo__mini .fi-demo__chips { justify-items: start; } .fi-demo__mtitle { white-space: normal; } }
.fi-demo .fi-editor-bar { position: static; margin-top: .25rem; border-radius: var(--fi-radius); padding: .6rem .6rem .6rem 1rem; }
.fi-demo .fi-editor-bar .btn { pointer-events: none; }
.fi-demo .fi-editor-bar .btn-primary { background: var(--fi-paper); color: var(--fi-ink); border-color: var(--fi-paper); }
@media (max-width: 767.98px) { .fi-demo .fi-editor-bar .btn { flex: 1 1 100%; } }

/* Nº 06: sello de cierre */
.fi-demo__seal { position: relative; width: min(190px, 52%); aspect-ratio: 1; margin: 0 auto; }
.fi-demo__mark { width: 100%; height: 100%; color: var(--fi-ink); transform: rotate(-5deg); }
.fi-demo__pm { position: absolute; right: -50%; bottom: -12%; width: 78%; height: 78%; color: var(--fi-postmark); opacity: .88; transform: rotate(-12deg); }
.fi-demo__word { text-align: center; font-family: var(--fi-font-brand); font-weight: 600; font-size: 2.2rem; letter-spacing: -.02em; color: var(--fi-ink); margin-top: .5rem; }

/* Movimiento: solo corre dentro de la escena activa */
.fi-demo.is-js .is-active .fi-demo__stamp { animation: fi-demo-drop .7s var(--fi-demo-ease) both; animation-delay: var(--at, 0s); }
.fi-demo.is-js .is-active .fi-demo__photo { animation: fi-demo-fly .6s var(--fi-demo-ease) both; animation-delay: var(--at, 0s); }
.fi-demo.is-js .is-active .fi-demo__bar i { animation: fi-demo-fill 3s ease-in-out both; animation-delay: var(--at, 0s); }
.fi-demo.is-js .is-active .fi-demo__rise { animation: fi-demo-rise .5s var(--fi-demo-ease) both; animation-delay: var(--at, 0s); }
.fi-demo.is-js .is-active .fi-demo__w { animation: fi-demo-word .25s ease-out both; animation-delay: var(--at, 0s); }
.fi-demo.is-js .is-active .fi-demo__col { animation: fi-demo-count var(--dur) steps(var(--steps)) both; animation-delay: var(--at, 0s); }
.fi-demo.is-js .is-active .fi-demo__s-first { animation: fi-demo-out .35s ease both; animation-delay: var(--at, 0s); }
.fi-demo.is-js .is-active .fi-demo__s-mid { animation: fi-demo-mid 1.1s ease both; animation-delay: var(--at, 0s); }
.fi-demo.is-js .is-active .fi-demo__s-last { animation: fi-demo-in2 .35s ease both; animation-delay: var(--at, 0s); }
.fi-demo.is-js .is-active .fi-demo__mini .fi-demo__s-last { animation-delay: calc(var(--at, 0s) + 1s); }
.fi-demo.is-js .is-active .fi-demo__press { animation: fi-demo-press .5s ease both; animation-delay: var(--at, 0s); }
.fi-demo.is-js .is-active .fi-demo__edit::after { animation: fi-demo-edit 3.6s ease both; animation-delay: .5s; }
.fi-demo.is-js .is-active .fi-demo__fix s { animation: fi-demo-out .3s ease both; animation-delay: 1.8s; }
.fi-demo.is-js .is-active .fi-demo__fix ins { animation: fi-demo-in2 .4s ease both; animation-delay: 2s; }
.fi-demo.is-js .is-active .fi-demo__box { animation: fi-demo-pop .4s var(--fi-demo-ease) both; animation-delay: 3.2s; }
.fi-demo.is-js .is-active .fi-demo__rev { animation: fi-demo-in2 .3s ease both; animation-delay: 3.2s; }
.fi-demo.is-js .is-active .fi-demo__mark { animation: fi-demo-mark .8s var(--fi-demo-ease) both; animation-delay: .2s; }
.fi-demo.is-js .is-active .fi-demo__pm { animation: fi-demo-ink .5s var(--fi-demo-ease) both; animation-delay: 1.1s; }
.fi-demo.is-js .is-active .fi-demo__word { animation: fi-demo-rise .6s var(--fi-demo-ease) both; animation-delay: .7s; }

@keyframes fi-demo-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes fi-demo-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fi-demo-drop { from { opacity: 0; transform: translateY(-140%) rotate(-16deg); } }
@keyframes fi-demo-fly { from { opacity: 0; transform: translateY(70px) scale(.5) rotate(8deg); } }
@keyframes fi-demo-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes fi-demo-word { from { opacity: 0; transform: translateY(5px); } }
@keyframes fi-demo-count { from { transform: translateY(0); } }
@keyframes fi-demo-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes fi-demo-mid { 0% { opacity: 0; } 12%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fi-demo-in2 { from { opacity: 0; } }
@keyframes fi-demo-press { 0%, 100% { transform: scale(1); } 50% { transform: scale(.94); } }
@keyframes fi-demo-edit { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fi-demo-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes fi-demo-mark { from { opacity: 0; transform: translateY(-36px) rotate(-16deg) scale(.9); } }
@keyframes fi-demo-ink { from { opacity: 0; transform: scale(1.6) rotate(-26deg); } }

/* ---- Recorrido por la aplicación (fi-tour) ----------------------------------- */
/* Seis pasos, ~45 s, con las pantallas reales dibujadas en una ventana de navegador y un puntero que hace
   clic. Reutiliza el motor, los controles y las animaciones de fi-demo (la raíz lleva las dos clases).
   Cada paso es un cuadro (.fi-demo__frame) con varias pantallas (.fi-tour__screen) apiladas: la pantalla
   siguiente aparece encima de la anterior en su --at. Sin JavaScript: tira de cuadros con la última pantalla
   de cada paso. Los botones y campos dibujados NO son controles (span, sin foco). Solo transform y opacity. */

.fi-tour { margin-top: 3.5rem; }
.fi-tour .fi-section__head { margin-bottom: 1.5rem; }
.fi-tour .fi-demo__title { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); }
.fi-tour .fi-demo__cap, .fi-tour__window, .fi-tour__foot { width: 100%; max-width: 44rem; margin-left: auto; margin-right: auto; }
.fi-tour .fi-demo__controls, .fi-tour.is-js .fi-demo__stage { max-width: 54rem; }

/* Con JavaScript: todos los cuadros en la misma celda, el escenario toma la altura del más alto */
.fi-tour.is-js .fi-demo__stage { display: grid; grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; }
.fi-tour.is-js .fi-demo__frame { position: relative; inset: auto; grid-area: 1 / 1; }
@media (min-width: 992px) {
    .fi-tour.is-js .fi-demo__frame { flex-direction: column; align-items: stretch; padding: 1.5rem 2.5rem; gap: 1rem; }
    .fi-tour.is-js .fi-demo__cap { flex: none; }
}

/* Ventana de navegador */
@media (max-width: 575.98px) { .fi-tour__frame { padding: .75rem; } }
.fi-tour__window { border: 1px solid var(--fi-line-strong); border-radius: var(--fi-radius); background: var(--fi-paper); box-shadow: var(--fi-shadow-lift); overflow: hidden; }
.fi-tour__viewport { position: relative; height: 29rem; overflow: hidden; font-size: .8125rem; line-height: 1.4; }
@media (min-width: 576px) { .fi-tour__viewport { height: 27rem; font-size: .875rem; } }
.fi-tour__screens { position: absolute; inset: 0; }
.fi-tour__screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--fi-paper); }
.fi-tour__screen:not(:last-child) { display: none; }
.fi-tour.is-js:not(.is-static) .fi-tour__screen { display: flex; }
.fi-tour__bar { flex: none; display: flex; align-items: center; gap: .35rem; padding: .45rem .7rem; background: var(--fi-page); border-bottom: 1px solid var(--fi-line); }
.fi-tour__bar i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--fi-postmark); }
.fi-tour__bar i:nth-child(2) { background: var(--fi-gold); }
.fi-tour__bar i:nth-child(3) { background: var(--fi-album); }
.fi-tour__tab { flex: 1; min-width: 0; margin-left: .5rem; padding: .1rem .8rem; border: 1px solid var(--fi-line); border-radius: 999px; background: var(--fi-surface); font-family: var(--fi-font-mono); font-size: .75rem; color: var(--fi-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-tour__page { position: relative; flex: 1; min-height: 0; padding: .75rem .9rem 0; overflow: hidden; }
@media (max-width: 575.98px) { .fi-tour__sm-hide { display: none !important; } }

/* Textos de las pantallas */
.fi-tour__page .fi-eyebrow { margin-bottom: .2rem; }
.fi-tour__h1 { font-family: var(--fi-font-display); font-weight: 600; font-size: 1.45rem; line-height: 1.1; letter-spacing: -.015em; color: var(--fi-ink); margin: 0 0 .25rem; }
.fi-tour__h2 { font-family: var(--fi-font-display); font-weight: 600; font-size: 1.1rem; color: var(--fi-ink); margin: .55rem 0 .45rem; }
.fi-tour__sub { color: var(--fi-muted); margin: 0 0 .6rem; }
.fi-tour__label { display: block; font-weight: 500; margin-bottom: .2rem; }
.fi-tour__field { display: block; position: relative; min-height: 2.2rem; padding: .35rem .6rem; border: 1px solid var(--fi-line-strong); border-radius: var(--fi-radius-sm); background: var(--fi-surface); color: var(--fi-text); }
.fi-tour__field--area { min-height: 3.6rem; }
.fi-tour__swap { display: grid; }
.fi-tour__swap > * { grid-area: 1 / 1; }
.fi-tour__inl { display: inline-grid; justify-items: center; }
.fi-tour__mid { opacity: 0; }   /* visible desde --at durante --len */
.fi-tour__chips { justify-items: start; margin-top: .2rem; }
.fi-tour__window .fi-card__no { display: block; }
.fi-tour__window .fi-mono { font-size: .75rem; }
.fi-tour__window .fi-card__meta, .fi-tour__window .fi-preview__row .fi-card__title { font-size: .875rem; }

/* Componentes reales, en tamaño de ventana */
.fi-tour__window .btn { min-height: 2.35rem; padding: 0 .95rem; font-size: .875rem; pointer-events: none; }
.fi-tour__window .btn-lg { min-height: 2.6rem; font-size: .9rem; padding: 0 1.2rem; }
.fi-tour__window .btn:hover { transform: none; }
.fi-tour__window .fi-panel { padding: .9rem; box-shadow: none; }
.fi-tour__window .fi-panel p { margin-bottom: .6rem; }
.fi-tour__window .fi-page-header { margin: 0 0 .6rem; padding-bottom: .6rem; gap: .5rem 1rem; }
.fi-tour__window .fi-start__item { grid-template-columns: 2rem 1fr; gap: .15rem .7rem; padding: .7rem .8rem; }
.fi-tour__window .fi-start__item::before { width: 2rem; height: 2rem; }
.fi-tour__window .fi-start__head h3 { font-size: 1.05rem; }
.fi-tour__window .fi-start__action { margin-top: .4rem; }
.fi-tour__window .fi-start { gap: .5rem; }
.fi-tour__window .fi-connected { gap: .75rem; }
.fi-tour__window .fi-tile__icon { width: 2.5rem; height: 2.5rem; flex: none; }
.fi-tour__window .fi-form-section { padding-bottom: .7rem; margin-bottom: .7rem; }
.fi-tour__window .fi-form-section legend { font-size: 1.05rem; margin-bottom: .45rem; }
.fi-tour__window .fi-empty { padding: 1.1rem 1rem; }
.fi-tour__window .fi-empty .fi-icon { color: var(--fi-ink); }
.fi-tour__window .fi-progress { padding: .6rem .8rem; box-shadow: none; }
.fi-tour__window .fi-ai-note { margin: 0; padding: .5rem .75rem; font-size: .8125rem; }
.fi-tour__window .alert { padding: .55rem .8rem; }
.fi-tour__prog-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.fi-tour__status { margin-bottom: .1rem; }
.fi-tour__window .fi-editor-tools { margin-bottom: .5rem; }
.fi-tour__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-top: .25rem; }
.fi-tour__meta .fi-tour__chips { margin-top: 0; }
.fi-tour__item { font-size: .75rem; color: var(--fi-muted); }
.fi-tour__confirm { margin-bottom: .6rem; }

/* Opciones en tarjeta y radio dibujados (no son controles) */
.fi-tour__window .fi-choices { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .5rem; }
.fi-tour__window .fi-choice { position: relative; isolation: isolate; padding: .55rem .7rem; min-height: 0; gap: .55rem; }
.fi-tour__choice-text { font-weight: 500; line-height: 1.25; }
.fi-tour__choice-text small { display: block; font-weight: 400; font-size: .75rem; color: var(--fi-muted); }
.fi-tour__radio { position: relative; flex: none; width: 1.1rem; height: 1.1rem; border: 1.5px solid var(--fi-line-strong); border-radius: 50%; background: var(--fi-surface); }
.fi-tour__radio i { position: absolute; inset: 2.5px; border-radius: 50%; background: var(--fi-ink); }
.fi-tour__pick { position: absolute; inset: -1.5px; z-index: -1; border: 1.5px solid var(--fi-ink); border-radius: var(--fi-radius-sm); background: var(--fi-ink-soft); }

/* Zona de subida y hoja de álbum con los sellos */
.fi-tour__drop { margin-top: .6rem; padding: .6rem .8rem; display: grid; justify-items: center; gap: .15rem; pointer-events: none; }
.fi-tour__drop .fi-demo__thumbs { margin-top: .25rem; gap: .45rem; }
.fi-tour__drop .fi-demo__photo { width: 2.1rem; height: 2.6rem; padding: 5px; }
.fi-tour__album { padding: .7rem; border: 1px solid var(--fi-line); border-radius: var(--fi-radius-sm); }
.fi-tour__stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: .45rem; }
.fi-tour__stamps .fi-demo__photo { width: auto; height: auto; aspect-ratio: 4 / 5; padding: 5px; }

/* Editor: una fila por anuncio (en ventana estrecha, en dos líneas) */
.fi-tour__erow { position: relative; display: grid; grid-template-columns: 48px 5.2rem minmax(0, 1fr); gap: .45rem .7rem; align-items: start; padding: .65rem .7rem .65rem .9rem; margin-bottom: .5rem; background: var(--fi-surface); border: 1px solid var(--fi-line); border-radius: var(--fi-radius-sm); }
.fi-tour__erow > .fi-preview__thumb { grid-row: 1 / 3; width: 48px; height: 48px; }
.fi-tour__erow > .fi-tour__ecell:nth-of-type(1) { grid-column: 2 / -1; }
.fi-tour__ecell { min-width: 0; }
.fi-tour__erow .fi-status { white-space: normal; font-size: .75rem; }
.fi-tour__erow .fi-tour__label { font-family: var(--fi-font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--fi-muted); }
.fi-tour__count { display: flex; justify-content: flex-end; margin-top: .15rem; font-size: .75rem; }
.fi-tour__check { display: inline-flex; align-items: center; gap: .45rem; margin-top: .3rem; font-weight: 500; }
.fi-tour__box { position: relative; flex: none; width: 1.4rem; height: 1.4rem; border: 1.5px solid var(--fi-line-strong); border-radius: 4px; background: var(--fi-surface); }
.fi-tour__box .fi-demo__box { position: absolute; inset: -1.5px; width: auto; height: auto; }
.fi-tour__accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--fi-radius-sm) 0 0 var(--fi-radius-sm); background: var(--fi-st-review-fg); }
.fi-tour__accent--ok { background: var(--fi-st-reviewed-fg); }
.fi-tour__focus { position: absolute; inset: -2px; border: 2px solid var(--fi-ink); border-radius: var(--fi-radius-sm); pointer-events: none; }
@media (min-width: 576px) {
    .fi-tour__erow { grid-template-columns: 56px minmax(0, 1fr) 4.6rem 9.5rem; }
    .fi-tour__erow > .fi-preview__thumb { grid-row: auto; width: 56px; height: 56px; }
    .fi-tour__erow > .fi-tour__ecell:nth-of-type(1) { grid-column: auto; }
}
.fi-tour__dock { position: absolute; left: .6rem; right: .6rem; bottom: .6rem; z-index: 2; }
.fi-tour__dock .fi-editor-bar { margin-top: 0; }

/* Pie del cuadro: leyenda corta (16 px) y, en el último paso, el botón real */
.fi-tour__foot { min-height: 3.1rem; }
.fi-tour__legend { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--fi-text); }

/* Puntero y clics: los crea demo.js; sin JavaScript o con "reducir movimiento" no se ven */
.fi-tour__cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 1.5rem; height: 2rem; opacity: 0; pointer-events: none; display: none; filter: drop-shadow(0 2px 3px rgba(28, 46, 74, .35)); will-change: transform; }
.fi-tour.has-cursor.is-js:not(.is-static) .fi-tour__cursor { display: block; }
.fi-tour__cursor svg { display: block; width: 100%; height: 100%; }
.fi-tour__cursor path { fill: var(--fi-ink); stroke: var(--fi-surface); stroke-width: 1.4; stroke-linejoin: round; }
.fi-tour__ripple { position: absolute; z-index: 4; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border: 2px solid var(--fi-postmark); border-radius: 50%; background: color-mix(in srgb, var(--fi-postmark) 16%, transparent); opacity: 0; pointer-events: none; }

/* Movimiento propio del recorrido (el resto viene de fi-demo) */
.fi-demo.is-js .is-active .fi-tour__screen { animation: fi-tour-screen .3s ease both; animation-delay: var(--at, 0s); }
.fi-demo.is-js .is-active .fi-tour__mid { animation: fi-demo-mid var(--len, 1.1s) ease both; animation-delay: var(--at, 0s); }
.fi-tour.is-js .is-active .fi-demo__bar i { animation-duration: var(--dur, 3s); animation-timing-function: linear; }
.fi-tour.is-js .is-active .fi-demo__box { animation-delay: var(--at, 3.2s); }
@keyframes fi-tour-screen { from { opacity: 0; } }