/* CRM personal: solo componentes de crm.html (prefijo crm-). */
.crm-page #top::after, .crm-page #contacto::before { content: none; }

/* Hero: ventana de CRM dibujada */
.crm-visual { max-width: 560px; }
.crm-art { width: 100%; height: auto; overflow: visible; }
.crm-art__w { fill: var(--ink-900); stroke: var(--line-dark-strong); }
.crm-art__sep { fill: none; stroke: var(--line-dark); }
.crm-art__d { fill: var(--line-dark-strong); }
.crm-art__l { fill: var(--line-dark-strong); }
.crm-art__p { fill: var(--line-dark-strong); }
.crm-art__p--g { fill: var(--gold-400); }
.crm-art__c rect:first-child { fill: var(--ink-800); stroke: var(--line-dark); }
.crm-art__hot rect:first-child { fill: var(--gold-wash); stroke: var(--gold-400); }
.crm-art__hot .crm-art__l { fill: var(--gold-400); }
.crm-art__win, .crm-art__c { transform-box: fill-box; }
.crm-art .ico { color: var(--gold-400); }
.crm-art .ico use { vector-effect: non-scaling-stroke; }
html.js .crm-art__win { opacity: 0; }
html.js .crm-art__c { opacity: 0; }
html.js.is-ready .crm-art__win { opacity: 1; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
html.js.is-ready .crm-art__c { opacity: 1; transition: opacity .6s var(--ease-out) calc(200ms + var(--n) * 40ms); }
html.js.is-ready .crm-art__hot { transform: translateX(102px); transition: opacity .6s var(--ease-out) calc(200ms + var(--n) * 40ms), transform .6s var(--ease-in-out) 1.1s; }
@media (prefers-reduced-motion: no-preference) {
  html.js .crm-art__win { transform: translateY(16px); }
  html.js.is-ready .crm-art__win { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .crm-art__win, html.js .crm-art__c { opacity: 1; }
  html.js.is-ready .crm-art__win, html.js.is-ready .crm-art__c, html.js.is-ready .crm-art__hot { transition: none; }
}

/* Necesidades: 4 columnas */
.crm-needs .cell .t-small { margin-top: 8px; }
@media (min-width: 1024px) {
  .crm-needs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .crm-needs .cell { border-left: 1px solid var(--line); }
  .crm-needs .cell:first-child { border-left: 0; }
}

/* Paquetes */
.crm-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-items: stretch; }
.crm-plan { position: relative; display: flex; }
.crm-plan .bezel__core { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 28px 24px 24px; }
.crm-plan .t-small { margin-top: -4px; }
.crm-plan--hl { border-color: var(--gold-400); }
.crm-plan__tag {
  position: absolute; top: -12px; left: 20px; z-index: 1; max-width: calc(100% - 40px);
  padding: 4px 12px; border-radius: var(--r-pill); background: var(--gold-400); color: var(--ink-950);
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; line-height: 1.4; letter-spacing: .02em;
}
.crm-plan__list { display: grid; gap: 10px; margin-top: 4px; }
.crm-plan__list li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; line-height: 1.45; }
.crm-plan__list .ico { width: 18px; height: 18px; margin-top: 2px; }
.crm-plan__foot {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2);
}
.crm-plan__list + .crm-plan__foot { margin-top: auto; }
.crm-plan__list { margin-bottom: 12px; }
.crm-note { margin-top: var(--s-4); }
@media (min-width: 1024px) {
  .crm-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
}
@media (hover: hover) and (pointer: fine) {
  .crm-plan:not(.crm-plan--hl):hover { border-color: var(--line-strong); }
  .crm-plan { transition: border-color .16s ease; }
}

/* Guía: cuatro pasos */
.crm-guide { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.crm-guide::before {
  content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 1px; background: var(--gold-700);
  transform-origin: top; transform: none;
}
.crm-step { position: relative; display: grid; align-content: start; gap: 8px; padding-left: 64px; }
.crm-step__node {
  position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--ivory-100); border: 1px solid var(--gold-700);
}
.crm-step .num { font-size: .8125rem; letter-spacing: .06em; line-height: 40px; margin-top: -8px; }
.crm-step__rows { display: grid; gap: 12px; margin: 8px 0 0; }
.crm-step__rows dt { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.crm-step__rows dd { margin: 2px 0 0; font-size: .9375rem; line-height: 1.5; color: var(--fg); }
html.js:not(.is-fallback) .crm-guide::before { transform: scaleY(0); }
html.js:not(.is-fallback) .crm-guide.is-in::before { transform: none; transition: transform .9s var(--ease-in-out); }
@media (min-width: 1024px) {
  .crm-guide { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
  .crm-guide::before { left: 0; right: 0; top: 20px; bottom: auto; width: auto; height: 1px; transform-origin: left; }
  .crm-step { padding: 64px 0 0; }
  .crm-step .num { line-height: 1.4; margin-top: 0; }
  html.js:not(.is-fallback) .crm-guide::before { transform: scaleX(0); }
  html.js:not(.is-fallback) .crm-guide.is-in::before { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .crm-guide::before, html.js .crm-guide.is-in::before { transform: none; transition: none; }
}

/* Contacto centrado */
.crm-cta .wrap > div { max-width: 720px; margin-inline: auto; text-align: center; }
.crm-cta .wrap > div > * + * { margin-top: var(--s-3); }
.crm-cta p { margin-inline: auto; }
.crm-cta__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3); padding-top: var(--s-1); }