/* ==========================================================================
   Renddi · Página Método
   Diagrama de fases (rd-method-map) · Qué hacemos y qué no (rd-contrast)
   Proveedores (rd-providers) · Ámbitos (rd-scopes)
   Requiere: tokens.css, base.css, hero.css, signals.css, home.css, service.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Diagrama del hero: el mosaico pasa del desorden al rendimiento
   -------------------------------------------------------------------------- */
.rd-method-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
}

.rd-method-map__phase {
  position: relative;
}

/* Flecha de píxeles entre fases */
.rd-method-map__phase + .rd-method-map__phase::before {
  content: "";
  position: absolute;
  top: calc(50% - 1.25rem);
  left: calc(-1 * clamp(1rem, 3vw, 2.5rem) / 2 - 3px);
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background-color: var(--rd-text-muted-on-dark);
  box-shadow: 0 -8px 0 rgba(184, 199, 201, 0.4), 0 8px 0 rgba(184, 199, 201, 0.4);
  opacity: 0.7;
}

.rd-method-map__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(3px, 0.5vw, 6px);
}

.rd-method-map__px {
  aspect-ratio: 1;
  border-radius: var(--rd-radius-pixel);
  background-color: var(--c);
  animation: rd-map-on 500ms var(--rd-ease-out) calc(var(--i) * 45ms) both;
}

.rd-method-map__px--off {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(184, 199, 201, 0.35);
}

.rd-method-map__px--gap {
  visibility: hidden;
  animation: none;
}

.rd-method-map__label {
  display: flex;
  align-items: center;
  gap: var(--rd-space-2);
  margin-top: var(--rd-space-4);
  color: var(--rd-text);
  font-size: var(--rd-text-s);
  font-weight: var(--rd-weight-bold);
}

.rd-method-map__label span {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.5rem;
  aspect-ratio: 1;
  border-radius: var(--rd-radius-s);
  background-color: var(--rd-burnt-orange);
  color: var(--rd-black-pearl);
  font-size: var(--rd-text-xs);
  font-weight: var(--rd-weight-black);
}

@keyframes rd-map-on {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (min-width: 60rem) {
  .rd-method-map {
    margin-inline: auto 0;
  }
}

/* --------------------------------------------------------------------------
   2. Qué hacemos y qué no
   -------------------------------------------------------------------------- */
.rd-contrast {
  padding-top: 0;
}

.rd-contrast__grid {
  display: grid;
  gap: var(--rd-space-4);
}

@media (min-width: 48rem) {
  .rd-contrast__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rd-space-5);
  }
}

.rd-contrast__col {
  padding: var(--rd-space-6) var(--rd-space-5);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-m);
}

.rd-contrast__col--no {
  background-color: transparent;
}

.rd-contrast__col--yes {
  background-color: var(--rd-surface);
  border-color: rgba(254, 126, 60, 0.45);
}

.rd-contrast__title {
  margin-bottom: var(--rd-space-5);
  font-size: var(--rd-text-l);
}

.rd-contrast__list {
  display: grid;
  gap: var(--rd-space-4);
}

.rd-contrast__list li {
  position: relative;
  padding-left: var(--rd-space-6);
  color: var(--rd-text-muted-on-dark);
}

/* Marca: aspa apagada en "no", píxel naranja en "sí" */
.rd-contrast__list li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
}

.rd-contrast__col--no li::before {
  box-shadow: inset 0 0 0 1.5px rgba(184, 199, 201, 0.5);
}

.rd-contrast__col--yes li::before {
  background-color: var(--rd-burnt-orange);
}

.rd-contrast__col--yes li {
  color: var(--rd-text);
}

/* --------------------------------------------------------------------------
   3. Fases: enlace a cada servicio
   -------------------------------------------------------------------------- */
.rd-phases__link {
  display: inline-flex;
  align-items: center;
  gap: var(--rd-space-2);
  min-height: 2.75rem;
  margin-top: var(--rd-space-2);
  color: var(--rd-text);
  font-size: var(--rd-text-s);
  font-weight: var(--rd-weight-bold);
  text-decoration: none;
}

.rd-phases__link::after {
  content: "→";
  color: var(--rd-burnt-orange);
  transition: transform var(--rd-duration-base) var(--rd-ease-out);
}

.rd-phases__link:hover::after {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   4. Cómo elegimos proveedores
   -------------------------------------------------------------------------- */
.rd-providers__inner {
  display: grid;
  gap: var(--rd-space-7);
}

@media (min-width: 60rem) {
  .rd-providers__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--rd-space-9);
    align-items: start;
  }
}

/* Pasos apilados en una columna */
.rd-steps--stack,
.rd-steps.rd-steps--stack {
  grid-template-columns: 1fr;
  gap: var(--rd-space-5);
}

/* --------------------------------------------------------------------------
   5. Ámbitos que revisamos
   -------------------------------------------------------------------------- */
.rd-scopes {
  padding-top: 0;
}

.rd-scopes__list {
  display: grid;
  gap: var(--rd-space-4);
}

@media (min-width: 40rem) {
  .rd-scopes__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .rd-scopes__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rd-scopes__item {
  padding: var(--rd-space-5);
  background-color: var(--rd-surface);
  border: 1px solid var(--rd-border);
  border-radius: var(--rd-radius-m);
}

/* Píxel de color del ámbito */
.rd-scopes__item::before {
  content: "";
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  margin-bottom: var(--rd-space-4);
  border-radius: 2px;
  background-color: var(--c);
}

.rd-scopes__title {
  margin-bottom: var(--rd-space-2);
  font-size: var(--rd-text-m);
}

.rd-scopes__item p {
  color: var(--rd-text-muted-on-dark);
  font-size: var(--rd-text-s);
  line-height: 1.5;
}

/* Separaciones entre bloques consecutivos */
.rd-independence + .rd-providers {
  padding-top: var(--rd-section-space);
}