@charset "UTF-8";

/* /sobre (comercio-redesign). Loaded only by sobre.html, after landing.css (the retained landing sections, byte-frozen)
   and home.css (the shared Comercio chrome and palette). Everything here goes through tokens, never a color literal:
   1. the landing palette and type roles (--paper, --ink, --accent, --display ...) are remapped onto the Comercio tokens,
      so the retained sections (features, cómo funciona, demo carousel, comparativa, precios, registro, casos, FAQ) repaint
      without touching landing.css or styles.css;
   2. those sections gain the Comercio surfaces: gold 3D CTAs, dashed "costura" seams, rounded cards, the DESTACADO foil;
   3. the /sobre-only pieces: valores band, demo showcase and CTA band (no historia section: owner decision, 2026-09-25).
   Unlayered (R-2). */
/* The remap is screen-only: an unconditional :root here would outrank the `@media print` token reset of styles.css (same
   specificity, later in source order), so print falls back to the sitewide print tokens. */
@media screen {
  :root {
    --paper: var(--hm-paper);
    --paper-deep: var(--hm-band);
    --surface: var(--hm-band);
    --surface-strong: var(--hm-card);
    --ink: var(--hm-ink);
    --ink-soft: var(--hm-muted);
    --ink-faint: var(--hm-reg);
    --line: var(--hm-line);
    --line-strong: var(--hm-line-strong);
    --accent: var(--hm-link);
    --accent-dark: var(--hm-emerald-deep);
    --olive: var(--hm-emerald-deep);
    --gold: var(--hm-gold);
    --display: var(--hm-font-display);
    --sans: var(--hm-font-sans);
    --mono: var(--hm-font-mono);
  }
}

/* The landing sections align with the Comercio chrome; the anchor offset below the sticky header comes from home.css. */
.lp { --lp-max: var(--hm-shell-max); }
.lp .hm-roadmap { margin-block-start: 0; }

/* ---------- retained sections: type, seams, controls ---------- */
/* Section titles follow the blueprint scale (the wider display face would wrap the landing's 3rem titles into 3-4 lines). */
.lp .lp-section__head { max-width: 46rem; }
.lp .lp-section__head h2,
.lp .lp-signup__aside h2 {
  font-size: var(--hm-title-section);
  font-weight: var(--fd-weight-bold);
  letter-spacing: var(--hm-tracking-title);
  line-height: var(--fd-leading-tight);
}
.lp .lp-section__head h2 + p { margin-block-start: var(--fd-space-3); }
.lp .lp-feature h3,
.lp .lp-how__step h3,
.lp .lp-usecase h3,
.lp .lp-compare__head h3 { font-weight: var(--fd-weight-semibold); letter-spacing: var(--hm-tracking-title); }
.lp .eyebrow::after {
  height: 0;
  border-top: var(--hm-seam) dashed var(--hm-seam-light);
  background: none;
}

/* Primary actions wear the gold 3D face of the home (top highlight, hard bottom edge). */
.lp .button--dark {
  border-color: var(--hm-highlight) transparent var(--hm-gold-edge);
  border-bottom-width: var(--hm-edge);
  border-radius: var(--fd-radius-5);
  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);
}
.lp .button--dark:hover:where(:not(:disabled):not([aria-disabled="true"])) {
  border-color: var(--hm-highlight) transparent var(--hm-gold-edge);
  color: var(--hm-gold-ink);
  background-color: var(--hm-gold-hover);
  background-image: linear-gradient(180deg, var(--hm-gold-top-hover), var(--hm-gold-hover));
}
.lp .button--ghost,
.lp .button--plain,
.lp .button--google { border-radius: var(--fd-radius-5); }
.lp .field input { border-radius: var(--fd-radius-4); }

/* ---------- cards ---------- */
.lp .lp-features__grid { gap: var(--fd-space-4); border: 0; background: none; box-shadow: none; }
.lp .lp-feature,
.lp .lp-compare__card,
.lp .lp-plan {
  border-color: var(--hm-line);
  border-radius: var(--hm-radius-card);
}
.lp .lp-feature { border: 1px solid var(--hm-line); box-shadow: var(--pub-shadow-resting); }
/* Grid cards keep their content at the top instead of spreading it over the row height. */
.lp .lp-feature,
.lp .lp-how__step,
.lp .lp-usecase { align-content: start; }
.lp .lp-feature__mark {
  border: 0;
  border-radius: var(--hm-radius-mark);
  color: var(--hm-link);
  background: var(--hm-band);
}
.lp .lp-signup__card { border-radius: var(--hm-radius-map); }
.lp .lp-pricing__summary { overflow: hidden; border-radius: var(--hm-radius-card); }

/* DESTACADO language of the home: the recommended plan and the product side of the comparison get the dashed gold seam and
   the gold-foil badge (a paused plan keeps its recessed look). */
.lp .lp-plan--featured:not(.is-unavailable),
.lp .lp-compare__card--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);
}
.lp .lp-plan--featured:has([data-plan-cta]:focus-visible) { border-color: var(--pub-focus-color); }
/* A paused plan keeps the recessed dashed CTA of landing.css, without the gold edge. */
.lp .lp-plan [data-plan-cta][aria-disabled="true"] { border-bottom-width: 1px; }
.lp .lp-plan__badge {
  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);
  box-shadow: var(--pub-shadow-raised);
}

/* Demo carousel: rounded frames, pill controls, the active rubro in gold (filled + bold, never color-only). */
.lp .lp-demo__frame { border-color: var(--hm-line); border-radius: var(--hm-radius-card); box-shadow: var(--pub-shadow-raised); }
.lp .lp-demo__arrow,
.lp .lp-demo__dot { border-radius: var(--fd-radius-pill); }
.lp .lp-demo__dot.is-active {
  border-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);
}

/* ---------- valores band ---------- */
.sb-values {
  padding-block: var(--fd-space-6);
  border-bottom: 1px solid var(--hm-line);
  background-color: var(--hm-band);
  background-image:
    radial-gradient(26.25rem 12.5rem at 15% 50%, var(--hm-blob-emerald-faint), transparent 70%),
    radial-gradient(26.25rem 12.5rem at 85% 50%, var(--hm-blob-gold-faint), transparent 70%);
}
.sb-values__grid {
  display: grid;
  gap: var(--fd-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.sb-value h3 {
  margin: 0 0 var(--fd-space-1);
  color: var(--hm-link);
  font-family: var(--hm-font-display);
  font-size: var(--fd-text-xl);
  font-weight: var(--fd-weight-bold);
  letter-spacing: var(--hm-tracking-title);
}
.sb-value p { max-width: 34ch; margin: 0 auto; color: var(--hm-muted); font-size: var(--fd-text-sm); line-height: var(--fd-leading-normal); }

@media (min-width: 780px) {
  .sb-values__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- demo showcase (the blueprint's demo tiles, above the retained carousel) ---------- */
.sb-showcase { display: grid; align-items: start; gap: var(--fd-space-5); margin-block-end: var(--fd-space-7); }
.sb-showcase__card {
  display: flex;
  flex-direction: column;
  gap: var(--fd-space-3);
  padding: var(--fd-space-5);
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius-map);
  color: var(--hm-ink);
  background: var(--hm-card);
  box-shadow: var(--pub-shadow-raised);
}
.sb-showcase__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fd-space-3); }
.sb-showcase__avatar {
  display: grid;
  inline-size: 2.375rem;
  block-size: 2.375rem;
  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-size: var(--fd-text-sm);
  font-weight: 800;
}
.sb-showcase__brand { display: grid; min-inline-size: 0; font-size: var(--fd-text-sm); line-height: var(--fd-leading-snug); }
.sb-showcase__brand small { color: var(--hm-muted); font-size: var(--fd-text-2xs); }
.sb-showcase__chips { display: flex; gap: var(--fd-space-2); margin-inline-start: auto; }
.sb-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--fd-space-1) var(--fd-space-3);
  border-radius: var(--fd-radius-pill);
  color: var(--hm-soft-ink);
  background: var(--hm-band);
  font-size: var(--fd-text-2xs);
  font-weight: var(--fd-weight-bold);
  line-height: var(--fd-leading-snug);
  white-space: nowrap;
}
.sb-chip--active {
  border-top: 1px solid var(--hm-highlight);
  border-bottom: var(--hm-seam) solid 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);
}
.sb-chip--ok {
  color: var(--hm-emerald-deep);
  background: linear-gradient(180deg, var(--hm-ok-bg-top), var(--hm-ok-bg)) var(--hm-ok-bg);
  letter-spacing: var(--hm-tracking-pill);
  text-transform: uppercase;
}
.sb-showcase__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fd-space-3); }
.sb-showcase__item { display: grid; align-content: start; gap: var(--fd-space-2); font-size: var(--fd-text-xs); line-height: var(--fd-leading-snug); }
.sb-showcase__photo,
.sb-showcase__tile {
  display: block;
  inline-size: 100%;
  block-size: 6.875rem;
  border-radius: var(--hm-radius-tile);
  object-fit: cover;
  box-shadow: var(--pub-shadow-resting);
}
.sb-showcase__tile { background: linear-gradient(180deg, var(--hm-tile-1a), var(--hm-tile-1b)); }
/* Placeholder bars: the showcase never invents a price. */
.sb-showcase__price { display: block; inline-size: 3rem; block-size: 0.5rem; border-radius: var(--fd-radius-pill); background: var(--hm-line); }
.sb-showcase__styles { display: flex; flex-wrap: wrap; gap: var(--fd-space-2); }
.sb-showcase__list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fd-space-2);
  font-size: var(--fd-text-sm);
}
.sb-showcase__rows { display: grid; margin: 0; padding: 0; list-style: none; }
.sb-showcase__rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fd-space-3);
  padding-block: var(--fd-space-2);
  border-bottom: 1px dashed var(--hm-row-line);
  font-size: var(--fd-text-sm);
}
.sb-showcase__rows li:last-child { border-bottom: 0; }
.sb-showcase__note {
  display: flex;
  align-items: center;
  gap: var(--fd-space-2);
  margin: auto 0 0;
  padding: var(--fd-space-3);
  border-radius: var(--fd-radius-5);
  color: var(--hm-soft-ink);
  background: var(--hm-band);
  font-size: var(--fd-text-xs);
  font-weight: var(--fd-weight-semibold);
}
.sb-showcase__note svg { flex: 0 0 auto; color: var(--hm-emerald-deep); }

@media (min-width: 960px) {
  .sb-showcase { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

/* ---------- final CTA band (dark, as the home's seller band) ---------- */
.sb-cta { padding-block-start: var(--fd-space-7); }
.sb-cta__band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fd-space-5);
  padding: var(--fd-space-6);
  border-radius: var(--fd-radius-8);
  color: var(--hm-on-dark);
  background-color: var(--hm-green);
  background-image: radial-gradient(30rem 16.25rem at 84% 10%, var(--hm-blob-gold), transparent 65%);
  box-shadow: var(--pub-shadow-modal);
}
.sb-cta__band :focus-visible { outline-color: var(--hm-gold-text); }
.sb-cta__copy { display: grid; gap: var(--fd-space-1); }
.sb-cta__copy h2 {
  margin: 0;
  color: var(--hm-on-dark);
  font-family: var(--hm-font-display);
  font-size: var(--fd-text-2xl);
  font-weight: 800;
  letter-spacing: var(--hm-tracking-title);
  line-height: var(--fd-leading-snug);
}
.sb-cta__copy p { margin: 0; color: var(--hm-on-dark-muted); font-size: var(--fd-text-md); }