/* ==========================================================================
   Integraciones
   Version anterior: logos diminutos dentro de pildoras grises, con mucho
   blanco alrededor. Los logos son un argumento de venta — que se reconozcan
   de un vistazo — asi que aqui van grandes, a color y sobre fondo oscuro,
   que es donde una marca ajena luce sin competir con el violeta propio.
   ========================================================================== */

.conexiones {
  position: relative;
  background: var(--violeta-tinta);
  color: #fff;
  overflow: clip;
}

/* Luz que entra por arriba: da profundidad sin recurrir al degradado
   decorativo de cabecera. */
.conexiones::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 90%;
  background:
    radial-gradient(50% 55% at 30% 0%, rgba(111, 74, 232, .5), transparent 70%),
    radial-gradient(45% 50% at 78% 5%, rgba(1, 236, 167, .18), transparent 70%);
  pointer-events: none;
}

/* Trama de puntos: textura discreta que evita el plano muerto. */
.conexiones::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
  pointer-events: none;
}

.conexiones > * { position: relative; z-index: 1; }

.conexiones h2 { color: #fff; }
.conexiones .entradilla { color: rgba(255, 255, 255, .72); }

.conexiones__grupo { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }

.conexiones__rotulo {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.5rem;
  font-size: .82rem;
  font-weight: 620;
  color: rgba(255, 255, 255, .55);
}
/* Una linea que se prolonga hasta el borde: separa los dos grupos sin
   necesidad de un titulo grande que compita con el de la seccion. */
.conexiones__rotulo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .22), transparent);
}

/* --- Cuadricula de logos --- */

.marcas {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
}

.marca {
  position: relative;
  display: grid;
  place-items: center;
  gap: .7rem;
  padding: 1.6rem 1rem 1.2rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(6px);
  transition:
    transform .4s cubic-bezier(.2, .8, .2, 1),
    background-color .4s,
    border-color .4s,
    box-shadow .4s;
}

.marca:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .11);
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .8);
}

/* El logo sobre una pastilla blanca: casi todos los logos de marca estan
   pensados para fondo claro, y sobre el violeta perderian contraste. */
.marca__caja {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
  /* Los logos que traen su propio color de fondo —DHL, Correos, GLS…— lo
     llevan dentro del fichero, asi que llegan al borde. Sin esto sus
     esquinas se quedan en angulo recto dentro de una caja redondeada. */
  overflow: hidden;
}
.marca:hover .marca__caja { transform: scale(1.06) rotate(-2deg); }

/* El lienzo de cada fichero ya reserva el aire alrededor del logo, igual
   para todos, de modo que la imagen puede ocupar la caja entera: el margen
   lo pone el propio dibujo y no este ancho. */
.marca__caja img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Marcas sin logo disponible: iniciales, para que la cuadricula no tenga
   huecos raros. */
.marca__inicial {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--violeta);
}

.marca__nombre {
  font-size: .88rem;
  font-weight: 580;
  color: rgba(255, 255, 255, .88);
  text-align: center;
  line-height: 1.25;
}

/* Sello para lo que tiene modulo propio: un dato de venta concreto */
.marca__extra {
  font-size: .7rem;
  color: var(--verde);
  font-weight: 600;
}

/* --- Cierre de la seccion --- */

.conexiones__pie {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.conexiones__nota {
  font-size: .95rem;
  color: rgba(255, 255, 255, .72);
  max-width: 48ch;
}
/* Sobre el fondo oscuro el enlace tiene que verse sin chillar: el blanco
   entero y el subrayado separado bastan para distinguirlo del texto. */
.conexiones__nota a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-color: rgba(255, 255, 255, .45);
  transition: text-decoration-color .2s;
}
.conexiones__nota a:hover { text-decoration-color: #fff; }