/* Página comercial: amplía los tokens y componentes compartidos. */
.marketing-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); }
.marketing-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; color: var(--color-muted); text-decoration: none; }
.marketing-nav a:hover { color: var(--color-link); text-decoration: underline; }
.marketing-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding: 4.5rem 0 5rem; }
.marketing-hero h1 { max-width: 14ch; font-size: clamp(2.5rem, 4.8vw, 4.25rem); line-height: 1.08; letter-spacing: -.035em; margin-bottom: 1.5rem; }
.marketing-lead { font-size: 1.15rem; color: var(--color-muted); line-height: 1.65; max-width: 47ch; margin-bottom: 1.75rem; }
.marketing-caption { font-size: .875rem; color: var(--color-muted); line-height: 1.6; }
.marketing-hero-copy > .marketing-caption { margin: 1.1rem 0 0; max-width: 53ch; }
.campaign-example { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.75rem; }
.campaign-example-top { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.75rem; }
.marketing-example-label { font-size: .875rem; color: var(--color-muted); }
.campaign-example h2 { font-size: 1.65rem; margin-bottom: .6rem; }
.campaign-example > p { color: var(--color-muted); }
.example-facts { margin: 1.5rem 0; }
.example-facts > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--color-border); }
.example-facts dt { color: var(--color-muted); font-size: .9rem; }
.example-facts dd { margin: 0; font-size: .9rem; font-weight: 600; }
.example-outcome { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.example-outcome svg { flex: 0 0 24px; margin-top: .2rem; color: var(--color-link); }
.example-outcome p { font-size: .95rem; margin: 0; }
.campaign-example > .marketing-caption { margin: 0; }
.marketing-section { padding: 4rem 0; border-top: 1px solid var(--color-border); scroll-margin-top: 1.5rem; }
.marketing-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4rem; align-items: start; margin-bottom: 2.5rem; }
.marketing-section h2 { font-size: clamp(1.7rem, 2.7vw, 2.4rem); max-width: 25ch; }
.marketing-section-heading > p { color: var(--color-muted); margin: 0; }
.marketing-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.marketing-steps > li { min-width: 0; }
.step-index { display: inline-flex; align-items: center; justify-content: center; background: var(--color-selected-bg); color: var(--color-selected-text); width: 2rem; height: 2rem; border-radius: 999px; margin-bottom: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.marketing-steps h3 { font-size: 1.15rem; margin-bottom: .75rem; }
.marketing-steps p { color: var(--color-muted); }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4rem; }
.feature-grid article { padding: 1.5rem 0; border-bottom: 1px solid var(--color-border); }
.feature-grid article:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
.feature-grid h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.feature-grid p { color: var(--color-muted); margin: 0; max-width: 52ch; }
.use-case-list { margin: 0; }
.use-case-list > div { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); column-gap: 4rem; padding: 1.3rem 0; border-top: 1px solid var(--color-border); }
.use-case-list dt { font-weight: 650; font-size: 1.1rem; }
.use-case-list dd { color: var(--color-muted); margin: 0; max-width: 58ch; }
.commercial-section { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2.75rem; margin: 1.5rem 0 4rem; }
.commercial-section h2 { max-width: 18ch; }
.commercial-section p { color: var(--color-muted); }
.commercial-action { border-left: 1px solid var(--color-border); padding-left: 2.5rem; align-self: center; }
.commercial-action h3 { font-size: 1.65rem; }
.commercial-action .marketing-caption { margin: 1rem 0 0; }
.faq-section { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: 4rem; }
.faq-section .marketing-section-heading { display: block; }
.faq-list { min-width: 0; }
.faq-list details:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.faq-list summary { padding-block: .35rem; }
.faq-list summary::marker { color: var(--color-link); }
.faq-list details p { color: var(--color-muted); padding-top: .5rem; margin-bottom: 0; }
.closing-section { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-bottom: 1rem; }
.closing-section h2 { max-width: 26ch; }
.closing-section p { margin: 0; color: var(--color-muted); }
.marketing-request { max-width: 1040px; margin: 1rem auto 0; }
.request-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; align-items: start; }
.request-intro h1 { font-size: clamp(2rem, 3.6vw, 3rem); max-width: 16ch; }
.request-intro > p { color: var(--color-muted); }
.request-expectations { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.request-expectations h2 { font-size: 1.1rem; }
.request-expectations ul { padding-left: 1.2rem; color: var(--color-muted); }
.request-expectations li { margin-bottom: .75rem; }
.request-form > .marketing-caption { margin-bottom: 1.5rem; }
.request-form .actions { margin-top: 1.5rem; }
.request-saved { max-width: 700px; margin: 2rem auto; }
.request-saved h1 { margin-bottom: 1.25rem; }
.request-saved .actions { margin-top: 2rem; }
.marketing-page .header-nav a:not(.button), .marketing-page .site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.marketing-page .brand { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .marketing-hero { gap: 2rem; }
  .marketing-hero .actions { align-items: stretch; flex-direction: column; }
  .marketing-section-heading, .marketing-steps, .feature-grid, .use-case-list > div, .commercial-section, .faq-section, .request-layout { column-gap: 2rem; }
  .campaign-example { padding: 1.25rem; }
  .commercial-section { padding: 2rem; }
  .commercial-action { padding-left: 2rem; }
}
@media (max-width: 760px) {
  .marketing-nav { gap: .25rem 1.25rem; padding-bottom: 1rem; }
  .marketing-nav a { font-size: .875rem; }
  .marketing-hero { grid-template-columns: minmax(0, 1fr); padding: 2.5rem 0 3rem; }
  .marketing-hero h1 { max-width: 16ch; }
  .marketing-hero .actions { flex-direction: row; }
  .marketing-section { padding: 2.75rem 0; }
  .marketing-section-heading { grid-template-columns: minmax(0, 1fr); gap: .5rem; margin-bottom: 1.75rem; }
  .marketing-steps { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .marketing-steps > li { display: flex; align-items: flex-start; gap: 1rem; }
  .step-index { flex: 0 0 2rem; margin: 0; }
  .marketing-steps p { margin: 0; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-grid article:nth-last-child(2) { border-bottom: 1px solid var(--color-border); padding-bottom: 1.5rem; }
  .use-case-list > div { grid-template-columns: minmax(0, 1fr); row-gap: .5rem; }
  .commercial-section { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin: 0 0 2.75rem; padding: 1.5rem; }
  .commercial-action { border-left: 0; border-top: 1px solid var(--color-border); padding: 1.5rem 0 0; }
  .commercial-action .button { width: 100%; }
  .faq-section, .request-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .faq-section .marketing-section-heading { margin-bottom: 0; }
  .closing-section { align-items: stretch; flex-direction: column; gap: 1.25rem; }
  .request-intro h1 { max-width: 22ch; }
  .request-expectations { margin-top: 1.25rem; }
  .request-form.panel { padding: 1.25rem; }
}
@media (max-width: 380px) {
  .marketing-hero .actions { flex-direction: column; align-items: stretch; }
  .marketing-hero h1 { font-size: 2.45rem; }
  .example-facts > div { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .marketing-nav { column-gap: 1rem; }
}