/* Pasos / metodología */
.me-pasos__list {
  display: grid; gap: var(--me-space-gap);
  margin: 0; padding: 0; list-style: none;
  counter-reset: none;
}
.me-pasos__item {
  position: relative;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border-radius: var(--me-radius);
  background: var(--me-color-blanco);
  border: 1px solid var(--me-color-border);
}
.me-section--gris .me-pasos__item, .me-section--celeste .me-pasos__item, :is(.me-section--celeste-cta, :is(.me-section--verde-cta, .me-section--rojo-cta)) .me-pasos__item { border-color: transparent; }
:is(.me-section--celeste-cta, :is(.me-section--verde-cta, .me-section--rojo-cta)) .me-pasos__nota { color: var(--me-color-blanco); }
:is(.me-section--celeste-cta, :is(.me-section--verde-cta, .me-section--rojo-cta)) .me-pasos__item:not(:last-child)::after { border-color: rgba(255, 255, 255, .8); }   /* flechas entre pasos */
.me-pasos__list > .me-pasos__item { border-top: 6px solid var(--me-acc, var(--me-color-cta)); } /* gana al border-color transparente de las secciones grises */
.me-pasos__num {
  display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; margin-bottom: 1.25rem; padding: 0 .5rem;
  border-radius: var(--me-radius-sm); background: var(--me-acc-suave, var(--me-color-bg-alt));
  font-family: var(--me-font-body); font-weight: var(--me-fw-bold); font-size: 1rem; line-height: 1;
  color: var(--me-acc-tinta, var(--me-color-text));
}
.me-pasos__icon {
  position: absolute; top: clamp(1.5rem, 2.5vw, 2rem); right: clamp(1.5rem, 2.5vw, 2rem);
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: var(--me-radius-sm); background: var(--me-acc-suave, var(--me-color-bg-alt)); color: var(--me-acc-tinta, var(--me-color-negro));
}
.me-pasos__icon svg { width: 1.3rem; height: 1.3rem; }
.me-pasos__title { margin: 0 0 .5rem; font-size: var(--me-fs-h3); }
.me-pasos__text { margin: 0; color: var(--me-color-muted); font-size: .9375rem; }
.me-pasos__nota { max-width: 70ch; margin-top: var(--me-space-block); font-size: var(--me-fs-lead); color: var(--me-color-muted); }
.me-pasos__cta { margin-top: 2rem; }

@media (min-width: 768px) { .me-pasos__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) {
  .me-pasos__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Flecha entre pasos: Diagnóstico → Diseño → Implementación → Acompañamiento */
  .me-pasos__item:not(:last-child)::after {
    content: ""; position: absolute; top: 2.9rem; right: calc(-1 * var(--me-space-gap) / 2 - .35rem); z-index: 1;
    width: .7rem; height: .7rem;
    border-top: 2px solid var(--me-color-border-strong); border-right: 2px solid var(--me-color-border-strong);
    transform: rotate(45deg);
  }
}

/* Sobre fondo negro (como el "Ciclo SEM" de la referencia): tarjetas oscuras y el número en
   un círculo del color, con texto negro. */
.me-section--negro .me-pasos__item { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }
.me-section--negro .me-pasos__num { border-radius: 50%; background: var(--me-acc); color: var(--me-color-negro); }
.me-section--negro .me-pasos__icon { background: rgba(255, 255, 255, .08); color: var(--me-acc); }
.me-section--negro .me-pasos__title { color: var(--me-color-blanco); }
.me-section--negro .me-pasos__text, .me-section--negro .me-pasos__nota { color: rgba(255, 255, 255, .72); }
.me-section--negro .me-pasos__item:not(:last-child)::after { border-color: rgba(255, 255, 255, .3); }

/* Manchas de puntos (opciones de Decoración, 7-oct): las mismas dos del widget de tarjetas
   (tarjetas.css), con la misma animación y forma. */
.me-pasos__wrap { position: relative; }
.me-pasos--puntos { overflow: hidden; }
.me-pasos--puntos .me-pasos__list { position: relative; z-index: 1; }
.me-pasos--puntos .me-pasos__nota, .me-pasos--puntos .me-pasos__cta { position: relative; z-index: 1; }
.me-pasos__puntos {
  position: absolute; z-index: 0; pointer-events: none;
  inset: -50px -150px calc(-1 * var(--me-space-section) + 8px);
}
.me-pasos__puntos .me-puntos {
  display: block; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 46% 42% at 48% 50%, black 64%, transparent 100%), radial-gradient(ellipse 24% 24% at 76% 34%, black 50%, transparent 100%), radial-gradient(ellipse 26% 20% at 30% 80%, black 50%, transparent 100%), radial-gradient(ellipse 20% 18% at 22% 22%, black 45%, transparent 100%), radial-gradient(ellipse 22% 16% at 68% 84%, black 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 42% at 48% 50%, black 64%, transparent 100%), radial-gradient(ellipse 24% 24% at 76% 34%, black 50%, transparent 100%), radial-gradient(ellipse 26% 20% at 30% 80%, black 50%, transparent 100%), radial-gradient(ellipse 20% 18% at 22% 22%, black 45%, transparent 100%), radial-gradient(ellipse 22% 16% at 68% 84%, black 45%, transparent 100%);
}
@media (max-width: 767px) { .me-pasos__puntos { inset: -40px -40px calc(-1 * var(--me-space-section) + 8px); } }

.me-pasos--mancha-arriba { position: relative; overflow-x: clip; overflow-y: visible; }
.me-pasos--mancha-arriba > .me-container { position: relative; z-index: 1; }
.me-pasos__mancha-arriba { display: none; }
@media (min-width: 768px) {
  .me-pasos__mancha-arriba {
    display: block; position: absolute; z-index: 0; pointer-events: none;
    top: -40px; height: calc(var(--me-space-section) + 3.5rem + 40px); width: min(46%, 640px);
  }
  .me-pasos__mancha-arriba--derecha { right: 2%; }
  .me-pasos__mancha-arriba--izquierda { left: 2%; transform: scaleX(-1); }
  .me-pasos__mancha-arriba .me-puntos {
    display: block; width: 100%; height: 100%;
    -webkit-mask-image: radial-gradient(ellipse 30% 28% at 42% 46%, black 55%, transparent 100%), radial-gradient(ellipse 22% 27% at 68% 58%, black 50%, transparent 100%), radial-gradient(ellipse 16% 20% at 85% 32%, black 45%, transparent 100%), radial-gradient(ellipse 15% 21% at 18% 64%, black 42%, transparent 100%), radial-gradient(ellipse 13% 15% at 54% 80%, black 40%, transparent 100%), radial-gradient(ellipse 11% 13% at 28% 24%, black 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 30% 28% at 42% 46%, black 55%, transparent 100%), radial-gradient(ellipse 22% 27% at 68% 58%, black 50%, transparent 100%), radial-gradient(ellipse 16% 20% at 85% 32%, black 45%, transparent 100%), radial-gradient(ellipse 15% 21% at 18% 64%, black 42%, transparent 100%), radial-gradient(ellipse 13% 15% at 54% 80%, black 40%, transparent 100%), radial-gradient(ellipse 11% 13% at 28% 24%, black 35%, transparent 100%);
  }
}

/* Tarjetas con fondo en los colores del logo (opción "Tarjetas con fondo en los colores del logo",
   19-oct, pedido del equipo): toda la tarjeta en su color, en el orden rojo, naranjo, verde y
   amarillo (el rojo reemplaza al celeste, que se perdía sobre el fondo celeste). Texto en negro:
   el blanco no da contraste sobre estos colores. El manual reserva estos colores para el logo:
   validar con el cliente. */
.me-pasos--color .me-pasos__list > :nth-child(4n+1) { --me-paso-bg: var(--me-logo-rojo); }
.me-pasos--color .me-pasos__list > :nth-child(4n+2) { --me-paso-bg: var(--me-logo-naranjo); }
.me-pasos--color .me-pasos__list > :nth-child(4n+3) { --me-paso-bg: var(--me-logo-verde); }
.me-pasos--color .me-pasos__list > :nth-child(4n+4) { --me-paso-bg: var(--me-logo-amarillo); }
.me-pasos--color .me-pasos__list > .me-pasos__item { background: var(--me-paso-bg, var(--me-color-blanco)); border: 0; color: var(--me-color-negro); }
.me-pasos--color :is(.me-pasos__num, .me-pasos__icon) { background: rgb(255 255 255 / .45); color: var(--me-color-negro); }
/* Negro translúcido, como en las tarjetas de colores (29-oct); los iconos siguen en negro. */
.me-pasos--color :is(.me-pasos__title, .me-pasos__num) { color: rgb(0 0 0 / .78); }
.me-pasos--color .me-pasos__text { color: rgb(0 0 0 / .7); }