/* ==========================================================
   EDVAL — capa de personalización sobre DaisyUI v4 + Tailwind v3
   Todo lo que no puede expresarse con clases nativas va aquí.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Tokens CSS (usados por JS inline styles y componentes custom) ── */
:root {
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --ink:          #1C2024;
  --slate:        #5C6F80;
  --canvas:       #F9F9FB;
  --surface:      #ffffff;
  --hairline:     #F0F0F3;
  --hairline-2:   #E6E6EA;
  --brand:        #081462;
  --brand-link:   #1557B5;
  --brand-link-2: #0038A1;
  --info-fill:    #DBF4FF;
  --info-stroke:  #CDF1FF;
  --success:      #166534;   /* verde 800: 7.43:1 sobre blanco — WCAG AAA */
  --warning:      #7C2D12;   /* naranja 900: 8.87:1 sobre blanco — WCAG AAA */
  --danger:       #B91C1C;   /* rojo 700: 5.94:1 sobre blanco — WCAG AA */
  --slate-strong: #3F4D5B;   /* slate más oscuro: 8.61:1 sobre blanco y 7.49:1 sobre --hairline — WCAG AAA */
  --t-corpus:     #1D4ED8;   --t-corpus-bg:  #EFF6FF;
  --t-lexical:    #15803D;   --t-lexical-bg: #F0FDF4;
  --t-model:      #C2410C;   --t-model-bg:   #FFF7ED;
  --t-tool:       #7E22CE;   --t-tool-bg:    #FAF5FF;
  --dur:          150ms;
  --ease-out:     cubic-bezier(.22, 1, .36, 1);
  /* Padding horizontal global de página — un solo sitio para tunearlo */
  --page-px:      40px;
  /* Ancho máximo del contenedor — las fichas lo reducen a 1180 */
  --container-max: 1340px;
}

/* Páginas de ficha (detalle): contenedor más estrecho */
body[data-screen-label*="Ficha"] { --container-max: 1180px; }

/* ── Tema DaisyUI v4: mapeo oklch (L% C H) ── */
[data-theme="edval"] {
  color-scheme: light;
  --p:   18.1% .147 267;   --pf:  15%   .12  267;   --pc:  100% 0   0;
  --s:   45.9% .168 253;   --sf:  38%   .168 253;   --sc:  100% 0   0;
  --a:   55%   .22  295;   --af:  48%   .22  295;   --ac:  100% 0   0;
  --n:   47.6% .038 231;   --nf:  40%   .038 231;   --nc:  100% 0   0;
  --b1:  100%  0    0;
  --b2:  97.8% .002 247;
  --b3:  95.2% .003 247;
  --bc:  18.2% .007 246;
  --in:  94%   .042 225;   --inc: 30%   .17  263;
  --su:  53.8% .148 165;   --suc: 100% 0    0;
  --wa:  60.6% .149 50;    --wac: 100% 0    0;
  --er:  49.9% .178 25;    --erc: 100% 0    0;
  --rounded-btn:   .25rem;
  --rounded-box:   1rem;
  --rounded-badge: 9999px;
  --btn-text-case: none;
  --border-btn:    1px;
  --tab-border:    1px;
  --tab-radius:    .25rem;
  --animation-btn: .15s;
}

/* ── Base ── */
body { font-family: var(--font-sans); background: var(--canvas); -webkit-font-smoothing: antialiased; }
code { font-family: var(--font-mono); font-size: .9em; background: var(--hairline); padding: 1px 6px; border-radius: 2px; color: var(--ink); }

/* ── Colores categoriales (corpus / léxico / modelo / herramienta) ── */
.b-corpus,  .t-corpus  { background: #DBEAFE !important; border-color: #BFDBFE !important; color: #1E40AF !important; }
.b-lexical, .t-lexical { background: #DCFCE7 !important; border-color: #BBF7D0 !important; color: #14532D !important; }
.b-model,   .t-model   { background: #FFEDD5 !important; border-color: #FED7AA !important; color: #7C2D12 !important; }
.b-tool,    .t-tool    { background: #F3E8FF !important; border-color: #E9D5FF !important; color: #6B21A8 !important; }

/* ── ISO pill (código de idioma, monoespacio) ── */
.iso-pill2 {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; min-width: 32px; padding: 0 6px;
  background: var(--brand); color: #fff;
  border-radius: 4px;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .04em;
}

/* ── Pildora de estado (protección de datos) — no usa DaisyUI badge ── */
.pill {
  display: inline-flex; align-items: center; flex-shrink: 0;
  height: 22px; padding: 0 10px;
  background: var(--ink); color: #fff;
  border-radius: 9999px;
  font: 600 11px/1 var(--font-sans);
}
.pill.unknown { background: var(--slate-strong); }

/* ── Cat-pill (categorías y bloques de protección) ── */
.cat-pill {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px;
  border: 1px solid var(--hairline-2); border-radius: 9999px;
  font: 500 12px/1 var(--font-sans); color: var(--ink);
}

/* ── Título principal del buscador ── */
.cat-h1 { font: 700 24px/32px var(--font-sans); color: var(--brand); margin: 0 0 20px; }

/* ── Breadcrumbs (DaisyUI .breadcrumbs) ── */
.breadcrumbs a { color: var(--brand-link); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; color: var(--brand-link-2); }

/* ── Variety filter items (generados por shared.js) ── */
.variety-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 10px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--hairline-2); background: var(--canvas);
  transition: border-color var(--dur);
}
.variety-item:hover { border-color: var(--slate); }
.variety-item.active { background: var(--info-fill); border-color: var(--info-stroke); color: var(--brand-link-2); }
.variety-item .code { font: 600 11px/14px var(--font-mono); color: var(--brand-link-2); display: block; }
.variety-item .name { font: 400 11px/14px var(--font-sans); color: var(--slate-strong); display: block; }
.variety-item .count { font: 600 11px/1 var(--font-sans); color: var(--slate-strong); flex: none; }

/* ==========================================================
   PÁGINA BUSCADOR
   ========================================================== */

.cat-page-shell { max-width: 1180px; margin: 24px auto 64px; padding: 0 24px; }

.cat-panel {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 32px 40px 48px;
}

.cat-stats-row {
  display: flex; gap: 28px; align-items: center;
  font: 400 13px/20px var(--font-sans); color: var(--slate-strong);
  margin: 0 0 12px;
}
.cat-stats-row b { color: var(--ink); font-weight: 700; }
.cat-stats-row .sep { color: var(--hairline-2); }

/* ── Barra de filtros sticky ── */
.filters-sticky-wrap {
  position: sticky; top: 0; z-index: 30;
  background: #fff; padding-bottom: 4px;
  box-shadow: 0 4px 8px -4px rgba(8,20,98,.07);
}

/* ── Banner de filtros ── */
.filters-banner {
  background: var(--info-fill);
  border: 1px solid var(--info-stroke);
  border-radius: 8px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px;
}
.filters-banner .label { font: 600 14px/1 var(--font-sans); color: var(--ink); }
.filters-banner .add-filter {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  background: #fff; border: 1px dashed var(--brand-link-2);
  border-radius: 4px;
  font: 600 13px/1 var(--font-sans); color: var(--brand-link-2);
  cursor: pointer;
}
.filters-banner .add-filter:hover { border-style: solid; }
.filters-banner .type-pills { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Type pills (selección exclusiva) ── */
.type-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  background: #fff; border: 1px solid var(--hairline-2);
  border-radius: 9999px;
  font: 600 13px/1 var(--font-sans); color: var(--ink);
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur);
}
.type-pill:hover { border-color: var(--slate); }
.type-pill.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.type-pill .swatch { width: 8px; height: 8px; border-radius: 9999px; }
.type-pill .count { color: var(--slate-strong); font-weight: 500; }
.type-pill.active .count { color: rgba(255,255,255,.75); }

/* ── Cajón de filtros avanzados ── */
.adv-drawer {
  background: #fff; border: 1px solid var(--hairline-2);
  border-radius: 8px; padding: 20px 24px;
  margin: 0 0 16px; display: none;
}
.adv-drawer.open { display: block; }
.adv-drawer .row {
  display: grid; grid-template-columns: 160px 1fr;
  gap: 16px; padding: 12px 0;
  border-top: 1px solid var(--hairline);
}
.adv-drawer .row:first-child { border-top: 0; padding-top: 4px; }
.adv-drawer .row .lbl { font: 600 13px/20px var(--font-sans); color: var(--ink); padding-top: 4px; }
.adv-drawer .row .lbl small { display: block; color: var(--slate-strong); font-weight: 400; font-size: 11px; line-height: 14px; margin-top: 2px; }
.adv-drawer .row .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.varieties-note { margin-top: 10px; padding: 8px 10px; background: var(--canvas); border-left: 2px solid var(--info-stroke); font: 400 12px/16px var(--font-sans); color: var(--slate-strong); }
.varieties-note strong { color: var(--ink); font-weight: 600; }

/* ── Opt-chips (filtros de faceta) ── */
.opt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  background: var(--canvas); border: 1px solid var(--hairline-2);
  border-radius: 9999px;
  font: 500 12px/1 var(--font-sans); color: var(--ink);
  cursor: pointer;
}
.opt-chip:hover { border-color: var(--slate); }
.opt-chip.active { background: var(--brand-link); border-color: var(--brand-link); color: #fff; }
.opt-chip code { font: 600 11px/1 var(--font-mono); color: var(--brand-link-2); background: #fff; padding: 1px 5px; border-radius: 3px; }
.opt-chip.active code { color: var(--brand); background: rgba(255,255,255,.92); }
.opt-chip .num { color: var(--slate-strong); font-weight: 400; }
.opt-chip.active .num { color: rgba(255,255,255,.7); }

/* ── Barra de búsqueda (toolbar) ── */
.cat-toolbar { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; }
.cat-toolbar .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cat-toolbar .right .lbl { font: 600 12px/1 var(--font-sans); color: var(--slate-strong); text-transform: uppercase; letter-spacing: .04em; }

/* ── Grid de ofertas ── */
.offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 28px; }

.offer-card {
  background: #fff; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(8,20,98,.04);
  border: 1px solid var(--hairline);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform var(--dur), box-shadow var(--dur);
  cursor: pointer; position: relative;
}
.offer-card:hover {
  box-shadow: 0 4px 12px rgba(8,20,98,.06), 0 8px 24px rgba(8,20,98,.08);
  transform: translateY(-2px);
}
.offer-card .owner { display: flex; align-items: center; gap: 8px; color: var(--ink); font: 400 13px/20px var(--font-sans); }
.offer-card .owner svg { width: 14px; height: 14px; color: var(--slate); flex: none; }
.offer-card .title { font: 700 18px/24px var(--font-sans); color: var(--brand); margin: 0; }
.offer-card:hover .title { text-decoration: underline; }
.offer-card .meta-row { display: flex; align-items: center; gap: 10px; }
.offer-card .type-badge2 {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px;
  border-radius: 9999px; font: 600 12px/1 var(--font-sans);
  border: 1px solid transparent;
}
.offer-card .date { color: var(--slate-strong); font: 400 13px/1 var(--font-sans); }
.offer-card .desc { font: 400 14px/20px var(--font-sans); color: var(--ink); margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.offer-card .tags-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; }
.offer-card .tag2 { font: 500 11px/1 var(--font-sans); color: var(--slate-strong); background: var(--canvas); border: 1px solid var(--hairline-2); border-radius: 4px; padding: 4px 8px; }
.offer-card .policy-line { background: var(--canvas); border-radius: 6px; padding: 10px 12px; font: 400 13px/18px var(--font-sans); color: var(--ink); }
.offer-card .policy-line b { font-weight: 700; }
.offer-card .actions {
  display: flex !important; flex-direction: row !important;
  justify-content: space-between !important; align-items: center !important;
  gap: 12px; padding-top: 12px; border-top: 1px solid var(--hairline);
}
.offer-card .price { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--font-sans); }
.offer-card .price.free { color: var(--success); }
.offer-card .price.paid { color: var(--warning); }
.offer-card .price svg { width: 16px; height: 16px; }

/* ── Paginación ── */
.cat-pag { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.cat-pag .pg-grp { display: inline-flex; align-items: stretch; border: 1px solid var(--hairline-2); border-radius: 4px; overflow: hidden; }
.cat-pag .pg-grp button { background: #fff; border: 0; padding: 0 12px; height: 36px; font: 600 14px/1 var(--font-sans); color: var(--ink); cursor: pointer; }
.cat-pag .pg-grp button:hover { background: var(--canvas); }
.cat-pag .pg-grp .cur { padding: 0 16px; font: 400 13px/1 var(--font-sans); color: var(--ink); display: inline-flex; align-items: center; border-inline: 1px solid var(--hairline-2); background: #fff; }

/* ==========================================================
   FICHAS DE DETALLE
   ========================================================== */

.ficha-shell { max-width: var(--container-max); margin: 0 auto; padding: 24px var(--page-px); }

/* ── Hero (banda full-bleed navy) ── */
.ficha-hero-band {
  background: linear-gradient(108deg, var(--brand) 0%, var(--brand-link) 100%);
  color: #fff;
}
.ficha-hero {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 20px var(--page-px) 32px;
  background: transparent;
  border: none;
  border-radius: 0;
  position: relative;
  color: #fff;
}
.ficha-hero .top-bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 50px; }
.ficha-hero h1 { font: 700 40px/1.15 var(--font-sans); color: #fff; margin: 0 0 8px; letter-spacing: -.01em; padding-right: 220px; }
.ficha-hero .ficha-alt-title { font: 400 15px/22px var(--font-sans); color: rgba(255,255,255,.78); margin: 0 0 18px; padding-right: 220px; }
.ficha-hero .ficha-alt-title code { font: 400 10px/14px var(--font-mono); color: rgba(255,255,255,.6); background: transparent; padding: 0; margin-left: 6px; }
.ficha-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font: 400 14px/1 var(--font-sans); color: rgba(255,255,255,.85); }
.ficha-meta-row .owner { display: inline-flex; align-items: center; gap: 8px; }
.ficha-meta-row .owner svg { width: 14px; height: 14px; color: rgba(255,255,255,.7); }
/* Breadcrumbs sobre fondo oscuro */
.ficha-hero .breadcrumbs { color: rgba(255,255,255,.78); padding-top: 0; }
.ficha-hero .breadcrumbs a { color: rgba(255,255,255,.78); }
.ficha-hero .breadcrumbs a:hover { color: #fff; }
.ficha-hero .breadcrumbs li > *:not(a) { color: #fff; }
.ficha-hero .breadcrumbs li > a,
.ficha-hero .breadcrumbs li > span,
.ficha-hero .breadcrumbs li { white-space: nowrap; }
.ficha-hero .right-actions { position: absolute; top: 22px; right: var(--page-px); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ficha-hero .ver-cat-link { display: none; }

/* ── Grid main + sidebar ── */
.ficha-grid {
  display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 28px;
  background: #fff; border: 1px solid var(--hairline);
  border-radius: 16px; padding: 32px 36px 48px;
}
.ficha-grid > .main { min-width: 0; }
.ficha-grid > .side { display: flex; flex-direction: column; gap: 16px; }

/* ── Secciones de la columna principal ── */
.fsec { padding-top: 24px; padding-bottom: 8px; border-top: 1px solid var(--hairline); }
.fsec:first-child { border-top: 0; padding-top: 8px; }
.fsec h2 { font: 700 16px/24px var(--font-sans); color: var(--ink); margin: 0 0 12px; }
.fsec h2 code { font: 400 11px/16px var(--font-mono); color: var(--slate-strong); background: var(--canvas); padding: 1px 6px; border-radius: 3px; margin-left: 8px; }
.fsec p { font: 400 14px/22px var(--font-sans); color: var(--ink); margin: 0 0 12px; }
.fsec p:last-child { margin-bottom: 0; }

/* ── Variedades lingüísticas ── */
.var-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
.var-card { padding: 14px 0; border-top: 1px solid var(--hairline); }
.var-card:nth-child(-n+2) { border-top: 0; padding-top: 4px; }
.var-card .lbl { font: 400 12px/16px var(--font-sans); color: var(--slate-strong); margin-bottom: 4px; }
.var-card .region { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/20px var(--font-sans); color: var(--ink); }
.var-card .flag { width: 20px; height: 14px; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; background: var(--hairline); }
.var-card .flag svg { width: 100%; height: 100%; display: block; }
.var-card .variety-link { display: block; font: 600 14px/20px var(--font-sans); color: var(--brand-link-2); text-decoration: none; margin-top: 6px; }
.var-card .variety-link:hover { text-decoration: underline; }

/* ── Categorías (cat-box / cat-block) ── */
.cat-box { border: 1px solid var(--hairline-2); border-radius: 8px; padding: 4px 20px; }
.cat-block { padding: 16px 0; border-top: 1px solid var(--hairline); }
.cat-block:first-child { border-top: 0; }
.cat-block .cat-h { font: 600 13px/20px var(--font-sans); color: var(--brand-link-2); margin: 0 0 10px; }
.cat-block .cat-h code { font: 400 11px/16px var(--font-mono); color: var(--slate-strong); background: transparent; padding: 0; margin-left: 6px; }
.cat-pills { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Protección de datos ── */
.prot-row { padding: 16px 0; border-top: 1px solid var(--hairline); }
.prot-row:first-child { border-top: 0; padding-top: 4px; }
.prot-row .prot-head { display: flex; align-items: center; gap: 10px; font: 400 14px/22px var(--font-sans); color: var(--ink); margin-bottom: 8px; }
.prot-row .prot-head code { font: 400 10px/1 var(--font-mono); color: var(--slate-strong); background: none; padding: 0; margin-left: 4px; }
.prot-row .prot-body { font: 400 14px/22px var(--font-sans); color: var(--ink); }

/* ── Anotaciones en cite-head y en ident-box ── */
.cite-card .cite-head .label code { font: 400 11px/1 var(--font-mono); color: var(--slate-strong); background: none; padding: 0; margin-left: 4px; }
.cite-card .ident-box .key code   { font: 400 11px/1 var(--font-mono); color: var(--slate-strong); background: none; padding: 0; margin-left: 6px; }
.cite-card .ident-box .lbl code   { font: 400 10px/1 var(--font-mono); color: var(--slate-strong); background: none; padding: 0; }
/* sidebar kv-stack .k annotation codes */
.f-side-card .kv-stack .k code { font: 400 10px/1 var(--font-mono); color: var(--slate-strong); background: none; padding: 0; }

/* ── Lista clave-valor ── */
.kv-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.kv-list .kv { padding: 8px 0; }
.kv-list .kv .k { font: 400 12px/16px var(--font-sans); color: var(--slate-strong); margin-bottom: 2px; }
.kv-list .kv .k code { font: 400 10px/14px var(--font-mono); color: var(--slate-strong); background: var(--canvas); padding: 1px 4px; border-radius: 2px; margin-left: 4px; }
.kv-list .kv .v { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.kv-list .kv.full { grid-column: 1 / -1; }

/* ── Fichas de cita / procedencia ── */
.cite-card { padding: 14px 0; border-top: 1px solid var(--hairline); }
.cite-card:first-of-type { border-top: 0; padding-top: 4px; }
.cite-card .cite-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cite-card .cite-head svg { width: 14px; height: 14px; color: var(--slate); flex: none; }
.cite-card .cite-head .label { font: 400 12px/16px var(--font-sans); color: var(--slate-strong); }
.cite-card .cite-text { font: 600 14px/22px var(--font-sans); color: var(--brand); margin: 0 0 12px; }
.cite-card .cite-text em { font-style: italic; font-weight: 600; }
.cite-card .ident-box { border-left: 2px solid var(--hairline-2); padding: 4px 0 4px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.cite-card .ident-box .key { font: 600 13px/20px var(--font-sans); color: var(--brand-link-2); }
.cite-card .ident-box .lbl { font: 400 12px/16px var(--font-sans); color: var(--slate-strong); }
.cite-card .ident-box .val { font: 600 13px/20px var(--font-sans); color: var(--brand); }

/* ── Tarjetas de la barra lateral ── */
.f-side-card { border: 1px solid var(--hairline-2); border-radius: 8px; padding: 18px 20px; }
.f-side-card .f-side-h { font: 700 14px/20px var(--font-sans); color: var(--ink); margin: 0 0 12px; }
.f-side-card .f-side-h code { font: 400 11px/16px var(--font-mono); color: var(--slate-strong); background: transparent; padding: 0; margin-left: 6px; }
.f-side-card .lic-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; background: var(--info-fill); border: 1px solid var(--info-stroke); border-radius: 9999px; font: 600 12px/1 var(--font-sans); color: var(--brand-link-2); margin-bottom: 10px; }
.f-side-card .lic-name { font: 600 14px/22px var(--font-sans); color: var(--ink); margin-bottom: 8px; }
.f-side-card .lic-link { display: block; font: 400 13px/18px var(--font-sans); color: var(--brand-link-2); text-decoration: none; word-break: break-all; margin-bottom: 10px; }
.f-side-card .lic-link:hover { text-decoration: underline; }
.f-side-card .price-line { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1 var(--font-sans); margin-bottom: 14px; }
.f-side-card .price-line.free { color: var(--success); }
.f-side-card .price-line.paid { color: var(--warning); }
.f-side-card .price-line svg { width: 16px; height: 16px; }
.f-side-card .kv-stack { display: flex; flex-direction: column; gap: 10px; }
.f-side-card .kv-stack .k { font: 400 12px/16px var(--font-sans); color: var(--slate-strong); }
.f-side-card .kv-stack .v { font: 600 13px/20px var(--font-sans); color: var(--ink); word-break: break-word; }
.f-side-card .kv-stack a.v { color: var(--brand-link-2); text-decoration: none; }
.f-side-card .kv-stack a.v:hover { text-decoration: underline; }
.f-side-card .related-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.f-side-card .related { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--ink); }
.f-side-card .related:hover { background: var(--canvas); }
.f-side-card .related .r-ico { width: 28px; height: 28px; border-radius: 4px; background: var(--canvas); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.f-side-card .related .r-title { font: 600 13px/16px var(--font-sans); color: var(--brand); }
.f-side-card .related .r-meta { font: 400 11px/14px var(--font-sans); color: var(--slate-strong); margin-top: 2px; }

/* ==========================================================
   MODAL DE POLÍTICA (odrl:hasPolicy)
   ========================================================== */

.policy-backdrop {
  position: fixed; inset: 0;
  background: rgba(28,32,36,.5); backdrop-filter: blur(4px);
  display: none; z-index: 100;
  align-items: flex-start; justify-content: center;
  padding: 48px 24px; overflow-y: auto;
}
.policy-backdrop.open { display: flex; }
.policy-modal {
  background: #fff; border-radius: 16px;
  max-width: 720px; width: 100%;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  overflow: hidden;
  animation: modal-in .2s ease;
}
@keyframes modal-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

.policy-head { padding: 24px 28px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; background: linear-gradient(180deg,#FAFBFF,#fff); border-bottom: 1px solid var(--hairline); }
.policy-head .eyebrow { font: 400 10px/1 var(--font-mono); color: var(--slate-strong); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.policy-head .title { font: 600 18px/1.3 var(--font-sans); color: var(--ink); }
.policy-head .close { background: transparent; border: 0; width: 32px; height: 32px; border-radius: 4px; font-size: 24px; cursor: pointer; color: var(--slate); line-height: 1; }
.policy-head .close:hover { background: var(--hairline); color: var(--ink); }

.policy-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px 28px; background: var(--canvas); border-bottom: 1px solid var(--hairline); }
.policy-meta .k { font: 500 10px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--slate-strong); margin-bottom: 4px; display: flex; justify-content: space-between; }
.policy-meta .k code { font-family: var(--font-mono); text-transform: none; font-size: 10px; font-weight: 400; letter-spacing: 0; }
.policy-meta .v { font: 600 14px/1 var(--font-sans); color: var(--ink); }
.policy-meta .v.mono { font-family: var(--font-mono); }

/* Tabs del modal: DaisyUI .tab + .tab-active, solo añadir el contenedor */
.policy-tabs { display: flex; gap: 0; padding: 0 28px; border-bottom: 1px solid var(--hairline); }
.policy-tabs .tab { color: var(--slate-strong); border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; }
.policy-tabs .tab:hover { color: var(--ink); background: transparent; }
.policy-tabs .tab.tab-active { color: var(--brand); border-bottom-color: var(--brand); }

.policy-body { padding: 24px 28px; max-height: 400px; overflow-y: auto; }
.perms-grid { display: grid; gap: 12px; }
.perm-card { border: 1px solid var(--hairline); border-radius: 4px; overflow: hidden; }
.perm-card .hd { padding: 10px 14px; font: 600 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
.perm-card .item { padding: 10px 14px; font-family: var(--font-mono); font-size: 13px; color: var(--slate-strong); border-top: 1px solid var(--hairline); }
.perm-card.allow .hd { background: #DCFCE7; color: #166534; }
.perm-card.deny  .hd { background: #FEE2E2; color: #991B1B; }
.perm-card.duty  .hd { background: #FEF3C7; color: #92400E; }
#policy-json pre { background: var(--canvas); border: 1px solid var(--hairline); border-radius: 4px; padding: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--ink); overflow: auto; margin: 0; line-height: 1.6; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 920px) {
  .offer-grid { grid-template-columns: 1fr 1fr; }
  .cat-panel { padding: 22px 20px 32px; }
  .ficha-grid { grid-template-columns: 1fr; padding: 24px 20px 32px; }
  .ficha-hero { padding: 20px var(--page-px) 28px; }
  .ficha-hero h1, .ficha-hero .ficha-alt-title { padding-right: 0; }
  .ficha-hero h1 { font: 700 32px/1.15 var(--font-sans); }
  .ficha-hero .top-bar { margin-bottom: 30px; }
  .ficha-hero .right-actions { position: static; align-items: start; margin: 16px 0 20px; }
  .ficha-hero .right-actions .btn { height: 32px; min-height: 32px; font-size: 12px; padding: 0 12px; gap: 6px; }
  .ficha-hero .right-actions .btn svg { width: 12px; height: 12px; }
  .var-grid { grid-template-columns: 1fr; }
  .kv-list { grid-template-columns: 1fr; }
  .f-side-card .btn-block { display: flex; width: fit-content; align-self: flex-start; margin-right: auto; height: 30px; min-height: 30px; font-size: 12px; padding: 0 12px; }
  .f-side-card .price-line { font-size: 13px; gap: 4px; }
  .f-side-card .related { padding: 8px 4px; }
}
@media (max-width: 768px) {
  .cat-page-shell { margin: 12px auto 40px; padding: 0 16px; }
  .cat-panel { padding: 20px 16px 32px; }
  .cat-stats-row { display: none; }
  .filters-banner .type-pills { width: 100%; flex-wrap: wrap; }
  .filters-banner .label { display: none; }
  .adv-drawer { padding: 16px; }
  .adv-drawer .row { grid-template-columns: 1fr; gap: 6px; }
  .adv-drawer .row .lbl { padding-top: 0; }
  .cat-toolbar { flex-wrap: nowrap; gap: 8px; margin-bottom: 14px; }
  .cat-toolbar .right { gap: 4px; }
  .cat-toolbar .right .lbl { display: none; }
  .cat-toolbar select { width: auto; min-width: 0; }
  .search-lbl { display: none; }
}
@media (max-width: 520px) {
  .cat-page-shell { padding: 0 12px; margin-top: 8px; }
  .cat-panel { padding: 14px 14px 24px; border-radius: 12px; }
  .filters-banner { padding: 10px 12px; gap: 8px; }
  .type-pill { height: 28px; padding: 0 10px; font-size: 12px; }
  .offer-card { padding: 16px; gap: 10px; }
  .offer-card .title { font: 700 16px/22px var(--font-sans); }
  .cite-card .ident-box { grid-template-columns: 1fr; }
}

/* ==========================================================
   VARIANTE FILTRO VERTICAL (sidebar con facetas)
   ========================================================== */

.cat-page-shell-v {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 24px var(--page-px);
}

.desktop-stats { display: flex; margin-bottom: 12px; }
.mobile-topbar { display: none; }

/* ── Layout dos columnas ── */
.cat-content-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* ── Sidebar ── */
.filters-sidebar {
  width: 252px;
  flex: none;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-2) transparent;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.sidebar-title { font: 700 14px/1 var(--font-sans); color: var(--ink); margin: 0; }

.sidebar-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  border-radius: 4px;
  color: var(--slate);
  cursor: pointer;
  flex: none;
}
.sidebar-close:hover { background: var(--hairline); color: var(--ink); }

/* ── Facetas ── */
.facet { border-bottom: 1px solid var(--hairline); }
.facet:last-child { border-bottom: none; }

.facet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 11px 18px;
  background: none;
  border: none;
  font: 600 13px/1 var(--font-sans);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur);
}
.facet-head:hover { background: var(--canvas); }

.facet-chevron {
  flex: none;
  color: var(--slate);
  transition: transform var(--dur) var(--ease-out);
}
.facet.open .facet-chevron { transform: rotate(0deg); }
.facet:not(.open) .facet-chevron { transform: rotate(-90deg); }

.facet-body {
  padding: 4px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.facet:not(.open) .facet-body { display: none; }

/* ── Ítems de faceta ── */
.facet-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font: 400 13px/1.2 var(--font-sans);
  color: var(--ink);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background var(--dur);
}
.facet-item:hover { background: var(--canvas); }
.facet-item.active { background: var(--info-fill); color: var(--brand-link-2); font-weight: 600; }

.facet-label { flex: 1; text-align: left; }

.facet-count { font: 400 12px/1 var(--font-sans); color: var(--slate-strong); flex: none; }
.facet-item.active .facet-count { color: var(--brand-link-2); }

.facet-swatch { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.facet-code {
  font: 600 10px/1 var(--font-mono);
  color: var(--brand-link-2);
  background: var(--hairline);
  padding: 2px 5px;
  border-radius: 3px;
  flex: none;
}
.facet-item.active .facet-code { background: rgba(255,255,255,.7); }

.facet-more { color: var(--brand-link-2); font-weight: 500; }
.facet-more:hover { color: var(--brand); background: none; }

/* Varietat items creados por shared.js dentro del sidebar */
#varieties-filter-group .variety-item {
  border: none;
  border-radius: 6px;
  padding: 5px 8px;
  background: none;
}
#varieties-filter-group .variety-item:hover { background: var(--canvas); border-color: transparent; }
#varieties-filter-group .variety-item.active { background: var(--info-fill); border-color: transparent; }

/* ── Área de contenido principal ── */
.cat-main-v {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 28px 32px 40px;
}

/* ── Barra móvil ── */
.mobile-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
}
.mobile-stats { font: 400 12px/1 var(--font-sans); }

.btn-hamburger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 6px;
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
  flex: none;
  transition: background var(--dur);
}
.btn-hamburger:hover { background: var(--brand-link-2); }
.btn-hamburger.mobile-only { display: none; }
@media (max-width: 991px) {
  .btn-hamburger.mobile-only { display: inline-flex; margin-right: 4px; }
}

/* ── Overlay (móvil) ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(28,32,36,.5);
  z-index: 60;
  backdrop-filter: blur(2px);
}
.sidebar-overlay.open { display: block; }

/* ── Barra de búsqueda: ancho completo sobre el layout ── */
.cat-search-row {
  margin-bottom: 16px;
  max-width: 500px;
}

/* ── Checkbox indicador en ítems de faceta ── */
.facet-cb {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--hairline-2);
  border-radius: 3px;
  background: #fff;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur), border-color var(--dur);
  position: relative;
}
.facet-item:hover .facet-cb { border-color: var(--slate); }
.facet-item.active .facet-cb {
  background: var(--brand);
  border-color: var(--brand);
}
.facet-item.active .facet-cb::after {
  content: '';
  display: block;
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

/* ── Cabecera de resultados: cantidad + ordenación ── */
.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.results-count {
  font: 400 14px/1 var(--font-sans);
  color: var(--ink);
}
.results-count b { font-weight: 700; }
.results-count--top { display: none; }
.results-meta { margin-bottom: 20px; }
@media (max-width: 1019px) {
  .results-count:not(.results-count--bar) { margin-bottom: 16px; }
}
.results-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.results-meta .active-filters-bar { flex: 1 1 auto; }
.results-meta .results-sort { margin-left: auto; }
.results-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.sort-lbl {
  font: 400 13px/1 var(--font-sans);
  color: var(--slate-strong);
  white-space: nowrap;
}

/* ── Hilo de razonamiento: filtros activos ── */
.active-filters-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: none;
}
.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 6px 0 12px;
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--hairline-2);
  border-radius: 6px;
  font: 400 11px/1 var(--font-sans);
}
.tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--slate);
  border-radius: 4px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  margin-left: 0;
  margin-top: -1px;
  transition: background var(--dur), color var(--dur);
}
.tag-remove:hover { background: var(--canvas); color: var(--ink); }
.btn-clear-filters {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font: 400 13px/1 var(--font-sans);
  color: var(--slate-strong);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur);
}
.btn-clear-filters:hover { color: var(--brand-link-2); }

/* ==========================================================
   RESPONSIVE — variante sidebar
   ========================================================== */

@media (max-width: 991px) {
  :root { --page-px: 30px; }

  .cat-page-shell-v,
  .ficha-shell { margin: 0 auto; padding: 16px var(--page-px); }

  .desktop-stats { display: none !important; }
  .mobile-topbar { display: flex; }

  .cat-content-layout { gap: 0; }

  /* El sidebar se convierte en drawer deslizante */
  .filters-sidebar {
    position: fixed;
    top: 0;
    left: -284px;
    width: 280px;
    height: 100dvh;
    max-height: none;
    z-index: 99;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--hairline);
    box-shadow: none;
    transition: left 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  }
  .filters-sidebar.open {
    left: 0;
    box-shadow: 4px 0 24px rgba(8,20,98,.14);
  }

  .sidebar-close { display: inline-flex; }

  .cat-main-v { border-radius: 10px; padding: 20px 20px 32px; }
}

@media (max-width: 767px) {
  .offer-grid { grid-template-columns: 1fr; }
  .results-count--top { display: block; }
  .cat-search-row .input { height: 36px; font-size: 13px; padding: 0 10px; }
  .cat-search-row .btn { height: 36px; min-height: 36px; font-size: 13px; padding: 0 12px; gap: 6px; }
  .cat-search-row .btn svg { width: 12px; height: 12px; }
  .results-meta { gap: 12px; flex-direction: column; align-items: start; }
  .results-meta .results-sort { margin-left: 0; }
  .results-sort select { font-size: 12px; }
  .btn-clear-filters { font: 400 12px/1 var(--font-sans); }
  .ficha-hero h1 { font: 700 24px/30px var(--font-sans); margin-bottom: 14px; }
  .ficha-hero .ficha-alt-title { font: 400 13px/18px var(--font-sans); }
}

@media (max-width: 640px) {
  :root { --page-px: 18px; }

  .cat-page-shell-v,
  .ficha-shell { padding: 12px var(--page-px); margin-top: 0px; }
  .cat-main-v { padding: 16px 18px 28px; border-radius: 8px; }
  .mobile-stats { display: none; }
  .results-header {
    flex-direction: column;
    align-items: start;
    gap: 15px;
  }
  .breadcrumbs { font-size: 12px; }
  .results-sort .sort-lbl { font-size: 12px; }
  .results-sort .select { font-size: 12px; }
  .cat-pag { gap: 8px; flex-wrap: wrap; }
  .cat-pag .select { font-size: 12px; min-height: 32px; height: 32px; }
  .cat-pag .pg-grp button { font: 600 12px/1 var(--font-sans); height: 32px; padding: 0 10px; }
  .cat-pag .pg-grp .cur { font: 400 12px/1 var(--font-sans); padding: 0 12px; }
}

@media (max-width: 620px) {
  .breadcrumbs { font-size: 10px; padding: 2px 0; min-height: 0; }
  .breadcrumbs > ul > li + li::before { margin: 0 .25rem; }
  .breadcrumbs svg { width: 10px; height: 10px; }
  .cat-box { padding: 4px 15px; }
  .btn-hamburger {
    height: 28px;
    padding: 0 10px 0 8px;
    font: 600 12px/1 var(--font-sans);
    gap: 6px;
  }
  .btn-hamburger svg { width: 14px; height: 14px; }
}

/* ==========================================================
   SITE HEADER + CATALOG HERO (buscador.html)
   ========================================================== */

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 60;
}
.site-header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 12px var(--page-px) 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header-left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.site-header-right { display: flex; align-items: center; gap: 32px; flex: none; }

.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.site-logo:focus-visible {
  outline: 2px solid var(--brand-link);
  outline-offset: 4px;
  border-radius: 4px;
}
.site-logo-img {
  height: 40px;
  width: auto;
  display: block;
}

.site-header-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 14px/1 var(--font-sans);
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
}
.site-header-action:hover { color: var(--brand-link); }
.site-header-action:focus-visible {
  outline: 2px solid var(--brand-link);
  outline-offset: 4px;
  border-radius: 2px;
}
.site-header-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: none;
}
.site-header-lang svg {
  width: 12px;
  height: 12px;
  color: var(--ink);
}
.site-header-account-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-header-search {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.site-header-search-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.site-header-search-toggle img { width: 16px; height: 16px; display: block; }
.site-header-search-toggle:focus-visible {
  outline: 2px solid var(--brand-link);
  outline-offset: 2px;
  border-radius: 4px;
}
.site-header-search-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
}
.site-header-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--slate);
  pointer-events: none;
  opacity: .7;
}
.site-header-search input {
  width: inherit;
  height: 32px;
  padding: 0 10px 0 32px;
  font: 400 13px/1 var(--font-sans);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--slate);
  border-radius: 6px;
  outline: none;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.site-header-search input::placeholder {
  color: var(--slate);
  opacity: .9;
}
.site-header-search input:hover {
  border-color: var(--ink);
}
.site-header-search input:focus-visible {
  border-color: var(--brand-link);
  box-shadow: 0 0 0 3px rgba(8, 20, 98, .15);
}
.site-header-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* ── Hero del catálogo ── */
.cat-hero {
  background: linear-gradient(108deg, var(--brand) 0%, var(--brand-link) 100%);
  color: #fff;
}
.cat-hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 20px var(--page-px) 28px;
}

.cat-hero-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 4px;
  overflow-x: auto;
  font: 400 14px/1.4 var(--font-sans);
  color: rgba(255,255,255,.78);
  margin-bottom: 50px;
}
.cat-hero-breadcrumbs a,
.cat-hero-breadcrumbs .sep,
.cat-hero-breadcrumbs .current {
  white-space: nowrap;
}
.cat-hero-breadcrumbs a {
  color: rgba(255,255,255,.78);
  text-decoration: none;
}
.cat-hero-breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.cat-hero-breadcrumbs .sep { color: rgba(255,255,255,.45); }
.cat-hero-breadcrumbs .current { color: #fff; }

.cat-hero-title {
  font: 700 48px/1.15 var(--font-sans);
  color: #fff;
  letter-spacing: -.01em;
  margin: 0 0 40px;
}

.cat-hero-search {
  display: flex;
  align-items: stretch;
  max-width: 560px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  margin-bottom: 46px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  overflow: hidden;
  transition: box-shadow var(--dur), border-color var(--dur);
}
.cat-hero-search:focus-within {
  border-color: var(--brand-link);
  box-shadow: 0 0 0 3px rgba(8, 20, 98, .15);
}
.cat-hero-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 16px;
  height: 48px;
  font: 400 15px/1 var(--font-sans);
  color: var(--ink);
}
.cat-hero-search input::placeholder { color: var(--slate); }
.cat-hero-search .btn-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 0;
  font: 600 15px/1 var(--font-sans);
  cursor: pointer;
  flex: none;
  transition: background var(--dur);
}
.cat-hero-search .btn-search:hover { background: var(--brand-link-2); }
.cat-hero-search .btn-search svg { width: 16px; height: 16px; }

.cat-hero-stats {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  font: 400 15px/1 var(--font-sans);
  color: rgba(255,255,255,.78);
}
.cat-hero-stats b {
  color: #fff;
  font-weight: 700;
  font-size: 36px;
  margin-right: 6px;
  letter-spacing: -.01em;
}

@media (max-width: 991px) {
  .cat-hero-inner { padding: 20px var(--page-px) 40px; }
  .cat-hero-breadcrumbs { font: 400 12px/1 var(--font-sans); margin-bottom: 35px; }
  .cat-hero-title { font: 700 40px/1.15 var(--font-sans); margin: 0 0 32px; }
  .cat-hero-search { margin-bottom: 0; max-width: 480px; }
  .cat-hero-search input { font-size: 13px; height: 40px; padding: 0 14px; }
  .cat-hero-search .btn-search { font-size: 13px; height: 40px; padding: 0 18px; }
  .cat-hero-stats { display: none; }
}

@media (max-width: 991px) {
  .site-header-inner { padding: 16px var(--page-px); gap: 16px; }
  .site-header-right { gap: 20px; }
  .site-logo-img { height: 34px; }
  .site-header-action span { display: none; }
  .site-header-lang svg { display: none; }
  .site-header-account .site-header-account-text { display: inline; text-decoration: none; }
  .site-header-search input { width: 180px; }
}

@media (max-width: 767px) {
  .site-header-inner { padding: 12px var(--page-px); gap: 12px; }
  .site-header-right { gap: 16px; }
  .site-logo-img { height: 30px; }

  /* Buscador colapsado en móvil: botón → panel desplegable bajo el header */
  .site-header-search-toggle { display: inline-flex; }
  .site-header-search .site-header-search-field {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 10px var(--page-px) 12px;
    background: #fff;
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 6px 12px -6px rgba(0,0,0,.12);
    z-index: 5;
  }
  .site-header-search.open .site-header-search-field { display: flex; }
  .site-header-search.open .site-header-search-toggle { color: var(--brand-link); }
  .site-header-search-field input { width: 100%; height: 38px; font-size: 14px; }
  .site-header-search .site-header-search-icon { left: calc(var(--page-px) + 10px); }

  .cat-hero-inner { padding: 30px var(--page-px) 32px; }
  .cat-hero-breadcrumbs { display: none; }
  .cat-hero-title { font: 700 26px/1.2 var(--font-sans); margin-bottom: 20px; }
  .cat-hero-search input { font-size: 13px; height: 38px; padding: 0 14px; }
  .cat-hero-search .btn-search { font-size: 13px; padding: 0 16px; height: 38px; }
  .cat-hero-stats { gap: 16px; font-size: 12px; }
  .cat-hero-stats b { font-size: 18px; margin-right: 4px; }
}

@media (max-width: 620px) {
  .cat-hero-title { font: 700 24px/1.2 var(--font-sans); margin-bottom: 20px; }
}

/* ==========================================================
   BUSCADOR v2-bis (sin hero) — buscador-2.html
   Clases nuevas, no afectan a buscador.html
   ========================================================== */

.page-breadcrumbs-row {
  background: var(--canvas);
}
.page-breadcrumbs-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 12px var(--page-px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 4px;
  overflow-x: auto;
  font: 400 13px/1.4 var(--font-sans);
  color: var(--slate);
}
.page-breadcrumbs-inner a,
.page-breadcrumbs-inner strong,
.page-breadcrumbs-inner .sep {
  white-space: nowrap;
}
.page-breadcrumbs-inner a {
  color: var(--slate);
  text-decoration: none;
}
.page-breadcrumbs-inner a:hover { color: var(--brand); }
.page-breadcrumbs-inner .sep { color: var(--slate); }
.page-breadcrumbs-inner strong { color: var(--ink); font-weight: 600; }

.search-sort-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.search-results-row {
  background: #fff;
  border-bottom: 1px solid var(--hairline);
}
.search-results-bar {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px var(--page-px);
  flex-wrap: wrap;
}
.search-results-bar .cat-search-inline { flex: 1 1 320px; max-width: 460px; }
.search-results-bar .results-count--bar {
  margin-left: auto;
  font: 700 14px/1 var(--font-sans);
  color: var(--ink);
  white-space: nowrap;
}
@media (max-width: 767px) {
  .search-results-bar { gap: 30px; flex-wrap: nowrap; }
  .search-results-bar .cat-search-inline { flex: 1 1 auto; min-width: 0; max-width: none; }
  .search-results-bar .results-count--bar { margin-left: auto; flex: none; }
}
@media (max-width: 620px) {
  .search-results-bar { flex-direction: column; align-items: start; gap: 12px; }
  .search-results-bar .results-count--bar { margin-left: 0; font: 700 12px/1 var(--font-sans); }
}

/* Buscador-2: la barra del buscador queda fija debajo del header al hacer scroll */
body[data-screen-label*="v2-bis"] .search-results-row {
  position: sticky;
  top: 88px;
  z-index: 55;
}
@media (max-width: 991px) {
  body[data-screen-label*="v2-bis"] .search-results-row { top: 88px; }
}
@media (max-width: 767px) {
  body[data-screen-label*="v2-bis"] .search-results-row { top: 60px; }
}

/* Buscador.html: barra flotante que aparece al pasar de scroll el buscador del hero */
.search-results-row--floating {
  position: fixed;
  top: 88px;
  left: 0;
  right: 0;
  z-index: 55;
  transform: translateY(-200%);
  transition: transform 220ms var(--ease-out);
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(8,20,98,.06);
}
.search-results-row--floating.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
@media (max-width: 991px) {
  .search-results-row--floating { top: 88px; }
}
@media (max-width: 767px) {
  .search-results-row--floating { top: 60px; }
}

.cat-search-inline {
  display: flex;
  align-items: stretch;
  flex: 1 1 320px;
  max-width: 460px;
  background: #fff;
  border: none;
  border-radius: 6px;
  overflow: hidden;
}
.cat-search-inline input {
  flex: 1;
  min-width: 0;
  border: 1px solid #BCBCBC;
  border-radius: 6px 0 0 6px;
  outline: none;
  background: transparent;
  padding: 0 14px;
  height: 48px;
  font: 400 15px/1 var(--font-sans);
  color: var(--ink);
}
.cat-search-inline input::placeholder { color: var(--slate); }
.cat-search-inline .btn-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 18px;
  background: var(--brand);
  color: #fff;
  border: none;
  font: 600 15px/1 var(--font-sans);
  cursor: pointer;
  flex: none;
  transition: background var(--dur);
}
.cat-search-inline .btn-search:hover { background: var(--brand-link-2); }
.cat-search-inline .btn-search svg { width: 16px; height: 16px; }

@media (max-width: 767px) {
  .search-sort-row {
    flex-direction: column;
    align-items: start;
    gap: 18px;
  }
  .cat-search-inline { width: 100%; max-width: none; flex: none; }
  .cat-search-inline input { font-size: 13px; height: 38px; padding: 0 14px; }
  .cat-search-inline .btn-search { font-size: 13px; height: 38px; padding: 0 16px; }
  .results-count { margin-bottom: 0; }
}

@media (max-width: 640px) {
  .search-sort-row { gap: 12px; }
  .cat-search-inline { flex-basis: 100%; max-width: none; }
  .page-breadcrumbs-inner { font-size: 12px; padding: 10px var(--page-px); }
}

/* buscador.html: ocultar el buscador inline (ya existe el del hero) y mantener "Ordenar por" a la derecha */
body[data-screen-label*="filtro vertical"] .search-sort-row .cat-search-inline { display: none; }
@media (min-width: 768px) {
  body[data-screen-label*="filtro vertical"] .search-sort-row .results-sort { margin-left: auto; }
  body[data-screen-label*="filtro vertical"] .results-count--top { font: 400 16px/1 var(--font-sans); }
}
@media (min-width: 992px) {
  body[data-screen-label*="filtro vertical"] .results-count--top { font: 400 20px/1 var(--font-sans); }
}
body[data-screen-label*="filtro vertical"] .results-count:not(.results-count--top) { display: none; }
body[data-screen-label*="filtro vertical"] .results-count--top { display: block; margin: 0; }


/* ==========================================================
   EXTENSIÓN DE BÚSQUEDA DEL HEADER
   ========================================================== */

.header-search-extension {
  background: #fff;
  border-top: 1px solid var(--hairline);
  box-shadow: 0 2px 12px rgba(8, 20, 98, 0.08);
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height 0.3s ease, opacity 0.3s ease;
}

.header-search-extension.visible {
  height: auto;
  opacity: 1;
  padding: 8px 0;
}

.header-search-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-px);
}

.header-search-form {
  display: flex;
  align-items: stretch;
  max-width: 600px;
  background: #fff;
  border: 1px solid var(--hairline-2);
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.header-search-form:focus-within {
  border-color: var(--brand-link);
  box-shadow: 0 0 0 3px rgba(8, 20, 98, 0.12);
}

.header-search-field {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.header-search-field svg {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--slate);
  opacity: 0.7;
  pointer-events: none;
}

.header-search-field input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 38px;
  font: 400 14px/1 var(--font-sans);
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
}

.header-search-field input::placeholder {
  color: var(--slate);
}

.header-search-form button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  background: var(--brand);
  color: #fff;
  border: none;
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.header-search-form button:hover {
  background: var(--brand-link-2);
}

.header-search-form button svg {
  width: 16px;
  height: 16px;
  position: static;
  opacity: 1;
}

/* Transición suave para sidebar */
@media (min-width: 992px) {
  .filters-sidebar {
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* Responsive */
@media (max-width: 767px) {
  .header-search-form button span {
    display: none;
  }
  .header-search-form button {
    padding: 0 12px;
  }
}

/* ==========================================================
   ACCESIBILIDAD — WCAG 2.1 AA
   ========================================================== */

/* ── Skip link (oculto hasta recibir foco) ── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 9999;
  background: var(--brand);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font: 600 14px/1 var(--font-sans);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ── Indicador de foco visible (sustituye outline:none agresivos) ── */
:focus-visible {
  outline: 2px solid var(--brand-link);
  outline-offset: 2px;
  border-radius: 3px;
}
.cat-hero-search input:focus-visible,
.cat-search-inline input:focus-visible {
  outline: 2px solid var(--brand-link);
  outline-offset: -2px;
}

/* ── Solo lectura visual (texto disponible para lectores de pantalla) ── */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Tarjeta de oferta accesible (como anclaje) ── */
a.offer-card {
  color: var(--ink);
  text-decoration: none;
}
a.offer-card:hover .title { text-decoration: underline; }
a.offer-card .title { font: 700 18px/24px var(--font-sans); color: var(--brand); margin: 0; }

/* Grid como lista semántica */
ul.offer-grid { list-style: none; padding: 0; }
ul.offer-grid > li { margin: 0; padding: 0; display: flex; }
ul.offer-grid > li > a.offer-card { flex: 1; }

/* ── Estado de selección por color +/texto (no solo color) ── */
.facet-item[aria-pressed="true"] .facet-cb,
.facet-item.active .facet-cb {
  /* combinado con el bg ya existente, refuerza con un check icono */
}

/* ══════════════════════════════════════════════════════════
   FOOTER GLOBAL
   ══════════════════════════════════════════════════════════ */
.site-footer {
  position: relative;
  background: #fff;
  border-top: 1px solid var(--hairline);
  margin-top: 72px;
}
/* Patrón de puntos decorativo en la zona inferior */
.site-footer::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 260px;
  background-image: radial-gradient(var(--hairline-2) 1.4px, transparent 1.6px);
  background-size: 26px 26px;
  opacity: .65;
  pointer-events: none;
  z-index: 0;
}
.site-footer-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 56px var(--page-px) 40px;
}

/* ── Banda de logos institucionales ── */
.footer-institutional {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px 48px;
}
.footer-inst-logo { height: 58px; width: auto; display: block; }
.footer-inst-logo--gob { height: 66px; }

.footer-divider {
  border: 0;
  border-top: 1px solid var(--hairline-2);
  margin: 32px 0 48px;
}

/* ── Cuerpo principal: dos columnas ── */
.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px 64px;
  align-items: stretch;
}

/* Columna izquierda */
.footer-col-brand {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 560px;
}
.footer-brand-logos { display: flex; align-items: center; gap: 22px; }
.footer-brand-logo { height: 58px; width: auto; display: block; }
.footer-brand-sep {
  width: 1px; height: 56px;
  background: var(--hairline-2);
  display: block; flex: none;
}
.footer-brand-text {
  margin: 0;
  max-width: 460px;
  font: 400 18px/28px var(--font-sans);
  color: var(--brand);
}
.footer-social { margin-top: 8px; display: flex; flex-direction: column; gap: 18px; }
.footer-social-title { margin: 0; font: 700 16px/1.2 var(--font-sans); color: var(--ink); }
.footer-social-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 22px;
}
.footer-social-link {
  display: inline-flex;
  color: var(--brand-link); /* #1557B5 */
  transition: color var(--dur) var(--ease-out);
}
.footer-social-link:hover { color: var(--brand-link-2); }
.footer-social-link:focus-visible {
  outline: 2px solid var(--brand-link);
  outline-offset: 3px;
  border-radius: 3px;
}
.footer-social-link svg { width: 22px; height: 22px; display: block; fill: currentColor; }

/* Columna derecha */
.footer-col-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 40px;
}
.footer-press {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 16px/1 var(--font-sans);
  color: var(--brand);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.footer-press span { text-decoration: underline; text-underline-offset: 3px; }
.footer-press-icon { width: 14px; height: 14px; flex: none; display: block; }
.footer-press:hover { color: var(--brand-link); }
.footer-press:focus-visible {
  outline: 2px solid var(--brand-link);
  outline-offset: 3px; border-radius: 2px;
}
.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 14px 32px;
}
.footer-legal a {
  font: 500 14px/1 var(--font-sans);
  color: var(--brand);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--dur) var(--ease-out);
}
.footer-legal a:hover { color: var(--brand-link); }
.footer-legal a:focus-visible {
  outline: 2px solid var(--brand-link);
  outline-offset: 3px; border-radius: 2px;
}
.footer-copyright {
  margin: auto 0 0;
  font: 400 14px/1 var(--font-sans);
  color: var(--ink);
}

/* En desktop estrecho (≈992–1279px) los 5 enlaces legales en una sola fila
   estrujan el párrafo de la izquierda. Limitamos el ancho del bloque legal
   para que envuelva a ~2 columnas (sigue alineado a la derecha) y dejamos
   más anchura a la columna de marca para alargar el párrafo. */
@media (min-width: 992px) and (max-width: 1279px) {
  /* Dos bloques: arriba "el resto" (logos + Sala de prensa + enlaces legales
     en una sola línea); debajo, el bloque de texto (párrafo) a la izquierda
     y a todo el ancho. Usamos display:contents para reordenar por áreas. */
  .footer-main {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logos  press"
      "logos  legal"
      "text   text"
      "social copy";
    column-gap: 64px;
    row-gap: 16px;
    align-items: center;
  }
  .footer-col-brand,
  .footer-col-links { display: contents; }

  /* Logos centrados verticalmente frente al bloque de la derecha (Sala de
     prensa + enlaces), que ocupa las dos primeras filas. */
  .footer-brand-logos { grid-area: logos; align-self: center; }
  .footer-press       { grid-area: press; justify-self: end; align-self: center; }
  .footer-legal       { grid-area: legal; justify-content: flex-end; align-self: center;
                        flex-wrap: wrap; gap: 14px 20px; max-width: none; }
  .footer-brand-text  { grid-area: text; max-width: 640px; margin: 6px 0 0; }
  .footer-social      { grid-area: social; margin-top: 8px; }
  .footer-copyright   { grid-area: copy; justify-self: end; margin: 0; }

  /* Logos de marca un punto más pequeños para que los enlaces quepan en
     una línea a su derecha */
  .footer-brand-logo { height: 52px; }
  .footer-brand-sep { height: 48px; }

  /* Logos institucionales: los 4 en una línea */
  .footer-institutional { gap: 28px; flex-wrap: nowrap; }
  .footer-inst-logo { height: 44px; }
  .footer-inst-logo--gob { height: 50px; }
}

/* ── Responsive footer ──
   Apilamos a una columna en ≤991px: la columna derecha es `auto`
   (max-content) y los enlaces legales no envuelven, así que en tablet
   desbordarían en horizontal si se mantuviese la rejilla de 2 columnas. */
@media (max-width: 991px) {
  .site-footer { margin-top: 56px; }
  .site-footer-inner { padding: 48px var(--page-px) 36px; }

  /* Una sola columna. "Desenvolvemos" las dos columnas con display:contents
     para poder reordenar TODOS los bloques en vertical: las redes bajan al
     final, justo antes del copyright. */
  .footer-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .footer-col-brand,
  .footer-col-links { display: contents; }
  .footer-col-links { text-align: left; }   /* heredado por sus hijos */

  .footer-brand-logos { order: 1; }
  .footer-brand-text  { order: 2; }
  .footer-press       { order: 3; }
  .footer-legal       { order: 4; justify-content: flex-start; max-width: none; }
  .footer-social      { order: 5; margin-top: 0; }
  .footer-copyright   { order: 6; margin: 0; }   /* deja de anclarse al fondo */

  .footer-institutional { gap: 24px 40px; }
  .footer-inst-logo { height: 52px; }
  .footer-inst-logo--gob { height: 58px; }

  /* Logos de marca más grandes en tablet/móvil */
  .footer-brand-logo { height: 72px; }
  .footer-brand-sep { height: 64px; }
}

/* Tablet (641–991px): el párrafo va a la derecha de los logos; el resto
   (Sala de prensa, enlaces, redes, copyright) queda apilado debajo. */
@media (min-width: 641px) and (max-width: 991px) {
  .footer-main {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logos  text"
      "press  press"
      "legal  legal"
      "social social"
      "copy   copy";
    column-gap: 36px;
    row-gap: 28px;
    align-items: start;
  }
  .footer-brand-logos { grid-area: logos; align-self: center; }
  .footer-brand-text  { grid-area: text; margin: 0; max-width: none; }
  .footer-press       { grid-area: press; }
  .footer-legal       { grid-area: legal; }
  .footer-social      { grid-area: social; margin-top: 4px; }
  .footer-copyright   { grid-area: copy; }

  /* Logos institucionales: los 4 en una línea, escalando para caber */
  .footer-institutional {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    align-items: center;
  }
  .footer-institutional img {
    height: auto;
    max-height: 56px;
    min-width: 0;
    flex: 0 1 auto;
    object-fit: contain;
  }
}

@media (max-width: 640px) {
  .site-footer::after { height: 200px; background-size: 22px 22px; }
  .footer-divider { margin: 28px 0 36px; }
  /* Logos institucionales en grid 2×2 */
  .footer-institutional {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 18px;
    align-items: center;
    justify-items: start;
  }
  .footer-inst-logo { height: auto; max-width: 100%; max-height: 46px; }
  .footer-inst-logo--gob { height: auto; max-width: 100%; max-height: 50px; }
  .footer-brand-logo { height: 64px; }
  .footer-brand-sep { height: 56px; }
  .footer-brand-text { font-size: 16px; line-height: 26px; }
  .footer-legal { gap: 12px 24px; }
}
@media (max-width: 360px) {
  .footer-brand-logos { flex-wrap: wrap; gap: 16px; }
  .footer-brand-sep { display: none; }   /* el separador no aporta al envolver */
}

/* ── Reflow garantizado a 320px (sin scroll horizontal) ──
   No usar overflow-x:hidden en html/body porque rompe `position: sticky`
   en el header global. En su lugar, evitar overflow horizontal en cada
   contenedor responsivo. */
@media (max-width: 360px) {
  :root { --page-px: 16px; }
  .cat-hero-title { font-size: 28px; line-height: 1.2; }
  .ficha-hero h1 { font-size: 24px; line-height: 1.25; }
}

/* ── Respetar preferencia de movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .offer-card:hover { transform: none !important; }
}