/* ==========================================================================
   Todos los transportistas, sin tocar tu tienda
   Dos tarjetas enfrentadas: a la izquierda lo que pasa hoy, a la derecha lo
   que pasa con Enviamo. Cada linea tiene su pareja justo enfrente, en el
   mismo orden, asi que la comparacion se lee sola sin necesidad de flechas
   ni rotulos en medio.
   ========================================================================== */

.cotejo {
  display: grid;
  gap: clamp(.9rem, .7rem + .8vw, 1.4rem);
  margin-top: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}
@media (min-width: 820px) {
  .cotejo { grid-template-columns: 1fr 1fr; align-items: start; }
}

.cotejo__caja {
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  border: 1px solid var(--linea);
  border-radius: 18px;
  background: var(--papel);
}

/* El lado del problema, apagado: no compite con la solucion */
.cotejo__caja--antes { background: var(--papel); }

/* El lado bueno, con el verde de marca: aqui significa «resuelto» */
.cotejo__caja--ahora {
  border-color: rgba(66, 60, 212, .35);
  background:
    linear-gradient(165deg, rgba(66, 60, 212, .06) 0%, transparent 55%),
    var(--papel-alto);
  box-shadow: 0 18px 44px -28px rgba(50, 45, 161, .45);
}

.cotejo__titulo {
  margin: 0 0 1.2rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--linea);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tinta-suave);
}
.cotejo__caja--ahora .cotejo__titulo {
  color: var(--violeta-hondo);
  border-bottom-color: rgba(66, 60, 212, .2);
}

/* ------------------------------------------------------------- Las lineas */

.cotejo__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}

.cotejo__lista li {
  position: relative;
  padding-left: 1.85rem;
  font-size: .94rem;
  line-height: 1.5;
  color: var(--tinta-media);
}

/* La marca de cada linea, dibujada con CSS: una cruz gris en el problema,
   un tick verde en la solucion. Sin iconos que cargar. */
.cotejo__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .1em;
  width: 19px;
  height: 19px;
  border-radius: 50%;
}

.cotejo__caja--antes .cotejo__lista li::before { background: rgba(20, 19, 43, .06); }
.cotejo__caja--antes .cotejo__lista li::after {
  content: '';
  position: absolute;
  left: 5.5px;
  top: calc(.1em + 5.5px);
  width: 8px;
  height: 8px;
  background:
    linear-gradient(45deg, transparent 43%, var(--tinta-suave) 43%, var(--tinta-suave) 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--tinta-suave) 43%, var(--tinta-suave) 57%, transparent 57%);
}

.cotejo__caja--ahora .cotejo__lista li { color: var(--tinta); font-weight: 500; }
.cotejo__caja--ahora .cotejo__lista li::before { background: rgba(1, 236, 167, .22); }
.cotejo__caja--ahora .cotejo__lista li::after {
  content: '';
  position: absolute;
  left: 6px;
  top: calc(.1em + 5.5px);
  width: 7px;
  height: 4px;
  border-left: 2px solid #04795a;
  border-bottom: 2px solid #04795a;
  transform: rotate(-45deg);
}

/* El logo firma la columna que gana. «Con» se queda como texto para que la
   línea siga leyéndose como una frase y no como un logo suelto. */
.cotejo__titulo--marca {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.cotejo__con { color: var(--violeta-hondo); }

.cotejo__titulo--marca img {
  height: 21px;
  width: auto;
  /* Sin filtro: el logo va en su violeta, que es el color de la marca. */
}