/* La Madriguera del Tejón · La vitrina (rediseño A)
   Tokens y componentes de las páginas de minis, packs y Biblioteca.
   Las tipografías se sirven desde el propio dominio: la CSP solo admite fuentes propias. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/instrument-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  /* Color · mundo Minis (oscuro) */
  --c-ground: #10120F;
  --c-ground-alt: #171A15;
  --c-surface: #1A1D18;
  --c-line: #2C3128;
  --c-line-strong: #4A5140;
  --c-line-input: #6B7160;
  --c-text: #ECE7D8;
  --c-text-soft: #C7C3B2;
  --c-text-muted: #A9A894;
  --c-accent: #C9D66B;
  --c-on-accent: #10120F;

  /* Color · mundo Biblioteca (papel) */
  --c-paper: #ECE7D8;
  --c-paper-surface: #F6F3E8;
  --c-paper-line: #CFC9B6;
  --c-ink: #171A15;
  --c-ink-soft: #3A3C32;
  --c-ink-muted: #55574A;
  --c-ink-link: #3F4A12;

  /* Tipografía */
  --f-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-body: 'Instrument Sans', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --t-display: clamp(40px, 5.4vw, 72px);
  --t-h1: clamp(36px, 4.4vw, 56px);
  --t-h2: clamp(30px, 3.4vw, 40px);
  --t-h3: clamp(26px, 2.6vw, 32px);
  --t-card: 19px;
  --t-lead: 19px;
  --t-body: 16px;
  --t-small: 14px;
  --t-mono: 13px;

  /* Espaciado y forma */
  --s-gutter: clamp(16px, 4vw, 40px);
  --s-section: 72px;
  --s-gap: 20px;
  --w-max: 1264px;                     /* 1184 px de contenido + margen, igual que las páginas editoriales */
  --r-card: 16px;
  --r-hero: 20px;
  --r-pill: 999px;
}

/* ---------- Base ---------- */
body.vitrina { margin: 0; min-width: 320px; background: var(--c-ground); color: var(--c-text); font: 400 var(--t-body)/1.5 var(--f-body); -webkit-font-smoothing: antialiased; }
body.vitrina::before { content: none; }
.vitrina *, .vitrina *::before, .vitrina *::after { box-sizing: border-box; }
.vitrina a { color: inherit; text-decoration: none; }
.vitrina a:hover { color: var(--c-accent); }
body.vitrina:not(.public-site):not(.store-site) img { max-width: 100%; display: block; }
:where(.vitrina) :where(button, input, select):not(.btn) { font: inherit; }
.vitrina :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.vitrina [hidden] { display: none !important; }
.wrap { max-width: var(--w-max); margin: 0 auto; padding-inline: var(--s-gutter); }
.section { padding-block: var(--s-section); }
.stack { display: flex; flex-direction: column; gap: 24px; }
.vitrina .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.vitrina-skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-on-accent); font-weight: 600; }
.vitrina-skip:focus { top: 12px; }

/* ---------- Tipografía ---------- */
.display { margin: 0; font: 700 var(--t-display)/1.02 var(--f-display); letter-spacing: -0.02em; }
.display--catalog { font-size: clamp(40px, 5vw, 64px); }
.display--narrow { max-width: 860px; }
.h1 { margin: 0; font: 700 var(--t-h1)/1.04 var(--f-display); letter-spacing: -0.02em; }
.h2 { margin: 0; font: 700 var(--t-h2)/1.1 var(--f-display); letter-spacing: -0.01em; }
.h3 { margin: 0; font: 700 var(--t-h3)/1.1 var(--f-display); }
.lead { margin: 0; font-size: var(--t-lead); color: var(--c-text-soft); max-width: 620px; }
.eyebrow { margin: 0; font: 400 var(--t-mono)/1.4 var(--f-mono); color: var(--c-accent); letter-spacing: 0.04em; text-transform: uppercase; }
.muted { color: var(--c-text-muted); }
.mono { font: 400 14px var(--f-mono); }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 var(--t-body)/1.25 var(--f-body); padding: 14px 24px; border-radius: var(--r-pill); border: 1px solid transparent; background: transparent; color: inherit; text-align: center; cursor: pointer; }
.vitrina .btn--primary { background: var(--c-accent); color: var(--c-on-accent); }
.vitrina .btn--primary:hover { color: var(--c-on-accent); filter: brightness(1.08); }
.btn--ghost { border-color: var(--c-line-strong); }
.vitrina .btn--light { background: var(--c-text); color: var(--c-ground); }
.vitrina .btn--light:hover { color: var(--c-ground); filter: brightness(1.05); }
.vitrina .btn--ink { background: var(--c-ink); color: var(--c-paper); }
.vitrina .btn--ink:hover { color: var(--c-accent); }
.vitrina .btn--ink-ghost { border-color: var(--c-ink); color: var(--c-ink); }
.btn--lg { font-size: 18px; padding: 16px 28px; }
.btn--block { display: flex; width: 100%; }
.btn--center { align-self: center; }
.btn:disabled { cursor: progress; opacity: .6; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Cabecera ---------- */
.vitrina-header { border-bottom: 1px solid var(--c-line); background: var(--c-ground); color: var(--c-text); }
.vitrina-header .wrap { min-height: 72px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.vitrina-brand { font: 700 20px var(--f-display); padding: 12px 0; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 28px; font-weight: 500; }
.nav a { padding: 12px 0; border-bottom: 2px solid transparent; }
.vitrina .nav a[aria-current="page"] { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.vitrina-header__actions { display: flex; align-items: center; gap: 10px; }
.account { padding: 10px 18px; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); font-weight: 500; }
.vitrina .account[aria-current="page"] { border-color: var(--c-accent); color: var(--c-accent); }
.vitrina-header__logout { margin: 0; }
.vitrina-header__logout button { min-height: 44px; padding: 10px 6px; border: 0; background: none; color: var(--c-text-muted); cursor: pointer; }
.vitrina-header__logout button:hover { color: var(--c-accent); }
.cart-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: transparent; color: var(--c-text); font-weight: 500; cursor: pointer; }
.cart-button strong { min-width: 22px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-on-accent); font-size: 13px; text-align: center; }
.cart-button:hover { border-color: var(--c-accent); }

/* ---------- Medios (sustituyen al marcador .ph del paquete) ---------- */
.ph { background: repeating-linear-gradient(135deg, #1F231C 0 14px, #1A1D18 14px 28px); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--c-text-muted); font: 400 12px var(--f-mono); padding: 12px; }
.media { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, #262B22 0, var(--c-surface) 70%); }
.media > img { width: 100%; height: 100%; object-fit: cover; }
.media > canvas { width: auto; max-width: 100%; height: 100%; aspect-ratio: 1; }
/* Mosaico de pack: teselas siempre cuadradas, centradas en el hueco disponible. */
.media .store-pack-composite { top: 50%; left: 50%; width: auto; height: 100%; max-width: 100%; max-height: 100%; grid-template-rows: repeat(var(--pack-rows), minmax(0, 1fr)); transform: translate(-50%, -50%); background: var(--c-line); }
.media .store-pack-composite img { width: 100%; height: 100%; object-fit: cover; }
.media .ai-content-mark--overlay { top: 10px; right: 10px; }
.media__footer { position: absolute; left: 10px; bottom: 10px; z-index: 3; max-width: calc(100% - 20px); padding: 4px 6px; border-radius: 6px; background: rgba(16, 18, 15, .88); }

/* ---------- Portada: héroe ---------- */
.hero { padding-block: 72px 64px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.hero > * { flex: 1 1 420px; min-width: 0; }
.hero__viewer { position: relative; }
.hero__stage { height: 460px; width: 100%; padding: 16px 16px 112px; border-radius: var(--r-hero); border: 1px solid var(--c-line); }
.hero__stage > canvas { cursor: ew-resize; touch-action: pan-y; }
.hero__card { position: absolute; inset: auto 20px 20px 20px; background: var(--c-ground); border: 1px solid var(--c-line); border-radius: 14px; padding: 16px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.hero__card strong { display: block; font: 700 20px var(--f-display); }

/* ---------- Filtros (chips) ---------- */
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.section-head__search { flex: 1 1 300px; max-width: 420px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chips__label { width: 84px; color: var(--c-text-muted); font-size: var(--t-small); }
.chip { font: 500 14px var(--f-body); padding: 8px 16px; min-height: 40px; border-radius: var(--r-pill); background: transparent; color: var(--c-text-soft); border: 1px solid var(--c-line); cursor: pointer; }
.chip:hover { border-color: var(--c-line-strong); color: var(--c-text); }
/* La opción activa va en hueso: el acento se reserva para la acción principal. */
.chip[aria-pressed="true"] { background: var(--c-text); color: var(--c-ground); border-color: var(--c-text); }

/* Barra de filtros del catálogo: una sola línea que se reparte en móvil. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--c-line); }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface); }
.segmented button { min-height: 36px; padding: 6px 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-text-soft); font: 500 14px var(--f-body); cursor: pointer; }
.segmented button:hover { color: var(--c-text); }
.segmented button[aria-pressed="true"] { background: var(--c-text); color: var(--c-ground); }
.filter-select { position: relative; display: inline-flex; }
.filter-select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--c-text-muted); border-bottom: 1.5px solid var(--c-text-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.filter-select select { appearance: none; min-height: 42px; max-width: 100%; padding: 0 40px 0 16px; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-text); font: 500 14px var(--f-body); cursor: pointer; }
.filter-select select:hover { border-color: var(--c-line-strong); }
.filter-select--sort { margin-left: auto; }
.link-button { padding: 0; border: 0; background: none; color: var(--c-text-soft); font: 500 var(--t-small) var(--f-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-button:hover { color: var(--c-text); }

/* ---------- Tarjeta de mini ---------- */
.grid-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-gap); }
.grid-minis--dense { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.mini-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.vitrina .mini-card:hover { border-color: var(--c-accent); color: inherit; }
.mini-card > .media, .mini-card > a > .media { height: 240px; width: 100%; }
.mini-card__body { padding: 16px; display: flex; flex: 1; flex-direction: column; gap: 6px; }
.mini-card__name { margin: 0; font: 700 var(--t-card)/1.25 var(--f-display); }
.mini-card__from { font-size: var(--t-small); color: var(--c-text-muted); }
.mini-card__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 8px; }
.mini-card__formats { font: 400 12px var(--f-mono); color: var(--c-text-muted); }
.mini-card--item { background: var(--c-ground); }
.mini-card--item .media { height: 190px; }
.mini-card--item .mini-card__name { font: 600 var(--t-body)/1.3 var(--f-body); }
.mini-card__downloads { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 16px; }
.mini-card__downloads a { padding: 6px 12px; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); font: 400 12px var(--f-mono); }
.price { font-weight: 600; color: var(--c-accent); white-space: nowrap; }
/* Precio con promoción (parcial promo-price): el precio vigente en acento, el anterior tachado. */
.vitrina .promo-price { display: grid; gap: 4px; justify-items: end; text-align: right; }
.vitrina .promo-price__amounts { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 8px; }
.vitrina .promo-price__current { color: var(--c-accent); font: 600 var(--t-body) var(--f-body); letter-spacing: 0; white-space: nowrap; }
.vitrina .promo-price.is-free .promo-price__current { color: var(--c-accent); }
.vitrina .promo-price__base { color: var(--c-text-muted); font: 400 var(--t-small) var(--f-body); white-space: nowrap; }
.vitrina .promo-price__badge { padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-on-accent); font: 400 11px var(--f-mono); letter-spacing: 0; }
.vitrina .promo-price--detail { justify-items: start; text-align: left; }
.vitrina .promo-price--detail .promo-price__amounts { justify-content: flex-start; gap: 14px; }
.vitrina .promo-price--detail .promo-price__current { font: 700 32px var(--f-display); }
.vitrina .promo-price--detail .promo-price__base { font: 400 18px var(--f-body); }
.vitrina .promo-price__saving { color: var(--c-text-muted); font: 400 var(--t-small) var(--f-body); letter-spacing: 0; text-transform: none; }
.vitrina .pack-hero__buy .promo-price--detail .promo-price__current { font-size: 40px; }
.vitrina .pack-card__body .promo-price, .vitrina .pack-card__body .promo-price__amounts { justify-items: start; justify-content: flex-start; text-align: left; }

/* ---------- Banda y tarjeta de pack ---------- */
.band { background: var(--c-ground-alt); border-block: 1px solid var(--c-line); }
.grid-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-gap); }
.pack-card { background: var(--c-ground); border: 1px solid var(--c-line); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; }
.vitrina .pack-card:hover { border-color: var(--c-accent); color: inherit; }
.pack-card > .media { height: 200px; width: 100%; }
.pack-card__body { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.pack-card__name { margin: 0; font: 700 22px/1.2 var(--f-display); }
.pack-list a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 16px 0; border-top: 1px solid var(--c-line); font-weight: 500; }

/* ---------- Pasos "Del archivo a tu mesa" ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.step { border-top: 2px solid var(--c-accent); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.step__n { font: 400 var(--t-mono) var(--f-mono); color: var(--c-accent); }
.step__t { margin: 0; font-weight: 600; font-size: 19px; }
.step p { margin: 0; color: var(--c-text-soft); }
.vitrina .step a { color: var(--c-accent); text-decoration: underline; }

/* ---------- Bloques en papel (puente a la Biblioteca) ---------- */
.paper { background: var(--c-paper); color: var(--c-ink); }
.paper .eyebrow { color: var(--c-ink-muted); }
.vitrina .paper a:not(.btn):hover { color: var(--c-ink-link); }
.library-banner { border-radius: var(--r-hero); padding: clamp(24px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.library-banner > div { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.library-banner p { margin: 0; color: var(--c-ink-soft); }
.library-banner--story { justify-content: flex-start; }
.library-banner--story > .library-banner__cover { flex: 0 1 160px; height: 220px; border-radius: 8px; overflow: hidden; background: #DDD7C4; color: #4A4C40; }
.library-banner--story > .library-banner__cover img { width: 100%; height: 100%; object-fit: cover; }
.library-banner--story > div:last-child { flex: 999 1 380px; align-items: flex-start; }
.library-banner .quote { color: var(--c-ink); }
.section-bottom { padding-bottom: 80px; }
.section-top { padding-top: 56px; }
.quote { margin: 0; font: 500 clamp(20px, 2.2vw, 26px)/1.35 var(--f-display); }
.story-strip { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: flex-start; }
.story-strip > :first-child { flex: 0 1 220px; }
.story-strip > :last-child { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }

/* ---------- Ficha de mini ---------- */
.crumbs { padding-top: 24px; font-size: var(--t-small); color: var(--c-text-muted); display: flex; flex-wrap: wrap; gap: 8px; }
.vitrina .crumbs a { text-decoration: underline; }
.crumbs [aria-current] { color: var(--c-text); }
.product { padding-block: 28px 72px; display: flex; flex-wrap: wrap; gap: 48px; }
.product__gallery { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.product__stage { position: relative; height: 560px; width: 100%; border-radius: var(--r-hero); border: 1px solid var(--c-line); }
.product__stage > canvas { cursor: ew-resize; touch-action: pan-y; }
.product__stage--placeholder { flex-direction: column; gap: 8px; color: var(--c-text-muted); font: 400 13px var(--f-mono); }
.product__stage-hint { position: absolute; left: 16px; bottom: 16px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(16, 18, 15, .85); color: var(--c-text-muted); font: 400 12px var(--f-mono); }
.product__stage-controls { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; }
.product__stage-controls button { width: 44px; height: 44px; border: 1px solid var(--c-line-strong); border-radius: 50%; background: rgba(16, 18, 15, .85); color: var(--c-text); cursor: pointer; }
.product__stage-controls button:hover { border-color: var(--c-accent); color: var(--c-accent); }
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.thumbs > button { height: 110px; padding: 0; border-radius: 10px; border: 2px solid transparent; cursor: pointer; }
.thumbs > button[aria-pressed="true"] { border-color: var(--c-accent); }
.product__info { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.product__description { margin: 0; color: var(--c-text-soft); max-width: 560px; }
.product__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; }
.product__saving { color: var(--c-text-muted); font-size: var(--t-small); }
.product__downloads { align-self: stretch; display: flex; flex-direction: column; gap: 10px; }
.product__downloads p { margin: 0; color: var(--c-text-muted); font-size: var(--t-small); }
.upsell { align-self: stretch; border: 1px solid var(--c-line-strong); border-radius: 14px; padding: 16px 20px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.upsell strong { display: block; font-weight: 600; }
.upsell span span { color: var(--c-text-muted); font-size: 15px; }
.specs { margin: 8px 0 0; align-self: stretch; display: grid; grid-template-columns: auto 1fr; gap: 0 24px; }
.specs dt, .specs dd { margin: 0; padding: 12px 0; border-top: 1px solid var(--c-line); }
.specs dt { color: var(--c-text-muted); }
.vitrina .specs a { color: var(--c-accent); text-decoration: underline; }
.specs__license { display: flex; flex-direction: column; gap: 6px; }
.specs__license p { margin: 0; color: var(--c-text-muted); font-size: var(--t-small); }
.status-line { min-height: 1.5em; margin: 0; color: var(--c-text-soft); font-size: var(--t-small); }
.notice { margin: 0; padding: 12px 16px; border-left: 2px solid var(--c-accent); background: rgba(201, 214, 107, .08); color: var(--c-text-soft); font-size: var(--t-small); }
.pack-policy { align-self: stretch; margin: 0; color: var(--c-text-muted); font-size: var(--t-small); }
.pack-policy strong { color: var(--c-text-soft); font-weight: 600; }

/* ---------- Página de pack ---------- */
.pack-hero { padding-block: 48px 64px; display: flex; flex-direction: column; gap: 36px; }
.pack-hero__media { height: 420px; width: 100%; border-radius: var(--r-hero); border: 1px solid var(--c-line); }
.pack-hero__row { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: flex-end; justify-content: space-between; }
.pack-hero__row > :first-child { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pack-hero__buy { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pack-hero__formats { font-size: 13px; }
.h2--compact { font-size: clamp(28px, 3vw, 36px); }
.h3--compact { font-size: 28px; }
.stack--tight { gap: 20px; }

/* ---------- Catálogo ---------- */
.catalog-head { padding-block: 48px 24px; display: flex; flex-direction: column; gap: 24px; }
.catalog-body { padding-bottom: 80px; gap: 32px; }
.search { width: 100%; min-height: 48px; padding: 0 20px; border: 1px solid var(--c-line-input); border-radius: var(--r-pill); background: var(--c-surface); font: 400 16px var(--f-body); color: var(--c-text); }
.search::placeholder { color: var(--c-text-muted); }
.filters { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--c-line); padding-top: 20px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; color: var(--c-text-muted); font-size: var(--t-small); }
.toolbar p { margin: 0; }
.toolbar label { margin-right: 8px; }
.select { min-height: 44px; padding: 0 12px; border: 1px solid var(--c-line-input); border-radius: 8px; background: var(--c-surface); font: 400 15px var(--f-body); color: var(--c-text); }
.empty-state { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 40px 0; }
.empty-state p { margin: 0; color: var(--c-text-soft); }

/* ---------- Biblioteca (página en papel) ---------- */
body.vitrina.theme-paper { background: var(--c-paper); color: var(--c-ink); }
.theme-paper .lead { color: var(--c-ink-soft); }
.theme-paper main .eyebrow { color: var(--c-ink-muted); }
.vitrina.theme-paper main a:not(.btn):hover { color: var(--c-ink-link); }
.theme-paper .chip { color: var(--c-ink); border-color: var(--c-ink); }
.theme-paper .chip[aria-pressed="true"] { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.theme-paper :focus-visible { outline-color: var(--c-ink-link); }
.library-head { padding-block: 72px 40px; gap: 20px; }
.library-list { padding-bottom: 72px; }
.story { border-top: 1px solid var(--c-ink); padding: 40px 0; display: flex; flex-wrap: wrap; gap: 40px; }
.story__cover { flex: 0 1 240px; height: 340px; border-radius: 8px; overflow: hidden; background: #DDD7C4; display: flex; align-items: center; justify-content: center; color: var(--c-ink-muted); font: 700 96px var(--f-display); }
.story__cover img { width: 100%; height: 100%; object-fit: cover; }
.story__body { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.story__body p { margin: 0; font-size: 18px; color: var(--c-ink-soft); max-width: 640px; }
.story__body h2 a:hover { color: var(--c-ink-link); }
.vitrina .story__minis { margin-top: 10px; font-size: 15px; color: var(--c-ink-link); text-decoration: underline; }
.cta-dark { background: var(--c-ground); color: var(--c-text); }
.cta-dark .wrap { padding-block: 56px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.cta-dark .lead { color: var(--c-text-soft); margin-top: 8px; }

/* ---------- Pie ---------- */
.vitrina-footer { border-top: 1px solid var(--c-line); background: var(--c-ground); color: var(--c-text-muted); font-size: var(--t-small); }
.vitrina-footer .wrap { padding-block: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.vitrina-footer nav { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.vitrina-footer button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.vitrina-footer button:hover { color: var(--c-accent); }

/* ---------- Piezas de la tienda dentro de la vitrina ---------- */
.vitrina .store-cart-panel { background: var(--c-ground-alt); border-left-color: var(--c-line); font-family: var(--f-body); }
.vitrina .store-cart-panel h2 { font: 700 32px/1.1 var(--f-display); }
.vitrina .store-cart-panel .store-eyebrow { margin: 0 0 6px; color: var(--c-accent); font: 400 var(--t-mono) var(--f-mono); text-transform: uppercase; }
.vitrina .store-cart-panel__header button { border-radius: 50%; color: var(--c-text); }
.vitrina .store-cart-panel .store-button { border-radius: var(--r-pill); }
.vitrina .store-cart-panel .store-button--light { background: var(--c-accent); color: var(--c-on-accent); }
.vitrina .store-cart-panel .store-button--light span { color: var(--c-on-accent); }
.vitrina .store-cart-panel a { color: var(--c-text); }
.vitrina .store-cart-panel .store-digital-consent a { color: var(--c-accent); text-decoration: underline; }
.vitrina .license-mark { color: var(--c-text); }

@media (max-width: 640px) {
  :root { --s-section: 56px; }
  .hero { padding-block: 40px 48px; gap: 32px; }
  .hero__stage { height: 360px; padding: 16px; }
  .hero__card { position: static; margin-top: 12px; }
  .product__stage { height: 380px; }
  .thumbs > button { height: 76px; }
  .pack-hero__media { height: 260px; }
  .chips__label { width: 100%; }
  .filter-select--sort { margin-left: 0; }
  .filter-bar > * { max-width: 100%; }
  .vitrina-header .wrap { padding-block: 8px; }
  .nav { gap: 0 20px; }
}

@media (prefers-reduced-motion: no-preference) {
  .mini-card, .pack-card, .chip, .btn { transition: border-color .15s, background-color .15s, color .15s, filter .15s; }
}

/* ---------- Carrito y aviso de cookies con la identidad de la vitrina ---------- */
.vitrina .store-cart-panel :is(a, p, span, small, strong, label, button, li) { font-family: var(--f-body); letter-spacing: 0; }
.vitrina .store-cart-panel :is(small, .store-cart__item-copy small) { color: var(--c-text-muted); font: 400 12px var(--f-mono); text-transform: uppercase; }
.vitrina .store-cart-panel .store-cart__item-copy a { font: 600 18px/1.3 var(--f-display); }
.vitrina .store-cart-panel .store-cart__summary strong { font: 700 28px var(--f-display); color: var(--c-accent); }
.vitrina .store-cart-panel [data-cart-remove] { text-transform: none; color: var(--c-text-muted); }
.vitrina .store-cart-panel .store-button { text-transform: none; font-weight: 600; }
.vitrina :is(.cookie-consent, .cookie-settings) { --cookie-bg: var(--c-ground-alt); --cookie-panel: var(--c-surface); --cookie-paper: var(--c-text); --cookie-muted: var(--c-text-muted); --cookie-brass: var(--c-accent); --cookie-line: var(--c-line-strong); font-family: var(--f-body); }
.vitrina :is(.cookie-consent, .cookie-settings) h2 { font: 700 clamp(24px, 3vw, 32px)/1.1 var(--f-display); }
.vitrina .cookie-consent__eyebrow { font: 400 var(--t-mono) var(--f-mono); letter-spacing: .04em; }
/* Aceptar y Rechazar mantienen el mismo peso visual, como exige el aviso. */
.vitrina :is(.cookie-consent, .cookie-settings) button { border-radius: var(--r-pill); font-family: var(--f-body); font-weight: 600; letter-spacing: 0; text-transform: none; }
.vitrina .vitrina-footer .cookie-preferences-link { font: inherit; color: inherit; }

/* ---------- Puente: páginas editoriales, legales y de cuenta ----------
   Su maquetación sigue en styles.css, full-site.css, legal.css y store.css; aquí
   se reasignan sus tokens a la vitrina para que toda la web hable igual. */
body.vitrina:is(.public-site, .store-site) {
  --site-bg: var(--c-ground); --site-surface: var(--c-surface); --site-raised: var(--c-ground-alt);
  --site-gold: var(--c-accent); --site-text: var(--c-text); --site-muted: var(--c-text-muted); --site-line: var(--c-line);
  --ink: var(--c-ground); --ink-soft: var(--c-surface); --forest: var(--c-ground-alt); --forest-light: var(--c-line-strong);
  --paper: var(--c-text); --paper-light: var(--c-paper-surface); --paper-deep: var(--c-paper-line);
  --brass: var(--c-accent); --brass-light: var(--c-accent); --moss: var(--c-text-muted); --rust: var(--c-accent);
  --line-dark: var(--c-line); --line-light: var(--c-paper-line);
  --store-ink: var(--c-ground); --store-ink-soft: var(--c-surface); --store-forest: var(--c-ground-alt);
  --store-paper: var(--c-text); --store-paper-dim: var(--c-text-soft);
  --store-brass: var(--c-accent); --store-brass-light: var(--c-accent); --store-rust: var(--c-accent); --store-moss: var(--c-text-muted);
  --store-line: var(--c-line); --store-serif: var(--f-display); --store-sans: var(--f-body);
  --serif: var(--f-display); --sans: var(--f-body); --font-sans: var(--f-body);
  background: var(--c-ground); color: var(--c-text); font: 400 var(--t-body)/1.6 var(--f-body);
}
.vitrina:is(.public-site, .store-site) :is(h1, h2, h3, h4) { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.01em; }
.vitrina:is(.public-site, .store-site) :is(h1, h2, h3, h4) em { font-style: normal !important; font-weight: inherit !important; color: inherit !important; }
.vitrina:is(.public-site, .store-site) em { color: inherit; }
.vitrina:is(.public-site, .store-site) :is(.eyebrow, .store-eyebrow) { font: 400 var(--t-mono)/1.4 var(--f-mono); color: var(--c-accent); letter-spacing: 0.04em; text-transform: uppercase; }
.vitrina:is(.public-site, .store-site) :is(.button, .store-button) { min-height: 48px; padding: 12px 24px; border-radius: var(--r-pill); font: 600 var(--t-body)/1.25 var(--f-body); letter-spacing: 0; text-transform: none; }
.vitrina:is(.public-site, .store-site) :is(.button--light, .button--ink, .button--primary, .store-button--primary, .store-button--light) { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.vitrina:is(.public-site, .store-site) :is(.button--light, .button--ink, .button--primary, .store-button--primary, .store-button--light) :is(span, i) { color: inherit; }
.vitrina:is(.public-site, .store-site) :is(.button--ghost, .store-button:not(.store-button--primary):not(.store-button--light)) { border: 1px solid var(--c-line-strong); background: transparent; color: var(--c-text); }
:where(.vitrina:is(.public-site, .store-site)) :where(input, textarea, select):not([type="checkbox"]):not([type="radio"]) { border-radius: 8px; font-family: var(--f-body); }
.vitrina:is(.public-site, .store-site) ::selection { background: var(--c-accent); color: var(--c-on-accent); }
/* Cabeceras de página y párrafos de las páginas editoriales con la escala de la vitrina. */
.vitrina.public-site .site-page-heading { padding-top: 72px; }
.vitrina.public-site .site-page-heading h1 { font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.02em; }
.vitrina.public-site .site-page-heading > p:not(.eyebrow) { font-size: var(--t-lead); color: var(--c-text-soft); }
.vitrina.public-site :is(.manifesto-copy, .process-item, .site-criteria-grid article, .partnership-copy, .story-content, .review-content, .method-note, .detail-main) p:not(.eyebrow) { font-size: var(--t-body); line-height: 1.6; }
.vitrina.public-site .partnership-formats span { border-radius: var(--r-pill); font: 400 12px var(--f-mono); }
.vitrina.public-site .form-heading span { font: 700 28px/1.15 var(--f-display); }
/* Páginas legales: tablas y código legibles sobre fondo oscuro. */
body.vitrina.legal-page { --line-light: var(--c-line); }
.vitrina.legal-page .legal-table span { color: var(--c-text-soft); font-family: var(--f-body); font-size: var(--t-small); }
.vitrina.legal-page .legal-table .legal-table-head { background: var(--c-ground-alt); }
.vitrina.legal-page .legal-table-head span { color: var(--c-text-muted); font: 400 12px var(--f-mono); letter-spacing: .04em; }
.vitrina.legal-page .legal-section code { background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-line); border-radius: 4px; font-family: var(--f-mono); }
.vitrina.legal-page .legal-hero h1 { font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.02em; }
.vitrina.legal-page :is(.legal-hero > p:not(.eyebrow), .legal-section p, .legal-section li, .legal-section address, .legal-summary dd, .legal-callout p) { font-family: var(--f-body); }
.vitrina.store-site :is(.site-format-grid article, .site-faq details, .store-auth, .store-account-hero, .store-empty-state) p:not(.store-eyebrow) { font-size: var(--t-body); line-height: 1.6; }

/* Página de historia: menú de secciones fijo bajo el borde superior (la cabecera ya no es fija). */
.vitrina.campaign-design .detail-main > .campaign-anchors { top: 0; gap: 28px; background: var(--c-ground-alt); border-bottom: 1px solid var(--c-line); }
.vitrina.campaign-design .campaign-anchors a { min-height: 56px; border-bottom: 2px solid transparent; color: var(--c-text-muted); font: 500 15px var(--f-body); }
.vitrina.campaign-design .campaign-anchors a:is(:hover, :focus-visible, [aria-current="true"]) { color: var(--c-text); border-bottom-color: var(--c-accent); }
.vitrina.campaign-design .detail-main [id] { scroll-margin-top: 72px; }
.vitrina .md-audio .md-kicker { font: 400 var(--t-mono)/1.4 var(--f-mono); letter-spacing: .04em; color: var(--c-accent); }
.vitrina .md-audio .md-kicker::before { background: var(--c-accent); }
.vitrina.campaign-design .story-library__format-actions :is(a, button) { border-radius: var(--r-pill); font: 600 var(--t-small)/1.25 var(--f-body); }
.vitrina.campaign-design .detail-main :is(h1, h2, h3) { font-weight: 700; letter-spacing: -0.01em; }
.vitrina :is(.mini-card, .pack-card) .promo-price.is-free .promo-price__badge { display: none; }
.vitrina :is(.search, .filter-select select) { border-radius: var(--r-pill); }
/* Sobre papel, los antetítulos van en tinta: el liquen no contrasta con el fondo claro. */
.vitrina :is(.paper, .theme-paper main) :is(.eyebrow, .store-eyebrow) { color: var(--c-ink-muted); }
/* Enlaces de salto (visibles al navegar con teclado): tinta sobre liquen. */
.vitrina :is(.vitrina-skip, .skip-link, .store-skip-link) { background: var(--c-accent); color: var(--c-on-accent); }
/* Recuadros de las páginas legales: superficie oscura, no papel, bajo texto claro. */
body.vitrina.legal-page { --paper-light: var(--c-surface); }
.vitrina.legal-page .legal-crosslinks span { color: var(--c-text-muted); }
.vitrina.legal-page .legal-crosslinks a { color: var(--c-text); }