/* ==========================================================
   SoftwareMX — Brand Polish (Option A)
   Space Grotesk + DM Sans • tokens.css variables
   Loaded AFTER main.css — token-driven overrides only.
   Surgical layer: no layout rewrites, only polish.
   ========================================================== */

/* ----------------------------------------------------------
   0) Token bridge — align legacy --brand-green vars to tokens
   main.css defines --brand-green; tokens.css defines --brand.
   This layer makes them equivalent (loaded last wins).
   ---------------------------------------------------------- */
:root {
  --brand-green: var(--brand);
  --brand-green-dark: var(--brand-600);
  --brand-green-darker: var(--brand-700);
  /* gradients rebuilt from token greens */
  --brand-gradient: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
  --brand-gradient-radial: radial-gradient(48px 48px at 50% 50%, #a7f3d0 0%, #34d399 40%, var(--brand) 100%);
}

/* ----------------------------------------------------------
   1) CARDS / HERO-CARDS
   .hero-card, .process-step, .stat, .hero-idea,
   .system-visual, .benefit-card, .solution-item (opt)
   ---------------------------------------------------------- */
.hero-card,
.process-step,
.benefit-card,
.stat,
.solution-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--base) var(--ease),
    box-shadow var(--base) var(--ease),
    border-color var(--fast) var(--ease),
    background var(--fast) var(--ease);
}

.hero-card:hover,
.process-step:hover,
.benefit-card:hover,
.stat:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 211, 102, 0.35);
  box-shadow: var(--shadow-lg);
}

/* Visuals get xl radius + overflow + glow on hover */
.system-visual {
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition:
    transform var(--base) var(--ease),
    box-shadow var(--base) var(--ease),
    border-color var(--fast) var(--ease);
}

.system-visual:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 211, 102, 0.35);
  box-shadow: var(--shadow-glow), var(--shadow-lg);
}

.system-visual img {
  border-radius: var(--radius-xl);
  display: block;
  width: 100%;
}

/* hero-card specific polish — keep its translucent base but use tokens */
.hero-card {
  /* keep subtle translucency but align to token surface */
  background: var(--surface-elevated);
  border-radius: var(--radius-lg);
}

/* hero-idea is a CTA-card: brand bg, pill-like radius lg, lift on hover */
.hero-idea {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(13, 59, 33, 0.18);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--base) var(--ease),
    box-shadow var(--base) var(--ease),
    filter var(--base) var(--ease),
    border-color var(--fast) var(--ease);
}

.hero-idea:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
  border-color: rgba(37, 211, 102, 0.35);
  filter: brightness(1.03);
}

/* stats grid cards — if .stat wrapper exists, give it card feel subtly */
.stats-grid > .stat,
.stats-grid > div {
  border-radius: var(--radius-lg);
}

/* ----------------------------------------------------------
   2) BUTTONS
   .button.primary, .system-cta, .cta-final-btn,
   .hero-wa, .contact-cta, .hero-ghost, .read-more-cta
   ---------------------------------------------------------- */

/* Base pill + type for all primary/ghost CTAs */
.button.primary,
.system-cta,
#five .cta-final-btn,
#banner.hero-new .hero-wa,
.button.contact-cta,
#banner.hero-new .hero-ghost,
.button.read-more-cta {
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    background var(--base) var(--ease),
    box-shadow var(--base) var(--ease),
    transform var(--base) var(--ease),
    border-color var(--fast) var(--ease),
    filter var(--base) var(--ease),
    color var(--fast) var(--ease);
}

/* Primary / brand buttons — solid brand */
.button.primary,
#banner.hero-new .hero-wa,
.system-cta,
#five .cta-final-btn,
.button.contact-cta {
  background: var(--brand) !important;
  background-image: none !important;
  color: var(--brand-bg) !important;
  border: 1px solid transparent !important;
  box-shadow: var(--shadow-sm);
}

.button.primary:hover,
#banner.hero-new .hero-wa:hover,
.system-cta:hover,
#five .cta-final-btn:hover,
.button.contact-cta:hover {
  background: var(--brand-600) !important;
  color: var(--brand-bg) !important;
  box-shadow: var(--shadow-glow), var(--shadow-sm);
  transform: translateY(-1px);
  filter: none;
}

.button.primary:active,
#banner.hero-new .hero-wa:active,
.system-cta:active,
#five .cta-final-btn:active,
.button.contact-cta:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
  filter: brightness(0.98);
}

/* Ghost / secondary — transparent with line border */
#banner.hero-new .hero-ghost,
.button.read-more-cta {
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid var(--line) !important;
  color: var(--text) !important;
  box-shadow: none;
}

#banner.hero-new .hero-ghost:hover,
.button.read-more-cta:hover {
  border-color: var(--brand) !important;
  color: var(--text) !important;
  background: rgba(37, 211, 102, 0.08) !important;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

#banner.hero-new .hero-ghost:active,
.button.read-more-cta:active {
  transform: translateY(0);
}

/* preserve read-more arrow spacing */
.button.read-more-cta {
  padding-right: 2.25em;
}

/* ensure cta pulse does not clash with new shadow — keep but soften */
.button.contact-cta {
  animation: ctaPulse 3.5s ease-in-out infinite;
}

/* ----------------------------------------------------------
   3) CHIPS
   .system-chip, .hero-pill, .system-img-chip
   ---------------------------------------------------------- */
.system-chip,
.hero-pill,
.system-img-chip {
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid transparent;
  transition:
    background var(--fast) var(--ease),
    color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}

/* Chips — blue for contrast (was green-on-green invisible) */
.system-chip,
.hero-pill,
.system-img-chip {
  background: var(--brand-blue) !important;
  color: #FFFFFF !important;
  --icon-accent: #25D366 !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.28);
}

/* VENDE-YA chip — lighter blue as requested */
.chip-vende-ya {
  background: var(--brand-blue-light) !important;
  color: #0D3B21 !important;
  --icon-accent: #0D3B21 !important;
  box-shadow: 0 2px 10px rgba(147, 197, 253, 0.30) !important;
}
.chip-vende-ya .smx-icon {
  color: #0D3B21 !important;
}
.chip-vende-ya .brand-stroke,
.chip-vende-ya .smx-icon .brand-stroke {
  stroke: #0D3B21 !important;
}
.chip-vende-ya .brand-fill {
  fill: #0D3B21 !important;
}

.hero-pill {
  /* pill in card corner — keep absolute positioning from main.css */
  font-size: 0.62em;
}

/* ----------------------------------------------------------
   4) SYSTEM PANELS
   .system-panel.panel-left/.panel-right, .system-inner
   Alternate backgrounds already done (#14151c / #31333e) — keep.
   Ensure gap/padding use spacing tokens.
   ---------------------------------------------------------- */
.system-panel {
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* keep alternate backgrounds but ensure token fallback if var overridden */
.system-panel.panel-left {
  background: #14151c;
}

.system-panel.panel-right {
  background: #31333e;
}

.system-inner {
  gap: var(--space-3xl);
  padding-inline: var(--space-xl);
}

@media screen and (max-width: 980px) {
  .system-panel {
    padding-block: var(--space-xl);
  }

  .system-inner {
    gap: var(--space-2xl);
    padding-inline: var(--space-lg);
  }
}

@media screen and (max-width: 736px) {
  .system-inner {
    gap: var(--space-xl);
    padding-inline: var(--space-md);
  }
}

/* ----------------------------------------------------------
   5) FOCUS-VISIBLE + REDUCED-MOTION (a11y)
   ---------------------------------------------------------- */
*:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Remove border-radius override for elements that already have pill radius */
.button:focus-visible,
.system-cta:focus-visible,
.hero-wa:focus-visible,
.hero-ghost:focus-visible,
.system-chip:focus-visible,
.hero-pill:focus-visible {
  border-radius: var(--radius-pill);
}

/* ----------------------------------------------------------
   6) ICON VISIBILITY — ensure sprite icons are prominent
   External <use> failed before; now inlined. Boost sizes
   and contrast so the geometric monogram is unmistakable.
   ---------------------------------------------------------- */
.system-chip .smx-icon,
.system-img-chip .smx-icon,
.hero-pill .smx-icon {
  width: 1.35rem;
  height: 1.35rem;
  color: #FFFFFF !important;
  flex-shrink: 0;
}

.hero-card-head .smx-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text, #FFF);
  flex-shrink: 0;
}

.process-icon .smx-icon {
  width: 2rem;
  height: 2rem;
  color: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.process-icon .smx-icon .brand-stroke,
.process-icon .brand-stroke {
  stroke: #ffffff !important;
}

.process-icon .smx-icon circle[fill="#25D366"] {
  fill: #ffffff !important;
}

.hero-idea .smx-icon {
  width: 1.4rem;
  height: 1.4rem;
}

.system-bullets .smx-icon--check {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--brand, #25D366);
  flex-shrink: 0;
}

.hero-trust .smx-icon--check {
  width: 1rem;
  height: 1rem;
  color: var(--brand, #25D366);
}

/* Ensure <use> icons inherit correctly even when sprite is display:none */
.smx-icon use {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   DESKTOP ALIGNMENT PATCH — unify 74em grid + token rhythm
   Verified audit findings (brand-polish.css overrides main.css):
   - Container mismatch: .container had TWO definitions in
     main.css — 70em (calc 100% -4em, line ~732) AND 1200px
     (~75em, line ~4038, later wins). Inners (.hero-inner,
     .stats-inner, .system-inner, .how-inner) are 74em. On
     elements with <div class="container system-inner"> the
     later 74em wins (same specificity, last rule). Bare
     .container (footer) resolves to 1200px, so hero/system
     delta was ~1em (16px) at >1280px, but hero-inner has NO
     .container class — its inset came from #banner padding
     4em (64px) per side vs system-inner padding-inline 32px,
     causing a 32px per-side horizontal misalignment. This
     patch unifies all to 74em.
   - Gap inconsistency: system-inner 64px (var --space-3xl)
     vs hero-inner 3.5em (56px) vs process-grid 1.5em (24px).
     Hero gap normalized to --space-3xl for grid harmony;
     process-grid intentionally keeps 24px (denser cards).
   - Padding inconsistency: #banner 8em 4em (64px horiz)
     vs system panels 0 horiz (inner handles inset). Unified
     to banner horiz = var(--space-xl) 32px so inner inset
     matches system/stats/how (32px).
   - CTA final: 56em is intentional focal narrowing — kept,
     but centered within 74em rhythm (auto margins, width
     calc ensures optical centering, not edge-to-edge).
   Decision: 74em for ALL outer containers (footer + hero +
   stats + system + how). 74em = 1184px @16px, closest to
   footer 1200px and existing inners, minimal visual change.
   Alternative considered: 70em for all — rejected because
   it would shrink every section (70em=1120px) and require
   overriding 5 selectors; 74em needs only one container
   override and preserves current photography-friendly width.
   ========================================================== */

/* --- 1) UNIFY max-width: all desktop containers -> 74em --- */
.container {
  max-width: 74em; /* was 70em (first def) / 1200px (~75em, second def) -> unify to 74em = 1184px */
  margin-inline: auto;
  box-sizing: border-box;
}

.hero-inner,
.stats-inner,
.system-inner,
.how-inner {
  max-width: 74em;
  box-sizing: border-box;
}

/* footer uses bare .container — ensure same cap, not 1200px */
.site-footer .container {
  max-width: 74em;
}

/* CTA inner stays focal 56em but must remain CENTERED inside 74em grid */
.cta-final-inner {
  max-width: 56em; /* intentional narrow focal — do not widen to 74em */
  margin-inline: auto;
  box-sizing: border-box;
}

/* --- 2) NORMALIZE GAPS: hero -> token scale (match system-inner 64px) --- */
.hero-inner {
  gap: var(--space-3xl); /* 64px — was 3.5em (56px) in main.css */
  justify-content: center;
}

.system-inner {
  gap: var(--space-3xl); /* already 64px via earlier rule — reaffirm */
  justify-content: center;
}

/* --- 3) HORIZONTAL + VERTICAL RHYTHM: banner & sections use tokens --- */
#banner.hero-new {
  /* was 8em 4em 5em — horiz 64px now 32px to match inner 32px inset */
  padding: 8em var(--space-xl) 5em var(--space-xl);
  justify-content: center;
}

#one.stats-band {
  /* was 4em 0 — use token 64px for vertical rhythm */
  padding: var(--space-3xl) 0;
}

.system-panel {
  /* already var(--space-2xl) 48px via earlier rule — keep */
  padding-block: var(--space-2xl);
  padding-inline: 0; /* horiz handled by inner */
}

.how-we-work {
  /* was 4.5em 0 3.5em — normalize to 64px top / 48px bottom */
  padding: var(--space-3xl) 0 var(--space-2xl) 0;
}

#five.cta-final {
  /* was 6em 0 — keep generous but add horiz token gutter */
  padding: var(--space-3xl) var(--space-xl);
}

/* inner horizontal gutters — ensure every inner has same 32px inset */
.stats-inner,
.system-inner,
.how-inner,
.hero-inner {
  padding-inline: var(--space-xl);
}

/* CTA inner has its own interior padding (card) — keep its 4em/3em card padding, no extra gutter needed via width calc */

/* --- 4) DESKTOP-ONLY fine tuning (min-width: 981px) — no tablet/mobile override --- */
@media screen and (min-width: 981px) {
  .container {
    max-width: 74em;
  }

  .hero-inner,
  .stats-inner,
  .system-inner,
  .how-inner {
    max-width: 74em;
  }

  /* keep hero flex not wrapped on desktop, centered */
  .hero-inner {
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }

  .system-inner {
    justify-content: center;
    align-items: center;
  }
}

/* At very wide viewports (>1280) the calc gutter 4em ~64px may feel wide;
   keep 74em cap so content never stretches beyond grid — all sections stay aligned. */
@media screen and (min-width: 1281px) {
  .container,
  .hero-inner,
  .stats-inner,
  .system-inner,
  .how-inner {
    max-width: 74em;
  }
}

/* Ensure tablet/mobile breakpoints still collapse correctly (do not break 980/736) */
@media screen and (max-width: 980px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: var(--space-lg);
  }

  .hero-inner,
  .stats-inner,
  .system-inner,
  .how-inner {
    max-width: 100%;
    padding-inline: var(--space-lg);
  }

  .cta-final-inner {
    max-width: 100%;
  }
}

@media screen and (max-width: 736px) {
  .container,
  .hero-inner,
  .stats-inner,
  .system-inner,
  .how-inner {
    padding-inline: var(--space-md);
  }
}

/* ==========================================================
   Option A — Single-copy panels: centered narrow focal (48em)
   8 panels across puntodeventa/almacen/prestamos/restaurante/
   pedidos with class system-panel--single. Centered narrow
   column with breathing room — replaces previous flex-start
   left-align. Title/desc/chip centered, bullets 2-col grid.
   ========================================================== */
.system-panel--single .system-inner,
.system-panel .system-inner:has(> .system-copy:only-child) {
  justify-content: center !important;
  flex-direction: row !important;
  max-width: 74em;
}

.system-panel--single .system-copy,
.system-panel .system-inner:has(> .system-copy:only-child) .system-copy {
  flex: 0 1 48em !important;
  max-width: 48em;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  box-sizing: border-box;
}

.system-panel--single .system-chip {
  margin-left: auto;
  margin-right: auto;
}

.system-panel--single .system-title,
.system-panel--single .system-desc {
  text-align: center;
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
}

.system-panel--single .system-bullets {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-lg);
  text-align: left;
  width: 100%;
  max-width: 48em;
  margin: 0 auto var(--space-lg);
  justify-items: start;
}

.system-panel--single .system-bullets li {
  text-align: left;
  justify-content: flex-start;
}

.system-panel--single .system-cta {
  margin-left: auto;
  margin-right: auto;
}

/* No card hover — transparent focal block */

/* panel-right single must not stay row-reverse — force centered row */
.system-panel--single.panel-right .system-inner {
  flex-direction: row !important;
}

/* Fallback for :has browsers — already covered by --single class, but keep */
@supports not selector(:has(*)) {
  /* already handled via --single */
}

@media screen and (max-width: 736px) {
  .system-panel--single .system-bullets {
    grid-template-columns: 1fr;
  }

  .system-panel--single .system-copy,
  .system-panel .system-inner:has(> .system-copy:only-child) .system-copy {
    flex: 1 1 auto;
    max-width: 30em;
    padding: 0;
  }
}

/* ==========================================================
   FIX: Pricing — center to 74em grid + tokenize brand cards
   .pricing-container was outside #main, full-bleed, flex+gap 20px,
   no max-width, no token padding. Wrap in .container in HTML
   and enforce 74em centered grid here (works with or without wrapper).
   Card internals unified to Option A tokens (Space Grotesk + DM Sans).
   ========================================================== */
.pricing-container {
  max-width: 74em;
  margin: 3em auto;
  padding-inline: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  box-sizing: border-box;
  background: transparent;
  align-items: stretch;
}

/* When wrapped in .container (new HTML), outer handles max-width centering.
   Keep inner grid full-width inside wrapper; outer provides centering. */
.container > .pricing-container {
  max-width: 100%;
  margin-block: 3em;
  margin-inline: 0;
}

.pricing-column {
  background: var(--surface-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--base) var(--ease),
    box-shadow var(--base) var(--ease),
    border-color var(--fast) var(--ease);
  display: flex;
  flex-direction: column;
}

.pricing-column:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 211, 102, 0.35);
  box-shadow: var(--shadow-glow), var(--shadow-lg);
}

.pricing-column:hover .price span {
  color: var(--brand-600);
}

/* Popular highlight — middle card "Básico" */
.pricing-column:nth-child(2) {
  border-color: rgba(37, 211, 102, 0.28);
  box-shadow: var(--shadow-glow), var(--shadow-md);
}

.pricing-column:nth-child(2):hover {
  border-color: rgba(37, 211, 102, 0.38);
  box-shadow: var(--shadow-glow), var(--shadow-lg);
}

/* ----------------------------------------------------------
   Card internals — Option A unification
   ---------------------------------------------------------- */

/* Title */
.pricing-column h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-display);
  color: var(--text);
  margin: 0 0 var(--space-sm);
  line-height: var(--lh-snug);
}

/* Description */
.pricing-column p {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
  margin: 0 0 var(--space-md);
  min-height: 2.5em;
}

/* Feature list */
.pricing-column ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
  display: grid;
  gap: var(--space-sm);
}

.pricing-column ul li {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  line-height: var(--lh-normal);
  padding-left: 0 !important;
  position: static !important;
}

.pricing-column ul li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  min-width: 1.4em;
  background: rgba(37, 211, 102, 0.12);
  border-radius: 50%;
  color: var(--brand);
  font-weight: 700;
  font-size: 0.7em;
  flex-shrink: 0;
  margin-top: 0.15em;
  line-height: 1;
  position: static !important;
  left: auto !important;
  top: auto !important;
  font-family: var(--font-ui) !important;
}

/* Price block */
.pricing-column .price {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  color: var(--brand);
}

.pricing-column .price span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--brand);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
}

.pricing-column .price small {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-weight: 400;
  text-transform: lowercase;
  line-height: var(--lh-normal);
}

/* CTA — full width, anchored to bottom */
.pricing-column .button.primary {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: auto;
}

@media screen and (max-width: 980px) {
  .pricing-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: var(--space-lg);
    margin: 2em auto;
  }

  .container > .pricing-container,
  .container .pricing-container {
    padding-inline: 0;
  }
}

@media screen and (max-width: 736px) {
  .pricing-container {
    grid-template-columns: 1fr;
    max-width: 34em;
    margin-inline: auto;
    padding-inline: var(--space-md);
    gap: var(--space-md);
  }
}

/* ==========================================================
   8) FOOTER — Option A brand polish (Space Grotesk + DM Sans)
   Tokens only; foot.php HTML unchanged (inlined SVG icons kept).
   Overrides are surgical and load after main.css.
   ========================================================== */

/* --- Site shell --- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: var(--space-2xl);
}

.site-footer .container {
  max-width: 74em;
  padding-inline: var(--space-xl);
  padding-block: 0;
  box-sizing: border-box;
}

/* --- Grid: map 1.1fr + info 0.9fr, token gap --- */
.footer-content.modern-contact {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-3xl);
  align-items: start;
  justify-content: initial;
  flex-wrap: initial;
}

/* Reset flex/width leftovers from main.css when grid is active */
.footer-content.modern-contact .footer-map,
.footer-content.modern-contact .footer-info {
  width: auto;
  flex: initial;
  padding-right: 0;
  margin-bottom: 0;
}

.footer-map {
  min-width: 0;
}

.footer-info {
  min-width: 0;
  text-align: left;
}

/* --- Map embed: token radius/border/shadow + 4/3 ratio --- */
.footer-map .map-embed {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  background: var(--surface-elevated);
}

.footer-map .map-embed::before {
  display: none;
  content: none;
}

.footer-map .map-embed::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.footer-map .map-embed iframe {
  position: relative;
  top: auto;
  left: auto;
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}

/* --- Map CTA (ghost) --- */
.map-open-btn {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Info heading --- */
.footer-info h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--text);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-md);
}

/* --- Contact list --- */
.contact-list {
  display: grid;
  gap: var(--space-md);
  margin: 0 0 var(--space-lg);
  padding: 0;
  list-style: none;
}

.contact-list li {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  line-height: var(--lh-normal);
  margin: 0;
  opacity: 1;
}

.contact-list li .smx-icon {
  color: var(--brand);
  flex-shrink: 0;
  margin-top: 0.15em;
  width: 1.1rem;
  height: 1.1rem;
}

/* --- Actions --- */
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: 0;
}

.contact-actions .button {
  flex: 0 1 auto;
  min-width: 9em;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  text-align: center;
}

/* --- Copyright --- */
.site-footer .copyright,
.copyright {
  border-top: 1px solid var(--line);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  letter-spacing: 0.02em;
  line-height: var(--lh-normal);
  list-style: none;
  text-align: center;
}

.site-footer .copyright li,
.copyright li {
  border-left: 0;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
}

/* Preserve legacy #footer selector if ever reused */
#footer .copyright {
  border-top: 1px solid var(--line);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  display: flex;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

/* --- Responsive: stack info above map --- */
@media screen and (max-width: 980px) {
  .site-footer {
    padding-block: var(--space-xl);
  }

  .site-footer .container {
    padding-inline: var(--space-lg);
  }

  .footer-content.modern-contact {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer-content.modern-contact .footer-info {
    order: -1;
  }

  .footer-content.modern-contact .footer-map {
    order: 2;
  }

  .footer-map .map-embed {
    aspect-ratio: 16 / 9;
  }
}

@media screen and (max-width: 736px) {
  .site-footer .container {
    padding-inline: var(--space-md);
  }

  .footer-content.modern-contact {
    gap: var(--space-lg);
  }

  .contact-actions {
    justify-content: flex-start;
  }

  .contact-actions .button {
    flex: 1 1 100%;
    min-width: 0;
  }

  .site-footer .copyright,
  .copyright {
    flex-direction: column;
    align-items: center;
  }
}

/* ==========================================================
   DESKTOP HEADER — centered logo (absolute centering)
   Surgical layer: desktop-only (min-width: 1025px).
   Logo visually centered regardless of nav width;
   nav stays right-aligned (horizontal). Keeps existing
   glass background + underline-gradient from main.css.
   Does NOT affect mobile (≤1024px hides #header).
   ========================================================== */
@media screen and (min-width: 1025px) {
  body.landing #header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    line-height: 1;
    padding: 0 var(--space-xl);
    column-gap: var(--space-lg);
  }

  /* Fallback for non-landing pages */
  #header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    line-height: 1;
    padding: 0 var(--space-xl);
    column-gap: var(--space-lg);
  }

  /* Logo left — back to original, no centering */
  #header #logo,
  #header h1#logo {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    grid-column: auto;
    justify-self: auto;
    margin: 0;
    z-index: 2;
    height: auto;
    line-height: 0;
    width: auto;
    max-width: none;
  }

  #header #logo a,
  #header h1#logo a {
    display: block;
    line-height: 0;
    border: 0;
    transition: transform var(--fast) var(--ease), filter var(--fast) var(--ease);
  }

  #header #logo a:hover {
    transform: scale(1.03);
    filter: brightness(1.06);
  }

  #header #logo img,
  #header h1#logo img {
    display: block;
    height: 60px;
    width: auto;
    max-height: 60px;
    object-fit: contain;
  }

  /* Nav: right-aligned, flex end */
  #header nav,
  body.landing #header nav {
    position: static;
    grid-column: auto;
    justify-self: auto;
    margin-left: auto;
    height: auto;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
  }

  #header nav ul {
    display: flex;
    gap: 0.2em;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #header nav ul li {
    margin-left: 0;
    display: flex;
    align-items: center;
  }

  #header nav ul li a,
  #header nav ul li span {
    display: inline-flex;
    align-items: center;
    height: auto;
    line-height: 1.2;
    padding: 0.5em 0.9em;
    border-radius: var(--radius-pill);
    transition:
      background var(--fast) var(--ease),
      color var(--fast) var(--ease),
      opacity var(--fast) var(--ease);
    white-space: nowrap;
  }

  /* Keep underline-gradient (from main.css ::after) but soften pill on hover */
  #header nav ul li a:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  #header nav ul li.active a,
  #header nav ul li.active span {
    background: rgba(37, 211, 102, 0.12);
    color: var(--brand);
  }
}

/* Header height compensation for #main */
@media screen and (min-width: 1025px) {
  body.landing #main.wrapper.style1 {
    padding-top: calc(6em + 80px);
  }
}

/* Narrow desktop safeguard (1025–1280): prevent nav/logo overlap */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
  body.landing #header,
  #header {
    padding: 0 var(--space-lg);
    height: 72px;
  }

  body.landing #main.wrapper.style1 {
    padding-top: calc(6em + 72px);
  }

  #header #logo img,
  #header h1#logo img {
    height: 50px;
    max-height: 50px;
  }

  #header nav ul {
    gap: 0.1em;
  }

  #header nav ul li a:not(.button),
  #header nav ul li span:not(.button) {
    font-size: 0.82em;
    padding: 0.45em 0.7em;
    letter-spacing: 0.015em;
  }
}

/* ==========================================================
   9) STATS-BAND FIX — breathing room for cramped text
   #one.stats-band .stats-grid / .stat / .stat-value / .stat-label
   Longer labels ("sistemas probados en tienda, almacen y mas")
   were wrapping tight to border with no internal padding.
   Adds flex centering, padding, equal height, token typography.
   ========================================================== */
.stats-grid {
  gap: var(--space-xl); /* 32px = 2em — keeps rhythm; use --space-lg 24px if denser */
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-lg) var(--space-md); /* 24px 16px — breathing room */
  min-height: 7em; /* equal height */
  box-sizing: border-box;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 2.4em; /* slightly smaller than 2.6 to give air */
  line-height: 1;
  margin-bottom: var(--space-sm); /* 8px */
  letter-spacing: var(--tracking-display);
}

.stat-label {
  font-family: var(--font-ui);
  font-size: var(--fs-sm); /* 14px */
  line-height: var(--lh-normal); /* 1.5 */
  max-width: 14em;
  color: var(--text-muted);
  margin: 0;
}

.stat--text {
  min-height: 6em; /* slightly shorter than 7em since no value */
}

.stat--text .stat-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base); /* 16px, more prominent than muted sm */
  color: var(--text);
  line-height: var(--lh-snug);
  max-width: 12em;
  letter-spacing: var(--tracking-display);
}

/* Optional — hero-card tokenized padding (keeps existing feel) */
.hero-card {
  padding: var(--space-md) var(--space-lg);
}

/* Hero-card as link — preserve card styling when <a> */
a.hero-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

a.hero-card:hover {
  text-decoration: none;
}

a.hero-card strong,
a.hero-card p {
  color: inherit;
}

@media screen and (max-width: 736px) {
  .stats-grid {
    gap: var(--space-md);
  }

  .stat {
    padding: var(--space-md) var(--space-sm);
    min-height: 6em;
  }

  .stat-value {
    font-size: 2em;
  }
}

/* ==========================================================
   PEDIDOS — Solutions visual polish
   Visual-only override for "Problemas que Preorden soluciona"
   (pedidos.php). No text changes — layout/spacing/cards/icons/
   typography aligned to tokens.css. Loaded last, overrides main.css.
   ========================================================== */

/* Section shell — align to 74em grid like other sections */
.solutions-section {
  max-width: 74em;
  margin: 3em auto;
  padding-inline: var(--space-xl);
  box-sizing: border-box;
}

/* Header — centered display type */
.solutions-section .solutions-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.solutions-section .solutions-header h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--text);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  text-align: center;
  margin: 0 0 var(--space-sm);
}

.solutions-section .solutions-sub {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
  max-width: 36em;
  margin: 0 auto var(--space-lg);
  text-align: center;
}

/* Card container — token border/surface/shadow + subtle radial glow */
.solutions-card {
  padding: var(--space-xl);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 300px at 10% 0%, rgba(37, 211, 102, 0.07) 0%, transparent 65%),
    radial-gradient(700px 350px at 90% 20%, rgba(37, 211, 102, 0.05) 0%, transparent 60%),
    var(--surface-elevated);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(6px);
  box-sizing: border-box;
}

/* Grid: 2×2 on desktop (overrides flex column from main.css) */
.solutions-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: 0;
}

/* Item mini-cards — flex row, top-aligned icon */
.solution-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
  transition:
    border-color var(--fast) var(--ease),
    box-shadow var(--base) var(--ease),
    transform var(--base) var(--ease),
    background var(--fast) var(--ease);
  box-sizing: border-box;
}

.solution-item:hover {
  border-color: rgba(37, 211, 102, 0.28);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.06);
}

/* Icon — 72px, brand radial gradient, white icon for contrast */
.solution-icon {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--brand-gradient-radial);
  box-shadow: var(--shadow-sm);
  color: #fff;
}

.solution-icon .smx-icon {
  width: 1.6rem;
  height: 1.6rem;
  min-width: 1.6rem;
  min-height: 1.6rem;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
}

/* Typography — card titles & descriptions */
.solution-content {
  min-width: 0;
  flex: 1;
}

.solution-content h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-xs);
}

.solution-content p {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
  margin: 0;
}

/* Responsive — collapse to single column */
@media screen and (max-width: 980px) {
  .solutions-section {
    padding-inline: var(--space-lg);
    margin: 2em auto;
  }

  .solutions-card {
    padding: var(--space-lg);
  }

  .solutions-list {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .solution-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
  }

  .solution-icon .smx-icon {
    width: 1.45rem;
    height: 1.45rem;
    min-width: 1.45rem;
    min-height: 1.45rem;
  }
}

@media screen and (max-width: 736px) {
  .solutions-section {
    padding-inline: var(--space-md);
  }

  .solutions-card {
    padding: var(--space-md);
    border-radius: var(--radius-md);
  }

  .solutions-section .solutions-header h2 {
    font-size: var(--fs-xl);
  }

  .solution-item {
    padding: var(--space-sm) var(--space-md);
  }
}

/* ==========================================================
   RESPONSIVE FIXES — final audit 2026-09-23
   Checklist breakpoints: 320 / 480 / 736 / 980 / 1024 / 1280 / 1440
   Uses tokens only, overrides via source-order (loaded last).
   No duplicate queries break layout — single append block.
   ========================================================== */

/* --- 0) Generic overflow / image safety --- */
html, body {
  overflow-x: clip;
  max-width: 100vw;
}

*, *::before, *::after {
  min-width: 0;
}

img, picture, video, iframe {
  max-width: 100%;
}

img {
  height: auto;
}

picture {
  display: block;
  max-width: 100%;
}

.system-visual img,
.hero-carousel img,
.map-embed iframe {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  box-sizing: border-box;
}

/* container never exceeds viewport */
.container,
.hero-inner,
.stats-inner,
.system-inner,
.how-inner,
.cta-final-inner,
.pricing-container,
.solutions-section,
.solutions-card {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* touch targets — min 44px */
.button,
.system-cta,
.cta-final-btn,
.hero-wa,
.hero-ghost,
.contact-cta,
.read-more-cta,
.map-open-btn,
#titleBar .toggle,
#titleBar .toggle::before {
  min-height: 44px;
}

/* keep text readable */
body, p, li, .stat-label, .system-desc, .how-sub, .contact-list li {
  overflow-wrap: break-word;
}

/* --- 1) HEADER/NAV — fix 737-1024 page-wrapper padding + ensure no wrap --- */
@media screen and (min-width: 737px) and (max-width: 1024px) {
  #page-wrapper {
    padding-top: 44px !important;
  }
}

@media screen and (min-width: 1025px) {
  #header nav {
    flex-wrap: nowrap;
  }

  #header nav ul {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  #header nav ul li a,
  #header nav ul li span {
    white-space: nowrap;
  }
}

/* hamburger always 40px, visible, centered in 44px bar */
@media screen and (max-width: 1024px) {
  #titleBar {
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  #titleBar .title {
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    line-height: normal !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #titleBar .title .logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    line-height: normal !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #titleBar .title .logo img {
    height: 36px !important;
    width: auto !important;
    display: block !important;
    margin: 0 !important;
    vertical-align: middle !important;
  }

  #titleBar .toggle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #titleBar .toggle::before {
    display: block !important;
    visibility: visible !important;
  }

  #navPanel {
    width: 300px !important;
    max-width: 82vw;
    transform: translateX(-100%);
  }

  body.navPanel-visible #navPanel {
    transform: translateX(0) !important;
  }
}

/* narrow desktop 1025-1280 already has 50px logo / 72px header via earlier rule — reaffirm */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
  #header #logo img,
  #header h1#logo img {
    height: 50px;
  }
}

/* --- 2) HERO — tokens + anti-overflow --- */
.hero-inner {
  flex-wrap: wrap;
  box-sizing: border-box;
}

.hero-copy, .hero-systems {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.hero-card, .hero-idea {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.hero-idea {
  width: 100%;
}

@media screen and (max-width: 980px) {
  #banner.hero-new {
    padding: 7em var(--space-lg) 3.5em var(--space-lg) !important;
    box-sizing: border-box;
  }

  .hero-inner {
    flex-direction: column !important;
    gap: 2.5em !important;
    align-items: center !important;
  }

  .hero-copy, .hero-systems {
    flex: 1 1 auto !important;
    max-width: 34em !important;
    width: 100% !important;
  }
}

@media screen and (max-width: 736px) {
  #banner.hero-new {
    padding: 5.5em var(--space-md) 2.5em var(--space-md) !important;
  }

  .hero-title {
    font-size: 2em !important;
    line-height: 1.15 !important;
    overflow-wrap: break-word;
  }

  .hero-trust {
    flex-direction: column !important;
    gap: 0.6em !important;
    align-items: flex-start !important;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-sm) !important;
  }

  .hero-idea {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-ctas .button,
  .hero-ctas .hero-wa,
  .hero-ctas .hero-ghost {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

@media screen and (max-width: 480px) {
  .hero-title {
    font-size: 1.75em !important;
  }

  .hero-eyebrow {
    font-size: 0.72em !important;
    letter-spacing: 0.18em !important;
  }

  .hero-card {
    padding: var(--space-sm) var(--space-md) !important;
  }

  .hero-idea span {
    font-size: 0.85em !important;
  }
}

@media screen and (max-width: 320px) {
  #banner.hero-new {
    padding: 5em var(--space-sm) 2em var(--space-sm) !important;
  }

  .hero-inner {
    gap: var(--space-lg) !important;
  }
}

/* --- 3) STATS-BAND --- */
.stats-inner {
  max-width: 74em;
  margin-inline: auto;
  padding-inline: var(--space-xl);
  box-sizing: border-box;
}

.stats-grid {
  box-sizing: border-box;
}

.stat {
  min-width: 0;
  overflow-wrap: break-word;
}

@media screen and (max-width: 980px) {
  .stats-inner {
    padding-inline: var(--space-lg);
  }
}

@media screen and (max-width: 736px) {
  .stats-inner {
    padding-inline: var(--space-md);
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-md) !important;
  }

  .stat-value {
    font-size: 2em !important;
  }

  .stats-title {
    font-size: 1.8em !important;
  }
}

@media screen and (max-width: 480px) {
  .stats-grid {
    gap: var(--space-sm) !important;
  }

  .stat {
    padding: var(--space-sm) var(--space-sm) !important;
    min-height: 5.5em !important;
  }

  .stat-value {
    font-size: 1.75em !important;
  }

  .stat-label {
    font-size: var(--fs-xs) !important;
    max-width: 100% !important;
  }
}

/* --- 4) SYSTEM PANELS --- */
.system-panel, .system-inner, .system-copy, .system-visual {
  box-sizing: border-box;
  min-width: 0;
}

.system-visual {
  overflow: hidden;
  max-width: 100%;
}

.system-bullets li {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

@media screen and (max-width: 980px) {
  .system-inner {
    flex-direction: column !important;
    gap: 1.75em !important;
    align-items: center !important;
    padding-inline: var(--space-lg);
  }

  .system-copy, .system-visual {
    flex: 1 1 auto !important;
    max-width: 30em !important;
    width: 100% !important;
  }

  .system-visual {
    width: 100% !important;
  }
}

@media screen and (max-width: 736px) {
  .system-panel {
    padding: 2.5em 0 !important;
  }

  .system-inner {
    padding-inline: var(--space-md) !important;
    gap: var(--space-xl) !important;
  }

  .system-title {
    font-size: 1.5em !important;
  }

  .system-bullets {
    gap: var(--space-sm) !important;
  }

  .system-visual {
    width: 100% !important;
    max-width: 100% !important;
  }

  .system-panel--single .system-bullets {
    grid-template-columns: 1fr !important;
  }
}

@media screen and (max-width: 480px) {
  .system-chip {
    font-size: 0.7em !important;
  }

  .system-title {
    font-size: 1.35em !important;
  }

  .system-desc {
    font-size: 0.92em !important;
  }
}

/* --- 5) PRICING --- */
.pricing-container {
  box-sizing: border-box;
}

.pricing-column {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

@media screen and (max-width: 980px) {
  .pricing-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-lg) !important;
    padding-inline: var(--space-lg) !important;
  }
}

@media screen and (max-width: 736px) {
  .pricing-container {
    grid-template-columns: 1fr !important;
    max-width: 34em !important;
    margin-inline: auto !important;
    padding-inline: var(--space-md) !important;
    gap: var(--space-md) !important;
  }

  .pricing-column {
    width: 100% !important;
  }
}

@media screen and (max-width: 480px) {
  .pricing-container {
    padding-inline: var(--space-sm) !important;
  }

  .pricing-column {
    padding: var(--space-lg) var(--space-md) !important;
  }
}

/* --- 6) SOLUTIONS (pedidos) --- */
.solutions-section, .solutions-card, .solutions-list, .solution-item {
  box-sizing: border-box;
  min-width: 0;
}

.solution-item {
  overflow-wrap: break-word;
}

.solution-content {
  min-width: 0;
  overflow-wrap: break-word;
}

@media screen and (max-width: 980px) {
  .solutions-section {
    padding-inline: var(--space-lg) !important;
  }

  .solutions-list {
    grid-template-columns: 1fr !important;
    gap: var(--space-md) !important;
  }

  .solution-icon {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
  }
}

@media screen and (max-width: 736px) {
  .solutions-section {
    padding-inline: var(--space-md) !important;
  }

  .solutions-card {
    padding: var(--space-md) !important;
  }

  .solution-item {
    padding: var(--space-sm) var(--space-md) !important;
    gap: var(--space-sm) !important;
  }

  .solutions-section .solutions-header h2 {
    font-size: var(--fs-xl) !important;
  }
}

@media screen and (max-width: 480px) {
  .solution-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }

  .solution-content h3 {
    font-size: var(--fs-base) !important;
  }

  .solution-content p {
    font-size: var(--fs-xs) !important;
  }
}

/* --- 7) HOW-WE-WORK --- */
.process-grid, .process-step {
  box-sizing: border-box;
  min-width: 0;
}

@media screen and (max-width: 980px) {
  .how-inner {
    padding-inline: var(--space-lg);
  }

  .process-grid {
    grid-template-columns: 1fr !important;
    max-width: 34em !important;
    margin-inline: auto !important;
    gap: var(--space-md) !important;
  }
}

@media screen and (max-width: 736px) {
  .how-inner {
    padding-inline: var(--space-md);
  }

  .how-we-work {
    padding: 2.75em 0 2em 0 !important;
  }

  .how-title {
    font-size: 1.7em !important;
  }
}

@media screen and (max-width: 480px) {
  .process-step {
    padding: var(--space-md) !important;
  }

  .process-icon {
    width: 2.75em !important;
    height: 2.75em !important;
  }
}

/* --- 8) CTA FINAL --- */
.cta-final-inner {
  box-sizing: border-box;
  min-width: 0;
  overflow-wrap: break-word;
}

@media screen and (max-width: 736px) {
  #five.cta-final {
    padding: 2.5em var(--space-md) !important;
  }

  .cta-final-inner {
    padding: 2.5em var(--space-md) !important;
  }

  .cta-final-inner h2 {
    font-size: 1.6em !important;
  }
}

@media screen and (max-width: 480px) {
  #five.cta-final {
    padding: 2em var(--space-sm) !important;
  }

  .cta-final-inner {
    padding: 2em var(--space-sm) !important;
  }

  .cta-final-inner h2 {
    font-size: 1.4em !important;
  }

  .cta-final-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding-inline: var(--space-md) !important;
  }
}

/* --- 9) FOOTER --- */
.site-footer, .footer-content.modern-contact, .footer-map, .footer-info {
  box-sizing: border-box;
  min-width: 0;
}

@media screen and (max-width: 980px) {
  .site-footer .container {
    padding-inline: var(--space-lg) !important;
  }

  .footer-content.modern-contact {
    grid-template-columns: 1fr !important;
    gap: var(--space-xl) !important;
  }

  .footer-content.modern-contact .footer-info {
    order: -1 !important;
  }

  .footer-content.modern-contact .footer-map {
    order: 2 !important;
  }

  .footer-map .map-embed {
    aspect-ratio: 16 / 9 !important;
  }
}

@media screen and (max-width: 736px) {
  .site-footer .container {
    padding-inline: var(--space-md) !important;
  }

  .footer-content.modern-contact {
    gap: var(--space-md) !important;
    padding: var(--space-md) !important;
  }

  .contact-actions {
    flex-direction: column;
  }

  .contact-actions .button {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .site-footer .copyright,
  .copyright {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: var(--space-xs) !important;
  }
}

@media screen and (max-width: 480px) {
  .footer-content.modern-contact {
    padding: var(--space-sm) !important;
  }

  .map-open-btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- 10) Extra safety for 320px ultra-narrow --- */
@media screen and (max-width: 320px) {
  .container,
  .hero-inner,
  .stats-inner,
  .system-inner,
  .how-inner,
  .pricing-container,
  .solutions-section {
    padding-inline: var(--space-sm) !important;
  }

  .system-title, .how-title, .stats-title {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* --- 11) 1440px+ wide viewport — keep 74em cap, no stretch --- */
@media screen and (min-width: 1440px) {
  .container,
  .hero-inner,
  .stats-inner,
  .system-inner,
  .how-inner,
  .site-footer .container,
  .pricing-container,
  .solutions-section {
    max-width: 74em !important;
  }
}

/* ==========================================================
   ICON CONTRAST FIX — green-on-green audit (2026-09-23)
   Fixes .brand-stroke (#25D366) invisible on green chip
   background var(--brand) #25D366. Shelf lines for
   icon-almacen and similar green accents now render as
   var(--brand-bg) #0D3B21 dark on green = visible.
   Audit summary:
   - Chip green (#25D366) + icon dark outer + green accent
     → FIXED: green → dark (#0D3B21)
   - Hero card dark (#232430) + white outer + green accent
     → KEEP green (visible on dark, no change)
   - System panel dark (#14151c / #31333e) + white outer
     + green accent → KEEP green (white outer saves contrast;
     #31333e + #25D366 is 2.5:1 low but accent-only, ok)
   - Process circle green gradient + white icon → already white
   - Solution icon green gradient + white icon → ok
   - Footer contact on dark → white + green visible
   Applies ONLY to green chips; dark contexts keep brand green.
   ========================================================== */
.system-chip .brand-stroke,
.hero-pill .brand-stroke,
.system-img-chip .brand-stroke,
.system-chip .smx-icon .brand-stroke,
.hero-pill .smx-icon .brand-stroke,
.system-img-chip .smx-icon .brand-stroke {
  stroke: #25D366 !important;
}

/* Circle fill #25D366 inside blue chip → keep green */
.system-chip circle[fill="#25D366"],
.hero-pill circle[fill="#25D366"],
.system-img-chip circle[fill="#25D366"],
.system-chip circle[fill='#25D366'],
.hero-pill circle[fill='#25D366'],
.system-img-chip circle[fill='#25D366'] {
  fill: #25D366 !important;
}
.system-chip .brand-fill,
.hero-pill .brand-fill,
.system-img-chip .brand-fill {
  fill: #25D366 !important;
}

/* Ensure chip icons stay dark (outer square) on green bg */
.system-chip .smx-icon,
.hero-pill .smx-icon,
.system-img-chip .smx-icon {
  color: var(--brand-bg) !important;
}

/* ==========================================================
   PEDIDOS — How steps visual polish
   Card-like steps (3) with brand tokens, better hierarchy,
   breathing room, and pill/code-style link.
   Visual-only override for pedidos.php .howitworks-section.
   No text/HTML changes — loads last, overrides main.css.
   Tokens: Space Grotesk/DM Sans, --surface-elevated, --line,
   --radius-lg/pill, --shadow-md/lg, --brand-gradient-radial.
   ========================================================== */

/* Section shell — 74em grid alignment like pricing/solutions */
.howitworks-section {
  max-width: 74em;
  margin: 3em auto;
  padding-inline: var(--space-xl);
  box-sizing: border-box;
}

/* Grid — override flex .row (Landed) with 3-col card grid */
.howitworks-section .how-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: stretch;
  justify-content: initial;
  margin-left: 0 !important;
  margin-top: 0 !important;
}

.howitworks-section .how-grid > * {
  padding: 0 !important;
  margin-left: 0 !important;
}

/* Step card — elevated surface, token border/shadow/radius */
.howitworks-section .how-step {
  background: var(--surface-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--base) var(--ease),
    box-shadow var(--base) var(--ease),
    border-color var(--fast) var(--ease);
  min-height: 14em;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
}

.howitworks-section .how-step:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 211, 102, 0.28);
  box-shadow: var(--shadow-glow), var(--shadow-lg);
}

/* Icon — 88px clean, no green bg, subtle surface + border */
.howitworks-section .how-icon {
  width: 88px;
  height: 88px;
  min-width: 88px;
  min-height: 88px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  box-shadow: none;
  color: #fff;
  margin-bottom: var(--space-sm);
}

.howitworks-section .how-icon .smx-icon {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  color: #fff;
  filter: none;
}

/* Green accents inside the step arrows stay brand green on dark */
.howitworks-section .how-icon .brand-stroke {
  stroke: #25D366 !important;
}
.howitworks-section .how-icon .brand-fill {
  fill: #25D366 !important;
}

/* Ensure legacy <i> icons also render if ever used */
.howitworks-section .how-icon i {
  font-size: 2rem;
  color: #fff;
  filter: none;
}

/* Title — display type, tight hierarchy */
.howitworks-section .how-step .how-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text);
  margin: var(--space-sm) 0 var(--space-xs);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  text-align: center;
  max-width: 100%;
}

/* Description — muted UI, constrained line-length */
.howitworks-section .how-step .how-desc {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
  max-width: 20em;
  margin: 0 auto;
  text-align: center;
  opacity: 1;
}

.howitworks-section .how-step .how-desc.how-link {
  margin-top: var(--space-sm);
  max-width: 100%;
}

/* Link — pill/code hybrid: mono pill with translucent blue */
.howitworks-section .how-step .how-desc.how-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: var(--radius-pill);
  padding: 0.4em 0.9em;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--brand-blue-light);
  text-decoration: none;
  word-break: break-all;
  overflow-wrap: break-word;
  line-height: 1.4;
  transition:
    background var(--fast) var(--ease),
    border-color var(--fast) var(--ease),
    color var(--fast) var(--ease);
  border-bottom-width: 1px;
  max-width: 100%;
  box-sizing: border-box;
}

.howitworks-section .how-step .how-desc.how-link a:hover {
  background: rgba(37, 99, 235, 0.18);
  border-color: rgba(37, 99, 235, 0.28);
  color: #fff;
  text-decoration: none;
  border-bottom-color: rgba(37, 99, 235, 0.28);
}

.howitworks-section .how-step .how-desc.how-link a:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

/* Responsive — collapse to single column on tablet */
@media screen and (max-width: 980px) {
  .howitworks-section {
    padding-inline: var(--space-lg);
    margin: 2em auto;
  }

  .howitworks-section .how-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    max-width: 34em;
    margin-inline: auto;
  }

  .howitworks-section .how-step {
    min-height: 0;
  }
}

@media screen and (max-width: 736px) {
  .howitworks-section {
    padding-inline: var(--space-md);
  }

  .howitworks-section .how-step {
    padding: var(--space-lg) var(--space-md);
  }

  .howitworks-section .how-icon {
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
  }

  .howitworks-section .how-icon .smx-icon {
    width: 1.8rem;
    height: 1.8rem;
    min-width: 1.8rem;
    min-height: 1.8rem;
  }

  .howitworks-section .how-step .how-title {
    font-size: var(--fs-base);
  }
}

@media screen and (max-width: 480px) {
  .howitworks-section .how-step .how-desc.how-link a {
    font-size: 0.7rem;
    padding: 0.35em 0.75em;
  }
}