@charset "UTF-8";

        .servicios {
            display: inline-block;      /* Permite transformaciones y padding */
            background-color: #0D6867;  /* Verde base */
            color: white;               /* Texto blanco para contraste */
            font-size: 1.7rem;            /* Tamaño grande, ajusta según necesites */
            font-weight: bold;
            padding: 10px 20px;
            border-radius: 8px;         /* Bordes redondeados opcionales */
            cursor: default;              /* Cambia a pointer si es interactivo */
            transition: all 0.3s ease;   /* Suaviza los cambios */
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .servicios:hover {
            transform: translateY(-10px);           /* Se levanta */
            background-color: #4cc2c0;              /* Verde más clarito */
            box-shadow: 0 10px 15px rgba(0,0,0,0.2); /* Sombra más pronunciada */
        }
        
        
        
        
        a[href="https://webservice.aaadam.com.mx/CentroEvaluacion/"] {
    position: relative;            /* Necesario para el pseudo-elemento */
    display: inline-block;
    border-radius: 8px;
    transition: transform 0.3s ease;
    z-index: 1;                    /* Asegura que la imagen esté encima */
}

a[href="https://webservice.aaadam.com.mx/CentroEvaluacion/"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E6CEC8;       /* Fondo negro sólido */
    border-radius: 25px;            /* Mismo radio que el enlace */
    opacity: 0;                    /* Oculto inicialmente */
    transition: opacity 0.3s ease;
    z-index: -1;                   /* Detrás de la imagen */
}

a[href="https://webservice.aaadam.com.mx/CentroEvaluacion/"]:hover {
    transform: translateY(-5px);   /* Levanta la imagen */
}

a[href="https://webservice.aaadam.com.mx/CentroEvaluacion/"]:hover::before {
    opacity: 0.7;                  /* Aparece el fondo negro al hacer hover */
}

a[href="https://webservice.aaadam.com.mx/CentroEvaluacion/"] img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;            /* Opcional, si la imagen tiene bordes */
}

@media ( max-width : 575px) {
	#menu-icon-trigger span svg {
		max-width: none;
	}
}

.btn-bolsa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px; /* Espacio entre los íconos y el texto */
  
  /* 🎨 COLOR ALUSIVO A TU PÁGINA (Verde Teal) */
  background-color: #007b7b; /* Puedes ajustarlo al tono exacto de tu banner "SERVICIOS" */
  color: #ffffff;
  
  padding: 14px 28px;
  border-radius: 50px; /* Mantiene la forma redondeada */
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  font-size: 1.2rem;
  letter-spacing: 1px;
  text-decoration: none;
  
  /* Sombra sutil */
  box-shadow: 0 4px 10px rgba(0, 123, 123, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Ícono a la IZQUIERDA */
.btn-bolsa::before {
  content: "→";
  font-size: 1.5em;
  transition: transform 0.3s ease;
}

/* Ícono a la DERECHA */
.btn-bolsa::after {
  content: "←";
  font-size: 1.5em;
  transition: transform 0.3s ease;
}

/*  Efecto Hover (al pasar el mouse) */
.btn-bolsa:hover {
  background-color: #005f5f; /* Un tono más oscuro del mismo verde */
  transform: translateY(-3px); /* Se eleva un poco */
  box-shadow: 0 6px 15px rgba(0, 95, 95, 0.4);
}

/* Animación de las flechas al hacer hover */
.btn-bolsa:hover::before {
  transform: translate(-3px, -3px);
}

.btn-bolsa:hover::after {
  transform: translate(3px, -3px);
}

/* Accesibilidad al hacer clic con teclado */
.btn-bolsa:focus-visible {
  outline: 3px solid #00a8a8;
  outline-offset: 4px;
}