/* Maquiven stylesheet bundle 'web' — generated by bin/build-assets.php from the files below, in this order; do not edit. */

/* ==== css/tokens.css ==== */
/* Maquiven — design tokens (DESIGN.md §1). Loaded first; also embedded in critical.css.
   Colours and sizes are used ONLY through these custom properties (no hex outside this file). Light theme only. */
:root {
  /* ---- Brand & semantic colours ---- */
  --c-navy:          #0A1D39;
  --c-navy-700:      #132B52;
  --c-navy-500:      #2A4A7F;
  --c-navy-tint:     #EEF2F8;
  --c-navy-tint-2:   #DCE4F0;
  --c-orange:        #F15A22;   /* brand accent, non-text surfaces only (3.4:1 on white) */
  --c-orange-btn:    #C94716;   /* filled buttons / featured badge with white text (4.8:1) */
  --c-orange-hover:  #B43F12;
  --c-orange-tint:   #FEF0E9;
  --c-orange-text:   #B43F12;   /* small orange text on white (5.7:1) */
  /* Block M-99 (AutoYa style, public web): the header's «Publicar equipo» only — navy text on it 5.3:1, on the hover 6.2:1 */
  --c-publish:       #EF6624;
  --c-publish-hover: #F47B40;
  --c-on-publish:    #0A1D39;
  --c-text-sec:      #5B6576;   /* secondary text: 5.9:1 on white, 5.5:1 on --c-bg (#6B7280 was 4.5:1 there) */
  --c-field-border:  #C3CAD4;
  --c-bg:            #F6F7F9;
  --c-surface:       #FFFFFF;
  --c-surface-2:     #FAFBFC;
  --c-border:        #E5E7EB;
  --c-border-strong: #D1D5DB;
  --c-text:          #1F2937;
  --c-text-2:        #4B5563;
  --c-muted:         #6B7280;
  --c-muted-2:       #9CA3AF;
  --c-success:       #16A34A;  --c-success-tint: #ECFDF3;  --c-success-text: #15803D;
  --c-warning:       #F59E0B;  --c-warning-tint: #FFFBEB;  --c-warning-text: #92400E;
  --c-danger:        #DC2626;  --c-danger-tint:  #FEF2F2;  --c-danger-text:  #B91C1C;
  --c-info:          #2563EB;  --c-info-tint:    #EFF6FF;  --c-info-text:    #1D4ED8;
  --c-whatsapp:      #25D366;  --c-whatsapp-dark:#0B7A6C;   /* WhatsApp text/border on white 5.2:1 (#128C7E was 4.1:1) */
  --c-focus:         #2563EB;
  --c-white:         #FFFFFF;
  --c-overlay:       rgba(10, 29, 57, 0.78);
  --c-overlay-soft:  rgba(10, 29, 57, 0.55);
  --c-on-navy:       rgba(255, 255, 255, 0.88);
  --c-on-navy-muted: rgba(255, 255, 255, 0.70);
  --c-on-navy-line:  rgba(255, 255, 255, 0.14);
  --hero-overlay:        linear-gradient(90deg,  rgba(10,29,57,.88) 0%, rgba(10,29,57,.72) 45%, rgba(10,29,57,.25) 100%);
  --hero-overlay-mobile: linear-gradient(180deg, rgba(10,29,57,.85) 0%, rgba(10,29,57,.70) 60%, rgba(10,29,57,.55) 100%);
  /* promo accents without a semantic twin above (PromoAccent::PALETTE — promos.css, ARCHITECTURE §5.5) */
  --c-promo-teal:          #0F766E;  --c-promo-teal-tint:     #F0FDFA;
  --c-promo-purple:        #6D28D9;  --c-promo-purple-tint:   #F5F3FF;
  --c-promo-graphite:      #374151;  --c-promo-graphite-tint: #F3F4F6;
  --c-promo-scrim:         rgba(10, 29, 57, 0.90);   /* promo photo captions: white text AA on any photo */

  /* ---- Typography ---- */
  --font-sans: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: .75rem;  --fs-sm: .875rem;  --fs-base: 1rem;  --fs-md: 1.125rem;  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;  --fs-2xl: 1.875rem; --fs-3xl: 2.25rem; --fs-4xl: 2.75rem; --fs-5xl: 3.5rem;
  --fs-hero: clamp(1.875rem, 1.2rem + 2.8vw, 3.25rem);
  --fs-h1: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
  --fs-h2: clamp(1.375rem, 1.15rem + .9vw, 1.75rem);
  --lh-tight: 1.12; --lh-snug: 1.3; --lh-base: 1.55; --lh-relaxed: 1.7;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;
  --ls-tight: -0.02em; --ls-caps: 0.06em;

  /* ---- Spacing (4px base) ---- */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem;
  --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem;
  --gutter: 1rem;
  --container: 1200px; --container-narrow: 760px; --container-wide: 1400px;

  /* ---- Radii / shadows ---- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --sh-xs: 0 1px 2px rgba(10,29,57,.06);
  --sh-sm: 0 1px 3px rgba(10,29,57,.08), 0 1px 2px rgba(10,29,57,.04);
  --sh-md: 0 4px 12px rgba(10,29,57,.08), 0 2px 4px rgba(10,29,57,.04);
  --sh-lg: 0 12px 32px rgba(10,29,57,.14), 0 4px 8px rgba(10,29,57,.06);
  --sh-header: 0 2px 12px rgba(10,29,57,.10);
  --sh-up: 0 -4px 16px rgba(10,29,57,.10);
  /* Keyboard focus rings (WCAG 1.4.11 / 2.4.13: >= 3:1 against what surrounds them). Two tones, so one ring works on
     every surface: a 2 px white inner ring (16.8:1 on navy, photos, hero) + a 2 px solid outer ring (#2563EB 5.2:1,
     #C94716 4.8:1 on white). Forced-colors mode draws a system outline instead (base.css). The rgba halos were 1.7:1. */
  --sh-focus:        0 0 0 2px var(--c-white), 0 0 0 4px var(--c-focus);
  --sh-focus-orange: 0 0 0 2px var(--c-white), 0 0 0 4px var(--c-orange-btn);
  --sh-focus-inset:  inset 0 0 0 2px var(--c-focus), inset 0 0 0 4px var(--c-white);   /* inside clipped boxes */
  --sh-focus-field:  0 0 0 1px var(--c-focus), 0 0 0 4px rgba(37,99,235,.25);            /* + the 1 px focus border = 2 px solid edge */
  --sh-focus-danger: 0 0 0 1px var(--c-danger), 0 0 0 4px rgba(220,38,38,.22);           /* invalid field */

  /* ---- Layout / z / motion ---- */
  --header-h: 72px; --header-h-mobile: 60px; --sticky-cta-h: 72px; --touch: 44px;
  /* Block M-99 (public web): primary buttons and form fields 48 px with 16 px text, secondary text 13 px, section titles 21 px,
     card prices 20 px, the phone contact bar's buttons 50 px */
  --btn-h: 48px; --field-h: 48px; --fs-secondary: .8125rem; --fs-section: 1.3125rem; --fs-card-price: 1.25rem; --cta-tile-h: 50px;
  --z-header: 50; --z-drawer: 60; --z-sticky-cta: 40; --z-modal: 70; --z-toast: 80; --z-lightbox: 90;
  --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms; --ease: cubic-bezier(.2,.7,.2,1);
  --ar-card: 4 / 3; --ar-hero: 16 / 9; --ar-og: 1200 / 630;
  /* New home (portada.css): THE photo height. Phones keep the design's proportion, 170 px on a 390 px board; from 768 px
     see the media query below. To make the photo bigger, change only these two values. */
  --portada-photo-h: 43.6vw;
  /* Partners oficiales (partners.css): THE card width, its photo keeps the design's 260:160. To make the photo bigger, change
     only this token and its two media-query values below. */
  --partner-card-w: 260px;
  --tabbar-gap: 12px; --tabbar-space: 84px;   /* phone's bottom bar: distance from the edge, room kept above the edge */
  color-scheme: light;
}
@media (min-width: 768px)  { :root { --gutter: 1.5rem; --portada-photo-h: clamp(280px, 28vw, 400px); --partner-card-w: 300px; } }
@media (min-width: 1024px) { :root { --gutter: 2rem; --partner-card-w: 400px; } }
@media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; } }

/* ==== css/base.css ==== */
/* Maquiven — base: fonts, reset, typography, focus, skip link, containers, utilities (DESIGN.md §1.1–1.3, §5). */

/* ---- Fonts (self-hosted Inter, swap + metric-compatible fallback so text does not jump) ---- */
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('/assets/fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('/assets/fonts/Inter-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('/assets/fonts/Inter-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-style: normal; font-display: swap; src: url('/assets/fonts/Inter-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Inter-fallback'; src: local('Arial'); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; -moz-tab-size: 4; tab-size: 4; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  /* break-word, not anywhere: a word longer than its box still wraps, but min-content keeps whole words, so table
     cells, tiles and flex items are never squeezed below a word's width ('Publicació|n', 'US$|14,99'). Boxes that
     must absorb long unbroken tokens (e-mails, URLs, ids) opt in to `anywhere` locally. */
  overflow-wrap: break-word;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--c-navy-500); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-navy); }
ul, ol { padding-inline-start: 1.25rem; }
ul[class], ol[class] { list-style: none; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
hr { border: 0; border-top: 1px solid var(--c-border); }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }
::selection { background: var(--c-orange-tint); color: var(--c-navy); }

/* ---- Typography scale (DESIGN §1.2) ---- */
h1, h2, h3, h4, h5, h6 { color: var(--c-navy); font-weight: var(--fw-bold); line-height: var(--lh-snug); overflow-wrap: break-word; }
h1, .h1 { font-size: var(--fs-h1); line-height: 1.2; letter-spacing: var(--ls-tight); }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.25; letter-spacing: -0.01em; }
h3, .h3 { font-size: 1.0625rem; line-height: 1.3; }
h4, .h4 { font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: 1.4; }
@media (min-width: 768px) { h3, .h3 { font-size: var(--fs-md); } }
p { overflow-wrap: break-word; }   /* see body: whole words; a single over-long token still wraps */
small, .small { font-size: var(--fs-sm); }
strong, b { font-weight: var(--fw-semibold); }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: .9em; }
pre { overflow: auto; }
.lead { font-size: var(--fs-md); color: var(--c-text-2); line-height: var(--lh-relaxed); }
.caps { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.overline { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-muted); }
.price { font-weight: var(--fw-bold); color: var(--c-navy); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2em; font-size: var(--fs-xl); }
.prose h3 { margin-top: 1.6em; font-size: var(--fs-md); }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li + li { margin-top: .35em; }
.prose a { color: var(--c-orange-text); }

/* ---- Focus (WCAG 2.4.7 / 1.4.11) ----
   Pointer focus draws nothing; keyboard focus (:focus-visible) gets the two-tone --sh-focus ring (tokens.css), visible
   on white, tints, navy and photos. The transparent outline paints nothing here but turns into a real outline in
   forced-colors mode, which drops every box-shadow; the forced-colors block also beats component rules that set
   `outline: none` next to their ring. The skip-link target <main tabindex=-1> is a landmark, not a control: no ring. */
:focus { outline: none; }
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--sh-focus); border-radius: var(--r-sm); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { box-shadow: var(--sh-focus); }
main[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
@media (forced-colors: active) {
  :focus-visible:not(main) { outline: 2px solid CanvasText !important; outline-offset: 2px !important; }
}

/* ---- Skip link / a11y ---- */
.skip-link {
  position: absolute; inset-inline-start: var(--sp-4); top: -100px; z-index: calc(var(--z-header) + 1);
  padding: var(--sp-3) var(--sp-4); background: var(--c-navy); color: var(--c-white); font-weight: var(--fw-semibold);
  border-radius: var(--r-md); text-decoration: none; transition: top var(--t-fast) var(--ease);
}
.skip-link:focus, .skip-link:focus-visible { top: var(--sp-4); color: var(--c-white); box-shadow: var(--sh-focus-orange); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sr-only-focusable:focus, .sr-only-focusable:focus-visible { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }

/* ---- Icons ---- */
.ico { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
.ico--xs { width: 14px; height: 14px; }
.ico--sm { width: 16px; height: 16px; }
.ico--lg { width: 24px; height: 24px; }
.ico--xl { width: 36px; height: 36px; }
.ico--2xl { width: 48px; height: 48px; }
.ico--spin { animation: ico-spin 1s linear infinite; }
@keyframes ico-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ico--spin { animation-duration: 2s; } }

/* ---- Containers (DESIGN §1.3) ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }
.container--flush { padding-inline: 0; }

/* ---- Utilities (small, deliberately limited set) ---- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.grow { flex: 1 1 auto; }
.shrink-0 { flex-shrink: 0; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); } .gap-8 { gap: var(--sp-8); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); } .mt-12 { margin-top: var(--sp-12); }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--sp-1); } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); }
.ml-auto { margin-left: auto; } .mx-auto { margin-inline: auto; }
.p-0 { padding: 0; } .p-4 { padding: var(--sp-4); } .p-6 { padding: var(--sp-6); }
.w-full { width: 100%; }
.text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; }
.text-muted { color: var(--c-muted); } .text-navy { color: var(--c-navy); } .text-danger { color: var(--c-danger-text); } .text-success { color: var(--c-success-text); } .text-orange { color: var(--c-orange-text); } .text-warning { color: var(--c-warning-text); }
.text-sm { font-size: var(--fs-sm); } .text-xs { font-size: var(--fs-xs); } .text-md { font-size: var(--fs-md); } .text-lg { font-size: var(--fs-lg); }
.fw-medium { font-weight: var(--fw-medium); } .fw-semibold { font-weight: var(--fw-semibold); } .fw-bold { font-weight: var(--fw-bold); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.relative { position: relative; }
.block { display: block; } .inline-block { display: inline-block; }
.rounded { border-radius: var(--r-md); } .rounded-lg { border-radius: var(--r-lg); } .rounded-pill { border-radius: var(--r-pill); }
.border { border: 1px solid var(--c-border); }
.bg-surface { background: var(--c-surface); } .bg-tint { background: var(--c-navy-tint); }
.hide { display: none !important; }
.hide-md { display: none !important; }
.show-md { display: block !important; }
@media (min-width: 768px) {
  .hide-md { display: revert !important; }
  .show-md { display: none !important; }
  .hide-desktop { display: none !important; }
}
@media (max-width: 767.98px) {
  .hide-mobile { display: none !important; }
}
.divider { border: 0; border-top: 1px solid var(--c-border); margin-block: var(--sp-6); }
.stack > * + * { margin-top: var(--sp-4); }
.stack--sm > * + * { margin-top: var(--sp-2); }
.stack--lg > * + * { margin-top: var(--sp-8); }
.list-inline { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.dot-sep > * + *::before { content: '·'; margin-inline: .4em; color: var(--c-muted-2); }
.hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.noscript-note { padding: var(--sp-3) var(--sp-4); background: var(--c-warning-tint); color: var(--c-warning-text); font-size: var(--fs-sm); text-align: center; }

/* Block M-15: the rental rate only while the offer is rent or both */
form:has(input[name="offer_type"][value="sale"]:checked) .lform-rent { display: none; }

/* ==== css/layout.css ==== */
/* Maquiven — layout: header, drawer, footer, hero, search-card wrap, sections, grids, sub-navs, sticky CTA,
   detail two-column, mobile top bar (DESIGN.md §2.1–2.3, §2.18, §2.20, §3). Mobile-first. */

/* ---- Page skeleton ---- */
.page { display: flex; flex-direction: column; min-height: 100vh; }
.page > main { flex: 1 0 auto; }
main#main { outline: none; }
/* The fixed mobile CTA bar (§2.18; 73–77px + safe area) sits over the page end: the footer — the last in-flow
   block — reserves that room below its own content, so nothing (the copyright line included) ends under the bar. */
.page--has-cta > .site-footer { padding-bottom: calc(var(--sp-6) + var(--sticky-cta-h) + var(--sp-2) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) { .page--has-cta > .site-footer { padding-bottom: var(--sp-6); } }

/* ---- Header (§2.1) ---- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  transition: box-shadow var(--t-base) var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--sh-header); }
.site-header__inner { display: flex; align-items: center; gap: var(--sp-4); height: var(--header-h-mobile); }
@media (min-width: 768px) { .site-header__inner { height: var(--header-h); gap: var(--sp-6); } }
.brand { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--c-navy); text-decoration: none; flex-shrink: 0; border-radius: var(--r-sm); }
.brand .wordmark { width: 124px; height: auto; }
@media (min-width: 768px) { .brand .wordmark { width: 150px; } }
.site-nav { display: none; }
@media (min-width: 1024px) {
  .site-nav { display: flex; align-items: center; gap: var(--sp-1); margin-inline-start: var(--sp-4); }
}
.site-nav__link {
  position: relative; display: inline-flex; align-items: center; min-height: var(--touch);
  padding: 0 var(--sp-3); color: var(--c-navy); font-size: 15px; font-weight: var(--fw-medium); text-decoration: none;
  border-radius: var(--r-sm); white-space: nowrap;
}
.site-nav__link:hover { color: var(--c-orange-text); }
.site-nav__link::after {
  content: ''; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: 6px; height: 2px;
  background: var(--c-orange); border-radius: 2px; transform: scaleX(0); transition: transform var(--t-fast) var(--ease);
}
.site-nav__link.is-active::after, .site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.site-header__actions { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; }
.site-header__actions .btn--primary { display: none; }
.site-header__actions .lang-switch { display: none; }
.site-header__actions .btn--ghost { display: none; }
@media (min-width: 768px) {
  .site-header__actions .btn--primary, .site-header__actions .btn--ghost { display: inline-flex; }
  .site-header__actions .lang-switch { display: inline-flex; }
}
.burger { display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); color: var(--c-navy); border-radius: var(--r-md); }
.burger:hover { background: var(--c-navy-tint); }
@media (min-width: 1024px) { .burger { display: none; } }

/* User menu (details/summary) */
.user-menu { position: relative; }
.user-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); padding: 0 var(--sp-1); border-radius: var(--r-pill); cursor: pointer; }
.user-menu > summary:hover .avatar { box-shadow: 0 0 0 2px var(--c-navy-tint-2); }
.user-menu__name { display: none; max-width: 140px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-navy); }
/* The name shows only when the whole row fits: from 1024 px the main nav joins the row, and brand + nav + publish
   button + ES/EN + avatar/name/chevron needed ~1050 px (English, long names) — wider than a 1024–1180 px viewport,
   where body{overflow-x:clip} cut off the chevron and the open menu. Below 1280 px the avatar (initials) + chevron
   stay. From 1280 px the menu is the one action allowed to shrink (pages.css pins the others with flex-shrink:0):
   a name that still does not fit is ellipsized instead of pushing the chevron out of the viewport. */
.site-header__actions { min-width: 0; }
.site-header__actions > .user-menu { flex-shrink: 1; min-width: 0; }
.user-menu > summary { max-width: 100%; }
@media (min-width: 1280px) { .user-menu__name { display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.user-menu .menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); max-width: calc(100vw - 2 * var(--gutter)); min-width: 240px; padding: var(--sp-2);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); z-index: 2;
}
.menu__item, .menu form button {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--touch); padding: var(--sp-2) var(--sp-3);
  color: var(--c-text); text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-medium); border-radius: var(--r-md); text-align: left;
}
.menu__item:hover, .menu form button:hover { background: var(--c-navy-tint); color: var(--c-navy); }
.menu__item .ico { color: var(--c-muted); }
.menu__sep { border-top: 1px solid var(--c-border); margin: var(--sp-2) 0; }
.menu__badge { margin-inline-start: auto; }

/* ---- Drawer (§2.2) ---- */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
  width: 86vw; max-width: 360px; background: var(--c-surface); box-shadow: var(--sh-lg);
  transform: translateX(105%); transition: transform var(--t-slow) var(--ease); visibility: hidden;
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.drawer.is-open, .drawer:target { transform: translateX(0); visibility: visible; }
.drawer__backdrop { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--c-overlay-soft); opacity: 0; visibility: hidden; transition: opacity var(--t-slow) var(--ease), visibility 0s var(--t-slow); }
.drawer.is-open ~ .drawer__backdrop, .drawer:target ~ .drawer__backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); min-height: var(--header-h-mobile); }
.drawer__head .wordmark { width: 124px; height: auto; }
.drawer__close { display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); color: var(--c-navy); border-radius: var(--r-md); text-decoration: none; }
.drawer__close:hover { background: var(--c-navy-tint); }
.drawer__user { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--c-border); }
.drawer__user-name { font-weight: var(--fw-semibold); color: var(--c-navy); }
.drawer__user-link { font-size: var(--fs-sm); }
.drawer__cta { padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.drawer__nav { padding: var(--sp-2) var(--sp-2); }
.drawer__link, .drawer__nav summary {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; padding: var(--sp-2) var(--sp-3);
  color: var(--c-navy); font-size: 15px; font-weight: var(--fw-medium); text-decoration: none; border-radius: var(--r-md); list-style: none;
}
.drawer__link:hover, .drawer__nav summary:hover { background: var(--c-navy-tint); }
.drawer__link.is-active, .drawer__link[aria-current="page"] { color: var(--c-orange-text); background: var(--c-orange-tint); }
.drawer__link .ico, .drawer__nav summary .ico { color: var(--c-navy-500); }
.drawer__link .badge, .drawer__link .count { margin-inline-start: auto; }
.drawer__nav summary .ico--chev { margin-inline-start: auto; transition: transform var(--t-fast) var(--ease); }
.drawer__nav details[open] summary .ico--chev { transform: rotate(180deg); }
.drawer__sub { padding: 0 0 var(--sp-2) var(--sp-8); }
.drawer__sub .drawer__link { min-height: 44px; font-size: var(--fs-sm); font-weight: var(--fw-regular); }
.drawer__sep { border-top: 1px solid var(--c-border); margin: var(--sp-2) var(--sp-4); }
.drawer__foot { margin-top: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); border-top: 1px solid var(--c-border); }
.drawer__social { display: flex; gap: var(--sp-2); }
body.is-drawer-open { overflow: hidden; }

/* ---- Hero (§2.3) ---- */
.hero { position: relative; isolation: isolate; min-height: 420px; display: flex; align-items: center; background: var(--c-navy); color: var(--c-white); overflow: hidden; }
@media (min-width: 768px) { .hero { min-height: 520px; } }
.hero__bg, .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; z-index: -2; }
.hero__overlay { position: absolute; inset: 0; z-index: -1; background: var(--hero-overlay-mobile); }
@media (min-width: 768px) { .hero__overlay { background: var(--hero-overlay); } }
.hero__content { padding-block: var(--sp-12) calc(var(--sp-12) + 40px); }
@media (min-width: 768px) { .hero__content { padding-block: var(--sp-16) calc(var(--sp-16) + 56px); } }
.hero__inner { max-width: 600px; }
.hero__title { color: var(--c-white); font-size: var(--fs-hero); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.hero__title .accent { color: var(--c-orange); }
.hero__sub { margin-top: var(--sp-4); font-size: var(--fs-md); color: var(--c-on-navy); max-width: 48ch; }
@media (min-width: 768px) { .hero__sub { font-size: var(--fs-lg); margin-top: var(--sp-5); } }
.hero--lite { min-height: 0; }
.hero--lite .hero__content { padding-block: var(--sp-10); }
.hero--lite .hero__title { font-size: var(--fs-h1); }

/* Search card wrap overlapping the hero bottom */
.search-card-wrap { position: relative; z-index: 2; margin-top: -40px; }
@media (min-width: 768px) { .search-card-wrap { margin-top: -56px; } }

/* ---- Sections ---- */
.section { padding-block: var(--sp-8); }
@media (min-width: 768px) { .section { padding-block: var(--sp-12); } }
.section--tight { padding-block: var(--sp-6); }
.section--flush-top { padding-top: 0; }
.section--surface { background: var(--c-surface); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.section-head h2 { margin: 0; }
.section-head .link-arrow { flex-shrink: 0; white-space: nowrap; }
@media (min-width: 768px) { .section-head { margin-bottom: var(--sp-6); } }
.section-sub { margin-top: var(--sp-2); color: var(--c-muted); }

/* ---- Grids (§1.3) ---- */
.grid-cards { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 480px)  { .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1280px) { .grid-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid-cards--3 { grid-template-columns: 1fr; }
@media (min-width: 480px)  { .grid-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid-cards--list { display: flex; flex-direction: column; gap: var(--sp-3); }
.grid-tiles { display: grid; gap: var(--sp-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 768px)  { .grid-tiles { gap: var(--sp-4); } }
@media (min-width: 1024px) { .grid-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.grid-2 { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); } }
.grid-3 { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); } }
.grid-4 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); } }
.action-cards { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 359.98px) { .action-cards { grid-template-columns: 1fr; } }
@media (min-width: 768px) { .action-cards { gap: var(--sp-6); } }

/* Horizontal snap carousel (home featured on mobile, similar listings) */
.carousel { display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: var(--sp-2); }
.carousel::-webkit-scrollbar { display: none; }
.carousel { scroll-padding-inline: var(--gutter); }
.carousel > * { flex: 0 0 260px; scroll-snap-align: start; }
@media (min-width: 768px) { .carousel { display: grid; overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; } .carousel > * { flex: none; } }

/* ---- Search / listing pages ---- */
.results-layout { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .results-layout { grid-template-columns: 280px minmax(0, 1fr); gap: var(--sp-8); } }
.results-layout > aside { display: none; }
@media (min-width: 1024px) { .results-layout > aside { display: block; } .results-layout .sticky { position: sticky; top: calc(var(--header-h) + 16px); } }
.results-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.results-head__count { color: var(--c-muted); font-size: var(--fs-sm); }
.results-head__tools { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; }
.sub-bar { position: sticky; top: var(--header-h-mobile); z-index: calc(var(--z-header) - 1); background: var(--c-surface); border-bottom: 1px solid var(--c-border); padding: var(--sp-2) 0; }
@media (min-width: 768px) { .sub-bar { position: static; border: 0; background: transparent; padding: 0; } }
.sub-bar__inner { display: flex; gap: var(--sp-2); align-items: center; }
.sub-bar__inner .input { flex: 1 1 auto; }

/* ---- Detail page two-column (§3.1) ---- */
.detail-grid { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .detail-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-8); align-items: start; } .detail-grid > aside { position: sticky; top: calc(var(--header-h) + 16px); } }
.detail-grid > aside > * + * { margin-top: var(--sp-4); }
.detail-head { margin-top: var(--sp-4); }
.detail-head h1 { font-size: var(--fs-xl); }
@media (min-width: 768px) { .detail-head h1 { font-size: var(--fs-2xl); } }
@media (min-width: 1024px) { .detail-head h1 { font-size: 2rem; } }
.detail-sub { color: var(--c-text-2); margin-top: var(--sp-1); }
.detail-loc { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--c-muted); font-size: var(--fs-sm); margin-top: var(--sp-2); }
.detail-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); color: var(--c-muted); font-size: 13px; margin-top: var(--sp-2); }
.detail-section { margin-top: var(--sp-8); }
.detail-section h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.full-bleed { margin-inline: calc(var(--gutter) * -1); }
@media (min-width: 768px) { .full-bleed { margin-inline: 0; } }

/* Mobile top bar over the gallery (listing page) */
.top-bar { display: flex; align-items: center; gap: var(--sp-2); min-height: 52px; padding: var(--sp-1) 0; }
.top-bar__title { flex: 1; text-align: center; font-weight: var(--fw-semibold); color: var(--c-navy); font-size: var(--fs-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 768px) { .top-bar { display: none; } }

/* ---- Sub-navs: account / seller (§2.23) ---- */
.subnav-layout { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .subnav-layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-8); align-items: start; } }
/* position: relative keeps absolutely positioned children (the sr-only text of the unread badges) inside the
   sideways-scrolling strip, so they never widen the document at 360 px (sticky from 1024 px does the same) */
.account-nav, .seller-nav { position: relative; display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--sp-2); border-bottom: 1px solid var(--c-border); }
.account-nav::-webkit-scrollbar, .seller-nav::-webkit-scrollbar { display: none; }
.account-nav ul, .seller-nav ul { display: flex; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.account-nav__link, .seller-nav__link {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); padding: 0 var(--sp-3);
  color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; border-radius: var(--r-md);
}
.account-nav__link .ico, .seller-nav__link .ico { color: var(--c-muted); }
.account-nav__link:hover, .seller-nav__link:hover { color: var(--c-navy); background: var(--c-navy-tint); }
.account-nav__link.is-active, .seller-nav__link.is-active, .account-nav__link[aria-current="page"], .seller-nav__link[aria-current="page"] { color: var(--c-navy); background: var(--c-navy-tint); font-weight: var(--fw-semibold); }
.account-nav__link.is-active .ico, .seller-nav__link.is-active .ico { color: var(--c-navy); }
.account-nav__link--accent, .seller-nav__link--accent { color: var(--c-orange-text); }
.account-nav__group { display: none; }
@media (min-width: 1024px) {
  .account-nav, .seller-nav { flex-direction: column; overflow: visible; margin: 0; padding: 0; border: 0; position: sticky; top: calc(var(--header-h) + 16px); }
  .account-nav ul, .seller-nav ul { flex-direction: column; gap: 2px; }
  .account-nav__link, .seller-nav__link { width: 100%; font-size: 15px; }
  .account-nav__group { display: block; margin: var(--sp-4) var(--sp-3) var(--sp-2); font-size: 11px; font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-muted); }
}
.subnav-layout > .subnav-content > h1:first-child { margin-bottom: var(--sp-4); }

/* ---- Sticky mobile CTA (§2.18) ---- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky-cta);
  display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: var(--c-surface); border-top: 1px solid var(--c-border); box-shadow: var(--sh-up);
}
.sticky-cta .btn--primary { flex: 1 1 auto; }
/* Contact variant (listing with a public phone, 0006): up to four equal tiles, icon above a short label */
.sticky-cta--contact { gap: var(--sp-2); padding-top: var(--sp-2); padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px)); }
.sticky-cta--contact .sticky-cta__tile { flex: 1 1 0; min-width: 0; min-height: 52px; gap: 6px; padding: 0 var(--sp-2); font-size: 15px; font-weight: var(--fw-bold); }
.sticky-cta--contact .sticky-cta__tile .ico { width: 20px; height: 20px; flex-shrink: 0; }
.sticky-cta--contact .sticky-cta__tile--main { flex: 1.6 1 0; }
.sticky-cta--contact .sticky-cta__tile--icon { flex: 0 0 52px; padding: 0; }
@media (min-width: 768px) { .sticky-cta { display: none; } }

/* ---- Footer (§2.20) ---- */
.site-footer { background: var(--c-navy); color: var(--c-on-navy-muted); padding: var(--sp-12) 0 var(--sp-6); margin-top: auto; }
@media (min-width: 768px) { .site-footer { padding-top: 56px; } }
.site-footer a { color: var(--c-on-navy); text-decoration: none; }
.site-footer a:hover { color: var(--c-white); text-decoration: underline; }
.site-footer__top { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; }
@media (min-width: 768px) { .site-footer__top { grid-template-columns: 1.4fr 2fr; gap: var(--sp-10); } }
@media (min-width: 1024px) { .site-footer__top { grid-template-columns: 1.2fr 2.4fr; } }
.site-footer__brand .wordmark { width: 150px; height: auto; }
.site-footer__blurb { margin-top: var(--sp-4); max-width: 40ch; font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.site-footer__social { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.site-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--c-on-navy-line); color: var(--c-white); }
.site-footer__social a:hover { background: var(--c-orange); text-decoration: none; }
.site-footer__cols { display: grid; gap: var(--sp-6) var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .site-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-footer__col h2 { color: var(--c-white); font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; margin-bottom: var(--sp-3); }
.site-footer__col li + li { margin-top: var(--sp-2); }
.site-footer__col a { font-size: var(--fs-sm); display: inline-block; padding-block: 2px; }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-10); padding-top: var(--sp-5); border-top: 1px solid var(--c-on-navy-line); font-size: 13px; }
.site-footer__bottom .lang-switch { margin-inline-end: auto; }
.site-footer__made { display: inline-flex; align-items: center; gap: var(--sp-2); }
.site-footer__stores { margin-top: var(--sp-5); }
.site-footer__badges { display: flex; align-items: center; gap: 10px; }
.site-footer__badge { display: block; width: auto; height: 40px; }
.site-footer__stores .site-footer__apps, .site-footer__soon { margin-top: 0; }
@media (max-width: 767px) { .site-footer__bottom { padding-bottom: 72px; } } /* room for the Asistente button */
.site-footer__soon { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 0; font-size: 13px; }
.site-footer__apps { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
/* touch targets ≥ 44px on mobile (DESIGN §2 intro, §6): footer links, social icons */
@media (max-width: 767.98px) {
  .site-footer__col a, .site-footer__bottom a { display: inline-flex; align-items: center; min-height: var(--touch); padding-block: 0; }
  .site-footer__col li + li { margin-top: 0; }
  .site-footer__social a { width: var(--touch); height: var(--touch); }
}
.site-footer__apps a { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-on-navy-line); border-radius: var(--r-md); font-size: 13px; }

/* ---- Auth layout (centered card) ---- */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--c-bg); }
.auth-page__head { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) var(--gutter); }
.auth-page__head .wordmark { width: 140px; height: auto; }
.auth-page__main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: var(--sp-4) var(--gutter) var(--sp-12); }
@media (min-width: 768px) { .auth-page__main { align-items: center; padding-top: var(--sp-8); } }
.auth-card { width: 100%; max-width: 420px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--sh-md); padding: var(--sp-6); }
@media (min-width: 480px) { .auth-card { padding: var(--sp-8); } }
.auth-card h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.auth-card__sub { color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.auth-card .field .input, .auth-card .field .select { min-height: 48px; }
.auth-card__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-5); font-size: var(--fs-sm); }
.auth-page__foot { padding: var(--sp-4) var(--gutter); text-align: center; font-size: 13px; color: var(--c-muted); }

/* ---- Bare layout (payment return, print) ---- */
.bare-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-6) var(--gutter); background: var(--c-bg); }
.bare-card { width: 100%; max-width: 560px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); box-shadow: var(--sh-lg); padding: var(--sp-8) var(--sp-6); text-align: center; }
.bare-card .wordmark { width: 150px; height: auto; margin-inline: auto; margin-bottom: var(--sp-6); }
.bare-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--r-pill); margin-bottom: var(--sp-4); }
.bare-card__icon--success { background: var(--c-success-tint); color: var(--c-success); }
.bare-card__icon--warning { background: var(--c-warning-tint); color: var(--c-warning); }
.bare-card__icon--info { background: var(--c-navy-tint); color: var(--c-navy); }
.bare-card h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.bare-card p { color: var(--c-muted); }
.bare-card .form-actions { justify-content: center; margin-top: var(--sp-6); }
/* Block M-30: on a phone the fixed bar holds the contact */
@media (max-width: 767.98px) { .listing-contact-side { display: none; } }

/* ==== css/components.css ==== */
/* Maquiven — components (DESIGN.md §2): buttons, badges, cards, tiles, action cards, spec tiles, detail list,
   gallery, lightbox, seller card, forms, alerts, toast, chips, pagination, breadcrumbs, filters/sheet, modal, tabs,
   empty state, lang switch, avatar, skeleton, view toggle, steps/why, CTA band, cookie notice. Mobile-first. */

/* ---- Buttons (§2.13) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--touch); padding: 0 20px; border-radius: var(--r-md); border: 1px solid transparent;
  font-size: 15px; font-weight: var(--fw-semibold); line-height: 1; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--sh-focus); }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn--lg { min-height: 52px; padding: 0 24px; font-size: 16px; }
.btn--pill { border-radius: var(--r-pill); }
.btn--block { width: 100%; }
.btn--primary { background: var(--c-orange-btn); color: var(--c-white); }
.btn--primary:hover { background: var(--c-orange-hover); color: var(--c-white); }
.btn--primary:focus-visible { box-shadow: var(--sh-focus-orange); }
.btn--navy { background: var(--c-navy); color: var(--c-white); }
.btn--navy:hover { background: var(--c-navy-700); color: var(--c-white); }
.btn--ghost { background: var(--c-surface); color: var(--c-navy); border-color: var(--c-navy-tint-2); }
.btn--ghost:hover { background: var(--c-navy-tint); color: var(--c-navy); }
.btn--outline-orange { background: transparent; color: var(--c-orange-text); border-color: var(--c-orange); }
.btn--outline-orange:hover { background: var(--c-orange-tint); color: var(--c-orange-text); }
.btn--whatsapp { background: var(--c-surface); color: var(--c-whatsapp-dark); border-color: var(--c-whatsapp-dark); }
.btn--whatsapp:hover { background: var(--c-success-tint); color: var(--c-whatsapp-dark); }
.btn--danger { background: var(--c-danger); color: var(--c-white); }
.btn--danger:hover { background: var(--c-danger-text); color: var(--c-white); }
.btn--danger-ghost { background: var(--c-surface); color: var(--c-danger-text); border-color: var(--c-danger-tint); }
.btn--danger-ghost:hover { background: var(--c-danger-tint); }
.btn--link { background: transparent; color: var(--c-orange-text); padding-inline: var(--sp-2); }
.btn--link:hover { text-decoration: underline; color: var(--c-orange-hover); }
.btn--icon { width: var(--touch); padding: 0; }
.btn--icon.btn--sm { width: 36px; }
.btn--subtle { background: var(--c-navy-tint); color: var(--c-navy); }
.btn--subtle:hover { background: var(--c-navy-tint-2); }
.btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; color: var(--c-white); animation: ico-spin .8s linear infinite;
}
.btn--ghost.is-loading::after, .btn--whatsapp.is-loading::after, .btn--link.is-loading::after, .btn--outline-orange.is-loading::after { color: var(--c-navy); }
.btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); }
.link-arrow { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--c-orange-text); font-weight: var(--fw-semibold); font-size: var(--fs-sm); text-decoration: none; min-height: var(--touch); }
.link-arrow:hover { color: var(--c-orange-hover); text-decoration: underline; }
.link-arrow .ico { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover .ico { transform: translateX(2px); }
.link-arrow--lg { font-size: var(--fs-base); }

/* ---- Badges (§2.7) ---- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--r-sm);
  font-size: 11px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: var(--ls-caps); text-transform: uppercase; white-space: nowrap;
  background: var(--c-navy); color: var(--c-white);
}
.badge--sale { background: var(--c-navy); color: var(--c-white); }
.badge--featured { background: var(--c-orange-btn); color: var(--c-white); }
.badge--new { background: var(--c-success-text); color: var(--c-white); }   /* 5.0:1 (--c-success was 3.3:1 at 11 px) */
.badge--expired { background: var(--c-muted); color: var(--c-white); }
.badge--hidden { background: var(--c-navy-tint); color: var(--c-navy); }
.badge--neutral { background: var(--c-navy-tint); color: var(--c-navy); }
.badge--count { background: var(--c-orange-btn); color: var(--c-white); min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); justify-content: center; font-size: 11px; letter-spacing: 0; }
.badge--status-draft { background: var(--c-navy-tint); color: var(--c-text-2); }
.badge--status-pending_payment { background: var(--c-warning-tint); color: var(--c-warning-text); }
.badge--status-pending_review { background: var(--c-info-tint); color: var(--c-info-text); }
.badge--status-active { background: var(--c-success-tint); color: var(--c-success-text); }
.badge--status-expired { background: var(--c-text-2); color: var(--c-white); }
.badge--status-hidden { background: var(--c-navy-tint); color: var(--c-navy); }
.badge--status-rejected { background: var(--c-danger-tint); color: var(--c-danger-text); }
.badge--status-pending { background: var(--c-warning-tint); color: var(--c-warning-text); }
.badge--status-paid { background: var(--c-success-tint); color: var(--c-success-text); }
.badge--status-failed { background: var(--c-danger-tint); color: var(--c-danger-text); }
.badge--status-refunded { background: var(--c-navy-tint); color: var(--c-navy); }
.badge--status-blocked { background: var(--c-danger-tint); color: var(--c-danger-text); }
.badge--status-demo { background: var(--c-warning-tint); color: var(--c-warning-text); }
.badge--status-stripe { background: var(--c-info-tint); color: var(--c-info-text); }

/* ---- Chips (§2.23) ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--c-navy-tint); color: var(--c-navy); font-size: 13px; font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
}
a.chip:hover, button.chip:hover { background: var(--c-navy-tint-2); color: var(--c-navy); }
.chip--sm { min-height: 24px; padding: 0 8px; font-size: 12px; }
.chip--outline { background: var(--c-surface); border-color: var(--c-border-strong); color: var(--c-text-2); }
.chip--active, .chip.is-active { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }
.chip--verified { background: var(--c-success-tint); color: var(--c-success-text); }
.listing-rent-line { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.card__also { margin: 0; color: var(--c-text-muted, #46546A); font-size: var(--fs-sm); }
.card__test { margin: 0 0 var(--sp-1); }
.listing-test-off { margin: var(--sp-3) 0 0; padding: var(--sp-3); border-radius: var(--r-md); background: var(--c-warning-tint); color: var(--c-warning-text); font-weight: var(--fw-semibold); }
.chip--warning { background: var(--c-warning-tint); color: var(--c-warning-text); }
.chip--orange { background: var(--c-orange-tint); color: var(--c-orange-text); }
/* multi-unit listing: "⧉ 2 equipos" on the price line (cards, promo cards, seller lists, admin; A6.1). Never
   interactive: on a card it lets clicks through to the stretched title link */
.chip--units { background: var(--c-surface); border-color: var(--c-border-strong); color: var(--c-navy); font-weight: var(--fw-semibold); letter-spacing: normal; pointer-events: none; }
.chip--units .ico { width: 12px; height: 12px; }
.chip .ico { width: 14px; height: 14px; }
.chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-inline-end: -6px; border-radius: 50%; color: inherit; }
.chip__remove:hover { background: rgba(10,29,57,.12); }
/* the 20 px remove cross of an active-filter chip: transparent 44 × 44 hit area (DESIGN §2 intro), same look */
.chip__remove { position: relative; }
.chip__remove::after { content: ''; position: absolute; inset: -12px; }
/* active-filter chips keep their 32 px pill next to the (44 px on phones) "Clear filters" link instead of stretching */
.active-filters { align-items: center; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip-row--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.chip-row--scroll::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .chip-row--scroll { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
/* radio/checkbox chips */
.chip-input { position: relative; }
.chip-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-input input:checked + .chip { background: var(--c-navy); color: var(--c-white); }
.chip-input input:focus-visible + .chip { box-shadow: var(--sh-focus); }

/* ---- Listing card (§2.6) ---- */
.card {
  position: relative; display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.card:hover { box-shadow: var(--sh-md); }
.card:focus-within { box-shadow: var(--sh-md); }
.card--featured { border-top: 2px solid var(--c-orange); }
.card__media { position: relative; display: block; aspect-ratio: var(--ar-card); background: var(--c-navy-tint); overflow: hidden; }
.card__media img, .card__media picture { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.card:hover .card__media img { transform: scale(1.03); }
.card__media .placeholder { width: 100%; height: 100%; object-fit: contain; padding: 18%; opacity: .7; }
.card__badge { position: absolute; top: 10px; left: 10px; z-index: 1; }
.card .fav { position: absolute; top: 8px; right: 8px; z-index: 2; }   /* above the stretched title link */
.card__body { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.card__title { font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.3; letter-spacing: normal; margin: 0; }
.card__title a { color: var(--c-navy); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__title a::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.card__title a:hover { color: var(--c-orange-text); }
.card__sub { font-size: var(--fs-sm); color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__meta { font-size: 13px; color: var(--c-muted); }
/* the matched unit of a lot ("Incluye: Remolque · Great Dane", A6.1): up to two lines instead of one ellipsis */
.card__sub--unit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow-wrap: anywhere; }
.card__price { display: flex; flex-wrap: wrap; row-gap: 2px; white-space: nowrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-navy); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.card__price--ask { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.card__loc { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--c-muted); }
.card__loc .ico { width: 14px; height: 14px; color: var(--c-muted-2); }
.card__loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .card__actions, .card__body .chip { position: relative; z-index: 1; }
.card__status { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1); }
.card--unavailable .card__media { filter: grayscale(1); }
.card--unavailable .card__media::after { content: attr(data-label); position: absolute; inset: auto 0 0; padding: 6px; background: var(--c-overlay); color: var(--c-white); font-size: 12px; font-weight: var(--fw-semibold); text-align: center; letter-spacing: var(--ls-caps); text-transform: uppercase; }
/* Row variant (terb-01) */
.card--row { display: grid; grid-template-columns: 40% minmax(0, 1fr); }
/* the thumb fills its grid cell (height follows the body, min 112px) instead of aspect-ratio + height:100%
   widening the media box over the text column */
.card--row .card__media { aspect-ratio: auto; height: auto; min-height: 112px; width: 100%; border-radius: 0; }
.card--row .card__media > picture, .card--row .card__media > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.card--row .card__media picture img { width: 100%; height: 100%; object-fit: cover; }
.card--row .card__media > img.placeholder { object-fit: contain; padding: 14%; }
@media (min-width: 768px) { .card--row .card__media { min-height: 180px; } }
.card--row .card__body { padding: var(--sp-3); justify-content: center; }
.card--row .card__title { font-size: var(--fs-base); padding-inline-end: calc(var(--touch) - 4px); }   /* clear of the favourite button (top-right of the row) */
.card--row .card__meta { display: flex; flex-wrap: wrap; gap: 0 var(--sp-1); }
.card--row .card__price { font-size: var(--fs-md); margin-top: 2px; }
.card--row .card__link { position: relative; z-index: 1; margin-top: 4px; }
@media (min-width: 768px) { .card--row { grid-template-columns: 320px minmax(0, 1fr); } .card--row .card__body { padding: var(--sp-4) var(--sp-5); gap: 6px; } .card--row .card__title { font-size: var(--fs-md); } }
.card--compact .card__body { padding: var(--sp-3); }
.card--compact .card__title { font-size: var(--fs-sm); }
.card--compact .card__price { font-size: var(--fs-base); }

/* Favorite / like buttons */
.fav { margin: 0; }
.fav__btn, .like__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 36px; height: 36px; border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-navy); box-shadow: var(--sh-sm); border: 1px solid rgba(10,29,57,.06);
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.fav__btn:hover, .like__btn:hover { transform: scale(1.06); color: var(--c-orange-text); }
.fav__btn .ico, .like__btn .ico { width: 18px; height: 18px; }
.fav__btn .ico--on, .like__btn .ico--on { display: none; color: var(--c-orange); }
.fav__btn[aria-pressed="true"] .ico--on, .like__btn[aria-pressed="true"] .ico--on { display: block; }
.fav__btn[aria-pressed="true"] .ico--off, .like__btn[aria-pressed="true"] .ico--off { display: none; }
.fav__btn[aria-pressed="true"] { color: var(--c-orange); }
.fav__btn.is-busy, .like__btn.is-busy { opacity: .6; pointer-events: none; }
.fav__btn--lg { width: auto; height: var(--touch); padding: 0 var(--sp-4); border: 1px solid var(--c-navy-tint-2); box-shadow: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.like__btn { width: auto; padding: 0 10px; height: 32px; font-size: 13px; font-weight: var(--fw-semibold); }
.like__count { font-variant-numeric: tabular-nums; }
/* 44 px touch target (DESIGN §2 intro, §6) without changing the look: the 36 px favourite circle and the 32 px photo-like
   pill get a transparent ::after hit area 4 px / 6 px around their border box (inside the card and photo margins, no
   layout change). The inset counts from the padding box, hence 1 px more for the 1 px border. */
.fav__btn, .like__btn { position: relative; }
.fav__btn::after, .like__btn::after { content: ''; position: absolute; inset: -5px; }
.like__btn::after { inset: -7px -1px; }
.fav__btn--lg::after { inset: 0; }
@keyframes fav-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.fav__btn.is-pop .ico, .like__btn.is-pop .ico { animation: fav-pop var(--t-slow) var(--ease); }

/* ---- Category tile (§2.5) ---- */
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 104px; padding: 14px 10px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-navy); text-decoration: none; text-align: center;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tile:hover, .tile:focus-visible { border-color: var(--c-orange); color: var(--c-navy); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.tile__icon { width: 36px; height: 36px; color: var(--c-navy); transition: color var(--t-fast) var(--ease); }
.tile:hover .tile__icon, .tile:focus-visible .tile__icon { color: var(--c-orange); }
.tile__label { font-size: 13px; font-weight: var(--fw-semibold); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile__count { font-size: var(--fs-xs); color: var(--c-muted); }
.tile--more { background: var(--c-navy-tint); border-color: transparent; }
.tile--more:hover { background: var(--c-surface); }
.tile--lg { min-height: 140px; }
.tile--lg .tile__icon { width: 48px; height: 48px; }
.tile--lg .tile__label { font-size: var(--fs-sm); }
.tile--row { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 64px; padding: var(--sp-3) var(--sp-4); }
.tile--row .tile__icon { width: 28px; height: 28px; }

/* ---- Action cards (§2.4) ---- */
.action-card {
  position: relative; display: flex; gap: var(--sp-4); padding: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  transition: box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  flex-direction: column;
}
.action-card:hover { box-shadow: var(--sh-md); border-color: var(--c-navy-tint-2); }
@media (min-width: 768px) { .action-card { flex-direction: row; padding: var(--sp-6); align-items: flex-start; } }
.action-card__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--r-pill); color: var(--c-white); }
@media (min-width: 768px) { .action-card__icon { width: 56px; height: 56px; } }
.action-card__icon .ico { width: 24px; height: 24px; }
@media (min-width: 768px) { .action-card__icon .ico { width: 28px; height: 28px; } }
.action-card--need .action-card__icon { background: var(--c-navy); }
.action-card--have .action-card__icon { background: var(--c-orange); }
.action-card__body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.action-card__title { font-size: var(--fs-base); line-height: 1.3; }
@media (min-width: 768px) { .action-card__title { font-size: var(--fs-lg); } }
.action-card__title a { color: var(--c-navy); text-decoration: none; }
.action-card__title a::after { content: ''; position: absolute; inset: 0; }
.action-card__text { font-size: var(--fs-sm); color: var(--c-muted); display: none; }
@media (min-width: 768px) { .action-card__text { display: block; } }
.action-card .link-arrow { min-height: 0; margin-top: auto; position: relative; z-index: 1; }

/* ---- Search card (§2.3) ---- */
.search-card { display: flex; flex-direction: column; background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: var(--sp-3); gap: var(--sp-1); }
.search-card__field { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3); min-height: 52px; border-bottom: 1px solid var(--c-border); }
.search-card__field label { font-size: 13px; font-weight: var(--fw-semibold); color: var(--c-navy); }
.search-card__field .input, .search-card__field .select { border: 0; padding: 0 28px 0 0; min-height: 26px; font-size: 15px; background: transparent; border-radius: 0; box-shadow: none; }
.search-card__field .input:focus-visible, .search-card__field .select:focus-visible { box-shadow: none; }
/* the borderless inputs show focus on their segment: 2 px solid inset ring (5.2:1), not only the #FAFBFC tint */
.search-card__field:focus-within { background: var(--c-surface-2); border-radius: var(--r-sm); box-shadow: inset 0 0 0 2px var(--c-focus); }
.search-card__field .ico { position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--c-navy); pointer-events: none; }
.search-card__field .select { -webkit-appearance: none; appearance: none; background-image: none; }
.search-card .btn { margin-top: var(--sp-2); }
@media (min-width: 768px) {
  .search-card { flex-direction: row; align-items: stretch; padding: var(--sp-2); gap: 0; }
  .search-card__field { flex: 1 1 0; border-bottom: 0; border-right: 1px solid var(--c-border); padding: var(--sp-2) var(--sp-4); justify-content: center; }
  .search-card__field--where { flex: 0 1 260px; }
  .search-card .btn { margin: 0 0 0 var(--sp-2); align-self: center; }
}

/* ---- Spec tiles (§2.8) ---- */
.spec-tiles { display: grid; gap: var(--sp-3); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 400px) { .spec-tiles { gap: var(--sp-2); } }
@media (min-width: 768px) { .spec-tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }
.spec { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; background: var(--c-navy-tint); border-radius: var(--r-md); text-align: center; min-width: 0; }
@media (min-width: 768px) { .spec { align-items: flex-start; text-align: left; padding: 12px; } }
.spec .ico { width: 24px; height: 24px; color: var(--c-navy); }
/* --c-text-2 on the navy tint: 6.7:1 (--c-muted was 4.3:1 at 11 px, below AA) */
.spec__label { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-text-2); max-width: 100%; overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto; }  /* breaks only at spaces / soft hyphens (common.spec_tile.*) / dictionary points, never mid-letter */
.spec__value { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-navy); overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }   /* a word wider than the tile is hyphenated (html lang) before any raw break */
/* phones: the extra tiles under "Ver todas las características" (brand, model, price …) get 3 columns, so a brand like
   'Caterpillar' / 'Freightliner' fits its tile instead of splitting */
@media (max-width: 479.98px) { .spec-more .spec-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .spec__value { font-size: var(--fs-base); } }
@media (max-width: 479.98px) { .spec__label { letter-spacing: .02em; } .spec-tiles .spec { padding-inline: 4px; } }
.spec-tiles--collapsible .spec:nth-child(n+5) { display: none; }
.spec-tiles--collapsible.is-open .spec:nth-child(n+5) { display: flex; }
@media (min-width: 768px) { .spec-tiles--collapsible .spec:nth-child(n+5) { display: flex; } }
.spec-more { display: block; margin-top: var(--sp-3); }
.spec-more summary { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--touch); color: var(--c-orange-text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.spec-more[open] summary .ico { transform: rotate(180deg); }
.spec-more .spec-tiles { margin-top: var(--sp-3); }
@media (min-width: 768px) { .spec-more { display: none; } }

/* ---- Detail list (§2.11) ---- */
.detail-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; background: var(--c-surface); }
.detail-list > div { display: contents; }
.detail-list dt, .detail-list dd { padding: 10px 14px; border-top: 1px solid var(--c-border); }
.detail-list > div:first-child dt, .detail-list > div:first-child dd, .detail-list dt:first-child, .detail-list dt:first-child + dd { border-top: 0; }
.detail-list dt { font-size: 13px; color: var(--c-muted); font-weight: var(--fw-medium); background: var(--c-surface-2); }
.detail-list dd { font-size: 15px; color: var(--c-text); font-weight: var(--fw-medium); }

/* ---- Gallery (§2.9) ---- */
.gallery { position: relative; }
.gallery__main { position: relative; aspect-ratio: var(--ar-card); background: var(--c-navy-tint); overflow: hidden; }
@media (min-width: 768px) { .gallery__main { border-radius: var(--r-lg); } }
.gallery__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track li { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: center; }
.gallery__figure { margin: 0; width: 100%; height: 100%; }
/* block M-95: an upright photo of a sample listing whole (never cropped, never enlarged past its size) on a blurred copy of itself */
.media--fit { position: relative; overflow: hidden; isolation: isolate; }
.media--fit > .media__blur { position: absolute; inset: -24px; z-index: -1; width: calc(100% + 48px) !important; height: calc(100% + 48px) !important; max-width: none; object-fit: cover !important; filter: blur(18px) brightness(.8); }
.media--fit picture, .gallery__track .media--fit picture { display: flex; align-items: center; justify-content: center; background: transparent; }
.gallery__track .media--fit img { background: transparent; }
.card__media.media--fit picture img, .gallery__track .media--fit picture img { object-fit: scale-down; background: transparent; }
.card:hover .card__media.media--fit img { transform: none; }
.gallery__track picture, .gallery__track img { width: 100%; height: 100%; object-fit: contain; background: var(--c-navy-tint); }
.gallery__track .like { position: absolute; left: 10px; bottom: 10px; }
.gallery__badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
.gallery .fav { position: absolute; top: 10px; right: 10px; z-index: 2; }
.gallery__counter { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 0; padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-overlay); color: var(--c-white); font-size: 12px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.gallery__prev, .gallery__next, .gallery__zoom {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: none; align-items: center; justify-content: center; width: var(--touch); height: var(--touch);
  border-radius: var(--r-pill); background: rgba(255,255,255,.92); color: var(--c-navy); box-shadow: var(--sh-md);
}
.gallery__prev:hover, .gallery__next:hover, .gallery__zoom:hover { background: var(--c-white); color: var(--c-orange-text); }
.gallery__prev { left: 12px; }
.gallery__next { right: 12px; }
.gallery__zoom { top: auto; bottom: 12px; left: 12px; transform: none; width: auto; padding: 0 12px; gap: 6px; font-size: 13px; font-weight: var(--fw-semibold); height: 36px; }
.gallery__zoom + .like { left: auto; }
@media (min-width: 768px) { .gallery__prev, .gallery__next, .gallery__zoom { display: inline-flex; } .gallery__track .like { left: auto; right: 12px; bottom: 12px; } .gallery__counter { right: auto; left: 50%; transform: translateX(-50%); } }
.gallery__thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); overflow-x: auto; scrollbar-width: none; padding: 2px var(--gutter); margin-inline: calc(var(--gutter) * -1); }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumbs li { flex: 0 0 auto; }
.gallery__thumbs li > a { display: block; }
.gallery__thumbs picture { display: block; width: 100%; height: 100%; }
@media (min-width: 768px) { .gallery__thumbs { padding-inline: 2px; margin-inline: 0; } }
.gallery__thumbs a, .gallery__thumbs button { flex: 0 0 72px; width: 72px; height: 54px; border-radius: var(--r-sm); overflow: hidden; border: 2px solid transparent; background: var(--c-navy-tint); opacity: .8; transition: opacity var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.gallery__thumbs a:hover, .gallery__thumbs button:hover { opacity: 1; }
.gallery__thumbs .is-active { border-color: var(--c-orange); opacity: 1; }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gallery--single .gallery__prev, .gallery--single .gallery__next, .gallery--single .gallery__thumbs, .gallery--single .gallery__counter { display: none; }
.gallery__empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--c-muted); }
.gallery__empty img { width: 40%; max-width: 220px; opacity: .8; }

/* Lightbox */
.lightbox { border: 0; padding: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; background: rgba(0,0,0,.95); color: var(--c-white); }
.lightbox::backdrop { background: rgba(0,0,0,.95); }
.lightbox__close { position: absolute; top: 12px; right: 12px; z-index: 3; width: var(--touch); height: var(--touch); border-radius: var(--r-pill); background: rgba(255,255,255,.15); color: var(--c-white); display: inline-flex; align-items: center; justify-content: center; }
.lightbox__close:hover { background: rgba(255,255,255,.3); }
.lightbox__track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lightbox__track::-webkit-scrollbar { display: none; }
.lightbox__track li { flex: 0 0 100%; height: 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; }
.lightbox__track picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* max-height resolves against the picture box above (the <picture> wrapper made it auto → tall photos overflowed the screen) */
.lightbox__track img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox__prev, .lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; border-radius: var(--r-pill); background: rgba(255,255,255,.15); color: var(--c-white); display: inline-flex; align-items: center; justify-content: center; }
.lightbox__prev { left: 12px; } .lightbox__next { right: 12px; }
.lightbox__prev:hover, .lightbox__next:hover { background: rgba(255,255,255,.3); }
.lightbox__counter { position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 3; padding: 4px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.15); font-size: 13px; font-weight: var(--fw-semibold); }

/* ---- Seller card (§2.10) ---- */
.seller-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.seller-card__head { display: flex; align-items: center; gap: var(--sp-3); }
.seller-card__logo { width: 56px; height: 56px; border-radius: var(--r-md); object-fit: cover; background: var(--c-navy-tint); flex-shrink: 0; }
.seller-card__name { font-size: 17px; font-weight: var(--fw-bold); color: var(--c-navy); line-height: 1.3; }
.seller-card__name a { color: inherit; text-decoration: none; }
.seller-card__name a:hover { color: var(--c-orange-text); }
.seller-card__meta { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--c-muted); }
.seller-card__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.seller-card__meta .ico { width: 16px; height: 16px; color: var(--c-muted-2); }
.seller-card__actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-1); }
.seller-card .chip--verified { align-self: flex-start; }
/* Instant contact block inside the seller card (partials/contact-block.php, migration 0006) */
.seller-card__actions .contact-block { order: -1; }
.contact-block { display: flex; flex-direction: column; gap: var(--sp-2); }
.contact-block--hidden { padding: var(--sp-3); border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); }
.contact-block__badge { margin: 0; }
.contact-block__badge .chip { gap: 4px; }
.contact-block__note { margin: 0; font-size: 13px; color: var(--c-muted); }
.contact-block__call { display: flex; flex-direction: column; gap: 2px; }
.contact-block__number { display: flex; align-items: center; justify-content: center; gap: 2px; margin: 0; min-height: var(--touch); font-size: 18px; font-weight: var(--fw-semibold); color: var(--c-navy); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.contact-block__digits { user-select: all; }
.contact-block__copy { color: var(--c-muted); min-height: var(--touch); }
.contact-block__copy:hover { color: var(--c-navy); text-decoration: none; }
.contact-block__copy .ico { width: 18px; height: 18px; }
.contact-block__help { margin: -2px 0 0; font-size: 13px; line-height: 1.4; color: var(--c-muted); text-align: center; }

/* ---- Price card (detail sidebar) ---- */
.price-card { padding: var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.price-card__price { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); color: var(--c-navy); letter-spacing: -0.01em; line-height: 1.2; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .price-card__price { font-size: var(--fs-2xl); } }
.price-card__price--ask { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.price-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.price-card__actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }

/* ---- Avatar ---- */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--c-navy-tint); color: var(--c-navy); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.avatar--lg { width: 56px; height: 56px; font-size: var(--fs-md); }
.avatar--xl { width: 96px; height: 96px; font-size: var(--fs-xl); border-radius: var(--r-lg); }

/* ---- Forms (§2.12) ---- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field, .form-row + .field, .field + .form-row, .form-row + .form-row { margin-top: var(--sp-4); }
.field__label, .field > label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-navy); }
.field__label .req { color: var(--c-danger); margin-inline-start: 2px; }
.field__label .opt { color: var(--c-muted); font-weight: var(--fw-regular); }
.field__hint { font-size: 13px; color: var(--c-muted); }
.field__error { display: flex; align-items: flex-start; gap: 4px; font-size: 13px; color: var(--c-danger-text); }
.field__error .ico { width: 14px; height: 14px; margin-top: 2px; }
.field__counter { font-size: 12px; color: var(--c-muted); text-align: right; font-variant-numeric: tabular-nums; }
.field__counter.is-over { color: var(--c-danger-text); }
.input, .select, .textarea {
  width: 100%; min-height: var(--touch); padding: 10px 14px; font-size: 15px; line-height: 1.4; color: var(--c-text);
  background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
/* --c-muted (#6B7280, 4.6:1 on white) — --c-muted-2 was 2.5:1, below WCAG AA (DESIGN §6); opacity for Firefox */
.input::placeholder, .textarea::placeholder, .select::placeholder { color: var(--c-muted); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-muted-2); }
.input:focus, .select:focus, .textarea:focus, .input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--c-focus); box-shadow: var(--sh-focus-field); outline: none; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--c-danger); }
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus, .select[aria-invalid="true"]:focus { box-shadow: var(--sh-focus-danger); }
.input:disabled, .select:disabled, .textarea:disabled, .input[readonly] { background: var(--c-surface-2); color: var(--c-muted); }
.input--sm, .select--sm { min-height: 36px; padding: 6px 10px; font-size: 14px; }
.select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230A1D39' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.select[multiple] { background-image: none; padding-right: 14px; }
.textarea { min-height: 140px; resize: vertical; }
.textarea--sm { min-height: 88px; }
.input-group { display: flex; align-items: stretch; }
.input-group__prefix, .input-group__suffix { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--c-border-strong); background: var(--c-surface-2); color: var(--c-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; }
.input-group__prefix { border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md); }
.input-group__suffix { border-left: 0; border-radius: 0 var(--r-md) var(--r-md) 0; }
.input-group .input { border-radius: 0; }
.input-group .input:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.input-group .input:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 44px; }
.input-wrap__btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-muted); border-radius: var(--r-sm); }
.input-wrap__btn:hover { color: var(--c-navy); }
.input-wrap__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--c-muted); pointer-events: none; }
.input-wrap--icon .input { padding-left: 40px; }
.check { display: flex; align-items: flex-start; gap: 10px; min-height: var(--touch); padding-block: 6px; cursor: pointer; font-size: 15px; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--c-navy); flex-shrink: 0; cursor: pointer; }
.check__text { color: var(--c-text); }
.check__hint { display: block; font-size: 13px; color: var(--c-muted); }
.check--inline { display: inline-flex; margin-inline-end: var(--sp-4); }
.check-group { display: flex; flex-direction: column; gap: 2px; }
.check-group--inline { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--touch); cursor: pointer; }
.switch__text { min-width: 0; font-size: 15px; font-weight: var(--fw-medium); color: var(--c-navy); }
/* min-width:0 + anywhere: a long unbroken hint (the public URL of the seller page) wraps instead of pushing the track out */
.switch__hint { display: block; font-size: 13px; font-weight: var(--fw-regular); color: var(--c-muted); overflow-wrap: anywhere; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch__track { position: relative; flex-shrink: 0; width: 44px; height: 26px; border-radius: var(--r-pill); background: var(--c-border-strong); transition: background-color var(--t-fast) var(--ease); }
.switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--c-white); box-shadow: var(--sh-sm); transition: transform var(--t-fast) var(--ease); }
.switch input:checked + .switch__track { background: var(--c-success); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--sh-focus); }
.switch input:disabled + .switch__track { opacity: .5; }
.file-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 160px; padding: var(--sp-6); border: 2px dashed var(--c-border-strong); border-radius: var(--r-lg); background: var(--c-surface); text-align: center; color: var(--c-muted); transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.file-drop.is-dragover, .file-drop:focus-within { border-color: var(--c-orange); background: var(--c-orange-tint); }
.file-drop .ico { width: 36px; height: 36px; color: var(--c-navy); }
.file-drop__label { color: var(--c-text); font-weight: var(--fw-medium); }
.file-drop__label a, .file-drop__label .link { color: var(--c-orange-text); text-decoration: underline; cursor: pointer; }
.file-drop__hint { font-size: 13px; }
.file-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-drop__native { margin-top: var(--sp-2); }
/* compact picker (partials/form/file.php variant 'button'): the whole row is the <label>; the input stays focusable */
.file-pick { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-height: var(--touch); padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); cursor: pointer; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.file-pick:hover { border-color: var(--c-navy); background: var(--c-surface-2); }
.file-pick:focus-within { border-color: var(--c-orange); background: var(--c-orange-tint); }
.file-pick__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-pick__input:focus-visible { box-shadow: none; }
.file-pick__input:focus-visible + .file-pick__btn { box-shadow: var(--sh-focus); }
.file-pick__btn { flex-shrink: 0; pointer-events: none; }
.file-pick__name { display: none; flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; font-size: 14px; color: var(--c-muted); }
.js .file-pick__name { display: block; }
.file-pick.has-file .file-pick__name { color: var(--c-text); font-weight: var(--fw-medium); }
.has-error .file-pick { border-color: var(--c-danger); }
@media (forced-colors: active) { .file-pick:focus-within { outline: 2px solid CanvasText; outline-offset: 2px; } }
.file-input { font-size: var(--fs-sm); }
.file-input::file-selector-button { margin-inline-end: var(--sp-3); min-height: 36px; padding: 0 14px; border: 1px solid var(--c-navy-tint-2); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-navy); font: inherit; font-size: 14px; font-weight: var(--fw-semibold); cursor: pointer; }
.file-input::file-selector-button:hover { background: var(--c-navy-tint); }
.form-row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.form-row .field + .field { margin-top: 0; }
.form-section { padding: var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.form-section + .form-section { margin-top: var(--sp-4); }
.form-section > h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
.form-section > h2 + .field, .form-section > h2 + .form-row { margin-top: 0; }
.form-actions { display: flex; flex-direction: column-reverse; gap: var(--sp-2); margin-top: var(--sp-6); }
.form-actions .btn { width: 100%; }
@media (min-width: 480px) { .form-actions { flex-direction: row; justify-content: flex-end; } .form-actions .btn { width: auto; } .form-actions--start { justify-content: flex-start; } .form-actions--between { justify-content: space-between; } }
.form-actions--sticky { position: sticky; bottom: 0; z-index: 2; margin: var(--sp-6) calc(var(--gutter) * -1) 0; padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); background: var(--c-surface); border-top: 1px solid var(--c-border); box-shadow: var(--sh-up); }
@media (min-width: 768px) { .form-actions--sticky { position: static; margin-inline: 0; padding: 0; background: transparent; border: 0; box-shadow: none; } }
.form-errors { margin-bottom: var(--sp-5); }
.form-errors ul { margin-top: var(--sp-2); padding-inline-start: 1.2em; list-style: disc; font-size: var(--fs-sm); }
.form-errors li + li { margin-top: 2px; }
.form-errors a { color: inherit; }
.radio-tiles { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .radio-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.radio-tiles label { position: relative; }
.radio-tiles input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radio-tiles input:checked + .tile { border-color: var(--c-orange); background: var(--c-orange-tint); }
.radio-tiles input:checked + .tile .tile__icon { color: var(--c-orange); }
.radio-tiles input:focus-visible + .tile { box-shadow: var(--sh-focus); }

/* ---- Alerts / flash (§2.14) ---- */
.alert { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border-left: 4px solid var(--c-info); background: var(--c-info-tint); color: var(--c-text); font-size: var(--fs-sm); }
.alert > .ico { flex-shrink: 0; margin-top: 1px; color: var(--c-info); }
.alert__body { flex: 1; min-width: 0; }
.alert__title { font-weight: var(--fw-semibold); color: var(--c-navy); }
.alert__body p + p { margin-top: 4px; }
.alert__close { margin: -6px -8px -6px 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--c-muted); flex-shrink: 0; }
.alert__close:hover { background: rgba(10,29,57,.08); color: var(--c-navy); }
.alert--success { border-color: var(--c-success); background: var(--c-success-tint); }
.alert--success > .ico { color: var(--c-success); }
.alert--warning { border-color: var(--c-warning); background: var(--c-warning-tint); }
.alert--warning > .ico { color: var(--c-warning-text); }
.alert--danger { border-color: var(--c-danger); background: var(--c-danger-tint); }
.alert--danger > .ico { color: var(--c-danger); }
.alert--info { border-color: var(--c-info); background: var(--c-info-tint); }
.alert--navy { border-color: var(--c-navy); background: var(--c-navy-tint); }
.alert--navy > .ico { color: var(--c-navy); }
.alert.is-leaving { opacity: 0; transition: opacity var(--t-base) var(--ease); }
.flash { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-4); }
.flash:empty { display: none; }

/* ---- Toast ---- */
.toast-region { position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(var(--sticky-cta-h) + 12px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-toast); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); pointer-events: none; }
@media (min-width: 768px) { .toast-region { left: auto; right: var(--sp-6); bottom: var(--sp-6); align-items: flex-end; } }
body:not(.page--has-cta) .toast-region { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) { body:not(.page--has-cta) .toast-region { bottom: var(--sp-6); } }
.toast { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 420px; padding: 10px 14px; border-radius: var(--r-md); background: var(--c-navy); color: var(--c-white); font-size: var(--fs-sm); font-weight: var(--fw-medium); box-shadow: var(--sh-lg); pointer-events: auto; opacity: 0; transform: translateY(8px); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.toast.is-visible { opacity: 1; transform: none; }
.toast .ico { color: var(--c-orange); }
.toast--success .ico { color: #4ADE80; }
.toast--danger { background: var(--c-danger); }
.toast--danger .ico { color: var(--c-white); }

/* ---- Pagination (§2.15) ---- */
/* list reset here too: base.css resets only ul[class], and a bare <ul> kept its disc markers + 1.25rem indent */
.pagination ul { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.pagination li { list-style: none; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-navy); text-decoration: none; }
.pagination a { border: 1px solid var(--c-border); background: var(--c-surface); }
.pagination a:hover { border-color: var(--c-navy-tint-2); background: var(--c-navy-tint); }
.pagination .is-current { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }
.pagination .is-gap { color: var(--c-muted); min-width: 24px; padding: 0; }
.pagination .is-disabled { color: var(--c-muted-2); border-color: var(--c-border); pointer-events: none; }
.pagination__summary { display: none; color: var(--c-muted); font-size: var(--fs-sm); padding: 0 var(--sp-2); }
@media (max-width: 767.98px) { .pagination__page { display: none; } .pagination__summary { display: inline-flex; } .pagination .is-gap { display: none; } .pagination ul { justify-content: space-between; } }

/* ---- Breadcrumbs (§2.17) ---- */
.breadcrumbs { padding-block: var(--sp-3); font-size: 13px; color: var(--c-muted); }
.breadcrumbs ol { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 2px; }
.breadcrumbs li + li::before { content: ''; width: 14px; height: 14px; margin-inline: 2px; flex-shrink: 0;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat; color: var(--c-muted-2); }
.breadcrumbs a { color: var(--c-muted); text-decoration: none; padding-block: 4px; }
.breadcrumbs a:hover { color: var(--c-navy); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--c-text-2); font-weight: var(--fw-medium); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767.98px) { .breadcrumbs li.is-collapsed { display: none; } .breadcrumbs li.is-ellipsis { display: inline-flex; } }
/* Phones: one line — middle crumbs collapse (above), the current crumb truncates with an ellipsis instead of wrapping */
@media (max-width: 767.98px) {
  .breadcrumbs ol { flex-wrap: nowrap; }
  .breadcrumbs li { flex-shrink: 0; }
  .breadcrumbs li:last-child { flex-shrink: 1; min-width: 0; }
  /* the parent crumb next to it (e.g. a long listing title in the seller area) truncates too, so the row never
     overflows the phone width and the current page stays readable */
  .breadcrumbs li:nth-last-child(2):not(:first-child) { flex-shrink: 1; min-width: 0; max-width: 45%; }
  .breadcrumbs li:nth-last-child(2):not(:first-child) > a,
  .breadcrumbs li:nth-last-child(2):not(:first-child) > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 768px) { .breadcrumbs li.is-ellipsis { display: none; } }

/* ---- Filters (§2.16) ---- */
.filters { display: flex; flex-direction: column; gap: var(--sp-3); }
.filters__group { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.filters__group > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--touch); padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-navy); }
.filters__group > summary .ico { color: var(--c-muted); transition: transform var(--t-fast) var(--ease); }
.filters__group[open] > summary .ico--chev { transform: rotate(180deg); }
.filters__body { padding: 0 var(--sp-4) var(--sp-4); }
.filters__body .field + .field { margin-top: var(--sp-3); }
.filters__radio { display: flex; flex-direction: column; gap: 2px; }
.filters__radio label { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: var(--fs-sm); cursor: pointer; }
.filters__radio input { accent-color: var(--c-navy); width: 18px; height: 18px; }
.filters__radio .count { margin-inline-start: auto; font-size: 12px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.filters__radio--sub { padding-inline-start: var(--sp-6); }
.filters__range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-2); }
.filters__range span { color: var(--c-muted); font-size: 13px; }
.filters__price-only { margin-top: var(--sp-2); }
.filters__actions { display: flex; gap: var(--sp-2); }
.filters__actions .btn { flex: 1; }
/* Mobile bottom sheet */
.sheet { border: 0; padding: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100vh; margin: 0; background: var(--c-surface); color: var(--c-text); }
.sheet::backdrop { background: var(--c-overlay-soft); }
.sheet__inner { display: flex; flex-direction: column; height: 100%; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-border); }
.sheet__head h2 { font-size: var(--fs-md); }
.sheet__body { flex: 1; overflow-y: auto; padding: var(--sp-4); overscroll-behavior: contain; }
.sheet__foot { position: sticky; bottom: 0; padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); background: var(--c-surface); border-top: 1px solid var(--c-border); }
@media (min-width: 768px) { .sheet { width: min(480px, 100%); height: auto; max-height: 90vh; margin: auto; border-radius: var(--r-xl); } }

/* ---- Modal (§2.19) ---- */
.modal { border: 0; padding: 0; width: min(560px, calc(100% - 2 * var(--gutter))); max-width: 100%; max-height: calc(100vh - 2 * var(--sp-4)); margin: auto; border-radius: var(--r-xl); background: var(--c-surface); color: var(--c-text); box-shadow: var(--sh-lg); }
.modal::backdrop { background: var(--c-overlay); }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-border); }
.modal__head h2 { font-size: var(--fs-md); }
.modal__body { padding: var(--sp-5); overflow-y: auto; max-height: calc(100vh - 160px); }
.modal__foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--c-border); }
.modal__close { width: var(--touch); height: var(--touch); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); color: var(--c-muted); }
.modal__close:hover { background: var(--c-navy-tint); color: var(--c-navy); }
/* Phones: a dialog is a bottom sheet as tall as its content (short confirms: title, one line, two buttons) over the
   dimmed page, not a blank full-screen page. Long forms opt in to full screen with .modal--full (the inquiry dialog);
   the head stays on top and the body scrolls inside either variant. */
@media (max-width: 767.98px) {
  .modal { width: 100%; max-width: none; height: fit-content; max-height: 90vh; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; }   /* fit-content: auto would stretch between inset 0/0 */
  .modal[open]:not(.modal--inline) { display: flex; flex-direction: column; }
  .modal[open] > form:only-child { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
  .modal__head, .modal__foot { flex: 0 0 auto; }
  .modal__body { flex: 1 1 auto; min-height: 0; max-height: none; }
  .modal__foot { flex-wrap: wrap; padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
  .modal__foot .btn { flex: 1 1 auto; }   /* share the row; a long label wraps the pair into two full-width rows */
  .modal--full { max-height: 100vh; height: 100%; margin: 0; border-radius: 0; }
  .modal--sheet { display: flex; flex-direction: column; }
}
.modal[open] { animation: modal-in var(--t-base) var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* No-JS fallback: the inline form is shown in place of the dialog */
.modal--inline { display: block; position: static; width: 100%; height: auto; max-height: none; margin: 0; border-radius: var(--r-lg); box-shadow: none; border: 1px solid var(--c-border); }

/* ---- Tabs ---- */
.tabs { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-5); }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch); padding: 0 var(--sp-3); color: var(--c-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; }
.tabs a:hover, .tabs button:hover { color: var(--c-navy); }
.tabs .is-active, .tabs [aria-current="page"] { color: var(--c-navy); font-weight: var(--fw-semibold); }
.tabs .is-active::after, .tabs [aria-current="page"]::after { content: ''; position: absolute; left: var(--sp-2); right: var(--sp-2); bottom: -1px; height: 2px; background: var(--c-orange); border-radius: 2px; }
.tabs .count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--c-navy-tint); color: var(--c-navy); font-size: 11px; font-weight: var(--fw-bold); }

/* ---- Empty state (§2.22) ---- */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: var(--sp-10) var(--sp-4); background: var(--c-surface); border: 1px dashed var(--c-border-strong); border-radius: var(--r-lg); }
.empty-state img, .empty-state svg { width: 120px; height: 120px; }
.empty-state h2, .empty-state h3 { font-size: var(--fs-md); margin: 0; }
.empty-state p { color: var(--c-muted); max-width: 44ch; }
.empty-state .btn { margin-top: var(--sp-2); }
.empty-state--plain { background: transparent; border: 0; }

/* ---- Language switch (§2.21) ---- */
.lang-switch { display: inline-flex; align-items: center; padding: 2px; border: 1px solid var(--c-navy-tint-2); border-radius: var(--r-pill); background: var(--c-surface); }
.lang-switch a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: var(--r-pill); color: var(--c-muted); font-size: 13px; font-weight: var(--fw-semibold); text-decoration: none; }
.lang-switch a:hover { color: var(--c-navy); }
.lang-switch a.is-current, .lang-switch a[aria-current="true"] { background: var(--c-navy); color: var(--c-white); }
.lang-switch img { width: 18px; height: 13px; border-radius: 2px; }
.lang-switch--dark { border-color: var(--c-on-navy-line); background: transparent; }
.lang-switch--dark a { color: var(--c-on-navy-muted); }
.lang-switch--dark a:hover { color: var(--c-white); }
.lang-switch--dark a.is-current { background: var(--c-white); color: var(--c-navy); }
.lang-switch--block { width: 100%; }
.lang-switch--block a { flex: 1; justify-content: center; min-height: 40px; }
/* touch targets ≥ 44px on mobile (DESIGN §2 intro, §6) */
@media (max-width: 767.98px) { .lang-switch a, .lang-switch--block a { min-height: var(--touch); } }

/* ---- Skeleton ---- */
.skeleton { position: relative; overflow: hidden; background: var(--c-navy-tint); border-radius: var(--r-sm); color: transparent; }
.skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: skeleton 1.4s infinite; }
@keyframes skeleton { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

/* ---- View toggle ---- */
.view-toggle { display: inline-flex; padding: 2px; border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); }
.view-toggle a, .view-toggle button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px; border-radius: var(--r-sm); color: var(--c-muted); text-decoration: none; }
.view-toggle a:hover, .view-toggle button:hover { color: var(--c-navy); }
.view-toggle [aria-pressed="true"], .view-toggle .is-active { background: var(--c-navy); color: var(--c-white); }

/* ---- Touch targets on phones (DESIGN §2 intro, §6: every interactive element ≥ 44 × 44 on touch) ----
   The compact controls keep their size from md up (pointer precision) and grow to --touch below md. Only link / button /
   radio-label chips are targets: status, "Negociable" and verified chips keep their size. Page stylesheets that pin a
   chip height (pages-search.css, admin-promos.css) repeat this rule for their own selectors. */
@media (max-width: 767.98px) {
  .btn--sm { min-height: var(--touch); }
  .btn--icon.btn--sm { width: var(--touch); }
  a.chip, button.chip, .chip-input > .chip { min-height: var(--touch); }
  .pagination a, .pagination span { min-width: var(--touch); height: var(--touch); }
  .filters__radio label { min-height: var(--touch); }
  /* grid/list switch: 44 × 40 segments in a 1 px inset frame, so the control is 44 px high like the sort select next to
     it; the ::after hit area covers the frame (44 × 44 per segment) */
  .view-toggle { padding: 1px; }
  .view-toggle a, .view-toggle button { position: relative; width: var(--touch); height: 40px; }
  .view-toggle a::after, .view-toggle button::after { content: ''; position: absolute; inset: -2px 0; }
}

/* ---- Steps + why (§2.23) ---- */
.steps-why { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .steps-why { grid-template-columns: 1.7fr 1fr; gap: var(--sp-6); } }
.steps { padding: var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
@media (min-width: 768px) { .steps { padding: var(--sp-6); } }
.steps h2 { margin-bottom: var(--sp-5); }
.steps__list { display: grid; gap: var(--sp-5) var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { display: flex; flex-direction: column; gap: var(--sp-2); }
.step__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-pill); background: var(--c-navy-tint); color: var(--c-navy); }
.step__icon .ico { width: 24px; height: 24px; }
.step__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-navy); }
@media (min-width: 768px) { .step__title { font-size: 15px; } }
.step__text { font-size: 13px; color: var(--c-muted); line-height: 1.5; }
.why { padding: var(--sp-5); background: var(--c-orange-tint); border-radius: var(--r-lg); }
@media (min-width: 768px) { .why { padding: var(--sp-6); } }
.why h2 { margin-bottom: var(--sp-4); }
.why__list { display: flex; flex-direction: column; gap: var(--sp-3); }
.why__list li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text); }
.why__list .ico { color: var(--c-success); width: 18px; height: 18px; margin-top: 2px; }
.steps--plain { padding: 0; border: 0; background: transparent; }

/* ---- CTA band ---- */
.cta-band { background: var(--c-navy); color: var(--c-white); padding: var(--sp-10) 0; }
@media (min-width: 768px) { .cta-band { padding: var(--sp-12) 0; } }
.cta-band__inner { display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; }
@media (min-width: 768px) { .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-8); } }
.cta-band h2 { color: var(--c-white); font-size: var(--fs-xl); }
@media (min-width: 768px) { .cta-band h2 { font-size: var(--fs-2xl); } }
.cta-band p { margin-top: var(--sp-2); color: var(--c-on-navy); max-width: 52ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); flex-shrink: 0; }
.cta-band .btn--ghost { background: transparent; color: var(--c-white); border-color: rgba(255,255,255,.35); }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,.1); color: var(--c-white); }

/* ---- Cookie notice ---- */
.cookie-notice { position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-modal); display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); font-size: var(--fs-sm); }
@media (min-width: 768px) { .cookie-notice { left: auto; max-width: 440px; flex-direction: column; } }
.cookie-notice__actions { display: flex; gap: var(--sp-2); }
.cookie-notice__actions .btn { flex: 1; }
.page--has-cta .cookie-notice { bottom: calc(var(--sticky-cta-h) + var(--sp-3) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 768px) { .page--has-cta .cookie-notice { bottom: var(--sp-6); } }

/* ---- Panels / stat cards (shared with seller pages) ---- */
.panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); }
.panel + .panel { margin-top: var(--sp-4); }
.panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }   /* the action drops below a long title instead of squeezing it mid-word */
.panel__head h2, .panel__head h3 { font-size: var(--fs-md); margin: 0; }
.panel--flush { padding: 0; overflow: hidden; }
.panel--tint { background: var(--c-navy-tint); border-color: transparent; }
.stat-card { padding: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.stat-card__label { font-size: 13px; color: var(--c-muted); font-weight: var(--fw-medium); }
.stat-card__value { margin-top: 4px; font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--c-navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-card__delta { margin-top: 4px; font-size: 12px; color: var(--c-muted); }
.stat-card__delta.is-up { color: var(--c-success-text); }
.stat-card__delta.is-down { color: var(--c-danger-text); }

/* ---- Share row ---- */
.share-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---- Table (light, shared) ---- */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
.table { width: 100%; font-size: var(--fs-sm); }
.table th, .table td { padding: 10px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--c-border); }
.table th { background: var(--c-navy-tint); color: var(--c-navy); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--c-surface-2); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .thumb { width: 80px; height: 60px; object-fit: cover; border-radius: var(--r-sm); background: var(--c-navy-tint); }
/* rows become cards below md only; from md up the cells stay real table cells */
@media (max-width: 767.98px) {
  .table--cards thead { display: none; }
  .table--cards tr { display: block; padding: var(--sp-3); border-bottom: 1px solid var(--c-border); }
  .table--cards td { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 4px 0; border: 0; }
  .table--cards td::before { content: attr(data-label); font-family: var(--font-sans); font-size: 12px; font-weight: var(--fw-semibold); color: var(--c-muted); text-transform: uppercase; letter-spacing: .02em; }
  .table--cards td:not([data-label])::before { content: none; }
}

/* ---- Wordmark ---- */
.wordmark { display: block; height: auto; }

/* ---- Search assistant launcher (DESIGN §2.25; the widget styles are in assistant.css, loaded on first open) ---- */
.assistant-launcher {
  position: fixed; right: var(--gutter); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-sticky-cta);
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 48px; padding: 0 var(--sp-5) 0 var(--sp-4);
  border: 0; border-radius: var(--r-pill); background: var(--c-navy); color: var(--c-white); box-shadow: var(--sh-lg);
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1; cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.assistant-launcher[hidden] { display: none; }
.assistant-launcher .ico { width: 20px; height: 20px; color: var(--c-orange); }
.assistant-launcher:hover { background: var(--c-navy-700); transform: translateY(-1px); }
.assistant-launcher:focus-visible { outline: none; box-shadow: var(--sh-lg), var(--sh-focus-orange); }
.assistant-launcher[aria-busy="true"] { cursor: progress; }
.assistant-launcher[aria-busy="true"] .ico { animation: assistant-pulse 1s var(--ease) infinite; }
.assistant-launcher[aria-expanded="true"] { visibility: hidden; }
@keyframes assistant-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .assistant-launcher[aria-busy="true"] .ico { animation: none; } .assistant-launcher:hover { transform: none; } }
/* mobile listing pages: above the sticky contact bar, never over it */
.page--has-cta .assistant-launcher { bottom: calc(var(--sticky-cta-h) + var(--sp-3) + env(safe-area-inset-bottom, 0px)); }
/* Block M-29: on a phone only the round button, above whatever is fixed at the bottom */
@media (max-width: 767.98px) {
  .assistant-launcher { justify-content: center; width: 52px; height: 52px; min-height: 52px; padding: 0; }
  .assistant-launcher > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .assistant-launcher .ico { width: 24px; height: 24px; }
  /* block M-83: room at the page end, so the round button never sits on the footer's last lines (html.has-assistant: app.js, once shown) */
  .has-assistant .site-footer { padding-bottom: calc(var(--sp-4) + 52px + var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
  .has-assistant .page--has-cta > .site-footer { padding-bottom: calc(var(--sticky-cta-h) + var(--sp-3) + 52px + var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
  .has-assistant .page--has-tabbar .site-footer { padding-bottom: calc(var(--tabbar-space) + 52px + var(--sp-4) + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 768px) {
  .assistant-launcher, .page--has-cta .assistant-launcher { right: var(--sp-6); bottom: var(--sp-6); }
  /* block M-83: the pill neither sits on the footer's last line («Hecho en Venezuela») */
  .has-assistant .site-footer, .has-assistant .page--has-cta > .site-footer { padding-bottom: calc(var(--sp-6) + 48px + var(--sp-4)); }
}
.cookie-notice:not([hidden]) ~ .assistant-launcher { visibility: hidden; }
@media print { .assistant-launcher { display: none !important; } }
/* block M-65: a listing for both shows its two prices with their label */
.card__price-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-text-2); }
.card__price--second { margin-top: 0; font-size: var(--fs-md); }

/* ==== css/pages.css ==== */
/* Maquiven — pages: home (terv-001) and shared page sections (page heads, prose pages, error pages, payment /
   bare pages, auth extras). Loaded after components.css; feature areas extend pages-web / pages-account /
   pages-seller.css. Mobile-first; colours and sizes only through tokens. */

/* ---- Home: hero (DESIGN §2.3) ---- */
.hero--home { min-height: 420px; }
@media (min-width: 768px) { .hero--home { min-height: 520px; } }
@media (min-width: 1280px) { .hero--home { min-height: 560px; } }
.hero--home .hero__content { padding-block: var(--sp-10) calc(var(--sp-10) + 40px); }
@media (min-width: 768px) { .hero--home .hero__content { padding-block: var(--sp-16) calc(var(--sp-16) + 56px); } }
.hero--home .hero__title { max-width: 16ch; text-wrap: balance; }
@media (max-width: 767.98px) { .hero--home .hero__title { font-size: clamp(1.875rem, 1.35rem + 2.4vw, 2.125rem); } }
.hero--home .hero__sub { text-wrap: pretty; }
.hero__credit {
  position: absolute; right: var(--gutter); bottom: calc(40px + var(--sp-2)); z-index: 1; margin: 0;
  font-size: var(--fs-secondary); line-height: 1.2; color: var(--c-on-navy-muted); max-width: 60%; text-align: right;
}
@media (min-width: 768px) { .hero__credit { bottom: calc(56px + var(--sp-2)); } }
.hero__credit a { color: inherit; text-decoration: none; }
.hero__credit a:hover { color: var(--c-white); text-decoration: underline; }
@media (max-width: 767.98px) { .hero__credit { display: none; } }

/* Search card on the home page: slightly larger touch rows on phones (terv-001 phone 1) */
.search-card-wrap .search-card { position: relative; }
@media (max-width: 767.98px) {
  .search-card-wrap .search-card__field { min-height: 60px; justify-content: center; }
  .search-card-wrap .search-card .btn { width: 100%; }
}
@media (min-width: 1024px) {
  .search-card-wrap .search-card { max-width: 920px; }
  .search-card-wrap .search-card__field { min-height: 64px; }
}

/* ---- Home: action cards (terv-001: compact side by side on phones) ---- */
.home-actions { padding-top: var(--sp-6); }
@media (min-width: 768px) { .home-actions { padding-top: var(--sp-8); } }
@media (min-width: 1024px) { .home-actions .action-cards { max-width: 920px; } }
@media (max-width: 767.98px) {
  .home-actions .action-card { align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-3); }
  .home-actions .action-card__title { font-size: 15px; }
  .home-actions .link-arrow { font-size: 13px; }
}

/* ---- Card helpers ---- */
.card__link { pointer-events: none; min-height: 0; }
.card > .card__badge { z-index: 2; pointer-events: none; }

/* Home "Recientes": grid on tablet/desktop, row cards (terb-01) on phones; max 6 on phones */
@media (max-width: 767.98px) {
  .rows-mobile { display: flex; flex-direction: column; gap: var(--sp-3); }
  .rows-mobile > .card { display: grid; grid-template-columns: 40% minmax(0, 1fr); }
  .rows-mobile > .card .card__body { padding: var(--sp-3); justify-content: center; gap: 2px; }
  .rows-mobile > .card .card__title { font-size: 15px; }
  .rows-mobile > .card .card__price { font-size: var(--fs-base); }
  .rows-mobile > .card .card__sub { display: none; }
  .rows-mobile > .card:nth-child(n + 7) { display: none; }
}

/* Home "Recientes" phone rows reuse the .card--row media rules (components.css); phones only — from md up the
   same cards are regular 4:3 grid cards */
@media (max-width: 767.98px) {
  .rows-mobile > .card .card__media { aspect-ratio: auto; height: auto; min-height: 112px; width: 100%; }
  .rows-mobile > .card .card__media > picture, .rows-mobile > .card .card__media > img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .rows-mobile > .card .card__media picture img { width: 100%; height: 100%; object-fit: cover; }
  .rows-mobile > .card .card__media > img.placeholder { object-fit: contain; padding: 14%; }
  .rows-mobile > .card .card__badge { top: 8px; left: 8px; }
}
.card--row .card__badge { top: 8px; left: 8px; }
@media (max-width: 767.98px) {
  .rows-mobile > .card > .fav, .card--row > .fav { top: 6px; right: 6px; }
  .rows-mobile > .card .card__body, .card--row .card__body { padding-inline-end: 44px; }
  /* the body already keeps the favourite button's 44 px: no second reservation on the title (a 100 px title box split
     'Retroexcavadora' / 'Motoniveladora' mid-word at 360 px) */
  .rows-mobile > .card .card__title, .card--row .card__title { padding-inline-end: 0; }
}

/* Featured row: snap carousel on phones (layout.css .carousel), card grid from md */
.carousel.grid-cards > .card { min-width: 0; }
@media (max-width: 767.98px) { .carousel > .card .card__sub { display: none; } }

/* ---- Steps + why variants ---- */
.steps-why--single { grid-template-columns: 1fr; }
.step__icon { flex-shrink: 0; }
.steps__list { list-style: none; padding: 0; }

/* ---- Page head (hero-lite for content pages: how, publish, about, seller band) ---- */
.page-head { padding-block: var(--sp-8) var(--sp-6); }
@media (min-width: 768px) { .page-head { padding-block: var(--sp-10) var(--sp-8); } }
.page-head h1 { max-width: 28ch; }
.page-head__lead { margin-top: var(--sp-3); color: var(--c-text-2); font-size: var(--fs-md); max-width: 60ch; }
.page-head--navy { background: var(--c-navy); color: var(--c-on-navy); }
.page-head--navy h1 { color: var(--c-white); }
.page-head--navy .page-head__lead { color: var(--c-on-navy); }
.page-head--navy .breadcrumbs, .page-head--navy .breadcrumbs a { color: var(--c-on-navy-muted); }
.page-head--navy .breadcrumbs [aria-current="page"] { color: var(--c-white); }
.page-head--navy .breadcrumbs li + li::before { color: var(--c-on-navy-muted); }
.page-head--navy .breadcrumbs a:hover { color: var(--c-white); }

/* Content card for prose pages (terms, privacy, about) */
.prose-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5); }
@media (min-width: 768px) { .prose-card { padding: var(--sp-10) var(--sp-12); } }

/* Stats strip (home/how/location) */
.stats-strip { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); }
.stats-strip__item { display: flex; flex-direction: column; }
.stats-strip__value { font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); color: var(--c-navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stats-strip__label { font-size: 13px; color: var(--c-text-2); }

/* ---- Error pages (404, 403, 419, 429, 500 …) ---- */
.error-page { padding-block: var(--sp-12) var(--sp-16); text-align: center; }
.error-page__code { font-size: clamp(4rem, 2.5rem + 8vw, 8rem); font-weight: var(--fw-extrabold); line-height: 1; letter-spacing: var(--ls-tight); color: var(--c-navy); }
.error-page__code span { color: var(--c-orange); }
.error-page h1 { margin-top: var(--sp-4); }
.error-page p { margin: var(--sp-3) auto 0; max-width: 52ch; color: var(--c-text-2); }
.error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.error-page__search { max-width: 760px; margin: var(--sp-8) auto 0; text-align: left; }
.error-page__ref { margin-top: var(--sp-4); font-size: 13px; color: var(--c-muted); }
.error-page__ref code { font-family: var(--font-mono); color: var(--c-text-2); }

/* ---- Bare / payment pages ---- */
.bare-card .spinner-lg { width: 48px; height: 48px; margin: 0 auto var(--sp-4); color: var(--c-navy); }
.bare-card__lines { margin-top: var(--sp-5); text-align: left; }
.bare-card__note { margin-top: var(--sp-4); font-size: 13px; }

/* ---- Auth extras ---- */
.auth-card--wide { max-width: 520px; }
.auth-card .flash { padding-top: 0; margin-bottom: var(--sp-4); }
.auth-card__divider { display: flex; align-items: center; gap: var(--sp-3); margin-block: var(--sp-5); color: var(--c-muted); font-size: 13px; }
.auth-card__divider::before, .auth-card__divider::after { content: ''; flex: 1; border-top: 1px solid var(--c-border); }
.auth-page__foot nav a { color: var(--c-muted); }
.auth-page__foot nav a:hover { color: var(--c-navy); }

/* ---- Drawer guest block ---- */
.drawer__user .btn { flex: 1 1 0; }
.drawer__nav form { margin: 0; }
.drawer__nav form .drawer__link { width: 100%; text-align: left; }

/* ---- Footer lists ---- */
.site-footer .brand { display: inline-flex; }
.site-footer__made img { border-radius: 2px; }

/* ---- Subnav content spacing ---- */
.subnav-content > .panel:first-child, .subnav-content > .section-head:first-child { margin-top: 0; }
@media (max-width: 1023.98px) { .subnav-layout { gap: var(--sp-4); } }

/* ---- Utilities scoped to pages ---- */
.section-head--stack { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.center-narrow { max-width: var(--container-narrow); margin-inline: auto; }

/* ---- Header fit between 900 and 1180px (nav + publish + lang + login on one row) ---- */
.site-header__actions > * { flex-shrink: 0; }
.lang-switch a { white-space: nowrap; flex-shrink: 0; overflow-wrap: normal; }
.btn, .badge, .chip { overflow-wrap: normal; }
@media (min-width: 1024px) and (max-width: 1179.98px) {
  .site-nav { margin-inline-start: 0; }
  .site-nav__link { padding-inline: var(--sp-2); font-size: var(--fs-sm); }
  .site-nav__link::after { left: var(--sp-2); right: var(--sp-2); }
  .site-header__actions .btn--pill { padding-inline: 14px; }
}

/* ==== Block M-99: sizes and contrast of the public web, AutoYa style ====
   pages.css is in every public set (web, shell, auth, bare) and never in the admin one, so these rules restyle the public
   components of components.css for the public pages only (same specificity, later in the cascade). Sizes, spacing and
   colours only: no markup, text or order change. Page stylesheets that pin their own sizes carry their part of the block. */
:root {
  --c-muted: var(--c-text-sec);         /* secondary text 5.5:1 on the grey page too */
  --fs-xs: var(--fs-secondary);         /* nothing under 13 px */
}
@media (max-width: 767.98px) { :root { --fs-h2: var(--fs-section); } }   /* section titles 21 px on a phone */
.detail-section h2 { font-size: var(--fs-section); }

/* «Publicar equipo» in the header: always shown (phone and computer), #EF6624 with navy text (5.3:1) */
.site-header .site-header__actions .btn--primary { display: inline-flex; min-height: var(--touch); border-radius: var(--r-md); background: var(--c-publish); color: var(--c-on-publish); font-size: 15px; font-weight: var(--fw-bold); }
.site-header .site-header__actions .btn--primary:hover { background: var(--c-publish-hover); color: var(--c-on-publish); }
.site-header__actions .btn--primary:focus-visible { box-shadow: var(--sh-focus); }
@media (max-width: 767.98px) {
  .site-header__inner { gap: var(--sp-2); }
  .site-header .site-header__actions .btn--primary { padding-inline: 12px; font-size: 14px; }
}
@media (max-width: 399.98px) { .site-header__actions .btn--primary .ico { display: none; } .site-header .brand .wordmark { width: 104px; } }

/* Primary buttons 48–52 px, 16 px bold (the --lg ones stay 52) */
.btn--primary:not(.btn--sm), .btn--navy:not(.btn--sm) { min-height: var(--btn-h); font-size: 16px; font-weight: var(--fw-bold); }
.btn--lg { min-height: 52px; font-weight: var(--fw-bold); }

/* Form fields 48 px, 16 px text (no Safari zoom), AutoYa field border; labels stay visible above (.field) */
.input, .select, .input--sm, .select--sm { min-height: var(--field-h); font-size: 16px; border-color: var(--c-field-border); }
.textarea { font-size: 16px; border-color: var(--c-field-border); }
.input--sm, .select--sm { padding: 10px 14px; }
.select.select--sm { padding-right: 40px; }
.field__counter, .field__hint, .check__hint, .switch__hint { font-size: var(--fs-secondary); }
.filters__radio .count, .tabs .count { font-size: var(--fs-secondary); }

/* Secondary text >= 13 px: badges («NUEVO», «VENTA»), small chips («Anuncio de muestra»), overlines, counters */
.badge { font-size: var(--fs-secondary); padding: 5px 9px; }
.badge--count { font-size: 12px; }
.chip--sm { min-height: 26px; padding: 0 10px; font-size: var(--fs-secondary); }
.overline { font-size: var(--fs-secondary); }
.gallery__counter { font-size: var(--fs-secondary); }
.card--unavailable .card__media::after { font-size: var(--fs-secondary); }
.spec__label { font-size: var(--fs-secondary); letter-spacing: normal; text-transform: none; }
@media (max-width: 479.98px) { .spec__label, .listing-specs .spec__label { letter-spacing: normal; } }

/* Listing cards: price 20 px bold, title 16 px (15 px in the phone's list rows) */
.card__price { font-size: var(--fs-card-price); font-weight: var(--fw-bold); }
.card--row .card__price { font-size: var(--fs-card-price); }
.card--compact .card__price { font-size: var(--fs-md); }
.card__price--ask { font-size: var(--fs-base); }

/* Touch targets >= 44 x 44 */
.fav__btn { width: var(--touch); height: var(--touch); }
.fav__btn .ico { width: 20px; height: 20px; }
.fav__btn::after { inset: 0; }
.like__btn { height: var(--touch); padding: 0 14px; font-size: 15px; }
.like__btn::after { inset: 0; }
.card--row .card__title { padding-inline-end: var(--touch); }
.breadcrumbs a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch); min-height: var(--touch); margin-block: -8px; padding-block: 0; }
.breadcrumbs li:first-child a { justify-content: flex-start; }
/* the crumb that truncates on a phone stays a block, so its ellipsis still works (a flex box would clip it from both ends) */
@media (max-width: 767.98px) { .breadcrumbs li:nth-last-child(2):not(:first-child) > a { display: block; min-width: var(--touch); line-height: var(--touch); } }
.breadcrumbs ol { min-height: 28px; }
.pagination a, .pagination span { min-width: var(--touch); height: var(--touch); }
.pagination .is-gap { min-width: 24px; }
.alert__close { width: var(--touch); height: var(--touch); margin: -10px -12px -10px 0; }
.lang-switch a { min-height: var(--touch); }
.view-toggle { padding: 1px; }
.view-toggle a, .view-toggle button { width: var(--touch); height: var(--touch); }
.view-toggle a::after, .view-toggle button::after { content: none; }

/* The phone's contact bar of a listing: 50 px buttons, 16 px bold, WhatsApp filled (white on #15803D 5.0:1) */
.sticky-cta { padding-block: var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px)); }
.sticky-cta .btn--lg, .sticky-cta--contact .sticky-cta__tile { min-height: var(--cta-tile-h); font-size: 16px; font-weight: var(--fw-bold); }
.sticky-cta .btn--icon.btn--lg { width: var(--cta-tile-h); }
.sticky-cta--contact .sticky-cta__tile--icon { flex-basis: var(--cta-tile-h); }
.sticky-cta--contact .btn--ghost { border-color: var(--c-field-border); }
.sticky-cta--contact .btn--whatsapp { background: var(--c-success-text); border-color: var(--c-success-text); color: var(--c-white); }
.sticky-cta--contact .btn--whatsapp:hover { background: var(--c-whatsapp-dark); border-color: var(--c-whatsapp-dark); color: var(--c-white); }

/* ==== css/pages-web.css ==== */
/* Maquiven — page-specific rules for public web pages (owned by the web feature agent; linked after pages.css). */

/* Shared with the account / seller shell, moved here from pages-seller.css: public pages do not link pages-account.css
   or pages-seller.css (layouts/web.php adds them only inside the account / seller sub-navigation). On those pages these
   rules now precede both files; nothing there targets the same elements and properties (checked, fix-14). */

/* Fleet / seller page wrappers: public seller profile (web/seller.php) and every seller-area page. */
.seller-page { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.seller-section { display: flex; flex-direction: column; gap: var(--sp-3); }
.seller-tabs { margin-bottom: 0; }

/* Panel titles with an icon: listing inquiry panel (partials/inquiry-form.php) and the seller dashboard panels. */
.panel__head h2 { display: inline-flex; align-items: center; gap: var(--sp-2); }
.panel__head h2 .ico { width: 20px; height: 20px; color: var(--c-orange); }

/* Menu items: header user menu (partials/header.php, refines layout.css) and the seller listing action menus. */
.menu__item {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: 40px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--c-text); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.menu__item .ico { width: 18px; height: 18px; color: var(--c-muted); }
.menu__item:hover, .menu__item:focus-visible { background: var(--c-navy-tint); color: var(--c-navy); }