/* =========================================================
   Servicios (versión limpia y única) – GROPS
   - Sección estática, sin overlays ni efectos hover
   - Fondo verde oscuro con 4 tarjetas blancas
   - Logos arriba, textos pequeños, "Leer más" + flecha al pie
   - Breakpoints para tablet / mobile
   ========================================================= */

/* Sección */
#servicios {
  background: #2f5d4b;    /* verde oscuro */
  padding: 60px 0;
}

/* Contenedor de tarjetas */
#servicios .services-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;               /* espacio entre tarjetas */
  height: 80vh;            /* sección ocupa ~80% del viewport */
  max-width: 1200px;
  margin: 0 auto;
}

/* Tarjeta */
#servicios .service-box {
  flex: 0 0 20%;           /* ~20% del ancho cada una (desktop) */
  height: 80%;             /* ~80% de la altura de la sección */
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  padding: 20px;
  display: flex;
  flex-direction: column;  /* para poder empujar "Leer más" al pie */
  text-align: left;
  color: #333;
}

/* Logo superior */
#servicios .service-logo {
  display: block;
  margin: 0 auto 15px;
  max-height: 80px;
  width: auto;
}

/* Título */
#servicios .service-box h5 {
  margin: 0 0 10px;
  font-weight: 700;
  text-align: center;
}

/* Texto pequeño y compacto */
#servicios .service-box p,
#servicios .text-description {
  margin: 0 0 8px;
  font-size: 0.85rem !important;      /* texto más pequeño */
  line-height: 1.4;
}

/* Bloque "Leer más" + flecha, al pie de la tarjeta */
#servicios .services-arrow {
  margin-top: auto;        /* empuja hacia el pie */
  text-align: center;
}

#servicios .services-arrow p.text {
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
  color: #2f5d4b;          /* mismo verde de la sección */
}

#servicios .services-arrow img {
  display: block;
  margin: 6px auto 0;      /* espacio entre texto y flecha */
  max-height: 24px;
  width: auto;
}

/* Opcional: enlaces dentro de las tarjetas */
#servicios .service-box a {
  text-decoration: none;
}

/* ======================
   Responsive
   ====================== */
@media (max-width: 1199.98px) {
  #servicios .services-container { height: 70vh; gap: 28px; }
  #servicios .service-box { flex: 0 0 22%; }
}

@media (max-width: 991.98px) {
  #servicios .services-container { flex-wrap: wrap; height: auto; }
  #servicios .service-box { flex: 0 0 46%; height: 320px; }
}

@media (max-width: 575.98px) {
  #servicios .service-box { flex: 0 0 100%; height: auto; }
}
/* ===== A) Ancre #servicios alignée sous le header fixe ===== */
/* règle unique : on dit au navigateur de laisser de la place = hauteur du header */
:root{
  --header-h-desktop: 110px;  /* ← mets ici la vraie hauteur de ton header desktop */
  --header-h-mobile:   76px;  /* ← et ici la hauteur en mobile/tablette */
}
/* l’ancre #servicios s’arrêtera pile sous le header */
#servicios{ scroll-margin-top: var(--header-h-desktop); }
@media (max-width: 991.98px){
  #servicios{ scroll-margin-top: var(--header-h-mobile); }
}

/* (option globale si tu veux corriger TOUTES les ancres du site)
html{ scroll-padding-top: var(--header-h-desktop); }
@media (max-width: 991.98px){
  html{ scroll-padding-top: var(--header-h-mobile); }
}
*/

/* ===== B) "Leer más" vert foncé + flèche grise vers le bas ===== */
#servicios .services-arrow{
  margin-top: auto;
  text-align: center;
}
#servicios .services-arrow p.text{
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
  color: #2f5d4b;                 /* vert foncé */
}
#servicios .services-arrow img{
  display: block;
  margin: 6px auto 0;
  max-height: 24px;
  width: auto;
  filter: grayscale(1) brightness(0.6);  /* gris */
  transform: rotate(180deg);             /* pointe vers le bas */
  transform-origin: 50% 50%;
}