/* ---------- Base tarjeta ---------- */
.client-card {
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 2px 48px 0 #00000038;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.client-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
/* Evita que nada más sea “clickeable” */
.client-card * {
  cursor: default;
}
.client-actions .main-button,
.client-actions .main-button * {
  cursor: pointer;
}

/* ---------- Imagen principal (NO clickeable) ---------- */
.client-thumb {
  position: relative;
  width: 100%;
  height: 220px;            /* alto visible de la miniatura */
  background: #f2f5ff;
  overflow: hidden;
}
.client-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.client-card:hover .client-thumb img {
  transform: scale(1.03);
}

/* ---------- Cuerpo ---------- */
.client-card--rich .client-body { 
  padding: 18px 18px 20px; 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
  flex: 1; 
  overflow: hidden;
}
.client-title { font-size: 18px; font-weight: 500; color: #000; margin: 0; }
.client-desc { font-size: 13px; color: #808080; line-height: 1.6; margin: 0; }

/* ---------- Testimonio ---------- */
.client-quote {
  margin: 4px 0 0;
  padding: 12px 14px;
  background: #f7faff;
  border-left: 4px solid #0066FF;
  border-radius: 12px;
  font-size: 13px;
  color: #4a4a4a;
  line-height: 1.6;
  max-width: 100%;
  overflow: hidden;
}
.client-quote footer {
  margin-top: 6px;
  font-size: 12px;
  color: #808080;
}

/* ---------- Tags ---------- */
.client-tags {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px; padding: 0; list-style: none;
}
.client-tags li {
  font-size: 12px; color: #0066FF; background: #E0ECFF; padding: 4px 10px; border-radius: 999px; letter-spacing: .3px;
}

/* ---------- Acciones (único clickeable) ---------- */
.client-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.client-actions .main-button[target="_blank"]::after { content: " ↗"; font-size: .9em; }

/* ---------- Modal / Carrusel (para Apps) ---------- */
.client-modal .modal-content { border-radius: 16px; overflow: hidden; }
.client-modal .modal-header, .client-modal .modal-footer { border: 0; }
.client-modal .modal-title { font-weight: 600; }
.client-modal .client-modal-img { max-height: 70vh; object-fit: cover; }
.client-modal .carousel-indicators li { background-color: #0066FF; }
.client-modal .carousel-indicators .active { background-color: #003380; }
.client-modal .carousel-control-prev-icon,
.client-modal .carousel-control-next-icon { filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }

/* ---------- Responsive ---------- */
@media (max-width: 575.98px) {
  .client-thumb { height: 180px; }
  .client-card--rich .client-body { padding: 16px; }
}

/*! ICONOS FOOTER */

footer .social li a {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #0066ff;
  font-size: 20px;
  transition: all 0.3s ease;
}

footer .social li a:hover {
  background-color: #0033cc; /* azul oscuro corporativo */
  color: #ffffff;            /* icono blanco */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/*! === Clientes - Miniatura 1:1 y sin animación === */
.client-thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;   /* cuadrado */
  height: auto;          /* ignora alturas fijas anteriores */
  background: #f2f5ff;
  overflow: hidden;
}

.client-thumb img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: none;      /* sin animación */
}

/* desactiva el zoom en hover definido antes */
.client-card:hover .client-thumb img{
  transform: none;
}

/*! === Fix bloque azul en testimonios === */
.client-quote footer {
  background: none !important;     /* elimina el fondo azul */
  padding: 0 !important;           /* sin padding innecesario */
  display: inline-block;           /* evita ocupar todo el ancho */
  color: #555 !important;          /* tono gris suave */
  font-size: 0.9rem;
  font-style: normal;
  margin-top: 0.25rem;
}

/* === Mejora visual testimonio === */
.client-quote {
  border-left: 3px solid #006aff;
  padding-left: 1rem;
  margin-top: 1rem;
  background: #f9fbff;
  border-radius: 6px;
  font-style: italic;
  color: #333;
}

.client-quote footer {
  display: block;                /* fuerza el salto de línea */
  margin-top: 0.5rem;            /* separación del texto */
  color: #006aff !important;     /* azul de marca */
  font-weight: 500;
  font-style: normal;
}

/*! ===== Modal Galería (estética y ajuste de imagen) ===== */
.modal-gallery .modal-content { border: 0; border-radius: 16px; overflow: hidden; }
.modal-gallery .modal-header { border: 0; }
.modal-gallery .modal-footer { border: 0; }

.modal-gallery .carousel-item {
  background: #0e0f14;          /* fondo oscuro para letterboxing */
  text-align: center;
}
.modal-gallery .carousel-item img {
  max-height: 75vh;             /* quepa en viewport */
  object-fit: contain;           /* sin recortar */
  margin: 0 auto;
}
.modal-gallery .carousel-indicators li { background-color: #6c7cff; }
.modal-gallery .carousel-indicators .active { background-color: #0066ff; }

/* ===== Galería 16:9 ===== */
.modal-gallery .carousel-item {
  position: relative;
  background: #0e0f14;
}

/* marco 16:9 para cada slide */
.modal-gallery .carousel-item::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;   /* fuerza 16:9 */
}

/* la imagen se ajusta dentro del 16:9 sin recorte ni deformación */
.modal-gallery .carousel-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;     /* usa cover si prefieres llenar */
}

/*! ===== Separador visual entre secciones ===== */
.section-separator {
  border: 0;
  height: 1px;
  width: min(1100px, 92%);
  margin: 40px auto;              /* espacio vertical del separador */
  background: linear-gradient(90deg, transparent, #cfe0ff 25%, #0a66ff 50%, #cfe0ff 75%, transparent);
  opacity: .65;
  border-radius: 999px;
}

/*! === CLIENTES: corrige ID y ajusta espaciados === */
section.clients#clients{
  padding-top: 36px !important;   /* pisa los 160px de .section */
  padding-bottom: 64px;           /* un cierre cómodo */
}

/* separa el párrafo (intro) de las tarjetas */
#clients .clients-subtitle{
  margin: 0 auto 28px;            /* aire debajo del párrafo */
  max-width: 720px;
}

/* si quieres apretar TODOS los separadores <hr> un poco */
.section-separator{ 
  margin: 24px auto;
}

/*! === Carrusel de clientes (1 tarjeta por pantalla) === */
.clients-carousel { position: relative; }
.clients-carousel .carousel-inner { overflow: visible; }

.clients-carousel .carousel-item {
  display: flex;                 /* centra el contenido del slide */
  justify-content: center;
  padding: 8px;                  /* aire para la sombra de la tarjeta */
}

.clients-carousel .client-card {
  width: 100%;
  max-width: 430px;              /* ancho ideal de la tarjeta en desktop */
  margin: 0 auto;
}

/* Flechas redondas y acordes al tema */
.clients-carousel .carousel-control-prev,
.clients-carousel .carousel-control-next{
  width: 48px;
  height: 48px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(10,102,255,.1);
  border-radius: 999px;
}
.clients-carousel .carousel-control-prev:hover,
.clients-carousel .carousel-control-next:hover{
  background: rgba(10,102,255,.18);
}

/* Color a los íconos por filtro (Bootstrap 4 usa SVG blanco) */
.clients-carousel .carousel-control-prev-icon,
.clients-carousel .carousel-control-next-icon{
  filter: invert(38%) sepia(91%) saturate(2628%) hue-rotate(204deg) brightness(102%) contrast(98%);
}

/* Indicadores centrados y sutiles */
.clients-carousel .carousel-indicators{
  bottom: -24px;
}
.clients-carousel .carousel-indicators li{
  background-color: #9db8ff;
}
.clients-carousel .carousel-indicators .active{
  background-color: #0a66ff;
}

/* Ajustes de espaciado de la sección (por si no lo tenías aplicado aún) */
section.clients#clients{
  padding-top: 36px !important;
  padding-bottom: 64px;
}
#clients .clients-subtitle{ margin: 0 auto 28px; max-width: 720px; }

/* Sección Clientes: espaciado uniforme */
section.clients#clients{
  padding-top: 36px !important;   /* pisa el padding enorme del tema */
  padding-bottom: 72px;
}
#clients .clients-subtitle{ margin: 0 auto 28px; max-width: 720px; }

/* Carrusel de tarjetas */
.clients-carousel { position: relative; }
.clients-carousel .carousel-inner{ overflow: visible; padding-bottom: 32px; } /* espacio para indicadores */
.clients-carousel .carousel-item{ display:flex; justify-content:center; padding:8px; }
.clients-carousel .client-card{ width:100%; max-width: 420px; margin:0 auto; }

/* Indicadores un poco más abajo */
.clients-carousel .carousel-indicators{ bottom: -10px; }

/* Flechas: evitar que “empujen” nada y mantener color */
.clients-carousel .carousel-control-prev,
.clients-carousel .carousel-control-next{
  width:48px; height:48px; top:50%; transform:translateY(-50%);
  background: rgba(10,102,255,.1); border-radius:999px;
}
.clients-carousel .carousel-control-prev-icon,
.clients-carousel .carousel-control-next-icon{
  filter: invert(38%) sepia(91%) saturate(2628%) hue-rotate(204deg) brightness(102%) contrast(98%);
}

/* Carrusel de clientes: 1 tarjeta por vista */
.clients-carousel { position: relative; overflow: hidden; }   /* oculta cualquier slide “detrás” */
.clients-carousel .carousel-inner { padding-bottom: 28px; }   /* espacio para indicadores */
.clients-carousel .carousel-item { display:flex; justify-content:center; padding: 8px; }
.clients-carousel .client-card { width:100%; max-width: 430px; margin:0 auto; }

/* Flechas redondas */
.clients-carousel .carousel-control-prev,
.clients-carousel .carousel-control-next{
  width:48px; height:48px; top:50%; transform:translateY(-50%);
  background: rgba(10,102,255,.1); border-radius:999px;
}
.clients-carousel .carousel-control-prev-icon,
.clients-carousel .carousel-control-next-icon{
  filter: invert(38%) sepia(91%) saturate(2628%) hue-rotate(204deg) brightness(102%) contrast(98%);
}

/* Indicadores centrados */
.clients-carousel .carousel-indicators{ bottom: -6px; }
.clients-carousel .carousel-indicators li{ background:#9db8ff; }
.clients-carousel .carousel-indicators .active{ background:#0a66ff; }

/* Espaciado de la sección (pisa el padding enorme del tema) */
section.clients#clients{ padding-top:36px !important; padding-bottom:64px; }
#clients .clients-subtitle{ margin:0 auto 28px; max-width:720px; }

/* Carrusel: ver solo 1 tarjeta y sin “copia” detrás */
.clients-carousel { overflow: hidden; }

/* Si tu tarjeta usa capas decorativas con ::before/::after, apágalas en el carrusel */
.clients-carousel .client-card::before,
.clients-carousel .client-card::after {
  display: none !important;
}

/* ===== FIX: Carrusel de clientes sólo 1 slide visible ===== */
.clients-carousel .carousel-inner{ overflow: hidden; } /* oculta el resto */

.clients-carousel .carousel-item{
  /* volver al comportamiento de BS4 */
  display: none !important;
  padding: 8px;
}

/* sólo las diapositivas activas/en transición usan flex para centrar */
.clients-carousel .carousel-item.active,
.clients-carousel .carousel-item-next,
.clients-carousel .carousel-item-prev{
  display: flex !important;
  justify-content: center;
}

/* opcional: la tarjeta centrada y ancho máximo */
.clients-carousel .client-card{
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}

/* ===== Carrusel de clientes: sombra sin cortes ===== */
.clients-carousel { overflow: visible; }                 /* no recortar sombra */
.clients-carousel .carousel-inner { overflow: visible; } /* idem */

.clients-carousel .carousel-item{
  /* volvemos al comportamiento correcto de BS4 */
  display: none !important;
  padding: 8px;
}
.clients-carousel .carousel-item.active,
.clients-carousel .carousel-item-next,
.clients-carousel .carousel-item-prev{
  display: flex !important;
  justify-content: center;
}

.clients-carousel .client-card{
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}

/* ===== Animación fade + leve escala ===== */
.clients-carousel.carousel-fade .carousel-item {
  opacity: 0;
  transform: translateY(6px) scale(.995);
  transition: opacity .35s ease, transform .35s ease;
}
.clients-carousel.carousel-fade .carousel-item.active,
.clients-carousel.carousel-fade .carousel-item-next.carousel-item-left,
.clients-carousel.carousel-fade .carousel-item-prev.carousel-item-right {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.clients-carousel.carousel-fade .active.carousel-item-left,
.clients-carousel.carousel-fade .active.carousel-item-right {
  opacity: 0;
  transform: translateY(-6px) scale(.995);
}

/* ===== Altura fija del “viewport” del carrusel (la llenaremos por JS) ===== */
.clients-carousel .carousel-inner {
  height: var(--clients-carousel-h, auto); /* fallback si aún no se calculó */
}
.clients-carousel .carousel-item { align-items: flex-start; } /* tarjeta arriba */

/* El carrusel respetará una altura fija que seteamos por JS */
.clients-carousel .carousel-inner{
  height: var(--clients-carousel-h, auto);
}
.clients-carousel .client-card{
  min-height: var(--clients-carousel-h, auto); /* todas igual de altas */
}

/* === Clients carousel: espacio sobre indicadores === */
.clients-carousel .carousel-inner{
  margin-bottom: 28px;            /* aire entre la tarjeta y los dots */
}
@media (min-width: 992px){
  .clients-carousel .carousel-inner{ margin-bottom: 36px; }
}

/* coloca los indicadores justo por debajo del carrusel */
.clients-carousel .carousel-indicators{
  bottom: -6px;                   /* muévelos más arriba/abajo si quieres */
  margin: 0;
}

/* === Indicadores “pills” redondeados y animados === */
.clients-carousel .carousel-indicators li{
  width: 16px;
  height: 8px;
  border-radius: 999px;
  background: #bcd0ff;
  opacity: .7;
  border: 0;
  transition: width .25s ease, opacity .25s ease, background-color .25s ease, transform .25s ease;
  margin: 0 6px;                  /* separación entre pills */
  cursor: pointer;
}

.clients-carousel .carousel-indicators li.active{
  width: 32px;                    /* “pill” más largo al estar activo */
  background: #0a66ff;
  opacity: 1;
  box-shadow: 0 4px 12px rgba(10,102,255,.25);
  transform: translateY(-1px);    /* micro-levantado */
}

/* mejora de accesibilidad en foco por teclado */
.clients-carousel .carousel-indicators li:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(10,102,255,.25);
}

/* ===== Flechas del carrusel — versión suave, con colores del sitio ===== */
.clients-carousel{
  --brand: #0a66ff;      /* azul de tu marca */
  --card-w: 430px;       /* ancho máx. de la tarjeta */
  --arrow-size: 44px;    /* tamaño del botón */
  --arrow-gap: 32px;     /* separación respecto al borde de la tarjeta */
}

.clients-carousel .carousel-control-prev,
.clients-carousel .carousel-control-next{
  width: var(--arrow-size);
  height: var(--arrow-size);
  top: 50%;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(10,102,255,.08);        /* sutil */
  border: 1px solid rgba(10,102,255,.18);   /* anillo suave */
  box-shadow: 0 6px 14px rgba(2,12,64,.12); /* sombra contenida */
  opacity: 1;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
  z-index: 5;
}

.clients-carousel .carousel-control-prev-icon,
.clients-carousel .carousel-control-next-icon{
  /* tiñe el ícono blanco de Bootstrap al azul de marca */
  filter: invert(35%) sepia(95%) saturate(2200%) hue-rotate(205deg) brightness(102%) contrast(98%);
}

.clients-carousel .carousel-control-prev:hover,
.clients-carousel .carousel-control-next:hover{
  background: rgba(10,102,255,.12);
  border-color: rgba(10,102,255,.28);
  box-shadow: 0 8px 18px rgba(10,102,255,.18);
  transform: translateY(-50%) scale(1.02);   /* animación sutil */
}

.clients-carousel .carousel-control-prev:active,
.clients-carousel .carousel-control-next:active{
  transform: translateY(-50%) scale(.98);    /* feedback de clic */
}

.clients-carousel .carousel-control-prev:focus,
.clients-carousel .carousel-control-next:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(10,102,255,.22);
}

/* Posición sólo en escritorio (en móvil se quedan como están) */
@media (min-width: 992px){
  .clients-carousel .carousel-control-prev{
    left: calc(50% - (var(--card-w)/2) - var(--arrow-gap) - var(--arrow-size));
    right: auto;
  }
  .clients-carousel .carousel-control-next{
    right: calc(50% - (var(--card-w)/2) - var(--arrow-gap) - var(--arrow-size));
    left: auto;
  }
}

/* Indicadores del modal: debajo del slide y estilo “pill” */
.modal-gallery .modal-body { padding: 0; }

.modal-gallery .carousel-inner { 
  margin-bottom: 12px;           /* aire entre imagen 16:9 e indicadores */
}

.modal-gallery .carousel-indicators{
  position: static !important;   /* se renderizan donde estén en el DOM */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 8px 0 0;
  padding: 0;
}

.modal-gallery .carousel-indicators li{
  width: 16px;
  height: 8px;
  border-radius: 999px;
  background: #bcd0ff;
  opacity: .75;
  border: 0;
  transition: width .25s ease, opacity .25s ease,
              background-color .25s ease, transform .25s ease;
  cursor: pointer;
}

.modal-gallery .carousel-indicators li.active{
  width: 32px;
  background: #0a66ff;
  opacity: 1;
  box-shadow: 0 4px 12px rgba(10,102,255,.25);
  transform: translateY(-1px);
}

.modal-gallery .carousel-indicators li:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(10,102,255,.25);
}

/* --- Carrusel de soluciones --- */
.solutions-carousel { padding-top: 60px; padding-bottom: 60px; position: relative; }
.solutions-carousel .section-title { margin-bottom: 8px; }
.solutions-carousel .section-subtitle { max-width: 820px; margin: 0 auto 28px; opacity: .85; }

.solutions-controls {
  position: absolute; top: 50%; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  transform: translateY(-50%); pointer-events: none;
}
.solutions-btn {
  pointer-events: all;
  width: 44px; height: 44px; border-radius: 999px; line-height: 44px;
  border: none; background: #ffffff; box-shadow: 0 6px 24px rgba(0,0,0,.08);
  font-size: 26px; font-weight: 600; opacity: .95; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.solutions-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.solutions-btn:disabled { opacity: .4; cursor: not-allowed; }

.solutions-swiper { padding-bottom: 36px; }
.solutions-swiper .swiper-slide { height: auto; }

.solution-card {
  height: 100%;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  padding: 28px 24px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.solution-eyebrow {
  font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  opacity: .75; margin: 0 0 8px;
}
.solution-title {
  display: inline-block;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 700;
  margin-bottom: 16px;
}
.badge { color: #fff; }
.badge-teal { background: #0bb; }
.badge-orange { background: #df6b3f; }

.solution-list { margin: 0 0 20px 16px; padding: 0; }
.solution-list li { margin-bottom: 8px; line-height: 1.5; }

/* Botón primario (ajusta a tu tema si ya existe .btn/.btn-primary) */
.btn.btn-primary {
  display: inline-block;
  border-radius: 999px;
  padding: 10px 18px;
  background: #1565ff;
  color: #fff; text-decoration: none; font-weight: 700;
  box-shadow: 0 10px 30px rgba(21,101,255,.25);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s;
}
.btn.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(21,101,255,.3); }

/* Paginación (puntos) */
.solutions-swiper .swiper-pagination-bullet {
  width: 8px; height: 8px; opacity: .35; background: #111; transition: transform .2s, opacity .2s;
}
.solutions-swiper .swiper-pagination-bullet-active {
  opacity: 1; transform: scale(1.2);
}

/* Responsivo para móviles: centra flechas por debajo si estorban */
@media (max-width: 767px) {
  .solutions-controls {
    position: static; transform: none; margin-bottom: 8px;
    justify-content: center; gap: 16px;
  }
}

/* ===== Carrusel ===== */
.solutions-carousel { padding-top: 60px; padding-bottom: 60px; }
.solutions-swiper { position: relative; padding: 8px 0 40px; } /* deja espacio a la paginación */
.solutions-swiper .swiper-slide { height: auto; }

/* Flechas: pegadas al carrusel (no a los bordes de la pantalla) */
.solutions-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px; height: 44px; border-radius: 999px;
  border: none; background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  font-size: 26px; font-weight: 700;
  cursor: pointer; opacity: .95;
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s;
}
.solutions-nav.prev { left: -12px; }   /* ligeramente fuera del carrusel, pero dentro del container */
.solutions-nav.next { right: -12px; }
.solutions-nav:hover { transform: translateY(-50%) translateY(-1px); box-shadow: 0 16px 36px rgba(0,0,0,.16); }
.solutions-nav:disabled { opacity: .4; cursor: not-allowed; }

/* En pantallas pequeñas, mete las flechas dentro del carrusel para que no tapen nada */
@media (max-width: 767px) {
  .solutions-nav.prev { left: 6px; }
  .solutions-nav.next { right: 6px; }
}

/* Puntos */
.solutions-swiper .swiper-pagination-bullet {
  width: 8px; height: 8px; background: #111; opacity: .35; transition: transform .2s, opacity .2s;
}
.solutions-swiper .swiper-pagination-bullet-active { opacity: 1; transform: scale(1.2); }

/* ===== Tarjeta (match con tus cards originales) ===== */
.solution-card {
  height: 100%;
  text-align: center;
  background: #ffffff;
  border-radius: 24px;               /* esquinas redondeadas como tu diseño */
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
  padding: 36px 28px;                /* respiro similar al original */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}

.solution-eyebrow {
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #222;                       /* título superior en negro/gris oscuro */
  opacity: .9;
  margin: 0 0 14px;
}

/* “Píldora” grande del título (color sólido, bordes muy redondeados) */
.solution-title {
  display: inline-block;
  border-radius: 16px;
  padding: 14px 24px;
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  margin-bottom: 22px;
  line-height: 1.2;
}
.badge-teal   { background: #02a6a6; }   /* ajusta a tu paleta si quieres */
.badge-orange { background: #df6b3f; }

/* Lista centrada, gris suave, interlineado cómodo */
.solution-list {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  color: #6f7a83;                    /* gris similar al que usas */
}
.solution-list li { margin-bottom: 10px; }

/* Botón redondo azul como el tuyo */
.btn.btn-primary {
  display: inline-block;
  border-radius: 999px;
  padding: 12px 22px;
  background: #1565ff;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 12px 34px rgba(21,101,255,.28);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s;
}
.btn.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 38px rgba(21,101,255,.33); }

/* ===== Wrapper del carrusel ===== */
.solutions-carousel-wrapper{
  position: relative;
  /* Reservamos franjas: laterales para flechas y una inferior para los dots */
  padding: 0 56px 56px; /* L R = flechas | Bottom = paginación */
}

/* Swiper: deja pasar sombras (y no necesitamos colocar nada encima) */
.solutions-swiper{
  overflow: visible;        /* sombras de las cards no se cortan */
}

/* Cada slide con aire para sombra */
.solutions-swiper .swiper-slide{
  height: auto;
  padding: 8px;
}

/* ===== Controles (fuera del swiper, pegados a sus bordes) ===== */
.solutions-controls{
  pointer-events: none;     /* el contenedor no intercepta clics */
}
.solutions-controls .prev,
.solutions-controls .next{
  pointer-events: all;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 0; border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  font-size: 26px; font-weight: 700; line-height: 44px; text-align: center;
  color: #111; cursor: pointer; opacity: .95;
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s;
}

.solutions-controls .prev{ left: 12px; }   /* se apoyan en el padding lateral del WRAPPER */
.solutions-controls .next{ right: 12px; }

.solutions-controls .prev:hover,
.solutions-controls .next:hover{
  transform: translateY(-50%) translateY(-1px);
  box-shadow: 0 16px 36px rgba(0,0,0,.16);
}

/* ===== Paginación (fuera del swiper, con su franja inferior) ===== */
.solutions-pagination{
  position: absolute;
  left: 50%;
  bottom: 16px;             /* se apoya en el padding-bottom del WRAPPER */
  transform: translateX(-50%);
  z-index: 1;               /* por debajo de las flechas y sin tocar las cards */
}

.solutions-pagination .swiper-pagination-bullet{
  width: 8px; height: 8px; margin: 0 5px !important;
  background: #111; opacity: .35;
  transition: transform .2s, opacity .2s;
}
.solutions-pagination .swiper-pagination-bullet-active{
  opacity: 1; transform: scale(1.2);
}

/* ===== Tarjeta (tu estilo) ===== */
.solution-card{
  background:#fff; border-radius:24px;
  box-shadow:0 18px 45px rgba(0,0,0,.08);
  padding:36px 28px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}

/* Responsive: canales más estrechos en móvil */
@media (max-width: 767px){
  .solutions-carousel-wrapper{ padding: 0 40px 44px; }
  .solutions-pagination{ bottom: 12px; }
  .solutions-controls .prev{ left: 6px; }
  .solutions-controls .next{ right: 6px; }
}