/* CONTENEDOR PRINCIPAL */
.servicios-section {
  padding: 60px 20px;
  background: #e3e2e2;
}

.servicios-container {
  max-width: 1024px; /* pedido tuyo */
  margin: 0 auto;
}

/* CABECERA: título y subtítulo */
.servicios-header {
  text-align: left;
  margin-bottom: 30px;
}

.servicios-title {
  font-size: 34px;
  font-weight: 800;
  color: #1784c4; /* azul */
  margin: 0;
  line-height: 1;
}

.servicios-subtitle {
  font-size: 34px;
  font-weight: 800;
  color: #01326b; /* azul oscuro */
  margin: 6px 0 10px;
}

/* GRID: 4 columnas en desktop, 2 por fila en responsivo */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* Cada tarjeta es una imagen de fondo para evitar distorsión */
.servicio-item {
  width: 100%;
  padding-top: 6px; /* ratio visual similar al de tu diseño (ajusta si quieres más corto/alto) */
  background-size: cover;    /* cover para mantener composición */
  background-position: center;
  background-repeat: no-repeat;

  /* SOMBRA REAL DEL PNG */
  -webkit-filter: drop-shadow(0 6px 18px rgba(10,20,40,0.18));
  filter: drop-shadow(0 6px 18px rgba(10,20,40,0.18));

  transition: transform .25s ease, filter .25s ease;
}

/* efecto hover opcional */
.servicio-item:hover {
  transform: translateY(-6px);
  -webkit-filter: drop-shadow(0 12px 28px rgba(10,20,40,0.25));
  filter: drop-shadow(0 12px 28px rgba(10,20,40,0.25));
}


/* SECCIÓN GENERAL */
.clientes-section {
    background: url("../IMG/fondo-clientes.png");
    background-size: cover;
    background-position: center;
    padding: 80px 20px;
    position: relative;
}

/* CONTENEDOR MÁXIMO */
.clientes-container {
    max-width: 1024px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

/* --- PSEUDO ELEMENTO DE COMILLAS --- */
.clientes-header {
    position: relative;
    margin-bottom: 40px;
}

/* TÍTULO */
.clientes-titulo {
    font-size: 2rem;
    color: #fff;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
    padding-left: 100px;
}

.clientes-titulo span {
    display: block;
    color: #113560;
}
.clientes-titulo::before {
    content: "";
    position: absolute;
    left: 0px;
    width: 90px;
    height: 70px;
    background: url("../IMG/comillas.png") no-repeat center;
    background-size: contain;
    pointer-events: none;
}


/* TARJETAS DEL SLIDER */
.testimonial-box {
    padding: 20px;
    width: 100%;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* Texto */
.testimonial-text {
    padding: 18px;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.35;
    color: #333;
    border-radius: 12px 12px 12px 0;
    background: #ffffff;
    text-align: left;
}
.testimonial-text::after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 0;
    height: 0;
    border-width: 30px 30px 0 0;
    border-color: #ffffff transparent transparent transparent;
    border-style: solid;
}

/* Footer con nombre + estrellas */
.testimonial-footer {
    position:initial;
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-left: 30px; /* espacio para el triangulito */
    padding-top: 10px;
}

/* Nombre */
.testimonial-footer .nombre {
    font-size: 1.2rem;
    font-weight: 600;
    color: #004c90;
}

/* Estrellas */
.testimonial-footer .stars {
    color: #f7c21a;
    letter-spacing: 2px;
}
/* RESPONSIVE: 2 por linea en pantallas <= 992px */
@media (max-width: 992px) {
  .servicios-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .servicios-container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Si quieres que en móviles muy pequeños siga siendo 2 por fila, mantenemos así.
   Si prefieres 1 por fila en móviles muy estrechos, cambia 480px a 1fr */
@media (max-width: 480px) {
  .servicios-grid {
    grid-template-columns: repeat(2, 1fr); /* mantiene 2 por linea según tu requerimiento */
    gap: 12px;
  }

  .servicio-item {
    padding-top: 150%;
    border-radius: 22px;
  }
}