@charset "UTF-8";

/* "Comercio" identity (comercio-redesign, owner-approved blueprints Main.dc.html / Sobre.dc.html). Loaded by the home
   (index.html + index.indexable.html) for every section, and by sobre.html for the shared chrome: header, hero, section
   heads, roadmap band, pills, buttons and footer (sobre.css then maps the retained landing sections onto this palette).
   Unlayered like every public stylesheet (R-2). Spacing, radius, type scale and elevation come from the foundation
   (--fd-*) and public (--pub-*) tokens; the palette, type trio, page-scoped shape steps and the seller-mock motion are
   custom properties declared below. The hard 3D edge of the gold controls is a bottom border and their top highlight a
   translucent top border, so every shadow stays on a declared public level (ADR-14). */
:root {
  /* dark sections: verde botella */
  --hm-green: #0f3229;
  --hm-green-deep: #0b241d;
  --hm-green-night: #081c16;
  --hm-green-card: #1a4438;
  --hm-on-dark: #f2f5f0;
  --hm-on-dark-nav: #dce7df;
  --hm-on-dark-muted: #a9bfb2;
  --hm-on-dark-faint: #8fa69a;
  --hm-on-dark-footer: #93aa9d;
  --hm-on-dark-link: #c3d2c7;
  --hm-chip-text: #9db3a6;
  --hm-chip-bg: rgba(242, 245, 240, 0.06);
  --hm-chip-line: rgba(242, 245, 240, 0.16);
  --hm-glass: rgba(242, 245, 240, 0.05);
  --hm-glass-line: rgba(198, 166, 100, 0.28);
  --hm-blob-emerald: rgba(35, 166, 113, 0.26);
  --hm-blob-emerald-soft: rgba(35, 166, 113, 0.14);
  --hm-blob-emerald-faint: rgba(35, 166, 113, 0.1);
  --hm-blob-gold: rgba(198, 166, 100, 0.22);
  --hm-blob-gold-faint: rgba(198, 166, 100, 0.1);
  --hm-blob-teal: rgba(23, 107, 110, 0.22);
  /* light sections: papel frío */
  --hm-paper: #f4f6f2;
  --hm-band: #e9efe7;
  --hm-card: #ffffff;
  --hm-card-warm: #fbf6e8;
  --hm-line: #d3decf;
  --hm-line-strong: #b8c6b4;
  --hm-row-line: #d8e3d4;
  --hm-ink: #16211b;
  --hm-ink-edge: #0b120e;
  --hm-muted: #52605a;
  --hm-soft-ink: #405048;
  /* muted "próximamente" text and REG codes on paper/cards (the blueprint's #6e7d75 measured 4.01-4.33: darkened) */
  --hm-reg: #5e6d65;
  --hm-link: #196a49;
  --hm-link-hover: #0f4a32;
  --hm-emerald: #1e7a55;
  --hm-emerald-deep: #0f5c3c;
  --hm-emerald-light: #7fd1a8;
  --hm-on-emerald: #ffffff;
  --hm-ok-bg-top: #dff2e6;
  --hm-ok-bg: #c8e6d3;
  --hm-step-bg-top: #e9efe7;
  --hm-step-bg: #d8e3d4;
  /* gold CTAs, foil and seams */
  --hm-gold-top: #e4b95b;
  --hm-gold: #c6973c;
  --hm-gold-top-hover: #ecc66b;
  --hm-gold-hover: #d0a246;
  --hm-gold-edge: #8a6a24;
  --hm-gold-ink: #241a05;
  --hm-gold-text: #dbbe77;
  --hm-gold-line: #c6a664;
  --hm-soon: #6b4e12;
  --hm-soon-bg-top: #f3e6c8;
  --hm-soon-bg: #e8d5a4;
  --hm-highlight: rgba(255, 255, 255, 0.45);
  --hm-sheen: rgba(255, 255, 255, 0.5);
  --hm-hole-rim: rgba(22, 33, 27, 0.28);
  --hm-seam-gold: rgba(198, 166, 100, 0.55);
  --hm-seam-dark: rgba(198, 166, 100, 0.4);
  --hm-seam-foot: rgba(198, 166, 100, 0.3);
  --hm-seam-light: rgba(160, 130, 60, 0.4);
  --hm-dashed-gold: rgba(198, 166, 100, 0.5);
  --hm-search-line: rgba(198, 166, 100, 0.45);
  /* map */
  --hm-road-1: #cfdccb;
  --hm-road-2: #d8e3d4;
  --hm-road-3: #dfe8db;
  --hm-map-halo: rgba(30, 122, 85, 0.13);
  /* mock tiles (top, bottom) */
  --hm-tile-1a: #dce7dd;
  --hm-tile-1b: #c8d8cb;
  --hm-tile-2a: #f0e4c6;
  --hm-tile-2b: #e3d2a4;
  --hm-tile-3a: #d6e4e4;
  --hm-tile-3b: #c0d6d6;
  --hm-tile-4a: #e5e9e3;
  --hm-tile-4b: #d3dad0;
  /* the disabled search control (an inactive UI component, exempt from WCAG 1.4.3) */
  --hm-control-disabled: #7c8b82;
  --hm-control-disabled-strong: #5a685e;
  --hm-disabled-fill: #d5ddd2;
  /* type: display, body, codes/URLs */
  --hm-font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hm-font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hm-font-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --hm-title-hero: clamp(2rem, 1.45rem + 2.35vw, 3.375rem);
  --hm-title-section: clamp(1.5rem, 1.25rem + 1.05vw, 2.125rem);
  --hm-title-band: clamp(1.625rem, 1.3rem + 1.4vw, 2.375rem);
  --hm-text-lead: clamp(0.9375rem, 0.87rem + 0.29vw, 1.125rem);
  --hm-text-3xs: 0.625rem;
  --hm-tracking-display: -0.025em;
  --hm-tracking-title: -0.02em;
  --hm-tracking-eyebrow: 0.18em;
  --hm-tracking-caps: 0.1em;
  --hm-tracking-pill: 0.07em;
  --hm-tracking-mono: 0.04em;
  /* page-scoped shape steps */
  --hm-shell-max: 81rem;
  --hm-header-h: 3.875rem;
  --hm-radius-mark: 0.75rem;
  --hm-radius-tag: 0.4375rem;
  --hm-radius-tile: 0.6875rem;
  --hm-radius-card: 1.125rem;
  --hm-radius-map: 1.375rem;
  --hm-edge: 3px;
  --hm-edge-lg: 4px;
  --hm-seam: 2px;
  /* seller-mock motion: front card, back card (negative delay, so it trails), periodic sheen */
  --hm-float-dur: 5.5s;
  --hm-float-slow-dur: 7s;
  --hm-float-slow-delay: -2.5s;
  --hm-sheen-dur: 6s;
  --hm-float-lift: -0.5625rem;
  /* landing-polish-login: sticky header. The flow box keeps --hm-header-h; once stuck only its bottom
     --hm-header-h-compact band stays visible (negative sticky offset) and the items shift into it. */
  --hm-header-h-compact: 3.5rem;
  --hm-header-shift: calc((var(--hm-header-h) - var(--hm-header-h-compact)) / 2);
  --hm-hairline: rgba(198, 166, 100, 0.36);
  /* landing-polish-login: hero effect layer (blobs, costura threads, grain) and the rubros marquee */
  --hm-fx-emerald: rgba(35, 166, 113, 0.2);
  --hm-fx-gold: rgba(198, 166, 100, 0.16);
  --hm-fx-teal: rgba(23, 107, 110, 0.3);
  --hm-thread: rgba(219, 190, 119, 0.5);
  --hm-fx-blob: 16rem;
  --hm-fx-gold-y: -4%;
  --hm-drift-dur: 22s;
  --hm-drift-slow-dur: 30s;
  --hm-drift-delay: -9s;
  --hm-glint-dur: 8s;
  /* judgment-day F1: the decorative hero loops run this many times, then rest (the marquee has its own pause control) */
  --hm-fx-loops: 3;
  --hm-marquee-dur: 80s;
  --hm-pill-text: #d5e2d9;
  --hm-pill-glass: rgba(242, 245, 240, 0.05);
  --hm-pill-glass-top: rgba(242, 245, 240, 0.12);
  --hm-pill-line: rgba(198, 166, 100, 0.3);
  --hm-pill-inner: rgba(255, 255, 255, 0.18);
  /* judgment-day F5: from 40rem the phone menu is a right-aligned panel of at most this width */
  --hm-menu-panel-w: 22rem;
}

@media (min-width: 64rem) {
  :root { --hm-fx-blob: 28rem; --hm-fx-gold-y: 22%; }
}

@media (min-width: 67.5rem) {
  :root { --hm-header-h: 5.125rem; --hm-header-h-compact: 4.25rem; }
}

/* In-page anchors land below the stuck header band (home and /sobre). */
html {
  scroll-padding-top: calc(var(--hm-header-h-compact) + var(--fd-space-4));
  background: var(--hm-paper);
}

body.hm {
  color: var(--hm-ink);
  background: var(--hm-paper);
  font-family: var(--hm-font-sans);
  line-height: var(--fd-leading-normal);
}

/* Text selection and the skip link wear the Comercio palette, as on /sobre through its remap (styles.css paints both with
   the former --paper / --accent / --ink roles, which the home does not remap). */
body.hm ::selection { color: var(--hm-paper); background: var(--hm-link); }
body.hm .skip-link { color: var(--hm-paper); background: var(--hm-ink); }

.hm :focus-visible { outline-color: var(--hm-link); }
.hm-header :focus-visible,
.hm-hero :focus-visible,
.hm-section--dark :focus-visible,
.hm-band :focus-visible,
.hm-footer :focus-visible { outline-color: var(--hm-gold-text); }
.hm-menu__panel :focus-visible { outline-color: var(--hm-link); }

.hm .lp-noscript {
  padding: var(--fd-space-4) var(--pub-gutter-inline);
  color: var(--hm-on-dark);
  background: var(--hm-green);
  font-size: var(--fd-text-sm);
  text-align: center;
}

.hm-shell {
  width: min(var(--hm-shell-max), calc(100% - 2 * var(--pub-gutter-inline)));
  margin-inline: auto;
}

/* ---------- shared atoms ---------- */
.hm-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--fd-space-1) var(--fd-space-2);
  border-radius: var(--fd-radius-pill);
  color: var(--hm-soon);
  background: linear-gradient(180deg, var(--hm-soon-bg-top), var(--hm-soon-bg)) var(--hm-soon-bg);
  font-family: var(--hm-font-sans);
  font-size: var(--fd-text-2xs);
  font-weight: var(--fd-weight-bold);
  letter-spacing: var(--hm-tracking-pill);
  line-height: var(--fd-leading-snug);
  text-transform: uppercase;
  white-space: nowrap;
}
.hm-pill--lg { padding-inline: var(--fd-space-3); font-size: var(--fd-text-xs); }
.hm-pill--xs { padding: 0 var(--fd-space-2); font-size: var(--hm-text-3xs); letter-spacing: var(--hm-tracking-pill); }

.hm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fd-space-1);
  padding: var(--fd-space-1) var(--fd-space-2);
  border-radius: var(--fd-radius-pill);
  color: var(--hm-muted);
  background: var(--hm-band);
  font-size: var(--fd-text-2xs);
  font-weight: var(--fd-weight-bold);
  letter-spacing: var(--hm-tracking-pill);
  line-height: var(--fd-leading-snug);
  text-transform: uppercase;
  white-space: nowrap;
}
.hm-badge svg { flex: 0 0 auto; }
.hm-badge--ok { color: var(--hm-emerald-deep); background: linear-gradient(180deg, var(--hm-ok-bg-top), var(--hm-ok-bg)) var(--hm-ok-bg); }
.hm-badge--reg { font-family: var(--hm-font-mono); font-weight: var(--fd-weight-semibold); letter-spacing: var(--hm-tracking-mono); }

/* Gold 3D control: gradient face over the gold base, translucent top highlight, hard bottom edge. */
.hm-button {
  display: inline-flex;
  min-height: var(--fd-target-min);
  align-items: center;
  justify-content: center;
  gap: var(--fd-space-2);
  padding: var(--fd-space-3) var(--fd-space-5);
  border: 1px solid transparent;
  border-radius: var(--fd-radius-5);
  font-family: var(--hm-font-sans);
  font-size: var(--fd-text-md);
  font-weight: var(--fd-weight-bold);
  line-height: var(--fd-leading-snug);
  text-align: center;
  transition: background-color var(--fd-duration-fast) var(--fd-ease-standard),
              border-color var(--fd-duration-fast) var(--fd-ease-standard),
              color var(--fd-duration-fast) var(--fd-ease-standard),
              transform var(--fd-duration-fast) var(--fd-ease-standard);
}
.hm-button--accent {
  border-color: var(--hm-highlight) transparent var(--hm-gold-edge);
  border-bottom-width: var(--hm-edge);
  color: var(--hm-gold-ink);
  background: linear-gradient(180deg, var(--hm-gold-top), var(--hm-gold)) border-box var(--hm-gold);
  box-shadow: var(--pub-shadow-resting);
}
.hm-button--accent:hover {
  color: var(--hm-gold-ink);
  background-image: linear-gradient(180deg, var(--hm-gold-top-hover), var(--hm-gold-hover));
}
.hm-button--accent:active { transform: translateY(1px); }
.hm-button--outline-dark { border: 1px dashed var(--hm-dashed-gold); color: var(--hm-on-dark); }
.hm-button--outline-dark:hover { border-color: var(--hm-gold-text); color: var(--hm-on-dark); background-color: var(--hm-chip-bg); }
.hm-button--lg { padding: var(--fd-space-4) var(--fd-space-6); }
.hm-button--sm { padding: var(--fd-space-2) var(--fd-space-5); font-size: var(--fd-text-sm); }

.hm-icon-button {
  display: inline-grid;
  inline-size: var(--fd-target-min);
  block-size: var(--fd-target-min);
  place-items: center;
  border-radius: var(--fd-radius-4);
  color: var(--hm-on-dark);
}

.hm-link {
  display: inline-flex;
  min-height: var(--fd-target-min);
  align-items: center;
  gap: var(--fd-space-1);
  color: var(--hm-link);
  font-weight: var(--fd-weight-bold);
  transition: color var(--fd-duration-fast) var(--fd-ease-standard);
}
.hm-link:hover { color: var(--hm-link-hover); }

/* Hanging clothing tag: rotated, rising above its card, with a punched hole. */
.hm-tag {
  position: absolute;
  inset-block-start: calc(-1 * var(--fd-space-4));
  inset-inline-start: var(--fd-space-5);
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: var(--fd-space-2) var(--fd-space-3) var(--fd-space-2) calc(var(--fd-space-5) + var(--fd-space-1));
  border-radius: var(--hm-radius-tag);
  font-family: var(--hm-font-sans);
  font-size: var(--fd-text-2xs);
  font-weight: var(--fd-weight-bold);
  letter-spacing: var(--hm-tracking-caps);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--pub-shadow-raised);
  transform: rotate(-3deg);
}
.hm-tag::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--fd-space-2);
  inset-block-start: 50%;
  inline-size: 0.4375rem;
  block-size: 0.4375rem;
  border: 1px solid var(--hm-hole-rim);
  border-radius: var(--fd-radius-round);
  background: var(--hm-paper);
  transform: translateY(-50%);
}
.hm-tag--green { color: var(--hm-on-emerald); background: var(--hm-emerald); }
.hm-tag--gold {
  border-top: 1px solid var(--hm-highlight);
  color: var(--hm-gold-ink);
  background: linear-gradient(180deg, var(--hm-gold-top), var(--hm-gold)) border-box var(--hm-gold);
  transform: rotate(2deg);
}

/* ---------- header (dark; its mesh continues into the hero) ---------- */
/* Sticky on the home and /sobre. Its flow box never changes (no layout shift): the negative offset lets the top of the band
   scroll away so a compact band stays at the top, and in the scrolled state (data-scrolled, set by modules/landing) the
   items move into that band with a transform while a solid verde veil, a gold hairline and a raised shadow fade in. */
.hm-header {
  position: sticky;
  top: calc(var(--hm-header-h-compact) - var(--hm-header-h));
  z-index: 40;
  border-bottom: 1px dashed var(--hm-seam-dark);
  color: var(--hm-on-dark);
  background-color: var(--hm-green);
  background-image:
    radial-gradient(42.5rem 22.5rem at 8% -8rem, var(--hm-blob-emerald), transparent 65%),
    radial-gradient(47.5rem 23.75rem at 92% -5rem, var(--hm-blob-gold), transparent 65%);
  transition: box-shadow var(--fd-duration-base) var(--fd-ease-standard),
              border-color var(--fd-duration-base) var(--fd-ease-standard);
}
.hm-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hm-green-deep);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fd-duration-base) var(--fd-ease-standard);
}
.hm-header[data-scrolled] {
  border-bottom-style: solid;
  border-bottom-color: var(--hm-hairline);
  box-shadow: var(--pub-shadow-raised);
}
.hm-header[data-scrolled]::before { opacity: 1; }
/* Everything but the <details> menu moves (its panel keeps the header as containing block); the toggle moves on its own. */
.hm-header__inner > :not(.hm-menu),
.hm-menu__toggle { transition: translate var(--fd-duration-base) var(--fd-ease-standard); }
.hm-header[data-scrolled] .hm-header__inner > :not(.hm-menu),
.hm-header[data-scrolled] .hm-menu__toggle { translate: 0 var(--hm-header-shift); }
.hm-header__inner {
  display: flex;
  min-height: var(--hm-header-h);
  align-items: center;
  gap: var(--fd-space-2);
}
.hm-brand {
  display: inline-flex;
  min-height: var(--fd-target-min);
  align-items: center;
  gap: var(--fd-space-3);
  margin-inline-end: auto;
  color: var(--hm-on-dark);
}
.hm-brand__mark {
  display: grid;
  inline-size: 2.125rem;
  block-size: 2.125rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid transparent;
  border-top-color: var(--hm-highlight);
  border-bottom: var(--hm-edge) solid var(--hm-gold-edge);
  border-radius: var(--hm-radius-mark);
  color: var(--hm-gold-ink);
  background: linear-gradient(180deg, var(--hm-gold-top), var(--hm-gold)) border-box var(--hm-gold);
  box-shadow: var(--pub-shadow-resting);
}
.hm-brand__name {
  font-family: var(--hm-font-display);
  font-size: var(--fd-text-lg);
  font-weight: 800;
  letter-spacing: var(--hm-tracking-title);
}

.hm-nav,
.hm-header__actions { display: none; }

.hm-nav__soon,
.hm-menu__soon {
  display: inline-flex;
  align-items: center;
  gap: var(--fd-space-2);
  cursor: default;
}
.hm-nav__soon { color: var(--hm-on-dark-faint); }
.hm-menu__soon { color: var(--hm-reg); }

.hm-menu { position: static; }
.hm-menu__toggle { list-style: none; cursor: pointer; }
.hm-menu__toggle::-webkit-details-marker { display: none; }
.hm-menu[open] > .hm-menu__toggle { background: var(--hm-chip-bg); }
/* The phone panel spans the viewport minus the 16px gutters (safe areas respected); the sticky header is its containing
   block, so it opens right under the visible band. */
.hm-menu__panel {
  position: absolute;
  z-index: 20;
  inset-inline-start: max(var(--fd-space-4), env(safe-area-inset-left));
  inset-inline-end: max(var(--fd-space-4), env(safe-area-inset-right));
  inset-block-start: calc(100% + var(--fd-space-1));
  display: grid;
  gap: var(--fd-space-1);
  padding: var(--fd-space-3);
  border: 1px solid var(--hm-line);
  border-radius: var(--fd-radius-6);
  color: var(--hm-ink);
  background: var(--hm-card);
  box-shadow: var(--pub-shadow-overlay);
}
.hm-menu__soon { min-height: var(--fd-target-min); padding-inline: var(--fd-space-3); }
.hm-menu__link {
  display: flex;
  min-height: var(--fd-target-min);
  align-items: center;
  padding-inline: var(--fd-space-3);
  border-radius: var(--fd-radius-4);
  color: var(--hm-ink);
  font-weight: var(--fd-weight-medium);
}
.hm-menu__link:hover { background: var(--hm-band); }
.hm-menu__link[aria-current="page"] { font-weight: var(--fd-weight-bold); }
.hm-menu__panel .hm-button { margin-block-start: var(--fd-space-2); }
/* Tablets (the menu shows up to 67.5rem): a right-aligned panel instead of a band across the whole page. */
@media (min-width: 40rem) {
  .hm-menu__panel {
    inset-inline-start: auto;
    inline-size: min(var(--hm-menu-panel-w), 100% - 2 * var(--fd-space-4));
  }
}

@media (min-width: 67.5rem) {
  .hm-header__inner { gap: var(--fd-space-5); }
  .hm-brand { margin-inline-end: 0; }
  .hm-brand__mark { inline-size: 2.375rem; block-size: 2.375rem; }
  .hm-brand__name { font-size: var(--fd-text-xl); }
  .hm-nav {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--fd-space-5);
    margin-inline-start: var(--fd-space-5);
    font-weight: var(--fd-weight-medium);
  }
  .hm-nav__link {
    display: inline-flex;
    min-height: var(--fd-target-min);
    align-items: center;
    color: var(--hm-on-dark-nav);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: var(--hm-edge);
    text-underline-offset: 0.55em;
    transition: color var(--fd-duration-fast) var(--fd-ease-standard), text-decoration-color var(--fd-duration-fast) var(--fd-ease-standard);
  }
  .hm-nav__link:hover { color: var(--hm-gold-text); }
  .hm-nav__link[aria-current="page"] { color: var(--hm-on-dark); font-weight: var(--fd-weight-bold); text-decoration-color: var(--hm-gold); }
  .hm-header__actions { display: flex; align-items: center; gap: var(--fd-space-2); }
  .hm-header__login {
    display: inline-flex;
    min-height: var(--fd-target-min);
    align-items: center;
    padding-inline: var(--fd-space-3);
    color: var(--hm-on-dark);
    font-weight: var(--fd-weight-semibold);
  }
  .hm-header__login:hover { color: var(--hm-gold-text); }
  .hm-header__login-icon,
  .hm-menu { display: none; }
}

/* ---------- hero (dark mesh, aligned with the header's) ---------- */
.hm-hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--fd-space-6) var(--fd-space-6);
  color: var(--hm-on-dark);
  background-color: var(--hm-green);
  background-image:
    radial-gradient(42.5rem 22.5rem at 8% calc(-8rem - var(--hm-header-h)), var(--hm-blob-emerald), transparent 65%),
    radial-gradient(47.5rem 23.75rem at 92% calc(-5rem - var(--hm-header-h)), var(--hm-blob-gold), transparent 65%),
    radial-gradient(33.75rem 20rem at 50% calc(100% + 7rem), var(--hm-blob-teal), transparent 70%);
}
.hm-hero__inner { display: grid; gap: var(--fd-space-3); }

/* Decorative effect layer behind the hero content (home and /sobre): drifting mesh blobs, gold "costura" threads and a
   grain film that only darkens, so the texts keep (or gain) contrast. The blobs sit in the corners, away from the lead; the
   side threads only show from desktop, where the hero centers its text. Compositor-only motion (transform, opacity). */
.hm-fx {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hm-fx__blob {
  position: absolute;
  inline-size: var(--hm-fx-blob);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  animation: hm-drift var(--hm-drift-dur) ease-in-out var(--hm-fx-loops) alternate forwards;
  will-change: transform;
}
.hm-fx__blob--emerald { inset-block-start: 4%; inset-inline-start: 6%; background: radial-gradient(closest-side, var(--hm-fx-emerald), transparent); }
.hm-fx__blob--gold {
  inset-block-start: var(--hm-fx-gold-y);
  inset-inline-start: 96%;
  background: radial-gradient(closest-side, var(--hm-fx-gold), transparent);
  animation-duration: var(--hm-drift-slow-dur);
  animation-delay: var(--hm-drift-delay);
}
.hm-fx__blob--teal {
  inset-block-start: 112%;
  inset-inline-start: 10%;
  background: radial-gradient(closest-side, var(--hm-fx-teal), transparent);
  animation-duration: var(--hm-drift-slow-dur);
}
.hm-fx__threads,
.hm-fx__grain {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
}
.hm-fx__threads { animation: hm-glint var(--hm-glint-dur) ease-in-out var(--hm-fx-loops) alternate forwards; }
.hm-fx__thread { fill: none; stroke: var(--hm-thread); stroke-width: 1.5; stroke-linecap: round; }
.hm-fx__thread--fine { stroke-width: 1; }
.hm-fx__thread--side { display: none; }
@keyframes hm-drift {
  0% { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-45%, -55%) scale(1.08); }
}
@keyframes hm-glint {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}
/* /sobre has no pause control (the rubros toggle lives on the home), so its effect stays static (WCAG 2.2.2): the blobs
   and the threads rest at their base transform and opacity. */
.hm-hero--sobre .hm-fx__blob,
.hm-hero--sobre .hm-fx__threads { animation: none; }
.hm-eyebrow,
.hm-band__eyebrow,
.hm-kicker {
  margin: 0;
  color: var(--hm-gold-text);
  font-size: var(--fd-text-2xs);
  font-weight: var(--fd-weight-bold);
  letter-spacing: var(--hm-tracking-eyebrow);
  line-height: var(--fd-leading-snug);
  text-transform: uppercase;
}
/* Gold dashed "costura" seams around the hero eyebrow (the leading one from desktop, where the hero centers). */
.hm-eyebrow { display: flex; align-items: center; gap: var(--fd-space-3); }
.hm-eyebrow::before,
.hm-eyebrow::after {
  content: "";
  inline-size: 2.875rem;
  flex: 0 0 auto;
  border-top: var(--hm-seam) dashed var(--hm-seam-gold);
}
.hm-eyebrow::before { display: none; }
.hm-hero__title {
  margin: 0;
  color: var(--hm-on-dark);
  font-family: var(--hm-font-display);
  font-size: var(--hm-title-hero);
  font-weight: 800;
  letter-spacing: var(--hm-tracking-display);
  line-height: 1.06;
  text-wrap: balance;
}
.hm-hero__lead {
  margin: 0;
  color: var(--hm-on-dark-muted);
  font-size: var(--hm-text-lead);
  line-height: 1.55;
}
.hm-hero__actions { display: flex; flex-wrap: wrap; gap: var(--fd-space-3); margin-block-start: var(--fd-space-2); }

.hm-search { display: grid; gap: var(--fd-space-2); }
.hm-search__bar {
  display: flex;
  gap: var(--fd-space-2);
  padding: var(--fd-space-2);
  border: 1px solid var(--hm-search-line);
  border-radius: var(--fd-radius-6);
  background: var(--hm-card);
  box-shadow: var(--pub-shadow-overlay);
}
.hm-search__input {
  min-inline-size: 0;
  block-size: 2.875rem;
  flex: 1 1 auto;
  padding-inline: var(--fd-space-3);
  border: 0;
  border-radius: var(--fd-radius-4);
  color: var(--hm-ink);
  background: var(--hm-card);
  font-size: var(--fd-text-md);
  text-overflow: ellipsis;
}
.hm-search__input:disabled { color: var(--hm-control-disabled); cursor: not-allowed; }
.hm-search__input::placeholder { color: var(--hm-control-disabled); opacity: 1; }
.hm-search__button {
  display: inline-flex;
  min-inline-size: 2.875rem;
  block-size: 2.875rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: var(--fd-space-2);
  padding-inline: var(--fd-space-3);
  border-radius: var(--fd-radius-4);
  color: var(--hm-gold-ink);
  background: var(--hm-gold);
  font-weight: var(--fd-weight-bold);
}
.hm-search__button:disabled { color: var(--hm-control-disabled-strong); background: var(--hm-disabled-fill); cursor: not-allowed; }
.hm-search__button-label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hm-search__note {
  display: flex;
  align-items: center;
  gap: var(--fd-space-2);
  margin: 0;
  color: var(--hm-gold-text);
  font-size: var(--fd-text-xs);
  font-weight: var(--fd-weight-semibold);
}
.hm-search__note svg { flex: 0 0 auto; }

/* "Cerca mío" leads, then the rubros marquee takes the rest of the row. */
.hm-chips { display: flex; min-inline-size: 0; align-items: center; gap: var(--fd-space-2); }
.hm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--fd-space-1);
  padding: var(--fd-space-2) var(--fd-space-3);
  border: 1px solid var(--hm-chip-line);
  border-radius: var(--fd-radius-pill);
  color: var(--hm-chip-text);
  background: var(--hm-chip-bg);
  font-size: var(--fd-text-sm);
  font-weight: var(--fd-weight-medium);
  line-height: var(--fd-leading-snug);
  cursor: default;
  user-select: none;
}
.hm-chip--near { flex: 0 0 auto; border: 1px dashed var(--hm-dashed-gold); font-weight: var(--fd-weight-semibold); white-space: nowrap; }

/* Rubros marquee: two identical tracks on one rail that slides by half its width, so the loop is seamless (the second track
   is aria-hidden). Fade masks on both sides; paused on hover and by its pause control ([data-paused], set by modules/landing;
   the control pauses the hero effect too); under reduced motion a static list that wraps (no mask, no scroller).
   Each track ends with the same gap it puts between pills, so -50% lands exactly on the copy. */
.hm-marquee {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.hm-marquee__rail {
  display: flex;
  inline-size: max-content;
  animation: hm-marquee var(--hm-marquee-dur) linear infinite;
}
.hm-marquee:hover .hm-marquee__rail,
.hm-marquee[data-paused] .hm-marquee__rail,
.hm-hero:has(.hm-marquee[data-paused]) .hm-fx__blob,
.hm-hero:has(.hm-marquee[data-paused]) .hm-fx__threads { animation-play-state: paused; }
/* Pause control (WCAG 2.2.2): a 44px glass circle at the end of the row, outside the masked box; the icon shows the action. */
.hm-marquee__toggle {
  display: inline-grid;
  inline-size: var(--fd-target-min);
  block-size: var(--fd-target-min);
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--hm-pill-line);
  border-top-color: var(--hm-pill-inner);
  border-radius: var(--fd-radius-round);
  color: var(--hm-pill-text);
  background: linear-gradient(180deg, var(--hm-pill-glass-top), var(--hm-pill-glass));
  cursor: pointer;
}
.hm-marquee__toggle:hover { border-color: var(--hm-gold-line); color: var(--hm-on-dark); }
.hm-marquee__toggle[hidden],
.hm-marquee__toggle [data-icon="play"],
.hm-marquee__toggle[data-paused] [data-icon="pause"] { display: none; }
.hm-marquee__toggle[data-paused] [data-icon="play"] { display: block; }
.hm-marquee__track {
  display: flex;
  gap: var(--fd-space-2);
  margin: 0;
  padding: var(--fd-space-1) var(--fd-space-2) var(--fd-space-1) 0;
  list-style: none;
}
/* Glass pill: translucent face, gold hairline, a lighter top edge as the inner highlight. */
.hm-marquee__pill {
  border-color: var(--hm-pill-line);
  border-top-color: var(--hm-pill-inner);
  color: var(--hm-pill-text);
  background: linear-gradient(180deg, var(--hm-pill-glass-top), var(--hm-pill-glass));
  white-space: nowrap;
}
@keyframes hm-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.hm-hero__seller { margin: 0; color: var(--hm-on-dark-muted); font-size: var(--fd-text-sm); }
.hm-hero .hm-link { color: var(--hm-gold-text); }
.hm-hero .hm-link:hover { color: var(--hm-soon-bg-top); }

@media (min-width: 40rem) {
  .hm-search__button { padding-inline: var(--fd-space-5); }
  .hm-search__button-label {
    position: static;
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip-path: none;
  }
}

@media (min-width: 64rem) {
  .hm-hero { padding-block: var(--fd-space-8) var(--fd-space-7); }
  .hm-hero__inner { justify-items: center; gap: var(--fd-space-5); text-align: center; }
  .hm-eyebrow { font-size: var(--fd-text-xs); }
  .hm-eyebrow::before { display: block; }
  .hm-hero__title { max-inline-size: 60rem; }
  .hm-hero__line { display: block; }
  .hm-hero__lead { max-inline-size: 40rem; }
  .hm-hero--sobre .hm-hero__title { max-inline-size: 61.25rem; }
  .hm-hero--sobre .hm-hero__lead { max-inline-size: 43.75rem; line-height: 1.6; }
  .hm-hero__actions { justify-content: center; }
  .hm-search { inline-size: min(53.125rem, 100%); }
  .hm-search__bar { padding: var(--fd-space-2); border-radius: var(--fd-radius-7); }
  .hm-search__input,
  .hm-search__button { block-size: 3.5rem; }
  .hm-search__input { padding-inline: var(--fd-space-5); }
  .hm-search__note { justify-content: center; font-size: var(--fd-text-sm); }
  .hm-chips { inline-size: min(61.25rem, 100%); }
  .hm-hero__seller { font-size: var(--fd-text-md); }
  .hm-fx__thread--side { display: inline; }
}

/* ---------- sections ---------- */
.hm-section { padding-block: var(--fd-space-6) var(--fd-space-1); }
.hm-section__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fd-space-3); }
/* The dashed "costura" seam closes every section head. */
.hm-section__head::after {
  content: "";
  flex: 1 1 2rem;
  border-top: var(--hm-seam) dashed var(--hm-seam-light);
}
.hm-section__title {
  margin: 0;
  font-family: var(--hm-font-display);
  font-size: var(--hm-title-section);
  font-weight: var(--fd-weight-bold);
  letter-spacing: var(--hm-tracking-title);
  line-height: var(--fd-leading-snug);
}
.hm-section__note { margin: var(--fd-space-2) 0 0; color: var(--hm-muted); font-size: var(--fd-text-sm); font-weight: var(--fd-weight-semibold); }

/* Dark band (roadmap): verde botella with its soft mesh. */
.hm-section--dark {
  margin-block-start: var(--fd-space-7);
  padding-block: var(--fd-space-7);
  color: var(--hm-on-dark);
  background-color: var(--hm-green-deep);
  background-image:
    radial-gradient(35rem 18.75rem at 12% 0%, var(--hm-blob-emerald), transparent 65%),
    radial-gradient(38.75rem 21.25rem at 92% 100%, var(--hm-blob-gold), transparent 65%);
}
.hm-section--dark .hm-section__title { color: var(--hm-on-dark); }
.hm-section--dark .hm-section__head::after { border-top-color: var(--hm-seam-dark); }
.hm-kicker { margin-block-end: var(--fd-space-2); }

/* Cerca tuyo: a static preview; nothing inside is interactive. PRÓXIMAMENTE reads from the pills, the map lock and the muted
   CTAs; no opacity on the section, which would stack on the muted colors (WCAG 1.4.3). */
.hm-near__grid { display: grid; gap: var(--fd-space-3); margin-block-start: var(--fd-space-4); }
.hm-map {
  position: relative;
  min-block-size: 10.625rem;
  overflow: hidden;
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius-map);
  background-color: var(--hm-band);
  background-image:
    radial-gradient(18.75rem 13.75rem at 22% 18%, var(--hm-blob-emerald-faint), transparent 70%),
    radial-gradient(17.5rem 12.5rem at 80% 80%, var(--hm-blob-gold-faint), transparent 70%);
  box-shadow: var(--pub-shadow-overlay);
}
.hm-map__roads { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; }
.hm-map__road { fill: none; }
.hm-map__road--main { stroke: var(--hm-road-1); stroke-width: 22; }
.hm-map__road--avenue { stroke: var(--hm-road-2); stroke-width: 15; }
.hm-map__road--street { stroke: var(--hm-road-2); stroke-width: 11; }
.hm-map__road--lane { stroke: var(--hm-road-3); stroke-width: 8; }
.hm-map__halo { fill: var(--hm-map-halo); }
.hm-map__you { fill: var(--hm-emerald); stroke: var(--hm-card); stroke-width: 2.5; }
.hm-map__pin {
  position: absolute;
  padding: var(--fd-space-1) var(--fd-space-2);
  border-bottom: var(--hm-edge) solid var(--hm-ink-edge);
  border-radius: var(--fd-radius-pill);
  color: var(--hm-on-dark);
  background: var(--hm-ink);
  font-size: var(--fd-text-2xs);
  font-weight: var(--fd-weight-bold);
  line-height: var(--fd-leading-snug);
  white-space: nowrap;
  box-shadow: var(--pub-shadow-raised);
}
.hm-map__pin--accent {
  border-bottom-color: var(--hm-gold-edge);
  color: var(--hm-gold-ink);
  background: linear-gradient(180deg, var(--hm-gold-top), var(--hm-gold)) border-box var(--hm-gold);
}
.hm-map__pin--ar { inset-inline-start: 12%; inset-block-start: 14%; }
.hm-map__pin--tn { inset-inline-start: 58%; inset-block-start: 16%; }
.hm-map__pin--lm { inset-inline-start: 35%; inset-block-start: 66%; }
.hm-map__pin--hr { inset-inline-start: 62%; inset-block-start: 78%; }
.hm-map__pin--lm,
.hm-map__pin--hr { display: none; }
.hm-map__lock {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  display: inline-flex;
  align-items: center;
  gap: var(--fd-space-2);
  padding: var(--fd-space-2) var(--fd-space-4);
  border-bottom: var(--hm-edge) solid var(--hm-ink-edge);
  border-radius: var(--fd-radius-pill);
  color: var(--hm-on-dark);
  background: var(--hm-ink);
  box-shadow: var(--pub-shadow-overlay);
  font-size: var(--fd-text-xs);
  font-weight: var(--fd-weight-bold);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.hm-map__caption {
  position: absolute;
  inset-inline-end: var(--fd-space-4);
  inset-block-end: var(--fd-space-3);
  display: none;
  color: var(--hm-muted);
  font-size: var(--fd-text-xs);
  font-weight: var(--fd-weight-semibold);
}

.hm-stores { display: grid; gap: var(--fd-space-4); margin: 0; padding: 0; list-style: none; }
.hm-store {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--fd-space-3);
  padding: var(--fd-space-3);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius-card);
  background: var(--hm-card);
  box-shadow: var(--pub-shadow-resting);
}
/* DESTACADO: warm card, dashed gold "costura" and a gold-foil flag. */
.hm-store--featured {
  border: 1.5px dashed var(--hm-gold-line);
  background: linear-gradient(180deg, var(--hm-card), var(--hm-card-warm)) var(--hm-card-warm);
  box-shadow: var(--pub-shadow-raised);
}
.hm-store--wide { display: none; }
.hm-store__flag {
  position: absolute;
  inset-inline-start: var(--fd-space-4);
  inset-block-start: calc(-1 * var(--fd-space-2));
  padding: var(--fd-space-1) var(--fd-space-2);
  border-top: 1px solid var(--hm-highlight);
  border-radius: var(--fd-radius-pill);
  color: var(--hm-gold-ink);
  background: linear-gradient(180deg, var(--hm-gold-top), var(--hm-gold)) border-box var(--hm-gold);
  font-size: var(--hm-text-3xs);
  font-weight: var(--fd-weight-bold);
  letter-spacing: var(--hm-tracking-caps);
  line-height: 1;
  text-transform: uppercase;
  box-shadow: var(--pub-shadow-raised);
}
.hm-store__photo {
  display: block;
  inline-size: 4rem;
  block-size: 4rem;
  flex: 0 0 auto;
  border-radius: var(--fd-radius-4);
  object-fit: cover;
  box-shadow: var(--pub-shadow-raised);
}
.hm-store__body { display: grid; min-inline-size: 0; gap: var(--fd-space-1); }
.hm-store__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fd-space-1) var(--fd-space-2); }
.hm-store__name { margin: 0; font-size: var(--fd-text-sm); font-weight: var(--fd-weight-bold); line-height: var(--fd-leading-snug); }
.hm-store__meta { margin: 0; color: var(--hm-muted); font-size: var(--fd-text-xs); }
.hm-store__reg {
  margin: 0;
  color: var(--hm-reg);
  font-family: var(--hm-font-mono);
  font-size: var(--fd-text-2xs);
  font-weight: var(--fd-weight-semibold);
  letter-spacing: var(--hm-tracking-mono);
}
.hm-store__cta { margin: 0; color: var(--hm-reg); font-size: var(--fd-text-xs); font-weight: var(--fd-weight-semibold); }

/* Lo que viene: translucent cards on the dark band. */
.hm-next {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fd-space-3);
  margin: var(--fd-space-5) 0 0;
  padding: 0;
  list-style: none;
}
.hm-next__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fd-space-2);
  padding: var(--fd-space-4);
  border: 1px solid var(--hm-glass-line);
  border-radius: var(--hm-radius-card);
  background: var(--hm-glass);
  box-shadow: var(--pub-shadow-raised);
}
.hm-next__icon { color: var(--hm-emerald-light); }
.hm-next__title { margin: 0; color: var(--hm-on-dark); font-size: var(--fd-text-sm); font-weight: var(--fd-weight-bold); line-height: var(--fd-leading-snug); }
.hm-next__text { display: none; margin: 0; color: var(--hm-on-dark-muted); font-size: var(--fd-text-sm); line-height: 1.55; }
/* /sobre: five items that keep their text on phones too. */
.hm-next.hm-next--full { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.hm-next--full .hm-next__text { display: block; }

/* Cómo funciona: white cards with a hanging tag each. */
.hm-how { display: grid; gap: var(--fd-space-7); margin-block-start: var(--fd-space-6); }
.hm-how__card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--fd-space-4);
  padding: var(--fd-space-6) var(--fd-space-5) var(--fd-space-5);
  border: 1px solid var(--hm-line);
  border-radius: var(--fd-radius-7);
  background: var(--hm-card);
  box-shadow: var(--pub-shadow-raised);
}
.hm-how__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--fd-space-2); }
.hm-steps { display: grid; gap: var(--fd-space-4); margin: 0; padding: 0; list-style: none; }
.hm-steps__item { display: flex; align-items: flex-start; gap: var(--fd-space-3); }
.hm-steps__number {
  display: grid;
  inline-size: 2rem;
  block-size: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--fd-radius-pill);
  background: linear-gradient(180deg, var(--hm-step-bg-top), var(--hm-step-bg)) var(--hm-step-bg);
  font-size: var(--fd-text-sm);
  font-weight: var(--fd-weight-bold);
  box-shadow: var(--pub-shadow-resting);
}
.hm-steps__item p { margin: 0; color: var(--hm-muted); font-size: var(--fd-text-sm); line-height: 1.55; }

/* Seller band: a dark rounded panel with the floating catalog mock. */
.hm-band-section { padding-block: var(--fd-space-7) 0; }
.hm-band {
  display: grid;
  gap: var(--fd-space-6);
  padding: var(--fd-space-6) var(--fd-space-5);
  border-radius: var(--fd-radius-8);
  color: var(--hm-on-dark);
  background-color: var(--hm-green);
  background-image:
    radial-gradient(35rem 18.75rem at 82% 12%, var(--hm-blob-gold), transparent 65%),
    radial-gradient(30rem 17.5rem at 8% 90%, var(--hm-blob-emerald), transparent 65%);
  box-shadow: var(--pub-shadow-modal);
}
.hm-band__copy { display: grid; gap: var(--fd-space-4); }
.hm-band__title {
  margin: 0;
  max-inline-size: 35rem;
  color: var(--hm-on-dark);
  font-family: var(--hm-font-display);
  font-size: var(--hm-title-band);
  font-weight: 800;
  letter-spacing: var(--hm-tracking-display);
  line-height: 1.12;
}
.hm-checks { display: grid; gap: var(--fd-space-2); margin: 0; padding: 0; list-style: none; color: var(--hm-on-dark-muted); font-size: var(--fd-text-sm); }
.hm-checks li { display: flex; align-items: center; gap: var(--fd-space-2); }
.hm-checks svg { flex: 0 0 auto; color: var(--hm-emerald-light); }
.hm-band__actions { display: grid; gap: var(--fd-space-3); margin-block-start: var(--fd-space-1); }

/* Decorative catalog mock (hidden on phones, as in the mobile blueprint): two straight stacked cards; the front one
   floats and carries a periodic sheen, the back one follows with a negative delay. */
.hm-mock {
  position: relative;
  display: none;
  inline-size: min(23.125rem, 100%);
  block-size: 20.625rem;
  justify-self: center;
}
.hm-mock__back {
  position: absolute;
  inset-block-start: var(--fd-space-5);
  inset-inline-start: var(--fd-space-5);
  inline-size: calc(100% - var(--fd-space-6));
  block-size: calc(100% - var(--fd-space-6));
  border-radius: var(--fd-radius-7);
  background: var(--hm-green-card);
  box-shadow: var(--pub-shadow-overlay);
}
.hm-mock__card {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  inline-size: calc(100% - var(--fd-space-5));
  gap: var(--fd-space-3);
  padding: var(--fd-space-5);
  border-radius: var(--fd-radius-7);
  color: var(--hm-ink);
  background: var(--hm-card);
  box-shadow: var(--pub-shadow-modal);
}
.hm-mock__head { display: flex; align-items: center; gap: var(--fd-space-3); }
.hm-mock__avatar {
  display: grid;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--hm-radius-tile);
  color: var(--hm-gold-top);
  background: var(--hm-green);
  font-family: var(--hm-font-display);
  font-weight: 800;
}
.hm-mock__brand { display: grid; min-inline-size: 0; font-size: var(--fd-text-sm); }
.hm-mock__url {
  overflow: hidden;
  color: var(--hm-muted);
  font-family: var(--hm-font-mono);
  font-size: var(--hm-text-3xs);
  letter-spacing: var(--hm-tracking-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hm-mock__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fd-space-3); }
.hm-mock__tile { display: block; block-size: 5.625rem; border-radius: var(--hm-radius-tile); }
.hm-mock__tile--1 { background: linear-gradient(180deg, var(--hm-tile-1a), var(--hm-tile-1b)); }
.hm-mock__tile--2 { background: linear-gradient(180deg, var(--hm-tile-2a), var(--hm-tile-2b)); }
.hm-mock__tile--3 { background: linear-gradient(180deg, var(--hm-tile-3a), var(--hm-tile-3b)); }
.hm-mock__tile--4 { background: linear-gradient(180deg, var(--hm-tile-4a), var(--hm-tile-4b)); }
.hm-mock__row { display: flex; align-items: center; justify-content: space-between; gap: var(--fd-space-3); margin: 0; font-size: var(--fd-text-xs); }
/* Placeholder bar: the mock never invents a price. */
.hm-mock__price { display: block; inline-size: 3.5rem; block-size: 0.625rem; border-radius: var(--fd-radius-pill); background: var(--hm-line); }
.hm-mock__verified { display: flex; align-items: center; gap: var(--fd-space-2); margin: 0; color: var(--hm-emerald-deep); font-size: var(--fd-text-2xs); font-weight: var(--fd-weight-bold); }

.hm-float { animation: hm-float var(--hm-float-dur) ease-in-out infinite; }
.hm-float-slow { animation: hm-float var(--hm-float-slow-dur) ease-in-out var(--hm-float-slow-delay) infinite; }
.hm-sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.hm-sheen::after {
  content: "";
  position: absolute;
  inset-block: -30%;
  inset-inline-start: 0;
  inline-size: 38%;
  background: linear-gradient(105deg, transparent 0%, var(--hm-sheen) 50%, transparent 100%);
  transform: translateX(-130%) skewX(-12deg);
  animation: hm-sheen var(--hm-sheen-dur) ease-in-out infinite;
}
@keyframes hm-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--hm-float-lift)); }
}
@keyframes hm-sheen {
  0%, 55% { transform: translateX(-130%) skewX(-12deg); }
  85%, 100% { transform: translateX(160%) skewX(-12deg); }
}

/* ---------- footer (dark, 4 columns; the Legal nav doubles as the site-footer.js hook) ---------- */
.hm-footer {
  margin-block-start: var(--fd-space-7);
  color: var(--hm-on-dark-faint);
  background-color: var(--hm-green-night);
  background-image: radial-gradient(32.5rem 17.5rem at 8% 0%, var(--hm-blob-emerald-soft), transparent 65%);
  font-size: var(--fd-text-sm);
}
.hm-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fd-space-6) var(--fd-space-5);
  padding-block: var(--fd-space-7) var(--fd-space-6);
}
.hm-footer__about { display: grid; grid-column: 1 / -1; align-content: start; justify-items: start; gap: var(--fd-space-3); }
.hm-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--fd-space-3);
  margin: 0;
  color: var(--hm-on-dark);
  font-family: var(--hm-font-display);
  font-size: var(--fd-text-xl);
  font-weight: 800;
  letter-spacing: var(--hm-tracking-title);
}
.hm-footer__blurb { max-inline-size: 19rem; margin: 0; color: var(--hm-on-dark-footer); line-height: 1.6; }
.hm-footer__col { display: grid; align-content: start; }
.hm-footer__heading {
  margin: 0 0 var(--fd-space-1);
  color: var(--hm-gold-text);
  font-size: var(--fd-text-2xs);
  font-weight: var(--fd-weight-bold);
  letter-spacing: var(--hm-tracking-eyebrow);
  text-transform: uppercase;
}
.hm-footer .hm-footer__nav { display: grid; align-content: start; gap: 0; }
.hm-footer .hm-footer__nav a {
  display: inline-flex;
  min-inline-size: var(--fd-target-min);
  min-height: var(--fd-target-min);
  align-items: center;
  justify-self: start;
  color: var(--hm-on-dark-link);
  font-size: var(--fd-text-sm);
  font-weight: var(--fd-weight-regular);
  transition: color var(--fd-duration-fast) var(--fd-ease-standard);
}
.hm-footer .hm-footer__nav a:hover { color: var(--hm-gold-text); }
.hm-footer__current { display: inline-flex; min-height: var(--fd-target-min); align-items: center; color: var(--hm-on-dark); font-weight: var(--fd-weight-bold); }
.hm-footer__soon {
  display: inline-flex;
  min-height: var(--fd-target-min);
  align-items: center;
  gap: var(--fd-space-2);
  color: var(--hm-on-dark-faint);
}
.hm-footer .site-footer__privacy-button { justify-self: start; padding-inline: 0; color: var(--hm-on-dark-link); font-size: var(--fd-text-sm); }
.hm-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fd-space-1) var(--fd-space-5);
  padding-block: var(--fd-space-4) var(--fd-space-5);
  border-top: var(--hm-seam) dashed var(--hm-seam-foot);
}
.hm-footer__copy { margin: 0; }
.hm-social {
  display: inline-grid;
  inline-size: var(--fd-target-min);
  block-size: var(--fd-target-min);
  place-items: center;
  margin-inline-start: auto;
  border: 1px solid var(--hm-seam-dark);
  border-radius: var(--fd-radius-pill);
  color: var(--hm-on-dark-link);
  transition: color var(--fd-duration-fast) var(--fd-ease-standard), border-color var(--fd-duration-fast) var(--fd-ease-standard);
}
.hm-social:hover { border-color: var(--hm-gold-text); color: var(--hm-gold-text); }
/* consent.css (loaded by modules/core/consent.js) pins the "Privacidad y analítica" pill to the bottom-right corner and
   only lifts the banner above it on the landing (body.lp); the home lifts it the same way so the pill stays reachable. */
body.hm .consent-banner { bottom: calc(max(var(--fd-space-4), env(safe-area-inset-bottom)) + var(--fd-space-8)); }
.hm-footer__credit { color: var(--hm-on-dark-faint); }
/* The shared trigger is an inline-flex button: its text run and <strong> are flex items, so the space between them
   collapses; a gap restores it here without touching the shared site-footer.css. */
.hm-footer__credit .lp-footer__developer { gap: 0.25em; }
.hm-footer__credit .lp-footer__developer strong { color: var(--hm-gold-text); }

/* ---------- tablet and up ---------- */
@media (min-width: 40rem) {
  .hm-store--wide { display: flex; }
  .hm-map { min-block-size: 16rem; }
  .hm-map__pin--lm,
  .hm-map__pin--hr { display: block; }
  .hm-next__text { display: block; flex: 1 1 auto; }
  .hm-band__actions { display: flex; flex-wrap: wrap; }
  .hm-mock { display: block; }
}

@media (min-width: 48rem) {
  .hm-section { padding-block-start: var(--fd-space-7); }
  .hm-section--dark { padding-block: calc(var(--fd-space-7) + var(--fd-space-2)); }
  .hm-how { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fd-space-5); }
  .hm-how__card { gap: var(--fd-space-5); padding: calc(var(--fd-space-6) + var(--fd-space-1)) var(--fd-space-6) var(--fd-space-6); }
  .hm-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .hm-near__grid { grid-template-columns: minmax(0, 620fr) minmax(0, 560fr); gap: var(--fd-space-5); }
  .hm-map { min-block-size: 31.25rem; }
  .hm-map__pin { padding: var(--fd-space-2) var(--fd-space-3); border-bottom-width: var(--hm-edge-lg); font-size: var(--fd-text-sm); }
  .hm-map__pin--ar { inset-inline-start: 26%; inset-block-start: 24%; }
  .hm-map__pin--tn { inset-inline-start: 56%; inset-block-start: 33%; }
  .hm-map__lock { padding: var(--fd-space-3) var(--fd-space-5); font-size: var(--fd-text-sm); }
  .hm-map__caption { display: block; }
  .hm-stores { align-content: space-between; }
  .hm-store { gap: var(--fd-space-4); padding: var(--fd-space-4); }
  .hm-store__photo { inline-size: 5.25rem; block-size: 5.25rem; border-radius: var(--fd-radius-5); }
  .hm-store__name { font-size: var(--fd-text-md); }
  .hm-store__meta,
  .hm-store__cta { font-size: var(--fd-text-sm); }
  .hm-next { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fd-space-4); }
  .hm-next__card { gap: var(--fd-space-3); padding: var(--fd-space-5); }
  .hm-next__title { font-size: var(--fd-text-md); }
  .hm-band-section { padding-block-start: var(--fd-space-8); }
  .hm-band {
    grid-template-columns: minmax(0, 1fr) 23.125rem;
    align-items: center;
    gap: var(--fd-space-7);
    padding: var(--fd-space-7) calc(var(--fd-space-7) + var(--fd-space-1));
  }
  .hm-checks { font-size: var(--fd-text-md); }
  .hm-footer { margin-block-start: var(--fd-space-8); }
  .hm-footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--fd-space-7); padding-block: calc(var(--fd-space-7) + var(--fd-space-2)) var(--fd-space-7); }
  .hm-footer__about { grid-column: auto; }
  .hm-footer__bottom { padding-block: var(--fd-space-5) var(--fd-space-5); }
}

/* The seller mock, the hero effect and the rubros marquee stand still under reduced motion (the foundation net shortens
   every duration; these stop outright). The marquee becomes a static list that wraps onto several lines below "Cerca mío"
   (judgment-day F4): no fade mask and no scroller, so every rubro shows at full contrast without scrolling; its aria-hidden
   copy and the pause control (nothing moves) are dropped. */
@media (prefers-reduced-motion: reduce) {
  .hm-float,
  .hm-float-slow { animation: none; }
  .hm-sheen::after { animation: none; display: none; }
  .hm-fx__blob { animation: none; }
  .hm-fx__threads { animation: none; }
  .hm-chips { flex-wrap: wrap; }
  .hm-marquee {
    flex-basis: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hm-marquee__rail { inline-size: auto; animation: none; }
  .hm-marquee__track { flex-wrap: wrap; padding-inline-end: 0; }
  .hm-marquee__track[aria-hidden="true"],
  .hm-marquee__toggle { display: none; }
}

/* Centered hero from desktop: the wrapped rubros center under it as well. */
@media (prefers-reduced-motion: reduce) and (min-width: 64rem) {
  .hm-chips,
  .hm-marquee__track { justify-content: center; }
}